A Quick Guide to App Design (UI)

Finished version of the case study used in the article

To design an app, it’s ideal to make proper research on what kind of app one wants to design and the target users of the app. The following are things to consider when designing new app ideas:

1. Start with a feature: An app comprises many features. How do you come up with those features? A feature is identified from the goals of the app and the goal is validated through user research. After figuring out what the goal of the app is, you will understand and get to know the supposed features of the app. It’s not ideal to design the whole app i.e all the features at first. It is preferable to design a feature first, one feature at a time iteratively. To design a feature, you have to think about what’s going to be on the interface of that feature. For instance, you are designing a feature to let users place orders in an app, the first thing you need to consider is the goal of that feature, which is “for users to place orders” right? Then think about what could help the users achieve this goal. From there, you can figure out what will be on the interface. For this case study, the interface will need:

  1. The item they are ordering (image)
  2. The Items Name
  3. A field for the user’s preference of the item
  4. A brief description of the item
  5. A button to order the item
  6. The ratings on the item
  7. A field for the quantity of item the user wants to order
  8. The Price of the item

After that, you can come up with a sketch of how the interface should look. While doing that, it is ideal to focus on the hierarchy of the content i.e. the most important things and their position on the interface. You don’t pay attention to the colours or the typeface at this point. It is preferable to use grayscale as it will become easy to help the design breathe and simultaneously emphasize the most important things proportionately.

A greyscale view of the supposed feature you are trying to design
Greyscale

At this point, you have seen how the interface looks. Now, you need to test it and think about the next feature. What’s going to be on the next feature? For you to know the next feature, you can use user stories ( a scenario where a user is trying to place an order). What is the next thing the user would do after buying an item? And that’s how you come about the next feature and the next one after that until the app is completed.

To come up with the colours and typeface, one has to consider the target users, their personality and their goals. I will Use the food ordering app above as a case study here as well.

The goal of the user is to be able to order food right? Think about the colour that’s going to be appealing and appetizing, think about a typeface that is modern and approachable, I mean “food” is supposed to be approachable, appealing, seeing it should be appetizing. Most users prefer their food garnished and beautiful, right?

High Fidelity

On the interface above, you will find the typeface and colour meeting all the key points mentioned, the colour was inspired by tomatoes, most users don’t hate tomatoes. Colour psychology is really broad; It is going to be frustrating to come up with colours using that perspective, you could as well choose based on how different colours feel to you.

The typeface (font) used here is Roboto, Roboto is a san serif font. When you look at it closely, it is calm and approachable. You won’t find it so busy like you will imagine in a magazine or a fashion app. If this decision becomes difficult to make, you could check similar apps that serve the same purpose as your app.

At this point, you are clear on the features of your mobile app. Keep in mind that you have made some design decisions on the weight and variations of your UI elements.

Creating a style guide will make designing easy and limit your random decision making. This in turn will make your design consistent, uniform and faster, since there are a lot of fewer right choices, right?

A style guide consists of guidelines created specifically to help you know the assets, how to use the assets and to know what asset is meant for where etc. It includes; typefaces, buttons, text size, padding, colours etc its not necessarily created upfront, it’s more like designing with the mindset of creating a style guide so you will always include every new decision on the style guide.

2. Considerations for working on your visual hierarchy:

Making the right design decisions helps the interface serve the user as intended, one simple wrong button could cost the product owner a great loss. While working on the visual hierarchy of your app, it is ideal to note the following:

  1. Making a UI element big doesn’t just emphasize the element but could also make the whole design chaotic if not proportionately done. In some situations, you could use the same element size with different weights and light colours to emphasize or de-emphasize these elements. This could also be done in a situation where the sizes are right but the design still feels chaotic.
Wrong visual hierarchy with colours
Proper visual hierachy

2. Labels are secondary. It is ideal to design with the perspective that lets the content speak for itself. Secondly, it is preferable to not deemphasize labels when you know the users are going to be looking for labels.

Labels overused
No Labels (Contents speak for themselves)

3. When there are many calls to action on a screen, it’s ideal to not follow semantics. using variations could help, depending on the type of button, i.e. primary, secondary and tertiary. Emphasis should be more on the primary button than every other button while just a text could be used for tertiary buttons or simple text links.

I hope this will come in handy for you while trying to design an app, thanks for reading. Much love 💖💖

UI/UX Designer