When it comes to UI layout design, getting your head around some common design patterns can help you create and prototype better designs
Creating coherent UI layout designs is a mighty task even for the most experienced UX/UI designers among us. With a veritable treasure trove of UI patterns to choose from, the same content can be fashioned in numerous ways.
When it comes to creating a web or mobile experience, the content should always take center stage. How something looks is not as important as usability. Going through some common user interface design patterns can show you how you can present your content most effectively.
Let’s look at 6 must-know examples of UI layout design and give you a rundown of each one.
We’ll break down the UI patterns, so you can get an idea of how to use it when you start prototyping your design.
Then, why not start prototyping and creating your own web and mobile layouts in Justinmind?
UI layout design: common patterns
Airbnb’s website is minimal; there is generous helping of whitespace which is perfect to highlight the range of accommodation and experiences on offer. There are few colors which means our eyes will be attracted to the only color that there is on the page; the color found in the photographs.
Putting to one side the sparse typography and bespoke illustrations, Airbnb uses a few common UI layout design patterns on their homepage successfully:
- Navigation tabs
Navigation tabs are used for a variety of reasons. They’re a navigation pattern that can help keep your UI layout focused and aren’t too dissimilar from a traditional file in a filing cabinet.
If you have different sections or categories on a website a horizontal bar, such as the one Airbnb uses, tabs are a good solution.
You should use navigation tabs when there is limited visual space or when content needs to be separated into sections.
Cards work well in the UI layout design for Airbnb. Cards combine both text and imagery and are especially useful when you want a user to browse content of different type and length.
Cards can be used when displaying content that is:
- Of varied length
- Doesn’t require direct comparison (i.e one card bears no relation to other cards)
A card contains various pieces of information that be expanded upon either through linking to another page or expanded for more information. In Airbnb’s case, the cards contain the category of activity on offer, its title, price and the rating of the activity.
Cards are good for users who like to gather information as they search, and cards are also easily manipulated. A click could either expand more information or flip the card around to reveal more information.
Cards typically contain a variety of media within them; an image, text, video, a call-to-action and so on.
Want to try prototyping an interface with cards? Justinmind lets you simulate drag and drop actions to mimic the movements of cards.
YouTube has a lot of content to offer the world and as such uses multiple UI patterns to best present their content.
Grids are a common way to create a structure on which to place your content. Never underestimate the power of a grid. Grids can be used to create a rhythm for your website and help to define proportion.
Proportion is important in UI layout design as it helps us to prioritize content in an effective way. But what a grid does is allow us to create a basic structure in which we can tie all elements together through a rational composition.
A grid will let a designer achieve consistency, and the content placed upon the grid will be organized and structurally sound.