Complete Web & Mobile Designer: UI/UX

Requirements

No requirements. We teach you and show you everything from scratch! From Zero to Mastery.
Get ready to fall in love with Design and start turning everything you touch into beautiful projects for the rest of your life!

---

Description

The curriculum is hands-on as we walk you from the basics of working as a designer to creating final professional designs and converting them into actual websites or apps using HTML and CSS.

---

Topics Covered

00. Web & Mobile Design Principles + Design vs Web Development

01. Getting Started – Sketching, Inspiration & Structure

1. Sketching

• Introduction to Sketching

• The Sketching Process

• Sketching User Flows

• Sketching Tips

2. Inspiration

• How to Stay Inspired

• How to Find Inspiration Online

3. Figma Basics

• Plans and Signup

• Where to Use Figma

• Figma UI: Structure, Files, Toolbar, Sidebars

• Shapes and Tools: Frames, Groups, Boolean Operations

• Designing: Images, Text, Constraints, Auto Layout

• Resources: Community Files, Plugins, Sharing

• Projects: Logo, Auto Layout Buttons, Navigation, Responsive Text, Imagery, Layout

4. User Flows

• Getting Ready

• DOs and DON’Ts

• User Flows in Figma (Onboarding, Search)

5. Sitemaps

• Introduction and Basics

• Reusable Sitemap Assets

• Components and Variants

• Tips for Creating Great Sitemaps

---

02. Explore and Iterate – Wireframes, Prototyping and Feedback

1. Wireframes

• What is a Wireframe?

• How to Create One

• Components and Variants

• Wireframes: Home, Cart, Profile

2. Prototyping

• Prototyping Flows, Interactions, Animations

• Projects: Navigation, Wishlist, Product Search

3. Feedback

• Importance of Feedback

• Constructive Criticism

---

03. Visual Design – Design Theory + Accessibility

1. Spacing and Grids

• Grid Basics

• Mobile and Desktop Grids

• Simple Rules

2. Typography

• Serif, Sans-serif, Display

• Choosing and Pairing Fonts

• Projects: Typeface System, Font Families, Styles

3. Color

• Schemes, Palettes

• Paints, Styles

• Projects: Primary, Accents

4. Imagery and Iconography

• Image Plugins and Masks

• Text and Imagery

• Illustrations and Icons

• Pen Tool & Custom Icons

5. Forms + UI Elements

• Best Practices: Forms, Inputs, Buttons

• Button Variants and Component Properties

• Project: Registration Flow

6. Accessibility

• Assistive Technologies

• Tools and Visual Patterns

---

04. Design Exploration – Application Design + Design Systems

1. Design Patterns

• What & Why

• Applying and Choosing

2. Mobile Design

• Best Practices

3. Visual Style and Exploration

• Design Fidelity

• Exploration: Navigation, Buttons, Product Cards, Text

4. Motion and Microinteractions

• Smart Animate, Interactive Components

• Exercises: Parallax, New Message, Overlays, Drag Onboarding

• Projects: Microinteractions, Cart Overlay

---

05. Putting It All Together – Design System + Hi-Fi Prototypes

1. Design Systems

• Foundational Styles vs Product-Specific

• Buttons, Cards, Headers, Inputs, Navigation, etc.

2. Execution

• Final Designs: Intro, Onboarding, Registration, Home, Wishlist, Profile, Cart & Checkout

• Prototypes: Registration, Adding to Cart, Checkout, Search, Filters

---

06. From Figma to Website

• Converting Figma Design to Live Website using HTML and CSS

07. HTML + HTML5

08. CSS + CSS3

• CSS Basics, Grid, Flexbox, Animations

09. Putting Your Website Online

---

This course starts from the fundamentals of graphic design and takes you all the way to creating full-fledged UX/UI products and websites. You will learn the complete design process to use in real-world projects, enabling you to become a skilled, high-earning designer—not just someone who follows tutorials.

---

This Course is for You If:

• You’re a complete beginner wanting to become a designer or freelancer

• You’re a designer looking to charge more for your work

• You’re a developer looking to improve design skills

---

Who This Course is For:

• Anyone wanting to start a Web/Mobile Design business or work at a company

• Web/Mobile Developers wanting to add design skills to their toolkit

• Anyone aiming to become a UI/UX Designer or learn the latest HTML5/CSS3 features like Flexbox, Grid, and Variables