Wireframing — Treatwell app
As I student of UX/UI design I'm learning how things work in this new path. My aim is to give some inspiration and tips for those who are starting in this path or have any curiosity about it.
First things first, as I learned in this session, many things we learn by doing. Wireframing is not different. I must confess that for a Graphic Designer is a bit tricky to keep things only Black and White — but yes, wireframing is all about being simple, so we can focus on the structure first and leave the colors and other elements after going through all the process of testing to see if we will keep this structure or not.
First tip: save time!
For time sake Ironhack has a simple starter kit where you don't need to reinvent the wheel for starting your wireframe process. You can try do download any kit of your preference.
After that you can start your journey by making a selection of screens you need to do the wireframe: do you need a login screen? Maybe a booking selection. Write down all you need for making your app user friendly and start by doing a sketch of what will look like. Think about the structure, where should the buttons be? Use a notebook or start by sketching on Figma or any other tool of your choice. In my case I took screen shots of an app to make the reverse logic: transforming it in wireframes.
For my exercise I choose Treatwell. An app that helps people to find beauty related services nearby them. I personally never used but was quite curious to see how it looks like.
It was interesting to observe how the gap between what it's on the blue print, meaning the wireframe and what comes after — the ready UI screen. In this exercise I could learn about the position of the buttons, the logic behind the screen orders and how important is to be user friendly so when using the app you can intuitively know where to click and how to use it without complicated instructions.
I highly encourage you to try this with different apps of your choice and maybe you can even find out a better solution for how the content is placed and where. With that you can improve your skills and always learn more. Get your tools ready!
