UI/UX Design Basics

Introduction

• Design processes for websites, apps, games, etc.
• UI design tools: easy to learn, hard to master
• Purpose: Solve problems or provide use cases

Design Process

Step 1: User Flow

• Map out user journey from landing on the site to key objective
• Example: Users landing on site, navigating categories (user flow diagram)

Step 2: Wireframing

• Create screens/pages contributing to the key objective
• Example: Shopping site (store page, product page, cart, payment page, success page)
• Tools: pen & paper, balsamic, InVision, Figma
• Consider user behavior and accessibility when wireframing

Step 3: Design System

• Guidelines for UI components (colors, fonts, buttons, etc.)
• Example: Dark mode with neutral and vivid primary colors
• Use tools like Real-time colors to test choices
• Fonts: Impact readability and vibe, use Google Fonts, test with TypeScale
• Icons: Different types (flat, skeuomorphic, glyph, etc.)
• Components: Buttons, inputs, cards, etc., draw inspiration from resources like Dribble and Behance

Step 4: Actual Designing

• Six basic design principles:
  • Visual Hierarchy: Order of importance among elements
  • Contrast: Distinguish and make elements readable
  • Balance: Moderate spacing and alignment
  • Consistency: Keep elements harmonious
  • Simplicity: Clear and straightforward
  • Feedback: Engage users with interaction feedback
• Test, iterate, prototype, and refine designs
• Use actual content for realistic testing

Bonus Step: Illustrations and Visuals

• Thousands of resources, paid and free
• Tools: Figma for 2D, Spline for 3D
• Example: Minimal design, no illustrations but applicable to other projects

Conclusion

• UI/UX design is a continuous learning journey
• Build knowledge by continuously designing
• Turn designs into live sites for real-world usage and improvement