IronHack Prework, Challenge 2- Wireframing
Have you ever heard the phrase “the simpler, the better”? That’s the rule in the wireframing process (and sticking to it it’s harder than you think).
Welcome!
In this challenge, I was asked to choose an app to work with, identify a flow I wanted to work on, draw the user flow, wireframe the screens and build a prototype. All that while learning to use Figma and other valuable wireframing resources that I had never seen or used before. It was a fun learning experience, that’s for sure!
Before I present my project, I would like to give a short explanation on what wireframing is.
“A website wireframe is a visual representation of an app or website. It looks like a skeleton made of wires of what the actual content will be.”
The goal when creating a wireframe is functionality, focusing on behaviour and how to display certain information prioritising content. Wireframes are a simple way to display the size and position of different elements on a page, it’s usually in a scale of grey and shouldn't include much details (like typography style, colours, icons or images). Wireframes can be either rough sketches or more sophisticated ones created in Apps like Figma or Sketch, but always keeping it as simple as possible.
It sounds easy, less work for sure. But, for me, it was very hard to let go of the urge to make it all look good and tidy.
Wireframing Twitter
The app I chose to work with in this case study is Twitter. It is an app that I’ve used for almost ten years, in a daily basis, and can’t get sick of, so I guess they are doing something right!
Besides that, it’s interesting to see how the Twitter design is able to standardize a ton of different information in way that the interface doesn't feel or look crowded and tiring. Working in a way that makes the user navigate through the app in a natural and easy way.
Twitter is a social network, therefore it is supposed to make people connect with other people. That’s the main reason why i chose to work on a flow that the user starts following someone that liked one of his tweets, going from the home page to the notification center to the tweet to the likes on the tweet and, finally, the person that liked the tweet’s account where the user can hit the “follow” button.
The screens shown above are screenshots of my own twitter, the content of the tweets were taken-out because it wasn't the focus of this study.
The home page is divided in blocks of information, divided in a very gentle way, with just a fine line between tweets. It’s a very effective way to keep the interface organized and “clean”. Every tweet has the same template, with the username on the top, the profile picture on the left and the like, retweet and comment section under it. When you go to the notification center, the username image and icons is what makes the app look visually organized, having it all straight up with each other.
In the Twitter App, the user only has to click where he wants to go to get there, if the user wants to visit a profile he can click on the username or profile pic to get there, is he wants to follow someone new he can just click on the follow button. It is simple and intuitive!
Here are the wireframes I created:
Learning about the wireframing process was a very important step in my user experience design learning path because it made me realize how important it is to step back and slow down to fully understand why and how every element of an interface is designed. It also made me realize that the goal as a designer is to make people understand, it has to feel good and feel right before it looks good, and to do that it is important to cut out every unnecessary information, because having them will only distract the target from understanding what you are trying to communicate.
Also, i was able to get more comfortable with Figma and learned how to use the Ironhack wireframe kit and other icon plugins. I really enjoyed this project and feel a lot more prepared the UX/UI design world after completing it!
I will leave an image where is easier to visualize the wireframe in comparison with the screenshots and the link to the Figma prototype i made!
Link to the prototype: https://www.figma.com/proto/BuB1g3rBlO0Ilm1lMh5cJq/UI-ex.2?page-id=0%3A1&node-id=20%3A9&viewport=291%2C219%2C0.19932939112186432&scaling=min-zoom&starting-point-node-id=17%3A662
Thank you very much, hope to see you in my next ux/ui adventures!
