The orientation along a clearly defined relationship between columns and distances not only simplifies significantly the development of a layout, but also provides for a clear and tidy overall impression and thus facilitates user acceptance of content.
The use of layout grids which have long been common in print media has only begun to gain acceptance for web applications in the last few years. In the context of this style guide, the use of the established CSS framework Bootstrap is recommended, especially as it simplifies the creation of responsive layouts considerably. In general, however, it is not important which framework is used – the most important thing is for an application to be created on the basis of a grid system.
Schematic representation of a grid (responsive)
The layout grid is the basic architecture of a page. As more flexible it is, as better it can meet the different requirements of individual information structures. The grid used in the Ecosystem consists of 12 columns that allow for a number of design options. This grid has been tested and developed with regard to a wide variety of viewports.
The flexible use of modules within a page offers a number of display options, which also meet a wide variety of requirements for different page types and their content.
Modular approach with grid systems
- Make do with just a few alignment rows to reduce the complexity of the layout and information structure.
- Take advantage of two laws of design psychology for the screen layout:
- Law of proximity: Elements with little space between them are perceived as belonging together.
- Law of common region: Elements in demarcated areas are perceived as belonging together.
- Be sure to group elements on the screen sensibly, so that the spatial relationships help users to identify what objects or pieces of information belong together.
- The order of the elements should also be based on the needs of the user. In general, the direction in which text is read should be from left to right, and from top to bottom. The elements should be arranged accordingly, from important to unimportant.
- When designing the layout area the width of the text should be no more than 100–120 characters to ensure that the text can be read easily.