Interactive Mockup Exercise

When you think of a good website design, what comes to mind?

For me, it’s Airbnb. I like its design not just because it has a pretty color palette or an eye-catching video on the front page, but because it was built with good user experience in mind.

But how do you define good user experience for a website?

For one, it has to be both easy to navigate and easy to search. Websites for businesses, by and large, provide information for customers and potential customers. If your customers don’t understand the information or can’t find the information that they’re looking for, then your website will have failed.

To design a great website, both the structure and the content need to work together to present valuable information at the right time and the right place. There’s a lot of coordination involved, and often times things go wrong. You can’t rush it. You have to build your website to fit the content from the ground up.

How do you start designing a great website? Build a wireframe, then iterate into an interactive mockup.

Why Wireframe?

Wireframing is a great way to quickly communicate concepts and experiment with multiple iterations of any design.

Wireframes are not full-blown coded prototypes with actual visual design. They are just low-fidelity static designs that allow you to test iterations quickly and get feedback. The best wireframes are also interactive, allowing for more insightful testing of how the design actually works.

For example, Airbnb is a travel website.

Its singular purpose is to help people travel by finding great places to visit and great places to stay. That’s how they make money. Everything on their website is optimized for that goal, from the style of their header to the way they display their listings.

Content is the heart of design. People use products and visit websites for the content not because they want the design. And when you wireframe, you allow yourself freedom to experiment, fail, and improve the structure of your most important design asset.

Timeless UI Design Principles

Before we dive into the wireframe and mockup design exercise, let’s first deconstruct how Airbnb’s website works.

1. Bring Attention to Stunning Imagery

When you’re thinking of a place to travel, you’re probably not thinking of your travel itinerary or your rental car information.

Whatever you’re thinking of, it’s likely visual. Pictures of where you’ll be staying. Images of all of the cool sights to see. When you want to travel, you’ll want to see pictures.

That’s exactly what Airbnb did on their website. Every element is highly visual.

All of the content, meaning the house listings and suggestions for places to travel, prioritize images over text. The picture frames take up most of the space, leaving a couple of bold words and a button aside for the user to act on.

The entire header is a video of Airbnb travellers experiencing different cultures and environments around the world. That’s what people want to see in a travel website. They don’t want to just fill out some plain text forms and book a home. They want to travel while they’re planning to travel.

Purposeful imagery is always more powerful than mere words.

2. Simplify Your Content

Unfortunately for people wanting to travel, the process is often very complicated.

You have to scout out the places you want to visit, decide on your trip’s location(s), find a place to live, plan at least some of your time there, buy plane tickets or plan a driving route, and so much more. It’s just a big hassle.

The last thing anyone wants to add to their travel experience is more complication.

Airbnb’s website cuts out all other distractions from their page, leaving only the most relevant pieces intact. There’s a simple bar for very simple travel data inputs, a button for hosts, and a clean, neat-looking list of listings for you to browse. There’s white space on either side of the listings, not ads or any other unnecessary information.

The fonts stand out against their backgrounds and the words and sentences are relatively simple language. Rather than endless descriptions of each site in the feed of listings on the front page of the website, each content block is a simple picture and a bold name.

3. Emphasize the Most Important Functions

Above all, you want the most commonly used functions of your website to be the most easily accessible.

What do people come to your site for?

For Airbnb, people mainly come to find housing for travel. That’s why the biggest, most noticeable call to action element on the website is the booking details bar in the center of the front page. The “search” button is colored pink-red to stand out, and a black transparent bar crosses the background behind the call to action to emphasize the call to action element.