[UI/UX] Design Process

 

 

 

1. UX research

 

- Timeline (Research, Information, Interaction Design, UI Design, Iteration

- User Interview

- Empathy Map

- Identify User Pain Points

- Personas

- User Journey Map

- Problem Statement

- Competitor Analysis

- Affinity Diagram

- Insights

 

 

 

 

 

2. Define & Ideation

 

- Brainstorms (Workshops)

- Meetings (Planning)

- Diagramming (Research & Design)

- Engineering

 

 

 

 

 

3. Information Architecture

 

- Sitemap (tools: Wireflow Kit, Timblee, GlooMaps, Miro, FlowMapp)

- User Flow

 

 

 

 

4. Wireframe

 

- Low-fidelity wireframes (hand sketch)

- Mid-fidelity wireframes (you can skip this substep)

- High-fidelity wireframes (tools: Figma, InVision, Draw.io, Miro, Wireframe.CC, MockFlow)

 

 

 

 

5. Prototype

 

(tools: Figma, Invision Studio, Origami)

 

 

 

 

6. Inspiration

 

(Inspiration websites: Behance, Awwwards, Dribble)

 

 

 

 

 

7. Design system

 

A collection of design elements (buttons, forms...)

 

- Colour

  1-3 primaries that represent your brand.

  (*A range of tints: A colour mixed with white - and shades - a colour mixed with black)

 

- Typography

 Most design systems include just 2 fonts (1 for headings and body, a monospace font for code)

 

- Sizing and spacing 

  A-4 based scale is popular

 

- Imagery

  Set guidelines for illustrations and icons, 

 

(tools: Untitled UI, Material Design, Atassian, Mailchimp)

 

 

반응형

 

 

 

 

8. Mockup

 

Style + Colours + Right Content

 

(tools: Figma, Adobe XD, Invision Studio, Sketch)

 

 

 

 

 

 

9. User Test

 

(tools: Invision Studio, Google Forms, Marvelapp)

 

 

 

 

 

10. Go live

 

 

 

 

 

 

 

* 출처 

10 steps of the UI/UX design process

https://bootcamp.uxdesign.cc/10-steps-of-the-ui-ux-design-process-every-expert-does-254e2a17ac34

10 steps of the UI/UX design process every expert does!