Complete Web & Mobile Designer: UI/UX, Figma, +more

• Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2021
• Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
• Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
• Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
• Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
• Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
• Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
• Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
• Learn best practices that takes years to learn in the design industry
• Learn to make professional logos and design choices for all branding needs
• Learn UI/UX best practices using the latest trends in the industry
• Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!

The topics covered in the course are…

• 00 Web & Mobile Design Principles +  Design vs Web Development
• 01 GETTING STARTED – Sketching, Inspiration + Structure
  • 1. Sketching
    • Intro to sketching
    • Sketching UX flows
    • Sketching tips
  • 2. Inspiration
    • How to stay inspired
    • How to find inspiration online
  • 3. User Flows
    • What are user flows?
    • The do’s and don’ts
    • Speeding up our workflow with components
    • Creating our own user flows (Registration) Part 1
    • Creating our own user flows (Search) Part 2
    • Creating our own user flows (Checkout) Part 3
  • 4. Sitemaps
    • An intro to sitemaps
    • Creating a basic sitemap
    • What you should be doing before you start
    • Creating a sitemap (part 1)
    • Creating a sitemap (part 2)
    • Tips for getting started
• 02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback
  • 1. Wireframes
    • What is a wireframe?
    • How do I create a wireframe?
    • Speeding up your workflow in Figma
    • Creating our home page
    • Creating a product page
    • Creating a checkout page
  • 2. Prototyping
    • Prototyping basics in Figma (Device + Triggers)
    • Prototyping basics in Figma (Actions)
    • Prototyping basics in Figma (Overflow)
    • Prototyping basics in Figma (Presentation + Collaboration)
    • Linking together a quick user flow in Figma
    • Working on small interactions with Figma
  • 3. Getting feedback
    • Why is feedback so important?
    • How to get constructive feedback
• 03 VISUAL DESIGN – Design Theory + Accessibility
  • 1. Grids + Spacing
    • Spacing and Grid Basics
    • Responsive Grids in Figma
    • Creating our own grid in Figma
    • The rules of the grid
  • 2. Typography
    • Typography basics Part 1
    • Matching typefaces to an era
    • Typography basics Part 2
    • Selecting the right typeface
    • Typography basics Part 3
    • Picking a typeface
    • Does your typeface suit your scenario?
    • Expanding an existing type system
    • Choosing typefaces in Google Fonts
    • Narrowing down your typography choices
    • Creating a type system in Figma
  • 3. Color
    • Color Schemes
    • Important questions to ask before picking colors
    • Helpful tips for creating color palettes
    • Creating a monochromatic color palette
    • Applying a our simple color palette
    • Expanding a strict color palette
    • Creating our own color palette
  • 4. Forms + UI Elements
    • What are UI Elements
    • Best practices Part 1: Forms
    • Best practices Part 2: Inputs Part 1
    • Best practices Part 2: Inputs Part 2
    • Best practices Part 2: Inputs Part 3
    • Best practices Part 2: Inputs Part 4
    • Best practices Part 3: Buttons
    • How to create components in Figma
    • Using atomic elements in Figma
    • Using Instances in Figma
    • Editing instances to create new components
    • Using constraints to create responsive components
    • Creating a registration form in Figma
  • 5. Imagery + Iconography
    • Resources and techniques to create great visual assets
    • Working with photos in Figma Part 1
    • Working with photos in Figma Part 2
    • Working with illustrations in Figma
    • Using Figma plugins to find Icons quickly
    • Creating our very own custom icons
  • 6. Accessibility
    • What is accessibility?
    • Assistive technologies
    • Visual patterns for accessibility (Part 1)
    • Tools to make your design accessible
    • Visual patterns for accessibility (Part 2)
• 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 together
    • Dissecting and choosing design patterns together
  • 2. Mobile Design
    • Mobile design best practices (Part 1)
    • Mobile design best practices (Part 2)
  • 3. Applying Visual Design
    • Design Fidelity
    • Style exploration (Navigation)
    • Style exploration (Cards)
    • Style exploration (Interests)
    • Style exploration (New elements)
  • 4. Motion
    • The importance of motion
    • The purpose of motion
    • Intro to Smart Animate
    • Showcasing the power of Smart Animate
  • 5. Microinteractions
    • What are microinteractions?
    • Why are they so important?
    • Creating our own microinteractions (Part 1)
    • Creating our own microinteractions (Part 2)
    • Using Figmotion (Part 1)
    • Using Figmotion (Part 2)
• 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma
  • 1. Design Systems
    • What is a design system?
    • Foundation (color)
    • Foundation (grids and spacing)
    • Foundation (typography)
    • Foundation (iconography)
    • Components (buttons)
    • Components (Inputs)
    • Components (cards)
    • Recipes (card layouts)
    • Recipes (search)
    • Recipes (orders)
  • 2. Final Compositions
    • Using our design system (Search)
    • Using our design system (Product Description)
    • Using our design system (Cart)
• 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