Sketching
The first step of 6 steps of UI design
Low Cost, Low commitment way to kick off designs and get down high-level ideas.
The purpose is:
- Start off the conversion.
- Clarify and define features needed.
- Make changes quickly.
- Visualize how screens might look in different contexts. For example different device sizes, etc
Wireframing
The second step of 6 steps of UI design
How things will look before visual design and also the start of layout and elements taking shape.
The purpose is:
- Visualize the general layout.
- Build trust with stakeholders.
- Flesh out ideas a little more.
- Fast and cheap low-mid fidelity screen creation.
Components
The third step of 6 steps of UI design
Designing consistent states and conditionals of atomic elements.
The purpose is:
- Plan and test usability.
- Uncover accessibility issues.
- Look for responsive problems.
- Translate ideas into consistent elements that can be shared.
User and Task Flows
The fourth step of the 6 steps of UI design
Matching users’ mental models to system models and orchestrating the pathways and responses that your interface will provide.
The purpose is:
- Show navigation routes.
- Check for missing states and information.
- Visualize entry, exit, and decision points for the user/customer journey
Mock-up / Hi-fidelity Designs
The fifth step of the 6 steps of UI design
Designs exactly as they should appear in the final product.
The purpose is:
- Create pixel perfection.
- Create visual design consistency.
- Add sense to your brand.
- Select final design assets.
- Get final approval from stakeholders.
Prototyping
The sixth step of the 6 steps of UI design
Matching users’ mental models to system models and orchestrating the pathways and responses that your interface will provide.
The purpose is:
- Link together all screens and flows.
- Simulate the real environment.
- Make sure it works before production.
These are the 6 steps you should go through to design any user interface. But of course, in any specific user interface design project, some steps may be added to these 6 steps.
Suggested Article:
