What is hidden in the Airbnb app?

Airbnb Home Screen (Screen Shot — left/Trace — right)

I just started my first winter break as a freshman and started learning Sketch. After completing a Sketch course on Udemy as a first step, I traced the home screen of Airbnb app since Airbnb is my favorite company and I love their concept and design. I tried to learn something from this practice and here is what I, as a beginner, found through tracing the screenshot.


Font

First things first? The only font they use in the app is Circular with the font size ranging from 9 to 24px.

This is a Sans Serif Font.

Sans Serif Fonts are something that we see the most as we are in the digital world. This modern and rounded font is easy to recognize and gives a sense of welcoming like the company’s logo, the Bélo, or the message of “Belong Anywhere.”

Bélo via Airbnb’s Media Assets

The font might have been chosen for the company’s purpose of making their platform universal:

“Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.” — Airbnb Design Blog

And the font sizes of section titles (Explore Airbnb, Homes around the world) are 24px, which are the biggest size on the screen.

Color

#FF5A5F

The color of Airbnb’s logo appears only when a tab selected. And personal this was a bit of surprise because I associate Airbnb with the color, #FF5A5F.

The dominant color is white.

And you will see a lot of green-ish colored elements in the app.

The hex is #4A8086 or #4B8086. I couldn’t pick. Any ideas?

Another Screen Shot

Also, looking at each home and experience, you’ll notice that the colors of the first lines are not unified changing their color depending on the beautiful images above the first line. The colors are well integrated with the images and creating harmony.

Height

Seems like there is a rule here.

Every height is a multiple of 4 — except the bottom part of cards of “Explore Airbnb.”

Width

Trace

No rules here?? (Afraid of having made mistakes)

Spacing

Trace

Here is the multiple of 4 rule again!

Applying the rule to height and spacing may make the screen neatly organized.

Also, the margins of 24px are on both side of the screen, which make the contents look well-arranged.

Border

Trace

There is a consistency. All borders are made up of 0.5px.

And the border of tab bar is thicker than these. This subtle difference allows the tab bar to stand out as one essential function in the app.

The corner radium is ranging from 2px up to 4px.

Shadow

Airbnb Home Screen (Screen Shot — left/Trace — right)

The search box and each category of “Explore Airbnb” have a shadow. I think that is because these two elements should grab the users attention first. The users start exploring what they want to find by typing something in the search box or by selecting one from the big three categories (Homes, Experiences, Restaurant). Also, these two types of shadows are placed a little bit down from their parents elements to make them look more three dimensional and floating from the ground.

And it seems there is another shadow coming from the very top of the screen and this also helps the search box stand out among all other stuff on the screen?

Compared with the one without the shadows, the difference is obvious.

Left — with shadows/ Right — without shadows

Throughout the process of tracing the home screen, I found many rules and context behind the selections of colors, thickness and ext…

And these are something that I would not have noticed and surely what makes the app one of the most accessible and friendly apps in the world.

I want to continue the study on what provides the users with the best way to accomplish their goals using the products.

I would be glad if you find any mistakes or misunderstandings and report them to me. Any feedback would be appreciated. (Where should I look at etc…)

Twitter(@kngmnaa1e)