Web Interface  |  Layout

Principles

This section is about the general principles of website or app layout design.

01Primary and secondary

Separating the primary from the secondary is one of the basic principles of design. A good layout first focuses on the main thing, and then reveals the secondary. Without emphasizing the primary, the design is boring and impersonal, and often even useless.

The page layout has no focus point.
The layout definitely has a focus and it is clear what the main thing is.

Emphasizing the main thing works not only for the whole layout but also for each of its components, like modules and cards. The same principle applies to them: emphasize the main thing by directing the focus to it, and then show secondary.

The card does not have a focus point.
The card has a point of focus and it is directed at the main thing.

02Rhythm

There's nothing more boring than repetitive blocks in a layout. It makes the design look impersonal and monotonous. The user simply scrolls through the page without stopping at anything. Variety of content and change of rhythm is one of the important rules of design. Rhythm creates music, the design becomes engaging and the content is something you want to read, look at, and notice the details.

Monotonous design.
Rhythmic and attractive design.

03Lines of force

Lines of force are a good way to build a solid and eye-catching layout that is based on vertical points of attraction. It can be several lines or even just one.

The layout design with several lines of force.
The layout design with one line of force.

04Algorithm of design

The easiest way to achieve a solid design and get a great result is in four steps:

1. Content

The first step is to understand what kind of content you're working with, what text, images and other components there are.

2. Structure

The second is to emphasize the primary and secondary, to separate the text with headings. Understand what blocks the content can be divided into and what relationships are formed.

3. Layout

The third step is to create a layout that reflects the idea and best represents the content and its structure. The way the design should work.

4. Style

And finally, the fourth step: design, style, color and other visual details. The way the design should look.

1. Content
2. Structure
3. Layout
4. Style