Grid and Layout

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


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.



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.




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.



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.




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.





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.





App Icon

Ui Icons

Back to top