Home > UX and Prototyping > Your guide to space and layout in UI design
Discover why space is a fundamental building block of great UI layout design, plus get pro tips on jump-starting your design process with Justinmind

Discover why space is a fundamental building block of great UI layout design, plus get pro tips on jump starting your design process with Justinmind

Space is everywhere – it’s all over this blog post! While often overlooked as a layout component in UI design, you don’t have to be a rocket scientist to understand that space has a direct impact on site and app usability.

Using space effectively in your UI layout helps increase readability, provide feedback and draw the reader to the most important parts of the screen. We don’t think anyone could have summed up the importance of space and layout in UI design better than Web design speaker and author Brandon Jones:

“Good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

In today’s post, we’re looking at how space can contribute to great UI design. We’ll show you how to get started, using Justinmind prototyping tool, plus let you in on some trade secrets. It’s easy to design space right, you just need the right tools!

Getting UI layouts right

What’s space got to do with UI design?

Related to UI layout and composition, space is an essential aspect of a design’s visual language, alongside color, type and iconography. Space is what helps designers create visual breathing room for the eye, and makes users want to stay on the page. It can also help to suggest function and create emphasis of important content.

When we talk about space in UI design, we are referring to the two concepts: proximity and negative space, or whitespace.

Proximity in your UI layout

Proximity is a principle of Gestalt Theory in UI/UX design. The principle of proximity is based on the idea that objects that appear close to each other on a screen are related to each other (especially in comparison with those placed further away from each other).

Often, designers will implement proximity to distinguish groups of elements and create sub-hierarchies for groups of UI elements and icons. It’s simple really. It just involves placing related elements close together.

For instance, take a look at the UI layout of our Font Awesome library. The chat and messenging icons have been placed close together because they are closely related to each other:

ui-layout-space-font-awesome

Proximity is a powerful tool for designers. Having familiarity on-screen helps users to create meaningful connections with brands. Learn more about familiarity and consistency in UI design here.

Whitespace in your UI layout

Whitespace is that space between UI elements on a screen. Good use of whitespace helps to de-clutter your site or app so that users can focus on important elements and read content more easily (whitespace helps with readability by up to 20% in fact).

Remember, it’s not about the quantity of UI elements in your interface, it’s about the quality. Nobody enjoys reading a wall of text. Learn more about what whitespace lends to usability principles here and check out some great examples of whitespace in UI design here.

Using space effectively in UI layout design

How you incorporate space into your UI layout design differs from screen to screen. For instance, you might use lots of whitespace on a Homepage to emphasize a call-to-action button, but less on a site listing multiple items, such as an eCommerce product page.

In order to apply space appropriately a UI layout, you need the right tools. By designing your interface with a prototyping tool like Justinmind, you always have a 360° view of your design – space, UI elements and links. Let’s take a look at how you can get space right in Justinmind.


Create better UI layout designs with high-fidelity prototypes. Download Justinmind

DOWNLOAD FREE


How to design your UI layout in Justinmind

Accurate information architecture with new margin feature

In Justinmind 8.4, we added a new margin feature in the Properties palette. Before you could change the size and position of any UI element on the canvas. Now, you have even more control over your screen’s UI layout and the position of your UI widgets.

Add a margin with any number of pixels to create space and breathing room between UI widgets. Your desired margin will be maintained no matter what size the device or dimension, so your information architecture is always pixel-perfect.

ui-layout-space-fixed-margin-feature

Adding margins to maintain the real layout and composition on your design in the prototyping phase is good design practice. After all, there’s nothing worse than slaving away over your designs and then having to communicate to development how much space you intended between icons and screen sections.

UI layout alignment features

When UI designers create interfaces, they don’t just push UI elements around the screen, they also pay attention to the space in between and around those elements. Carefully arranging UI elements around the space on the canvas helps designers give their design purpose, create emphasis and define a navigation path for their interface.

Justinmind has a set of alignment tools especially designed to help you arrange your UI widgets around the space on the canvas. Our rulers, smart guides, grids and snap to geometry make it easy to manipulate space on the canvas. Learn more here.

Wrapping content for your UI layout

When you want to manipulate space on the canvas, our wrap feature also comes in handy. You can wrap UI elements horizontally or vertically within a container. This is similar to the way you wrap text in Adobe’s Creative Suite.

ui-layout-space-wrapping-ui-elements-feature

Justinmind UI element layouts

And don’t forget about Justinmind’s Layout feature, which allows you to change the layout properties of each UI element. Choose from the horizontal, vertical and free layout depending on how you want your elements to be aligned on the canvas. Then, add space between elements, like so:

ui-layout-space-spacing-ui-elements-feature

The importance of visual hierarchy in your UI layout

Organizing content and visual hierarchy

Visual hierarchy is an interesting concept in design. This is the order in which a user processes information on a screen.

Designers need to pay attention to visual hierarchy to ensure that users can find and understand information easily. When a screen lacks strong visual hierarchy, you run the risk of losing the user’s attention.

The following are visual characteristics (according to the Interaction Design Foundation) that designers should take into consideration in order to make their screens as readable and usable as possible:

  • Proximity – placing related elements (e.g. call-to-action copy with call-to-action button) helps give them meaning and context
  • Whitespace – the right amount of whitespace can help highlight important content
  • Size – larger UI elements will draw the user’s attention
  • Color – bright colors catch eyes before so than muted ones. Learn more about designing with UI color here
  • Contrast – users are drawn to brighter compositions
  • Alignment – creates sharper, more visually-appealing design
  • Repetition – repetition creates consistency and helps to tie elements together

Strengthening your UI’s visual hierarchy

Concentrating on your UI’s visual hierarchy is a great way to think about space in your design. Luckily, there are a few techniques to help you organize your content and strengthen your UI’s visual hierarchy.

For instance, think about different ways you can design your UI’s layout. Whether you’re designing for web or mobile, whether your UI is content-heavy and who your target users are will influence the type of layout you use.

By mapping out the visual characteristics of your site, including space, you can communicate order and importance of content in your interface and help make it more reader-friendly.

So stop treating space as an empty canvas, and start using it as a design tool! Download Justinmind now and try out our UI layout and composition features.download_free

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free