Layout is the art of organization, information and whitespace.
Ambition
The ambition of our layout is to transport information to the viewer in a way that is understandable and engaging. Content can be arranged within the grid to span multiple columns and should take both functionality (reason, readability and legibility) and aesthetics (use of whitespace and visual interest) into consideration.
To reach a good balance means we need to consider the purpose of each layout and refine it to ensure the quality of both information and space. To achieve aesthetic quality, we welcome the use of asymmetric layouts whenever possible (without being inconsiderate for the content) to add artistic quality to our information.
Concepts
The following concepts are relevant to layouting:
Layout Container
The Layout Container separates content and the left/right edges of the screen with a small gutter, keeps content centered, and ensures content does not grow larger than 1300px.
All content has to be placed within a Layout Container. Only non-content like background patterns may be placed outside.
The Layout Container grows fluidly with the screen, peaking out at
1300px width. It has a left/right
gutter of $space-m (20px).
Layout Grid
The layout grid dictates the position and alignment of typography, images and other elements. The layout grid is a tool to create harmonious and visually engaging compositions.
It is spanning the whole width of the Layout Container. Its function is to create strong alignment among elements on the page, and to deal with major layout patterns, like creating a 3 column layout.
The grid has 12 grid tracks, which are separated each by
$space-gutter (20px) gutters. If the
Layout Container is displayed at full width (1300px), each grid track will have a width of
90px.
A bad example of an element not following the Layout Grid.
All major elements should follow the Layout Grid. Elements further down the hierarchy, for example within in a card, will usually stop following the grid and instead adhere to the concept of inline:
Inline
Inline layouts refer to elements being placed horizontally next to each other, that are not adhering to the layout grid. It is most often used for horizontally placed elements with varying widths, for example a list of tags, breadcrumb links, or 2 buttons.
While the card itself does follow the Layout Grid, the buttons nested within do not - they are considered to be inline.
Inline layouts are usually found on the lower (detail) levels of the composition.
Stack
Stack layouts are such where elements are placed vertically on top of each other.
Elaboration
Layout plays an important role in the brand identity of Kisi. It’s an element that is responsible for two aspects; transporting information and creating compositions. The ambition of the brand identity is to remove unnecessary decoration and refine the foundation to a level of quality that will last for years to come, the compositions of content itself needs to be perfected to achieve this kind of longevity.
Aesthetics
To pursue both functional and aesthetic compositions we need to respect both the content itself and the visual aspects of layout. And just as important it is for typography to transport the written content to the user is space (or whitespace) for layout. Without space, our layout compositions will feel cluttered and claustrophobic. Too much space, and the layout feels either scarce or simply too artistic.
When in harmony, we get aesthetically pleasing, timeless compositions with the power to communicate the professionalism and aspirations of Kisi as a leader figure in the industry; being able to inform, educate and aid our users when it comes to their informational requirements.
Layout grid
When it comes to the layout grid itself, we chose to go for a 12 column construction. 12 tracks is very flexible since it’s divisible by 2, 3, 4 and 6 – giving us many layout options for how we can organize content in the layout.
Layout container
Also on the topic of flexibility is our layout container, the parent container of the layout grid. The container itself is wide, and at a maximum width of 1300px it improves the flexibility of the layout by making as much of the screen as possible available for layout. Many companies go for a narrow container, which is easier to maintain because you need less adaptations for large screens, but it’s also limiting the layout possibilities which means that it’s very difficult to create high quality, timeless layouts.