3 things we need to analyse when getting the Mock Up screen

kencoder

mockup

When we are develop application, we may receive lots of Mock Up screen from the Design team or we will create them to help us design the program;

In this article, I will talk about what are the things or information we could discover from the Mock Up screen that helping us to develop our programs;

UI Construction

First of all, you need think about how to construct the User Interface (UI);
To do so, we need consider two things, which are “Components” and “Layout”

Components:

Components are building blocks inside your User Interface; When we got the Mock up, try to identify the components inside the views and think about how to use or make them;
There are three kinds of components you will use:
  • Built in component: The building block provided by the SDK; For example, button, label, etc;
  • Custom component: A component built by yourself; For example the sub view displaying  tweet in the Tweet Feed view;
  • Third party component: Similar to the custom component, but built by others; For example, CircularImageView, an ImageView displaying image with a circle mask;

Layouts

Layout is about how to place the components in your user interface; The simplest approach is using absolute positions or building with the provide interface building tool;
There are others approach to layout the components:
  • Using a Table
  • Using a Scroll view (vertical or horizontal)
  • Using Tabs
  • Using Grids
Different system provide different layout utilities to you; If the provided facilities not fit you, you may need to seek the code in the open source repository;

UI Behaviours 

Beside getting the look-and-feel of the User Interface from the Mock Ups, another important information we need to analyse is what your UI will do when there are events from Users or the System, which is called the behaviours of your UI;
These are some examples:
  • When an user enter password in the text box, warning is shown when he typed too many characters;
  • When an user press “LOGIN” button, a progress indicator will show up and wait for server response;
  • When the LOGIN response is just received from server, bring the user to the main screen;

Logic Behind

After you are clear about the front-end and how it react with the user or other events, we need to think about the logic behind; This is the most challenging part of making an User Interface and you may derive lots of sub tasks or problems after analyse the detail of this part;
When analyse about the internal logic, here are the things we can consider:
  • The data which is displayed by the UI;
  • The data which is used internally;
  • How to get those data and How is the data be produced or calculated?
  • What are the API will be used by the UI?
  • Which UI will be switch to and when will this happen?

Last Comment

When we received a requirement specification, we are hard to dig out the detail from the bullet points list of requirements; However, when we have the Mock Up, we can dig out more detail about what are things to be done in the Front-end (User Interface) or Backend (Server API);

So before you start coding, take a look and take some note from your Mock Up screens;

Leave a comment