A wireframe exercise
Learning about wireframes as part of my design bootcamp
Application design has been evolving throughout the years;- where some are becoming more elaborate, others becoming more simplistic. One thing that has not changed is the work designers have to do prior to the final design of the app. It is easy to get carried away with pretty images and icons and lose sight of the functionality of the application. So, before we make it shiny, we have to get back to the basics. This is where wireframes come in handy.
Wireframes
Wireframes give a simple visual representation of how the flow of the app or website you are creating will be. The keyword here is simple; that is why wireframes should be done in black and white and with just enough detail for them to be understood by someone else, without distracting from the goal (creating the skeleton of your interface).
Even though the key is simplicity, for new designers (like me) it might be difficult to find the right balance between making them quickly, what should be included, and knowing where to hold back on the details.
Creating wireframes early in the process saves a lot of time and budget, as well as help the client see the project at an early stage.
The Challenge
To better demonstrate the process, I will be “reverse engineering” a popular app showing the Interaction Design and User Flow. For this, I have selected to work with Medium mobile application and show the user flow for finding a UX related article and highlighting part of the text.
The user flow
Above, you can clearly see the breakdown for the screens as well as the user flow displayed between the wireframes. To make it more clear:
- The user would get to the landing page when opening an application where they select the “search” icon.
- Here, we see Ux as the first suggestion and have no need to type it in.
- When selected, you will be directed to the UX related board with multiple articles. For the sake of this challenge, we selected the second one.
- The page will open with the selected article. After reading it, you have decided the information to be important and potentially of use in the future and decide to highlight it. For that, you need to click on the text.
- A small window will appear in front of the text with several action options. As we want to highlight it, we chose the first option.
- Once clicked on, the window will disappear and the text selected will be highlighted.
Below, you can find the interactive prototype.
The Learning
We are so used to thinking in colours and pictures that sometimes taking a step back to black and white, sticks and dots might be a challenge. However, it is important to be able to do that to understand the structure of the page and rule out unnecessary bits that may hinder the user interaction.
