Wireframing the Airbnb App (Ironhack prework: Wireframing)

Sandra Giraldo
2 min readMar 18, 2020

Wireframing is an important stage of UI design because it shows the flow an application or a website will follow at an early stage of design. Wireframes allow the designer to think about the different ways the user could go and how to simplify his navigation.

For this challenge, I chose to create wireframes for the application Airbnb not only because I love traveling, but also because I am a huge fan of their style. Simple, minimalistic and friendly. Their great design guides the user from the beginning to the end, and it takes a couple of minutes to book an awesome beach house on the other side of the world.

I decided to work in the flow of booking a place to stay because it is the main purpose of this well-known platform. I put together different elements from the wireframe kit I was provided with in my class, placeholders, toggles, buttons, and texts. Simple shapes such as squares, rectangles, and circles, helped me with the process of reverse engineering this application.

Wireframe of the Booking flow in the Airbnb App using Sketch links to prototype.

During this exercise, I thought about all the elements that were recurrent, essential and efficient in the application such as the back button, the navigation bar, the reserve option, and the filters. These elements guide the user and prevent him from feeling lost or confused. Wireframing defines the placement of all of these elements.

If you wish to see my prototype in action click the following Invision link 😊

https://invis.io/TBWGCAYWYP6

--

--