Web Design Learning Path (UI/UX)

From foundational thinking to practical skills to become a professional web designer.

Back to Roadmap
Phase Main Topic Content & Tools Product Goal
1 Design Fundamentals
  • Design Principles (CRAP)
  • Color Theory
  • Grid Systems
  • Typography
 Design a simple landing page applying basic design principles.
2 Design Tools
  • Figma
  • Sketch
  • Adobe XD
  • Photoshop & Illustrator
 Recreate an existing website design using Figma or Sketch.
3 User Experience (UX) Design
  • User Research
  • Personas & User Flows
  • Wireframing
  • Prototyping
 Build a wireframe and interactive prototype for a simple mobile application.
4 User Interface (UI) Design
  • Mobile-First Design
  • Design Systems
  • Accessibility
  • Micro-interactions & Animations
 Finalize the detailed UI design for the mobile application from phase 3.
5 Developer Handoff
  • Prepare Design Files
  • Create a Style Guide
  • Use Handoff Tools
 Prepare and hand off the complete project design files to the development team.
6 Basic Frontend Knowledge
  • Basic HTML
  • Basic CSS
  • Basic JavaScript
 Code a simple personal portfolio page using HTML & CSS.
7 Career Development
  • Build a Portfolio
  • Continuous Learning & Updates
  • Develop Soft Skills
 Complete an online portfolio with at least 3 quality design projects.

Core Mindsets for Web Designers

1. Be User-Centric

You are not the user. Always put yourself in their shoes to understand their needs and solve their problems, not yours.

2. Design is an Iterative Process

The first design is rarely the best one. Continuously test, gather feedback, and iterate to achieve the optimal solution.

3. Simplicity is Power

The goal is to make the interface as intuitive and easy to use as possible. Eliminate unnecessary elements to highlight the core content.

4. Be the Bridge Between Idea and Reality

A beautiful design that can't be coded is a failed design. A basic understanding of code helps create feasible and effective products.