Web Design Learning Path (UI/UX)
From foundational thinking to practical skills to become a professional web designer.
| 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. |