How to get familiar with analyzing a User Interface in form of an app?
Practicing with Sketch: Excercise 2 — Prework Ironhack
A Step-by-Step guide — Follow this and you are one step closer to understand why an app is designed a certain way or perhaps you create ideas for a better user experience.
1. Choose an app (e.g. your favorite)
My favorite day-to-day app is Blinkist. This app allows me to read one “book” within 15–20 min, split into 8–10 “blinks”. In a nutshell, Blinkist creates key messages of a book which may motivates me to try theories or encourages me to be more self reflected. Of course, the books (so called “blinks”) are according to my preferences that I chose in the beginning of my registration.
Ok, enough about me. You choose your app and let’s get you to the next step.
2. Take 5 screenshots of a user flow
You might wonder what a user flow is. It is actually quite simple. Ask yourself this question: “What does the user want to accomplish when using this app?“ Pick only one task and take a screenshot of every changing screen.
Let’s say he or she wants to listen or read the free daily blink.
3. Insert the screenshots into Sketch
Now let’s get down to the “nitty gritty“.
For overview reasons I chose one screenshot per page. But of course you can also import all screenshots into one page and create art boards right next to it. Sketch is really flexible to where your art board can be placed. You choose what feels more comfortable to you.
If you are new to sketch watch tutorials to know what shapes to use and how to create your icons and images. This whole process may take a while if you are a beginner. It might be time consuming but just keep going. A great help is if you download UI kits or separate icons, however you learn more if you try to create it yourself.
See my results of mimicking the Blinkist app
Screen 1 : Start page (after registering and choosing categories)
Screen 2 : Today’s daily blink giving an overview of content & the choice of text or audio
Screen 3 : Today’s blink is being read to you (listen option)
Screen 4 : Today’s blink text (read option)
Some tips while mimicking the app
Keep in mind to stay organized with the layers. Take time to group sections and give them names. This will benefit you in the long run. First you are getting used to this and secondly you will need it in the future once you work in a team anyway.
Figure out the font that the app is using. As you can see I had some trouble with that. The main font I did find, however the background image font and the blink text font was hard to impossible to find.
4. Review — What did we learn about the user interface while recreating this app visually?
While recreating this app I noticed the differences in the color choice, fonts, font sizes, leaving space and the used icons. As well we see a very simple user flow. But more about that in my next medium post about “The magic of wireframes.”
With the recreation I understood why the designer of this app placed certain information to specific places. The most vivid knowledge when designing is knowing what is the user goal and what the initial business goal is. Prioritizing these two points are key.
My Key-findings of this practice
- COLOR: The grass green and the dark blue of the blinkist logo are the main colors that are used in the app. The other color variations are some kind of blue and green. As well they mixed it with purple to draw attention and some icons and titles are black, instead of perhaps the dark blue that they have consistently used. A UI pattern is the choice of font size. For the user it is always clear where the main focus is.
- TYPOGRAPHY: The typography is mainly consistent. Using Cera Pro for headlines, buttons, links and footer titles and only changing the size or the type of the font. E.g. a bolder or regular version to draw attention to a specific content part. Cera Pro is a Sans Serif font and to mix it up a bit the designer choose to combine it with a serif font. But only for the section where you read the blink and little details where there are numbers used. I did not figure out which sans serif font it is. That’s why my screens 3 & 4 are not 100% the same.
- SPACING: The app leaves enough space and it does not feel too crowded. It is very well readable. However one minor improvement I do suggest, when you look at the screen 2 & 3 the title is showing twice. One as the actual title and behind it the background image which also displays the title again. This makes it hard to read and feels uneasy for the user. A solution would be to have an image without any font in it so the headline is easy to read.
My resolution of this practice
A very interesting exercise to analyze design choices meanwhile learning how to use sketch. I am myself just starting this UI/UX journey and I am still a beginner. Getting in the head of a designer helps to question the design choices. As well as asking myself how would I do it differently or is the design perfect as it is?
That we will figure out in the near future. If you are interested in learning UI/UX, download the program Sketch, it has a 30 day trial period and follow the steps mentioned above. Let’s see what you can learn from it.
Oh and one more thing, it won’t be boring ;)
If you like this article, please comment and share it with other beautiful like-minded people.
