The design development process in 7 steps

In this article, I will talk about a phased design process, which I follow when working on an app. Design also concerns the understanding of the essence of product, its functionality, as well as planning, not forgetting about the end users. The design process consists of the following steps:

1. Create user flow for each screen
2. Wireframing
3. Clickable prototype
4. The choice of design patterns and color palettes
5. Creating a design
6. An animated prototype of the application
7. Transferring layouts to the developer

As an example, I will take the application “Telega”.  “Telega” is an app for organizing and managing your shopping list, which is always at your fingertips. Create list, put in them the goods that you need to buy, specify them quality. With “Telega” in the store, you will not forget anything.

Splash screen of the application “Telega”

 

User Flow

The first step is to find out what features you want to see in your application. After I got some ideas, I created a user flow. In a nutshell, this is a sequence of steps that a user takes to achieve an important goal. User Flows, in a nice neat statement, is a series of steps a user takes to achieve a meaningful goal. They are used to communicate the intended flow of a user through a product or a service (it could be through various pages of an app or website or through various processes in a service).

User Flow is very useful because it gives a good logical idea of how the application will function. I noticed that User Flow is very effective when it comes to communicating with a client. Non-design people find it easier to understand the format of the flowchart.

 

Wireframing

After I finished doing user flow for each screen, I started working with wireframes screens. There are two types of wireframes:

Low fidelity wireframes – are much faster created and they are a tool to facilitate team work on a project. These may be sketches on paper.

High fidelity wireframes – they are distinguished by more relevant content, specific font options and may contain more accurate information about the size of images and even the style of buttons. Here I play with shades of gray to show the subtleties that can be seen only by applying different shades of color, navigation style.

I most often make high fidelity wireframes in a Sketch, but if the application is not very complex in structure, then I make sketches on paper.

The wireframe of the mobile application interface

 

Clickable prototype

Next, I use the well-known InVision or Marvel application to create a clickable prototype. This makes it very easy to explain the interaction and navigation within the product before creating the UI and layout. It is also a great way to communicate with a customer.

 

The choice of design patterns and color palettes

This is my favorite part. A variety of color palettes to choose from. I will choose the ones I like and experiment with them. Colors create emotions and associations. Depending on the culture and circumstances, the meanings of colors may vary.

To simplify my task, I’ll give you some of the best tools for choosing color palettes

Color Hunt Here you can find beautiful color palettes

Material UI Colors Google’s UI Colors palette includes primary and secondary colors that can be used for illustrations or web development.

Coolors A fast color scheme generator for designers.

Paletton Color Scheme for Designers.

For the application, I chose blue because I associate it with calmness, productivity, professionalism, and credibility.

User profile screens

 

Design

Finally, I turn to use software to create a design. It should look realistic and pretty much like the real thing. There are many software development tools and design tools. I use Sketch и Figma.

Wireframing helps to start developing the project’s visual features. With the wireframes, I can move on to designing a conceptual logo and the application’s homepage or first few screen designs. To do this, take into account the wireframes and moodboard which was created after doing the research.

Logo design

 

First, I design a design concept. This can be represented by any volume, but I try to minimize everything to save time. Typically, the concept is represented by 3-5 main interface screens. In this case, this is the main screen, profile, archive, add a product, registration. After approval, the concept design is time for the design of all other screens of the interface. Design concept – this is an assumption what the whole interface might look like. When the turn comes to the design of all screens, then there is a finalization of appearance. The smallest details need to be considered in advance; things like entry fields, drop-down menus, potential mistakes, and lost page designs are all factored in at this stage of the process.

If the customer approves the design of these internal pages, I will start to customize the design for mobile devices and tablets. This is a fairly simply task as the overall style of the product has already been established and approved by the customer. However, more minor things should be evaluated at this stage, such as the look of the menu when it’s closed and which blocks should be shown in full or should be substituted by sliders. The behavior of forms and text blocks on the page must be thought over carefully. If the time to create an adaptive design isn’t taken, the final project will not look professional to users that use multiple devices.

I was pleased with the color scheme, icons, and overall layout. I went further and developed the remaining screens, following the same principles of design. It was a long, but incredibly fascinating process!

 

The design concept of the main screens

 

An animated prototype of the application

Often this stage begins from the moment the concept is designed and continues throughout the design of all screens. I use Principle for animation. It provides an opportunity to demonstrate the main interactions in a few simple steps. Well-animated interfaces will help the user understand the relationship between the two screens and prepare it for a smooth transition from one activity to another.

Transferring layouts to the developer

Before giving layouts, you need to make sure that we have calculated all the states for all screens. In order not to forget anything, it is good to make yourself a check-list of states. For each project, it will be individual, but you can start with standard things:

  • what the screen will look like if there is no content;
  • what happens if the internet goes down or is slow;
  • what it looks like for an unregistered user;
  • maximum and minimum text field lengths;
  • how long names are abbreviated;
  • the names on the buttons fit in all the languages we support;
  • where errors can occur and how they should look;
  • which items may be inactive.

In addition, we must be sure that our design will be displayed equally well on all available platform screens. 

To transfer layouts, I use the well-known service Zeplin. If there is an animation, then I show it on a GIF or video. 

0 Comments

Leave a Reply

You must be logged in to post a comment.