The layout is the structure that supports the visual components of an interface. Giving the vision help in interpreting the content via groupings and prioritization of content helps the user to find meaning in the content. How the content is set up technically is invisible to the user, but relevant for navigation. A good layout design is related to goals and is reflected in a good user experience. Therefore, we can say that the correct setup allows the user to quickly find what he is looking for. This is also reflected in more conversions and more time on the site (engagement).

Using spacing well helps focus on content, reduces distractions and improves page scanning ability. Distances also define categories and give logical meaning to the user’s mental processes. By developing this with a creative and dynamic layout, you get a user-friendly, but also aesthetic UI design. To create a layout, we need to know about the principles of closeness and negative space. In this study, we will present seven resources for professional creation of a standing layout.

Size

Size hierarchy facilitates user decision. Size is the clearest way to inform the user about what is important on a website, that’s why website layouts usually have hierarchical blocks of information.

The current traditional navigation rule set can be divided into two types, navigation pages and consumer pages. When a user enters the homepage of a website, they are usually a navigation page, either to discover content or to search for something specific. This is why you create hierarchy blocks, which act as entrance doors for all interface content.

On the other hand, once the user has found what they are looking for and clicks on a block, they now need to consume the content, making the hierarchies less relevant on that page. In this scenario, the most functional and friendly design is to display the information in a balanced way to facilitate the natural reading of the sight. Everything has to do with the goal of each page.

The visual journey

Being aware of the visual journey gives you the power to manipulate it. Guiding the path along a proposed path is much friendlier than forcing through content scanning, therefore the visual journey must be familiar in the design.

It is very common to start designing with the false notion that all elements must attract attention, but designing without any priority order results in a lack of clarity and a lot of noise in communication. Although it is difficult to make these decisions, especially in small areas such as a smartphone screen, having the following considerations can make it easier:

Know the information, understand what the content is about, the purpose of the page and what elements will be included.

Deliberately sketch the content, create a layout and start creating alternate versions based on the established order of priority.

Confirm the visual journey from time to time, to return to the design with ‘fresh eyes’ is a great way to recognize better opportunities to improve the design and the visual path.

Asymmetry

Asymmetrical designs express more movement and dynamics. Asymmetry tends to be more expressive to the eye due to the laws of composition and balance, it facilitates the hierarchy of elements and gives them movement.

The main idea is to balance the interface elements in such a way that one part does not weigh more than the other, but without being strictly obvious as in symmetry designs. This forces us to define a hierarchy in the layout and to play with elements such as texts, icons, images, spaces and colors in a more creative way.

The visual journey of an asymmetrical composition goes from the main element to the secondary elements, expressing a certain tension between them and a variety of emotions that will depend on the design and style. It is very important to surround the elements with appropriate negative space. In short, one can say that asymmetry is a hidden symmetry, which is more interesting to the mind.

Distances and rooms

The correct distance defines the layout. Since the layout is documented by the distance between elements or negative space, its shape depends on how much some elements are closer than others.

At Chilimobil.no you can see grouping of elements that make up a layout, the space between the first group (spot illustration and text), the second group, USPs, the third group, news company and the fourth group (price plans) act as a support for the structure. In this subtle way, the negative space forms a layout.

These spaces contain the composition and disconnect or disconnect the elements in such a way that associations are created between them. The main visual associations are determined by the layout, so they must be designed for this purpose from the beginning. We must also keep in mind that the distance between one element and another must be a reflection of what the user has in mind as related and unrelated, and that isolating a group of elements provides more readability and meaning.

Break

Violation of a traditional scheme holds the user’s attention. The repetition of the forms tends to condition the mind, so changing the form always attracts the user’s attention and makes the visitor wait for more information.

On Digitaldagen.no, the speakers are shown in such a way that it creates a break in the reader’s reading. Images 2,3,4,5, 7 and 8 have the same dimension, but images 1 and 6 break the format to make the visual journey more dynamic.

With a focus on attracting attention, the change of the same form related to the visual law of repetition and adjustment, where any element belonging to a group that violates the alienation or other characteristics, will make the element more striking and interesting to the eye.

Keeping the user’s attention and making the experience exciting has a lot to do with movement, scales, “clutter” and breaking some rules. The ordinary is pleasant, but the innovative becomes memorable.

Positioning

Overlapping one element on another creates depth. Although the layout lives in a two-dimensional world, placing one element on top of another expanding depth will give realism to the composition.

This screenshot from Digitaldagen.no shows the overlay of the texts: “This year”, “Conference”, “Access to all lectures” and overlay with image from the conference balances the flat world of user interface design and the three-dimensional style that graphic design can have.

The use of different layers makes the design feel more realistic and visually more interesting. One of the most important rules when the text overlaps automatically is that there should be enough contrast to the background to avoid readability problems. If the sight can not easily recognize the characters, the experience will be stressful. It is also important to use a so-called “fallback” so that reading programs can easily read this type of design.

Grid

The use of the grid is mathematically pleasing to the eye. Although invisible in design, the grids facilitate the placement of the elements, creating a proportional distribution and providing a high consistency to the interface.

Designing with the right distance is a real challenge, but it is even more challenging to maintain the consistency of this distance throughout the UI stream. The grid is the standard solution for this. The way it contains the elements will give an exact proportion, but we must remember that the layout can vary considerably, depending on the designer style and how he will display the information. Systematic practice is the best way to master the use of the web.

In summary

Although there is a wide variety of layouts and ways information can be distributed, the most important rule is to keep it simple. The vast majority of users are not in an interface looking for design, but for the information the design facilitates. After all, complex structures are difficult to understand.

Although it is not an easy task to be able to combine aesthetic principles and the science of cognitive processes, the correct use of both is essential for professional UI design. If we are to tackle a new project, let us remember to give ourselves the necessary creative freedom, but always based on a structure that the user recognizes and that has proven to work.