What is the whole workflow of UI design?

digression

I think that designers need to understand the purpose of design in their work, especially if you do not do popular products, you can not use personal cognition, strong theme (such as game) or "trend" style to determine the goal. For example, the design of the old model Millet mobile phone, the elderly need what color? Does adding a style cause interference or a better experience? How big are the buttons? In the UI design of this product, the designer needs to be involved from the beginning, and when it comes to the design, the designer is basically in the loop.

　　Officially started

I tend to say "the whole process of interactive design". In my case, the UI refers to the interface, and before the visual design begins, the interaction planning and design of the interface is an important step forward, which has a great impact on the end-user experience.

My team typically has product managers, interaction designers, and UI designers involved in the interactive design phase. In my understanding, many companies do not set up a dedicated interaction designer, and the product manager to complete the relevant work. Here is my workflow (the image from the network, the team will not be posted). This process is expected to involve the entire product team and to enhance understanding of the product. Or borrow a fashionable concept, I want the team to have more design thinking, "Designing thinking", to strengthen and promote the problem-solving ability, and inspire more innovation.

Be sure to make the scenario application scenarios and Persona user roles first. Your product is used in what scenarios and how your user role is characterized by the person. The design is correct, to use the user role to judge, not the designer or product manager himself. Describing the scene and the characters clearly and getting the whole team to understand is a guarantee that the team will make fewer mistakes.

* User role persona, the actual work to write a text description is good, do not have to do the following figure generally tall. If you want to give a client or boss proposal, you can do a promotion.

　1. Storyboard Story version:

Main Person: Product manager or interaction Designer

The first people began to discuss the user experience process, on the whiteboard to draw the process edge to add a rough UI elements. After the meeting the interaction designer will make a hand-drawn version of the diagram on the paper. This phase of product managers, interaction designers, UI designers, including technical engineers, will be a lot of discussion, and the main discussion is the process and the main features, so the hand-painted story version of the fastest and most convenient and easy to modify.

This step is to finalize the Userflow, the user process and the key steps in it, each of which is a major interface.

* This is generally the case on the whiteboard, interactive design reunion on paper redraw.

* Mobile product design To do this, do not buy a dedicated template and tool-scale, you can print yourself.

　2. Key Wireframe Critical Interface wireframe

Main person: Interactive designer

In the identified user flow, select a few key, representative steps, do a detailed wireframe wireframe. To ensure that each UI element is designed, including its size and position, in the wireframe. The wireframe we do is 1:1, that is, the wireframe is consistent with the actual interface size. 1:1 of the wireframe can be in the early stage to avoid ill-considered and difficult to implement problems such as the emergence of many.

This link identifies the UI elements and layouts in the key interface, as well as the overall layout style.

* The wireframe is made of 1:1 best. Output to the document to add a description. In the back of the work, this document allows the UI design students and engineers to share.

　3. Key visual design Critical interface Vision

Main person: UI designer

The interactive Designer will continue to do the other interface's wireframe according to the defined user flow and the defined layout style. UI designers are also starting to do the visual design of the key interface, and try to color and style different styles.

This link to determine the product interface visual design style.

　　4. All Wireframe Full interface wireframe

Main person: Interactive designer

This link is designed by the interaction designer to complete the wireframe (1:1) of the entire interface and the team confirms it.

* Complete the whole line diagram, usually a summary composition. If you have a large enough site, you can print it out on a page and paste it onto a wall. Convenient to the team at any time reference.

　　5. Prototype Movable prototype

Main person: Interactive designer

This link depends on the product requirements. If the static wireframe can not fully reflect the characteristics of the product, it needs to be made into a movable prototype that can be manipulated or even have a key interface animation. It is usually a movable prototype of HTML, and special projects have been made in flash. I've got a wonderful friend. ppt (PPT development tool +VB Script) is close to the movable prototype of finished product interface.

The confirmation of this link is the same as the team's understanding will be more accurate.

* Can not help to paste a PPT development tool panel, to provide a VS-style control, and directly with VB script to write control logic! You could also bring dummy data! Customers think you've developed a wood.

　　6. UI design All Interface Vision

Main person: UI designer

Complete UI visual design for all interfaces.

This link confirms all UI design. At the same time, update the validated UI into the document.

The above steps are omitted to the Boss report or report to the customer description. If you have the conditions, it is best to have the relevant decision-makers involved in the confirmation at every step.

If you want to do user research products, it is necessary to make a movable prototype and let users use the test, otherwise it is difficult to get valuable feedback. It is of course best to test the movable prototype of a company directly with a conditional design.