Insights & Interfaces: A careful deconstruction of Airbnb's homepage

Great UI/UX design doesn't have to be complicated. Clear, intuitive designs help to deliver natural user experiences that minimise customer frustrations and assists them in finding exactly what they want. In this part of our Insights & Interfaces series, we take a deeper look into Airbnb's landing page, breaking down exactly what makes it great and recreating the homepage in Figma.

A Visual Breakdown

Homepage Structure

We start with understanding the structure of the page. We can conclude that there are 4 sections that sit within this homepage. You also have a footer and a maps toggle which we will explore later. You can see that each section has a very specific focus, and have been given different sizes to organise the content through a hierarchy. From the bottom to the top:

1. A large section for Airbnb results.
2. A separate bar for filtering.
3. A navigation bar focused on search.
4. A secondary navigation bar that sits above the main one.

Corresponding Elements

Within these sections you have a cluster of elements that give context to each section. For example:

1. The results section is made up of multiple rows, consisting of 5 columns each. Inside each column you have a square image with rounded corners, a favourite button and a book like design which houses the profile photos.
2. The bar that sits above this section is designed for further filtering. You can see 15 icons neatly placed across the width of the bar with a small circle button for more options and a larger filter button justified to the right.
3. The navigation bar houses three grouped elements. The logo that sits on the left hand side, a search bar in the middle and a section on the right for user profiles.
4. The top bar has two grouped elements. A text box on the left and on the right a few text options and a play movie button.

Recreating The Homepage

We set ourselves a time constraint of no more than an hour and a half to see if we could effectively recreate the design. Here's how we got on.

Setting Up

‍

We began by creating a frame which was the size of a MacBook Pro 16 inch. You can pick any desktop size that you are comfortable with, we just picked this as it complements our hardware.

Section 1: Section Above The Navigation Bar

We selected the shape tool and extended it to match the width of the frame. We gave the shape some height and set the colour to light grey. We then picked the type tool and copied and pasted the text "Rooms and 50+ features" into the text box we created on the left hand corner of the screen. We incrementally adjusted the font to match the size of the original. We decided to opt for Inter as our font of choice.

For the second cluster of elements which sat in this top level navigation bar, we created a rounded rectangle and set the colour to dark grey. We found a free SVG icon for the play button and carefully aligned it to this box. We then created two separate text boxes for "Play the Rooms Film" and "Learn More." We noticed that these fonts were slightly smaller and lighter in terms of weight to the font to the left so we knocked these back and adjusted accordingly. We added a separator using the shape tool. We grouped these elements together and shifted them ever so slightly to the left to ensure that the margins from the right was symmetrical to the left.

Section 2: The Navigation Bar

‍

We duplicated the light grey box and set it to white, giving it a border only on the top and bottom of the shape. We set the border to a slightly darker shade of grey to help separate the elements. For the purposes of the project, we simply took a screenshot of the Airbnb logo and placed it into the project by selecting file - place. We don't really recommend doing this for your own projects as poor screenshots can cause issues with the container of the image when designing in Figma.

We then shifted our focus onto the search element of the navigation bar by creating another shape and setting it to white. We opted to create a rectangle and with the option to manipulate the corners, we increased the radius which gave it a rounded look. We copied the text from the section and above and pasted it above the rectangle to start giving the shape some context. We decreased the size and thickness of the font and created three separate text layers which included the words "Anywhere," "Any Week" and "Add Guests." We aligned these phrases against each other and centred the text respective to the rounded rectangular shape. We created new separators with the help of the shape tool and placed them perfectly to sit in-between the gaps of each phase. We extended the bar ever so slightly to make room for the search button. We found an icon of iconfinder.com of a magnifying glass, selected the SVG option and placed the icon on top of the red circle we had made for the button. We used the colour picker tool to match the colour of the circle to the logo design.

We created a text box for the "Airbnb your home" call to action and matched the globe icon with something we found on Iconfinder. We duplicated our search bar and decreased the size of it, whilst pushing it to align to the right. Inside this new bar we added a burger menu which was simply three rectangles, evenly spaced and grouped together and a grey circle which housed our profile icon.

Section 3: The Filter Bar

In a later series we will attempt to create the icons Airbnb uses for their different types of houses. For this project however we took a cropped screenshot of each icon and ensured that the sizing was consistent across the board. We created 15 respective text boxes which we evenly distributed across the filter bar. We took into account the right arrow button and the filter button when distributing these values. We then carefully went back to the text boxes and positioned each icon above, making sure that they were centred respective to the shape. This was probably the lengthiest part of the process and required a little bit of trial and error. We added the filter and arrow icons to the respective buttons and checked for any final alignment issues.

Section 4: The Content Area

We created 5 large squares and distributed them evenly across the width of the frame. We ensured that the boxes sat within the marginal constraints we had set the navigation bars on. We made our boxes slightly rounder and gave a lot more space in-between the sections to experiment with the design. Under the boxes we created a title for each house which we aligned to the left of the box. We then took the mock-up rating given and aligned that the right. We grabbed an icon of a star and aligned that to match the sizes of the fonts, however we pushed the star closer to the rating to create a direct connection between these elements.

We created 5 small circles, each in increments of 2px and had the last two circles slightly decreasing in weight. We aligned these circles, distributed them evenly and placed them on the top of the rounded squares. We found a heart icon of Iconfinder and set the outline to white. We carefully placed this in the top-right hand corner of the design. We then created the book symbol that is on each of the designs. We started with a long rectangle with just a stroke applied to the right hand side. We created another rectangle which was slightly larger in width and had rounded corners only on the right hand side. We added a circle for the profile photos and centred respective to the larger rectangle. We applied an inner shadow to the top part of the circle. We then grouped all of the elements and applied a drop shadow to them.

We grouped the elements together and by holding down command, shift and R we were able to quickly replace the subsequent sections to match the final design. We duplicated the row of items and added a footer.

We made sure that the footer, like all elements of the design sat within the constraints we had set. The footer was simply an off-white coloured rectangle that was aligned to the bottom with text boxes which copied the text directly from the original. We then created a small button using the shape tool and overlayed an icon of a map on top.

The Final Details

We found images that complemented the design we were trying to recreate and started to swap the placeholder shapes for them. This was relatively straightforward as all we had to do was select the element, select file, place and drop our preferred image directly into the shape. The shapes acted as a mask. We used images found for free on pexels.com to add the final touches to our design. And there we have it!

Final Thoughts

Over the next coming weeks we will be releasing our YouTube tutorials and how we took this process from start to finish. If there are any other landing pages you wish for us to recreate then email us directly on resources@rarepublic.co.uk