What spacing recommendations should I consider for desktop and mobile designs?
TL;DR
- When developing spacing systems for both desktop and mobile interfaces, consider three key spacing elements: proximity, base values, and consistent margins for desktop and mobile designs.
- Proximity helps group related items together, creating a clean, organized look and directing focus to important elements.
- The base value, your design system's smallest spacing unit, influences overall spacing increments and should be chosen based on the device type and aesthetic goals.
- Smaller base values (2, 4, 5) are typically used for mobile devices to accommodate smaller screens, while larger values (8, 10) are preferable for desktops or tablets.
- Ensure margins are consistent across devices; for mobile, margins might range from 16px to 24px, whereas desktop screens could use 80px to 120px. Adjust these values based on your specific product requirements and user experience goals to optimize interface usability and appearance.
Detailed answer
When considering spacing recommendations for desktop and mobile designs, it's essential to focus on proximity, system's base value, and unified page margins to ensure a cohesive and user-friendly interface.
Proximity is the key
Items that relate to each other should be grouped together. When multiple items are placed close together, they form one visual unit instead of several separate ones. This approach organizes information, reduces clutter, and provides a clear structure for the reader.
Spacing is a powerful tool when used correctly. Use it to guide the user's eye to important design elements, or to add necessary white space between elements.
Create system’s base value
The base value in your system, often referred to as the root or foundational block, represents the smallest spacing unit that is used in your UI design system. This base value is incredibly important as it not only serves as the fundamental unit of measurement, but it also acts as a multiplier to determine larger spacing values, thereby setting the tone for the entire design framework.
The selection of your base value is not set in stone and can be as varied as 2, 4, 5, 8, or even 10. There is no universally agreed-upon standard for this, as it is largely dependent on the specific context of your product. Factors such as the device or platform where the product will be used, as well as the aesthetic vibe that your product aims to convey, all come into play. Hence, the choice of base value should be a careful decision, taking into consideration the unique requirements and characteristics of your product.
For example, when designing for mobile screens, you might pick (2, 4, or 5) because you would be designing for smaller screens. However, designing for desktop screens or tablets, you might go for (8 or 10) because you would be designing for bigger screens.
As seen in the examples above, the spacing pattern used for mobile screens would include smaller values than the spacing pattern used for desktop screens. Of course, you can adjust that pattern to the needs of your product and your UI design system. Choose your base value, build your pattern, and do your experimentation. See what works best for you and your product.
Unify your page margins
Just as with spacing patterns, unifying a page's margins can create a more consistent layout and improve the product's overall appearance.
You can align your margins with the spacing patterns you use for your product. The following example illustrates this principle in a responsive UI, which adapts to different platforms:
For mobile screens, there are two breakpoints:
- Screen width 320px to 479px: page margin is 16px.
- Screen width 480px to 700px: page margin is 24px.
For tablet screens, there's one breakpoint:
- Screen width 701px to 1024px: page margin is 32px.
For desktop screens, there are two breakpoints:
- Screen width 1025px to 1439px: page margin is 80px.
- Screen width 1440px to 1920px: page margin is 120px.
Remember, you'll need to experiment to find suitable margins, keeping in mind the overall design structure and usability of your product on various platforms.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- What to keep in mind for your next spacing system? by Mera Nalshik