The Complete UI/UX and Figma Web Design Course
The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.
The topics covered in the course are...
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
Figma UI — Files
Figma UI — Toolbar
Figma UI — Left Sidebar
Figma UI — Right Sidebar
Shapes and Tools — Frames
Shapes and Tools — Groups
Shapes and Tools — Basic Shapes and Boolean Operations
Designing in Figma — Images
Designing in Figma — Getting Started with Text
Designing in Figma — Constraints
Designing in Figma — Using Auto Layout
Designing in Figma — Auto Layout Properties
Resources and Collaboration — Community Files
Resources and Collaboration — Community Plugins
Resources and Collaboration — Sharing and Comments]
Project — Creating a Logo Using Basic Shapes
Project — Auto Layout Buttons
Project — Creating a Responsive Navigation
Project — Responsive Text
Project — Imagery and Gradients
Project — Strokes and Shapes
Project — Layout and Responsiveness
3. User Flows
Getting Ready For This Section
The DOs and DON'Ts
User Flows in Figma — Onboarding
User Flows in Figma — Search
4. Sitemaps
Introduction To Sitemaps
Creating A Basic Sitemap
Reusable Sitemap Assets
Figma Check In — Basic Components and Variants
Sitemaps in Figma — The Top Layer
Sitemaps in Figma — Digging Deeper
Tips for Creating Great Sitemaps
02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback
1. Wireframes
What Is A Wireframe?
How To Create A Wireframe
Figma Check In — Basic Button Component]
Figma Check In — Variants
How to Use Our Wireframe Components
Wireframes — Home
Wireframes — Cart
Wireframes — Profile
2. Prototyping
Figma Check In — Prototyping in Figma
Prototyping in Figma — Flows and Starting Points
Protyping in Figma — Connections
Prototyping in Figma — Interactions
Prototyping in Figma — Animations
Prototyping in Figma — Prototype Settings
Prototyping in Figma — Prototype Presentation
Project — Navigation
Project — Removing an Item from Your Wishlist
Project — Finding a Product
3. Getting feedback
Why Is Feedback Important?
Constructive Feedback
03 VISUAL DESIGN – Design Theory + Accessibility
1. Spacing and Grids
What Is A Grid?
Grid Basics
Figma Check In — Fixed and Fluid Grids
Figma Check In — Breakpoints
Figma Check In — Grid Style
Project — Mobile Layout Grid
Project — Desktop Layout Grids
Simple Rules to Follow
2. Typography
Serifs
Sans Serifs
Display & Mono
Picking Typefaces
Figma Check In — Text Properties
Exercise — Elevating a Brand
Exercise — Typeface Scenarios
Exercise — Google Fonts
Project — Typeface Exploration
Project — Pairing Font Families
Project — Headings, Body and Labels
Project — Typeface System
Figma Check In — Text Styles
3. Color
Color Schemes
Important Questions To Ask
Creating Color Palettes
Figma Check In — Paints
Exercise — Expanding Upon a Strict Color Palette
Exercise — Creating a Color Palette
Figma Check In — Color Styles
Exercise — Using Color Styles
Project — Primary and Neutrals
Project — Accents
4. Imagery and Iconography
Visual Assets Introduction
Figma Check In — Image Plugins
Figma Check In — Image Styles
Figma Check In — Masks
Exercise — Image Exploration
Exercise — Text and Imagery Working Together
Figma Check In — Illustration Plugins
Exercise — Adding illustrations to your designs
Figma Check In — Icon Plugins
Figma Check In — Pen Tool
Exercise — Custom Icons with the Pen Tool
5. Forms + UI Elements
What Are Forms + UI Elements?
Best Practices — Forms
Best Practices — Basic and Advanced Inputs
Best Practices — Inputs
Best Practices — Buttons
Figma Check In — Component Properties
Properties vs. Variants
Figma Check In — Button Component Properties
Figma Check In — Button Variants
Figma Check In — Combining Components
Figma Check In — Form Component Possibilities
Project — Registration Flow
6. Accessibility
What Is Accessibility?
Assistive Technologies
Visual Patterns For Accessibility
Tools To Make Your Design Accessible
04 DESIGN EXPLORATION – Application Design + Design Systems
1. Design Patterns
What Are Design Patterns?
Why Are Design Patterns Valuable?
How To Apply Design Patterns
Analyzing Design Patterns
Dissecting And Choosing Design Patterns
2. Mobile Design
Mobile Design Best Practices
3. Visual Style and Exploration
Design Fidelity
Visual Exploration — Navigation
Visual Exploration — Buttons
Figma Check In — Effect Styles
Visual Exploration — Product Cards
Visual Exploration — Text Cards
Screen Design — Home
Screen Design — Product Page
4. Motion and Microinteractions
The Importance Of Motion
Why Microinteractions Are Important?
What Is A Microinteraction?
Figma Check In — Intro to Smart Animate
Figma Check In — Smart Animate Properties
Exercise — Parallax
Exercise — New Message
Exercise — Overlays
Figma Check In — Interactive Components
Exercise — Interactive Buttons
Project — Parallax Welcome Screen
Project — Drag Onboarding
Project — Cart Overlay
Project — Button Microinteraction
05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma
1. Design Systems
Foundational Styles and Components vs. Product Specific Components
Building Fidelity and Organizing Potential Components and Styles
Foundational Styles and Components
Components — Buttons
Components — Cards
Components — Headers
Components — Inputs
Components — List Items
Components — Navigation
Components — Misc. Elements
2. Execution
Working Towards Our Final Designs
Execution — Introduction Screen
Execution — Onboarding Screens
Execution — Registration Screens
Execution — Home Screen
Execution — Wishlist Screens
Execution — Profile Screen
Execution — Cart and Checkout
Prototypes — Registration
Prototypes — Adding to Cart
Prototypes — Checkout
Prototypes — Lottie Files Plugin
Prototypes — Search and Filters
06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)
07 HTML + HTML5
08 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations
09 PUTTING YOUR WEBSITE ONLINE