A Quick Guide to Application User Interface Design

app-design guide

To design an application, 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 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 on 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 breath and simultaneously put emphasis on the most important things proportionately.

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. 

Check out >>>  UI Design: The use of Colours and Shadows for better Hierarchy

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.

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 should be appetizing. Most users prefer their food garnished and beautiful.

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. 

Check out >>>  Paritie Co-working Space: Need office space in Niger State?

A style guide consists of guidelines created specifically to help you know the assets, how to use the asset and to know what asset is meant for that. It include; 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. What to consider while working on your visual hierarchy:

Making the right design decisions helps the interface serve the user as intended, one simple 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:

a. Making a UI element big doesn’t just put emphasis on 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 weight 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.

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

c. When there are many calls to actions 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top