- Structure and layout page at site and pages level.
- Site map
- Site layout (wireframes)
- Page layout
Interaction design
- How Product and user interact.
- User flows
- User input
- Flowcharts, clickable wireframes
Visual design
- How it looks vs what it is ?
- Font
- Color
- Typography
- Graphics
- Style guides
- Layout grid
Core design principles
Proximity principle
Things closer should be related to each other.
Ex : Add to cart and Buy now
Similarity Principle
Similar in UX are perceived aa similar.
Ex : Menu items
Responsive design
How the design responses to different screen sizes.
Composition in the design
Unity - Page should feel like its same and unified.
Contrast - Enough variation in color and shade.
Balance - Equally distribute the visual weight.
Use of Space - Ensure to have enough white space, avoid cluttering.
Design tools and types
Tools
Wireframe
Balsamiq
Invision
Draw.io
Mockup
Mockup plus
Adobe
Figma
Design Sprint
Team
Decider
Facilitator
Engineer
Product person
Customer service
Design expert
Process
Understand
Understand the problem, long term goal, once established, convert it into actionable item.
- Empathy mapping
- Customer Journey
Ideate
Notes
Ideas
Crazs 8's
Solutions Sketch
Decide
Heatmaps
Speed critique
Dot voting
Supervote
Prototype
Create prototype "Goldilocks quality"
Test
Test your prototypes with users.
Learn from feedback.
Fidelity of the design
Hand sketches
Clickable wireframes
Clickable mockups
Interactive Prototype
Static wireframes
Static Mockups
UX Framework or funnel.
A good user experience needs a good team.
Design solidifies as the stage moves from white to grey.
By Anjan Kumar BR
www.linkedin.com/in/anjanbelgod
Visualising the ideas, for faster feedbacks, general purpose design.
Characteristics of a good design tool
- Should be easy to use.
- Less learning curve.
- Sharing and collaborating features.
- Clickable feature should be available.