Learning from the best: Airbnb

Airbnb is quite an inspiring website: sleek, clean, tidy, and without unnecessary elements on the page. In our last Learning from the best segment we looked at the Digital Ocean website; today we’ll highlight some nice Airbnb design features.

The header

The header is a thin strip on top of the page, stretching the page’s full width. The reddish logo lays on the left corner, quite visibly. Then a search form and user related elements. The font colour is light gray and there’s an icon for every link, adding familiar hints to them. A small round avatar adds some colour to the header and personal feel to the site.

The title

The title uses more the abundant white space around it more than a larger font size to stand out. A subtitle in much smaller font adds context to the page. The background is white as the header, whereas the footer and the marketing sections have a light grey background, followed by the dark background in the footer. It is very interesting how they avoided the bigger contrast going from a white background to a black one, by placing a large section in grey background in between.

The form

The form is one of the best in the market. Tidy, playful, uses just the needed elements. The boring and impossible to style normal HTML options are replaced with boxes decorated with light green icons. The Home Type options go even further: they replace what would normally be a select element with the boxes, by displaying the most common three options, and then grouping the rest under the Other list. The boxes have plenty of padding, a style used throughout the site.

The marketing

Below the form there is some marketing text, neatly organised with bullet points in form of stronger green coloured and bigger icons. Below the icons comes the title, followed by the text. Interesting decision to add the marketing section here, probably they thought it could help users better understand the site.

The footer

Last but not least comes the footer. Different to the rest of the site, this area has a dark background with patterns of hand-drawn hearts. Beautiful! The links are neatly listed in unequivocal white colour; the completely transformed drop down lists use padding and the dark background to stand out nicely.