8 major tasks in UI/UX development

This article discusses about the different tasks will be done by the front-end or called UI/UX developers based on my experience these few years; You will be interested if you are a front-end developer or want to develop a better user interface for your App;

front-end designer

1. Using the built-in components

First of all,  we need to familiar with the UI Library provided, for example UIKit in iPhone, Bootstrap for Web and apply them to build an interface;
Here are the questions to check whether you know it well or not:
  • What kind of UIs available and not available in the library;
  • When and how to use those built-in components
  • How to customise the style (font, color, spacing, alignments) of the components:
From me, I usually write small tests to understand the behaviour of the component and learn how to customise it;

2. Layout the UI components

Next task is combine the components to form an interface, to do so, we need learn the layout facilities provided by the system;  There are different kind of Layout handling to help us arrange the components; For example, Android provides RelativeLayout, LinearLayout and XCode provide an interface builder for us;
To do this well, you need to learn about the Interface building tools to help you preview the UI you built;

3. Develop the UI flow

After building up UIs, the next important task is to glue them together; We need to develop the flow between different views; For example, flowing to main page after login or register; When an error is happened, popup an alert;
There are different kind of way to handle, here are those I worked before:
  • Using Tab Bar
  • Navigation View (Switching entire view to another)
  • Popup Full View (A view covering the window)
  • Popup Dialog (A small view showing on top the current view, the area outside the dialog will be the original view)
About UI navigation, you can read the App document below:

4. Adding animations

Animation can help giving the user more attention; Especially you are developing mobile apps, we need to make the screen more clear and neat, therefore, we need animations to give users feedback; Also, it will be more decent if your UI has animations; We may not need to work out at the early stage, but if you want to release your product, try to add some animations to improve the user experience;

5. Build different UX gestures

When we uses apps (either mobile or web), you may find that they provides different gestures and ways to help you input or navigate your information; These behaviours are usually required by the app designers or your clients when develop UIs;
Here are some examples of the gestures usually used by us:
  • Pull-To-Refresh
  • Long press to change position of somethings
  • Hide the Top bar and tool buttons when users scrolling down

6. Build the Custom components

For the built-in UI components, they provide the basic and generic functions for your need; However, they don’t work closely with your business logic or the app architecture; I usually build many custom components that work closely with my objects of my app;
For example: I am developing an social networking app and there is a feed view similar to Instagram and twitter; The feed view is made by TableView and TableCell; So I make a component called “FeedTableCell” and It receive the Feed object, which contains the information posted by our users, as the input and show the content properly in the TableView.

7. Deal with dynamic content

When we develops User Interface, we need to convert different kind of data into a displayable form. However the data is not as regular as you want; For example, TextView need to handle texts with different length, different language, ….; ImageView need to handle images with different aspect ratio;  So this task is to make sure the various kind of content are display correctly in the User Interface.
For me, I will make mock objects for different cases and set them to the UI components; Then check whether they are displayed correctly or not;

8. Deal with exceptional cases

Exceptional handling is usually being ignored when we develop the UI interfaces; The exceptions could be no result for your list, user not connect to any network, … ;
As a front-end developer, we need to work with the designers about this issue when they forget to do so;
You can do this creatively and cheer your users up when they facing the exceptional scenarios;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s