Skip to content
TingYao3 edited this page Oct 29, 2018 · 3 revisions

Design layout

We have looked at current trend for different UI design by going through the popular design on Behance (behance.com). There are a few design layouts that incorporated good visual elements and amount of contents on each screen.

https://www.behance.net/gallery/65252599/Letundra-App-UIUX.

Letundra app is an application that allows users to track their personal flights. It has many additional functionalities like immediately inform users if their flights get cancelled or delayed. The amount of presented information on each screen is well-considered so that users would not have any problems with monitoring the information on each screen. The chosen typeface is also a sans-serif typeface which is really easy to be read on screen and the different font sizes have a really good hierarchy to the whole application. One of the current trends for UI design lately is gradient colour which has a really nice effect but not overpowering to other elements of the application.

https://www.behance.net/gallery/50002525/Travel-App-UXUI-Design

Travel app is another example we took a look at. Travel app is a very simple but concise application with a few important functionalities such as searching for travel guides in different cities, searching for suitable accommodation for the trips or estimating the overall cost for the whole trip. The overall layout design follows the flat design trends where all icons are well-designed and very consistent to the whole design. The colour scheme is light blue colour. While blue colour is a very common colour in UI design due to its neutral colour and variation in shades and highlight/ shadow, however, the design for this application still did a good job on using a really slight gradient to add more effect on the background colour but not too dark and stand out.

Tips for design a better design

This is one of the articles talking about improving your UI design to improve the interaction and engagement betweens users and the application. Link: https://webflow.com/blog/10-essential-ui-design-tips There are a few tips we have learnt from this

  1. Set expectation for users:

For instance, we need to place the designs in order to inform users about what would be results when they clicked on some buttons. Maybe it will add an item to cart or checkout, let users know before hand will increase the times and chances users click on that button

  1. Anticipate errors and mistakes:

If users are new to the application, it is easy to make a mistake. However, we need to provide rooms for errors correction by first predicting the types of errors users would make, how would they react to it and what would they do to fix the problems. By matching our design to their mindset, it will help to increase the engagement to the whold experience.

  1. Give feedback fast:

As the screen size for smartphones or tablets are not really big, it would be easy for users to have a whole control over the application and what is happening on the screen. After users click a button, we need to return with a feedback. This feedback can be visible or invisible, however, it must have a message on it. For example, if users are given a list of interest to choose from, they might not know that they can choose multiple things from the lists. After they make a first choice, nothing will happen so that they know that is not the limit of the selecting. It signals them to choose a few more interest or if they don't want to, they can go ahead and go to different pages.

  1. Make your interfaces easy to learn

There would be many people with different knowlegdes about mobile application. Some people can get a grab of this application quicker than other people. However, we need to consider our target audiences and research on how to make the appljcation as accessible as possible. If the commands or instruction are too hard to learn, users might consider not going back to the application. Because of that, the application must be fast to learn to provide a better experience for users

Clone this wiki locally