Challenge 2: Wireframing
Our second challenge for Ironhack UI/UX Bootcamp, was to create a wireframe of our desired application. A wireframe is “ a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.” (Wikipedia)
I decided to work on Spotify as it is one that I use daily and enjoy using. It will help me understand why the app is designed the way it is to help people navigate their way to find new and old music. The app is minimal in design, keeping things simple and easy to use.
The flow I chose to wireframe was: main search → recent searches → Album → artist → song
App inventory:
- Text fields (Search)
- Toggles
- Buttons
- Icons
- Images
- Progress Bar
Once I had finished studying the app pages, I sketched out a lo-fi prototype. This would help me in the wireframing stage. I could assess which pages had the same elements, meaning I could create components in Figma to speed up the process and make it easier.
Once the Wireframe was done, I added prototype actions
Here is the link to my Prototype.
https://drive.google.com/file/d/1cyNFot2YFue5b78-NVZRKA1YelSSBpFI/view?usp=sharing
This task was fun and interesting to see how such simple elements make up a popular app (maybe not the most popular company though…) On my third day of using Figma, it is already quite easy to use. I really enjoy the straightforward and logical features it has.
