Web & Mobile Design Principles + Design vs Web Development and other Fundamentals

• 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

• 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

• 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)

• 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)

• 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/APP ONLINE