In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Grid and Layout

Predetermined understructure which the designer can employ to give a cohesive and consistent experience through the application

Anatomy

The grid

 

The grid helps bring continuity and consistency across all screens of the same application.

It is a great tool to organize and hierarchize information and as such will save countless man hours in execution.

The base unit for the grid is 8px. It allows us to support most of the screen resolutions.

 

Image shows the different girds and if they are multiple of 8 or 10 or not.
Image shows the different grid and their dimension, content area, columns and gutter.

The layouts

 

The range of layouts currently available include most of the devices. All layouts are compatible with an 8px grid.

The designer should use the most appropriate layout and resolution according to the constraints of the project and the need of users.

For example, if you are working on a dashboard you can use the desktop HD (full width) or the TV HD (full width) layout. If you are working on a corporate website, you can favor the desktop HD (container) layout.

*1366 x 768

The layout is based on a 1360px width. Therefore you will notice 6 extra pixels on the right of the artboard because 1366 is not a multiple of 8. No worries, stick to the layout ;)

 

The heatmaps

You can use the set of heatmaps we provide, to help you positioning your content inside the page, or to make design decisions based on screen ergonomy.

With this, you can more easily justify your composition and the position of the content with the Product Owners, Developers and Marketers if needed.

The heatmaps does not guarantee the accessibility of your app. It should be used by the designer as a guiding tool.

 

Image shows the areas reachable with the finger or mouse according to usage.
Usage

#01

Starting with the right artboard, the designer import the needed components (menu, buttons, text, images…). In this example, the designer is using a 12 columns layout superposed on the 8px grid to build a mockup. It will determine margins, gutters and overall spacings.

Image shows a grid of 12 columns.

#02

The designer can now articulate all components together to create the screen.

This approach allows you to challenge the structure of the screen and highlight an action or important content that the user needs to interact with.

 

Image shows an image of an example of layout with elements skeletons.

#04

Once the main page is designed, it is desirable to use common alignements and spacings across all pages, with this technique all pages will looks like it belong to the same website. It will bring brand consistency and a feeling of security while browsing the website.

 

 

Image shows how the designer can use the grid and layouts to structure his content no matter the usage

Tips

Generally speaking, the designer should enjoy more open space and project a spirit of freedom rather than confinement. 

For example alternate from three to six columns or from four to eight columns, will create more movement and flexibility than a full width twelve column card.

 

Image shows different examples of use of the layout with different UI elements.

Colours

Typography

App Icon

Ui Icons

Back to top