Published on | Prototyping: From UX to Front End — Medium Justinmind

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?

Prototype your UI layout designs in Justinmind. Download now.

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.

ui-layout-design-ui-design-website-design-ui-patterns-airbnb

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
Cards

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

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:

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

ui-layout-design-ui-design-website-design-ui-patterns-youtube

Grids

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.

Prototype your own UI layout designs in Justinmind. Download now.

Progressive disclosure

Progressive disclosure is used on YouTube in the comments section. Progressive disclosure is a design pattern that makes user interfaces easier to understand. They also help to prevent any sense of being overwhelmed by too much information because progressive disclosure removes any clutter and reduced cognitive workload.

What progressive disclosure does, at least in the case of YouTube’s comment section, is let the user read what they want with minimal distractions. They have the possibility to dig deeper, should they wish. The additional comments are grouped together and “View all X replies” will drop down all the comments for the user to read. It’s common to see copy such as “show me more” when you’re encountering the progressive disclosure UI pattern.

ui-layout-design-ui-design-website-design-ui-patterns-amazon

Carousels

Carousels are a hotly debated topic in the UX design community. They’re useful if you want to highlight large chunks of content but don’t have the space.

Cards are common on ecommerce websites as retailers jump at any opportunity to show the latest offers or a new range of products without having to find additional space, even if stats highlight their lack of efficacy.

Amazon uses carousels liberally throughout their website. Whether it’s a selection of ‘top picks’, ‘recently added’ or ‘customers also bought these’, Amazon takes the carousel to the next level.

One drawback is that unfortunately many people scroll before the carousel gets to do a spin, which hinders the user experience. Carousels are predominantly visual — so should be accompanied with imagery.

Why not find out how to make your own carousel in Justinmind?

Breadcrumbs

Breadcrumbs let users know where they are on your website and prevent your users from getting lost or frustrated. Breadcrumbs are used to show hierarchy in the informational architecture of your website and tell users where they are.

They are normally separated from each other with a more than (>) sign and can be found below a navigation bar.

You won’t find one on the homepage but if your homepage contains navigational elements to other areas of your website, then it’s likely a breadcrumb will make an appearance.

Amazon uses a breadcrumb in their UI layout design because the company has a lot of content on its website. With so much content, it can be easy to get lost in its hierarchy of pages.

Each label of the breadcrumb should link to its respective section. They are normally separated from each other with a more than > sign.

Breadcrumbs should be used with other navigation patterns, perhaps with something more visual like slideshow or gallery.

Conclusion

When finding out which UI design layout to use on your website, the best way is through rigorous user testing and plenty of experimentation.

Whether it’s a quick sketch, or a fully fledged interactive prototype, uncovering the range of UI layout designs out there will give you a better design repertoire — perfect for creating your own prototypes and boosting the user experience.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

UI layout design — 6 must know patterns was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UI layout design — 6 must know patterns

Cool stuff, every week

More Articles