The organization of space is the key to every great design. The rules provided by spatial systems, grids, and layouts can keep your design at a consistent pace, limit decision-making, and help teams stay consistent. This basic scaffold is a requirement for all design systems. In this guide, we will introduce the basics of defining spatial basic units, creating relationship rules using grids, and combining them together to achieve modern UI layouts.
What is a space system?
Designers make spatial decisions every day, from the height of buttons to the space around icons. A spatial system is a set of rules on how to measure and adjust the size and space of UI elements. Consistency at the spatial level can make your products more consistent, facilitate better communication within your team, and reduce the number of decisions designers have to make every day. An example of a space system is the "8pt grid". However, there are many variants and configurations to choose from.
For example, please note how the login form feels when there is no immediately recognizable spatial pattern. For users, this design may feel cheap, inconsistent, and often untrustworthy. The predictability of rhythm is visually pleasing, which is also what you expect from a brand you trust.
When adjusting the same login form to follow the 8pt space system, the rhythm becomes predictable and visually pleasing. For users, the experience is perfect and predictable. This increases trust and love for the brand.
No matter who is responsible for design, there is now a consistent spatial language, and the choices you have to make are greatly reduced. You can easily continue the work left by other designers or easily build in parallel. Since these decisions are also recorded in the code repository, you can save engineers' red line time.
How to start the space system?
Defining basic units will allow you to create supported size ratios in the spatial system. Looking at different products on the internet, you will find several different methods. You will see incremental systems of 4pt, 5pt, 6pt, 8pt, and 10pt. As long as you understand some of the directions that promote and prevent content, there are no wrong answers here.
My preferred method is to use an 8pt linear scale for elements, with a spacing of 4pt half steps between icons or small text blocks. I prefer the 4pt baseline grid as my layout, which means that the row height of the font I choose will always be divisible by 4. This system aims to reduce confusion, but it is also easy to implement.
In this example, you can see that the line height of the text is 20 pixels, but if I use 8-pixel padding at the top and bottom, the height of the button will be 36 pixels. Which measurement standard should I prioritize? There are two ways to solve this problem:
Element priority (strict element size adjustment)
In this method, the size of entity elements is prioritized when matching with a predetermined spatial system. This includes content such as buttons and form inputs. These elements are more likely to have predictable content and are key to creating rhythm in the overall composition.
Content priority (strict internal filling)
When the content is difficult to predict and we care about its display, we will want to enforce strict internal padding and allow element size to be determined by its content. The size of these elements may still conform to the rules of your spatial system, but this is secondary to the spacing around the content. This is useful for tables with uncertain user content.
Place the border inside or outside
Contour elements such as buttons or cards may cause trouble. How do you calculate a 2px border? Its counting method in the code is different from that in Figma. Which one is your source of truth?
You can almost always achieve pixel perfect code, but if you are inconsistent with the team in implementation, you may sacrifice simplicity and scalability. Again, engage in these conversations with your team to determine your own position.
What is a grid?
Space systems define rules for size and spacing, while grids help you arrange content into structured propositions. Early print designers used grids to organize text blocks and images into pleasing visual hierarchies to improve readability. With the development of design, the same basic principles still apply to the two-dimensional organization of information.
Column grid
Column grids can help you organize content into evenly spaced vertical columns. The space between columns is called the binding line size. Applying spatial system rules to drainage ditches will help maintain a consistent rhythm in design. A common example is a 12 column grid, as it allows you to divide a given area into half, one-third, fourth, sixth, and so on.
Modular Grid
Modular grids consider columns and rows to organize content into a matrix structure. Modular grids are very suitable for strict format layouts such as books, but can be decomposed into responsive web page layouts of relative sizes. Please remember that this does not necessarily include the entire page layout. Modular grid is an organizational tool. You decide where to start and stop.
Baseline grid
Traditionally, in graphic design, baseline grids are used to set the line spacing from one line of text to the next. However, on the internet, we place text by line height rather than baseline. This is a subtle difference, but one should be aware of it when designing across platforms. No matter how your layout is measured, the same basic principles apply - setting the layout on a consistent grid will make it easier to organize, create vertical rhythms, and look beautiful.
Build Layout
Layout is the pinnacle of defining spatial rules and organizing content into a single combination. Integrating your content into a thoughtful structure is the easy part, while making it flow together in a clear hierarchical structure in the constantly changing ocean of platforms and screen sizes is the difficult part.
Now, defining scaling logic is a requirement for both native and web applications. There may be significant differences in screen size and proportion from desktop to mobile devices and all devices in between. Creating elegantly scalable layouts requires three main concepts. Some designs may require all three concepts simultaneously.
adaptive
Adaptive layout is a layout that changes completely according to its presentation format. For example, loading different experiences based on desktop, tablet, and mobile devices. This can provide a more tailored experience for users' devices, but rebuilding the same functionality into multiple formats may become expensive.
Responsive
Responsive layout is smooth and can adapt to constantly changing format sizes. This is a common practice on the internet and has become a necessity for native applications as screen size changes. This allows you to build a feature at once and expect it to run on all screen sizes. The disadvantage is that touch and mouse interaction are very different, and the cost of considering all devices and use cases is high.
Strict layout
This layout will not change with the size of the format. Fixed layouts are typically used to facilitate specific interactions or information layouts, which may degrade in smaller sizes. Data tables and charts typically create strict layouts with specific sizes for scrolling, as readability and interactivity are significantly reduced below a certain size.
How to implement a spatial system on an existing set of designs?
It's easy to start from scratch. The challenge lies in transforming an existing set of designs. The first step is to involve other collaborators in the conversation. It may be difficult to persuade team members and stakeholders to change the current product development process without elaborating on the value associated with their role. Engineers hope to have clearer requirements and reduce picky designers telling them to fill closed time. Product managers hope to deliver user and business value faster. Designers hope that their designs can be quickly and effectively transformed into a coherent user experience. All of these things can be achieved through investing in a shared space system.
Start small. Rebuilding everything to adapt to the newly defined spatial system seems daunting. Find simple components to convert (such as buttons), and then extend them to their common sibling elements (such as form fields). Build motivation and understanding with your team along the way. The regulatory design system is like grazing cats. Authorize personnel (such as engineers) who will implement the system to maintain and execute it.
Make a balanced decision. Prove to stakeholders how this work can reduce design/technical debt and improve speed. After completing a portion of the work, such as organizing the icon workflow from design to implementation, take some time to capture the situation before and after by interviewing the team. Use teammates' quotes about saving time to enhance your work value. Whether you work for a startup with a strong fighting spirit or a large enterprise, the common reason for not investing in a design system plan is that the business is maintained directly by providing value to users rather than organizing a perfect spatial system.
Maintain momentum. Once you start, please remember the vision and date for completing the change. Half of the work follows the spatial system, while the other half falls into a difficult situation. It makes creating new value for users more complex. Develop a plan with clear milestones, create visibility for the team, and share progress throughout the process.
