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.
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.
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:
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.