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 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 ;)
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.
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.
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.