Visual Design Foundations: Layouts
Draw and guide the users to the most important parts of the screen seamlessly.
A Layout is a way how we arrange the elements to guide the readers through the interface. Layouts can be used in different contexts to drive different intents in order to improve the productivity and efficiency of the design from the user’s side.
One of the most famous layouts that we can find in the outside world is the Fast Food Assembly Line created by McDonald's, which specifies the role, tasks, and times with the intent of improving the production time that increases efficiency and profits for the company.
There is no talk of layouts that do not include grid systems, designers use grid systems as a structure to create layouts that give specific and consistent measurements to the design, which also helps the design to be displayed in multiple devices. The layout is the real estate framework that allows designers to define how the content would be displayed and how would be the behavior of the interface.
Modular Layout is a practice that splits the design canvas(artboard, page, screen, etc.) into smaller subdivisions that work independently and can be created, exchanged, or rearranged across multiple designs.
Modules are also important while designing for multiple platforms. It allows the design to be rearranged to be displayed on multiple devices. The size of the module can vary depending on the intent, emphasis, and priority of the content but it must be set in terms of the number of columns, that’s why it is important to set the grid system first.
Free & Discounted Udemy Courses — Explore Now
In the market, we can find multiple display resolutions, which is why we create a grid system that can work across them. The most common grid system is the 12 column grid system, because of its flexibility and capability to be split into six possible symmetrical (divided by 1, 2, 3, 4, 6, and 12 columns) and much more asymmetrical layouts.
When looking at a UI, we could be able to identify the number of columns the layout is divided, however, we still need to know the grid system used, the following example shows 6 column layout displayed, but in the background still remains 12 column grid system
6 Columns Layout
Same as the 6 column layout there are multiple configurations of layouts that we can design with, even though there are some that are pretty common.
1 Column Layout — Display
In this design, multiple sections are highlighted (with a red outline), even though the layout used has only 1 column (the entire 12 columns grid) This is because the elements inside do not have a fixed structure, such as tables or navigation bars that have dynamic measurements and alignments, depending on the content, it is fine to have 1 column layout that avoids confusion and properly neutralizes the real state of the screen
2 Column Layout
This layout could be symmetric when we divide the screen in two equal parts (6/6) as the example below.
However, the power is that the grid allows us to play with the size of the columns based on the requirements or the purpose of our sections.n the example below, the design is using 2 columns layout but with an asymmetrical distribution of the space (9/3). This is because the component has more hierarchy and it’s the main interaction part of the design.
2 Column Layout — Variations
Even within the same 2 column layout, baselines can also modify the number of columns to use from the grid and still reflect a 2 column layout. The example below uses in the top (7/5) and in the bottom uses (9/3) but it still conveys a 2 column layout. All of this is given by the content and purpose of the same.
Multi-Column Layout
Previous examples can be used at any level. Depending on the complexity of the screen, it will provide more flexibility for grid and layout use. The below example is a home screen for an online learning platform, for this to be a single layout would become very boring to navigate. Designers tend to explore using different layout arrangements to induce dynamism and engagement to the design.
As the complexity increases, the grid has to become more flexible. In use cases like the dashboard, some of the areas could require explorations for complex layouts
There is an uncountable number of layout configurations, we as designers have to identify the requirements and information that will be displayed on our design to define what kind of configurations we will apply. The layout has to enhance our design in terms of accessibility and productivity.
Layouts play an important role when arranging text, shapes, image,s and negative space on the page to produce a balanced, and harmonious visual impact that would allow the elements to have rhythm and be seamless, allowing users to accomplish their tasks efficiently and effectively.
Once the layout is set on top of your grid system, it creates containers in which we will place the design elements. For this, the negative space will play a key role to maintain balance within the container. Also, containers can have their own grid to give more flexibility, the inside grid works in the same way as the main grid, trying to keep the consistency with it.
As a best practice to implement the layout it’s important to consider the following factor in the treatment of the containers or boxes.
The Box Model
This model covers all the specifications that a box should have in order to be laid out in your design. These are also the specifications that the developer will use to compose your design in code.
- Margins are the spaces between the bounds of a container and elements which surround it.
- Borders are the thickness of the stroke around the edges of a container, some elements don’t have any border.
- Paddings are the spaces between the bounds of the container and the elements inside.
- Dimensions: the size of the element, measured by width and height.
Be consistent!
- Define your scale: Measures and alignments should be consistent and rational. The first step is to define the scale of the numbers for all the measurements and alignments on the screen.
As best practice use multiples of 8 to match them with your grid system, all the containers, different components, alignments will be divisible by 8, which gives a system to follow.
- Define Rules in the UI: Any size, margin, padding, and spacing should be defined and documented with their use cases to keep consistency across your design. As a good practice, it is good to have use cases and visual examples that communicate the behavior of the rule. Below you can see some examples of rules documentation.
Prioritize Sections
To provide layout variations, understand the sections that the screen is divided in and prioritize by giving a percentage to each section, it represents the amount of space that is going to be occupied on the screen, plays around with the position and variating the percentages to understand all points of view and decide which is the best one for the requirements of your design.
Define templates to increase efficiency
Create a layout that can be applied to multiple screens that will be similar across multiple scenarios, maintain consistency, reducing time and effort for the design team by creating standard rules.
Tips / Best Practices
- Create your containers based on the box model.
- Use multiples of eight for your scale.
- Define templates that can be used in multiple experiences.
- Always snap layouts to underlying grids.
Checklist
- Set a grid system first.
- Define your layout based on the box model, with measures multiples of eight.
- Prioritize containers and sections.
- Define your scale and rules based on use cases.
Related Topics
Quick Question
While using the box model, we have to consider:
- Padding, Margin, Border, and Dimensions.
- Padding, Opacity, and Border
- Color, Margin, Thickness, and Padding
- Padding, Margin, Border, Height, and Width
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
