Challenge #2. Wireframing
I really enjoyed doing this exercise, especially in the part of creating the prototype.I have investigated how the prototype part of Figma works so that the user experience is like in the real application. And about wireframing, it’s been quick and easy for me, plus I’ve had fun doing it.
In this challenge I had to reverse engineer an application (the same as in Exercise 2: Sktech Practice) and create a wireframe version based on some screenshots. I had to recreate a task that a real user would do.
In this case I chose Twitch, an app very similar to YouTube where you can watch your favorites games played by the most popular streamers on live. I use this app regularly to watch esports competitions or for a chilling time.
The current task that I took for the challenge is a game’s search and a games’s stream interface.
First of all, I drew the Lo-fi warframe from the app and defined the task.
- -The first screen you see when you opens the app is the Following page, where there are the the categories and the streamers that you follow at the same time that indicates you who are on live or not. To search something the user have to click on the top right corner.
- The search screen appears with its respective keyboard and the most recent searches.
- And when a search is made, the game or the streamer show up with its icon or the game image.
- Clicked that button we are in the game’s screen where there are a list of the streams about the game and information about how many viewers and followers the game has.
- And the last screen is a broadcast of the game with the chat where you can interact with other viewers and with the streamer.
Done the above, I made some screenshots of the task that I will use to make the Wireframing on Figma.
And here is the end result where you have various hotspots like sliders, buttons, and components that delay in and out.
I have loved doing this challenge and learning how to make prototypes.
I have also used a lot of material from the IronHack kit like icons, boxes and buttons.
I have had problems because when looking for the size of my mobile I was wrong and I did it at a much larger resolution so components such as the keyboard I have not been able to enlarge it and I have had to create it myself.
But like everything else, I’ll keep it in mind for next time!
