Spacing Guide for UI and UX Design
Introduction:
When it comes to spacing in UI design, there is no one-size-fits-all solution. It is largely dictated by the specific design and layout of the project, as well as the individual preferences of the designer. Generally, however, a few key principles can be followed to ensure that spacing is effective and aesthetically pleasing.
Status Bar
We'll have to leave at least 44px for the status bar. Count down 44 points from the top border and don't put anything in this area apart from the status bar itself. That's the danger zone.
Margin & Padding
Padding is the space around the content and between the border. Margin is the space on the outside of the border and determines the proximity to other elements.
Text & Button
I added 24px of space between the text and the button to make it clear that they are related, and 16px of space between the button to create a clean and user-friendly design.
Back Navigation Bar
This part usually takes around 56px, depending on the content you use. For my example, I used 44px to create the tap target for my back button.
Text Container
This part usually takes around 56px, depending on the content you use. For my example, I used 44px to create the tap target for my back button.
Horizontal Icon Spacing
Drag the Horizontal spacing bar's slider right or left to increase or decrease the space width between icons. Then drag the slider for the Vertical spacing bar left or right to adjust the amount of vertical space for desktop icons.
Spacing & Iconography
Make sure that any icon that you drop into the design you frame it inside a container uses a value that is a multiple of 8 (ie; 24x24). This will just enable icons to be laid out consistently within your designs. The standard icon size is 24px by 24px but we can use smaller sizes or bigger ones.
Take your
Designing skills to
Another Level with
UI Design and
UX Design Learn more
