After some courses and tasks in UX/UI design parts, I started Figma which has become one of the most essential programs in UX design. Thanks to this program, I was able to make beautiful features for UI and furthermore I could create wireframes and prototypes.
This time, the assignment was to create wireframes, according to the flow of the selected application that I want to work on it with my preferred design tool. Thus I chose Figma to realize wireframes and prototype.
So before we begin, what is wireframing?
Wireframing
Here is an interesting video of a paper prototyping of wireframes
Wireframing is a way to design a website or an application service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys.
Briefly, Wireframing shows how the flow of the app or website. Thus, the key word here is simple which is why wireframes should be done in black and white. After learning about wireframing, I faced the 2nd challenge to analyze the flow of an application and build wireframes. For this, I chose one of my favorite applications, Youtube Music
Youtube Music
YouTube Music is a music streaming application developed by YouTube. It provides a music streaming service like other apps, but what’s noteworthy is that it allows users to browse through songs and music videos on YouTube based on genres, playlists, and recommendations
What I noticed was its recommendation system which is based on user’s information attained via Youtube. I wanted to analyse the wireframes to look up how the application creates the flow of recommending songs and musicians that suits for users.
So when a user opens the 1st page, it shows selected lists automatically generated by Youtube. It could be lists of genres you listen to often or lists of events or moods of that moment. If the user selects one of the recommended lists and click it, it brings to 2nd page that the user can see the music currently playing and the songs in the playlist. If the user likes the current music, the user can click it to see detailed information like on 3rd page. And here this page you can see ‘Up next’ and ‘Related’ buttons. The user can click ‘Up next’ to scroll through the songs on the current list. If the user click ‘Related’, it shows recommended albums and music related to the song being played.
After analyzing this flow to help users discover music and artists, I have built the following wireframe.
Wireframes & Prototype
According to the five screenshots we’ve seen before, I made wireframes consisting of only black and white colors. I set black as the background color same as the application preference. The stream of wireframe was organized according to how users discover new music from the first screen.
Click on the link below to see a prototype produced by the Figma !
And here’s both the wireframe and the actual version.
Through this assignment, I thought there were many similarities between the UX design process and architectural design. Visual perfection is important, however the design of the structure and its interaction with people, those can be more important than visual aspect.
