Every application or website interface has a structure that provides convenience for development and a familiar arrangement of elements on the screen for the user. In this topic, you'll learn about how this structure works and why it's important.
System of rules
Everything has rules that help create stability and order. For example, traffic rules or rules for using brackets, quotes, and commas in programming languages. When learning something new, it's important to understand the system of rules behind it to avoid chaos and confusion.
Similarly, when designing an interface for a service or application, a layout grid system is used to set rules for where to place elements on the user's screen. This is important because people tend to be lazy and prefer not to think too much when performing actions. When faced with something unexpected, they may panic and become confused.
Layout grids make it easy for interface developers to arrange elements in a way that is user-friendly. This includes information, buttons, and input fields.
What are layout grids?
In simple terms, a grid is a skeleton, a layout that consists of vertical and horizontal lines, or even a table that serves as a foundation for deciding where to place content elements. Grids make it easy to place interface elements on the screen in a consistent and user-friendly way. They also provide constraints that can help stimulate creativity.
Grids use columns to mark up the screen and margins to measure the distance from the edge of the screen. Typically, nothing is placed right at the edge because it's inconvenient for users to interact with the interface in this area. Gutters are also used between columns to visually separate elements from each other, such as ensuring that buttons don't overlap.
Designers usually set the markup values for these properties in advance during their work. An example of this can be seen in the picture below:
Different screen types, such as mobile devices, tablets, laptops, and full-HD monitors, require specific markup values due to their varying screen resolutions. This is because certain layouts may be more convenient to interact with on certain devices. For example, you may be able to fit eight store products on a single line on a computer screen, but only six on a tablet or four on a mobile phone.
Some layouts require the same number of elements on each screen type, such as a calculator app. In this case, all controls are located in the same way to look as familiar as possible.
Grids can either be symmetrical or asymmetrical. Symmetrical grids are used almost everywhere, while asymmetry is sometimes used in beautiful design projects to impress the user.
Layout grid views
There are several layout grid templates commonly used in development and design. These templates have the advantage of being easy to program with because there are ready-made libraries and elements available for them. Additionally, users are often familiar with specific templates when viewing a particular type of content.
Each of these layout templates has unique properties that enable developers to control the content on the screen in different ways. For example, ScrollView is used in blogs or e-book applications because it allows the content to scroll down. On the other hand, GridLayout is great for displaying online store product cards.
Read more about layouts in the Android Developers docs.
Conclusion
Limitations are important in any design. If you give yourself too much freedom to be creative, you can get stuck for a long time trying to come up with an arrangement of elements. Today, you learned that:
- Layout grids make it easier for developers to create applications.
- When developing interfaces, you need to think carefully about the size of the margins and the distance between elements.
- You can create any layout, but there are also popular ready-made templates for different purposes available.
- Users expect a similar visual structure from some applications, so it's often better to use a familiar layout instead of a unique one.