This article is for:

The article is aimed at the customers and beginner
designers.

This article is about:

The article summarizes the work process from the concept to its release.

Interface design begins with a definition of goals and objectives of future web/mobile application. The interface should have the following characteristics in order to help users achieve their goals effectively:
— Its purpose should be obvious to the user;
— Users need to understand the way of interacting with the interface;
— The process of interaction with interface should be predictable.

Work on interface design may be divided into several stages: The interface should have the following characteristics in order to help users achieve their goals effectively:
Gathering of requirements and analysis;
Development of application scheme (wireframing);
Visual design;
Prototyping;
Interface animation;
Style Guide.

Gathering of requirements and analysis

This phase may be divided into several stages:
— Filling in the brief;
— Identifying core functions of product and competitor analysis;
— Drafting of user scripts.

Filling in the brief

Brief is a questionnaire with key questions on the project which will provide:
— Information about business or customer's activity;
— Basic information about competitors;
— Information on the target audience;
— Suggestions on visual design and application functional;
— etc.

Identifying core functions of product and competitor analysis

Market analysis and the analysis of the competitors should be conducted, identification of their weaknesses and strengths is necessary. This shall allow to identify suitable concept and final capabilities of the application, also it shall allow us to avoid errors and make a right working plan on the next stage.

User scripts

When designer has enough information about a future product, it is necessary to think about user scripts that user can perform within the interface - the way he will interact with the interface. For this purpose, it describes all steps that need to be taken to achieve the goal. For example: press on the "Login" button, login, select a product, view information about it, click on the "proceed to checkout" button etc. Once the list of all steps for each task has been compiled, we will be able to understand how quickly and conveniently the user achieves the goal by in terms of interaction with interfaces. After well-thought-out user scripts it is possible to get to work on wireframes (schematic mapping of pages).

Post #1 Preview Image

Development of application scheme (wireframing)

This phase allows to reveal hidden features and weaknesses of the application work at the early stages, it will allow to save time during work on it, , and hence the costs. Well-thought-out product begins with the scheme of its structure on the basis of which site layout is created. At this stage, it is also user interface and site functional are thought out. There are two types of wireframes:
— Low-fidelity wireframes;
— High-fidelity wireframes;

Low-fidelity wireframe

It could be some sketches on paper or on a dry erase board of main pages with demonstration of the main blocks of future web site or mobile application .

Post #1 Preview Image

High-fidelity wireframe

The result of this phase is schematic mapping of all pages detailing all blocks, taking all indents and sizes into account.

Post #1 Preview Image

Visual design

After collecting the requirements and analysis, the work on the visual design begins. Normally, 2-3 concepts are presented. Often the final result is a combination of several presented concepts. At this stage, all previous phases are combined. Prototypes turn into unique visual style and communication approach, filled with a content and the product acquires its final look. A good practice is the teamwork of designer and developers, it allows to get the optimal result for further development. Work on visual design begins from the homepage. When the homepage is ready and approved, received visual solution is replicated to the other pages and elaborating the details begins: icons rendering, ordering photo and video shooting (if necessary), content preparation.

Post #1 Preview Image

Prototyping

Interactive prototype is an interactive model of product. Visually, the prototype looks like a complete draft: it is possible to navigate between pages, to scroll, to carry out the user scripts etc. Interactive prototypes give an opportunity to test interaction between user and interface, similar to the final product. Having reviewed this process, it allows to improve application prior to its development, which in turn would enable save the time for development.

Post #1 Preview Image

Interface animation

The main purpose of animation is to make the interface more convenient and user-friendly.
Careful analysis of the target audience, testing of ideas and concepts of micro-interactions can increase usability (ease of use). Properly used animation, in interfaces, can be one of the ways to significantly speed up interaction, make it more natural, pleasant to use and more stylish in design.

Post #1 Preview Image

Style guide

Style Guide is a set of rules which regulates the use of interface elements for future modification / expansion of the project. Style Guide is an important final step in interface design developing of new product. The Guide should describe the use of : controls (buttons, radio buttons, check boxes...), shapes, typography, indents between elements etc.

Post #1 Preview Image
Stanton Lab Team Member Photo

Dmitriy Rusan

UI/UX Designer
Stanton Lab Team Member Photo

Volodimyr Dziuman

Senior planner Project management lead
Stanton Lab Team Member Photo

Volodimyr Zarichniuk

Project manager

Also read:

Work laptop php vs ruby

WHY RUBY? ARGUMENTS IN NUMBERS!

Not long ago we had a potential project and the choice of technology has become an edge. In software development we prefer Ruby language freymorku Ruby on Rails (RoR), but the customer the impression that professionals working with Ruby is very small and if necessary, they will be very difficult to find ...

Read more