Design Thinking 5 Stages
- Empathize — user research
- Define — problem statement
- Ideate — brainstorm
- Prototype — Figma mockup
- Test — user testing, iterate
Wireframe vs Mockup vs Prototype
- Wireframe — low-fi structure
- Mockup — high-fi static
- Prototype — interactive clickable
Tools
Figma (popular, collaborative), Sketch, Adobe XD, Balsamiq।
Visual Hierarchy
Size, contrast, spacing, position, typography weight দিয়ে importance convey।
Color Theory
- Primary brand, Secondary accent
- Semantic: green=success, red=error, yellow=warn
- 60-30-10 rule
- Complementary, analogous, triadic
Typography
- 2-3 fonts max
- Body 14-16px web, 16px mobile
- Line-height 1.5-1.7
- 60-75 chars per line
Spacing
8px grid (4, 8, 16, 24, 32...), white space, Gestalt proximity।
Responsive
/* Mobile-first */
.container { width: 100%; padding: 16px; }
@media (min-width: 768px) { max-width: 720px; }
@media (min-width: 1024px) { max-width: 960px; }
Breakpoints: Mobile <768, Tablet 768-1023, Desktop 1024-1439, Large 1440+।
Component-Based ⭐
<Button variant="primary" size="lg">Submit</Button>
Nielsen 10 UX Heuristics
- Visibility of system status
- Match real world
- User control/freedom
- Consistency & standards
- Error prevention
- Recognition > recall
- Flexibility & efficiency
- Aesthetic & minimalist
- Recover from errors
- Help & documentation