Recreating Airbnb's website
If you are an animation fan, have you ever thought how fun it would be if you could actually rent some of the most iconic animation houses for your vacation? ✈️ ✨
Now introducing... an adapted version of Airbnb’s website. 🙌
Goal
To practice my UI design skills, I was challenged to recreate a website or app in Figma, and then bring in some creativity to customize it, add extras, and basically “make it mine”.
I decided to go with Airbnb because it came up a few times in my search as having a good UI, and I already knew the platform and liked its brand style and usability.
To narrow it down, I chose to recreate 2 website pages, both on desktop and mobile: Homepage and Single Page Listing.
Process
To make this recreation as legitimate and accurate as possible - and since I couldn’t find a free matching font family to the one on their website - I searched for the most similar font and opted to go with Euclid Circular A.
I then used Google Chrome’s inspector tools and the WhatFont browser extension to check and copy the colors, sizes, font weights, spacings, and icons from the website, and create all elements in Figma.
Piece by piece, the screens were becoming more complete as I began to add each element to the Figma frames. I focused primarily on spacings, sizings and styling, leaving dummy content to be replaced later on for texts, images, and some icons.
Personal touch
By this point, I had my Airbnb recreated screens finalized, and despite the unofficial font, they turned out very similar to the actual website.
Now it was time for a creativity call-out 🎨✨
I did a brainstorming on what kind of content (texts, images, icons) I could add to the screens. My winning ideas were:
Event places for team building
Airbnb for pets/animals
Iconic movie/TV houses 🥇
It would be so epic to showcase some iconic houses like Carrie Bradshaw’s apartment from Sex and the City, the Scarface mansion, or even Walter White’s home, but..... It turned out to be very difficult to find good quality images that had the same style as Airbnb house pictures and without the characters in them! 😭
I then had the idea of using iconic houses but from animated movies and series!
The image search was still not easy but I had plenty more options to go with.
*Many of the artworks depicted in this case study are from incredibly talented and independent artists and creatives. References in the Acknowledgments section.
After I made a selection of the images I could use to insert into the design, I then searched for information on the actual houses and properties from the movies and series, adding some fun references.
I also had to create some icons from scratch for the categories railing on the top of the homepage: Magical, Underwater, Families, and Haunted.
The rest of the icons are Airbnb originals.
Extras ✨
Host info under each listing card
Popular locations section
For the single listing page, I decided to create Bojack Horseman’s house from the series, and asked ChatGPT to help me with the copywriting:
Write the house and host descriptions
Write the reviews
Give me a list of amenities
Conclusion
This exercise ended up being very fun but also insightful. Recreating a well-developed UI like Airbnb’s allowed me to practice my design and Figma skills.
It was interesting to learn about their styling patterns and rules, and what changes they did from desktop to mobile. Their brand was very simple and didn’t vary much on the colors, font sizes, spacings, and sizings, etc, which made it a lot easier to get a professional, clean, and beautiful result.
_ _ _
If you enjoyed this case study, drop a like! 🕺
You can also check other works that I’ve done over the years, and feel free to contact me on my social platforms if you’d like me to help with your projects.
Thank you so much! 🫶
🔗 Behance
Acknowledgments
Disclaimer 🙅♀️
This is not an official Airbnb website version.
All images for the listings and hosts are taken from independent artists/creatives or even from the movies/series themselves.