Orion by Galaxy

Getting ready

1. Introduction To Sketching

2. The Sketching Process

3. Sketching User Flows

4. Sketching User Flows 2

5. Sketching User Flows 3

6. Sketching User Flows 4

7. Sketching Tips

1. How To Stay Inspired

2. How To Find Inspiration

1. Starting with Figma

2. Introducing Figma

3. Figma Dashboard

4. Figma Tools

5. Layers & Pages

6. The Top Bar

7. Design Properties

8. Prototyping With Figma

9. Exercise Creating A Responsive Layout

1. What Are User Flows

2. The Do's And Don'ts

3. Speed Up Workflow With Components

4. Creating Our Own User Flows

5. Creating Our Own User Flows 2

6. Creating Our Own User Flows 3

1. Introduction To Sitemaps

2. Creating A Basic Sitemap

3. Before You Start

4. Creating A Sitemap

5. Creating A Sitemap 2

6. Tips For Getting Started

Tools for next steps

1. What Is A Wireframe

2. How To Create A Wireframe

3. Wireframes In FIgma

4. Creating Our Home Page

5. Creating A Product Page

6. Creating A Checkout Page

1. Prototyping Basics In Figma

2. Prototyping Basics In Figma 2

3. Prototyping Basics In Figma 3

4. Prototyping Basics In Figma 4

5. Linking Together A Quick User Flow

6. Working On Small Interactions

1. Why Is Feedback Important

2. Constructive Feedback

Tools for next sections

1. What Is A Grid

2. Grid Basics

3. Responsive Grids And Breakpoints

4. Making Our Grid In Figma

5. Grid Guidelines

1. Serifs

2. Sans Serifs

3. Display & Mono

4. Picking Typefaces

5. Choosing Typefaces For A Project

6. Choosing Typefaces For A Project 2

7. Choosing Typefaces For A Project 3

8. Creating Our Own Type System

1. Color Schemes

2. Important Questions To Ask

3. Creating Color Palettes

4. Creating A Monochromatic Color Palette

5. Applying Our Color Palette

6. Expanding A Strict Color Palette

7. Creating Our Own Color Palette

1. What Are Forms + UI Elements

2. Best Practices For Forms

3. Best Practices For Inputs

4. Best Practices For Inputs 2

5. Best Practices For Inputs 3

6. Best Practices For Inputs 4

7. Best Practices For Buttons

8. Creating Components In Figma

9. Using Atomic Elements

10. Using Instances In Figma

11. Editing Instances

12. Responsive Components

13. Creating A Registration Form In Figma

1. Visual Assets Introduction

2. Working With Photos In Figma

3. Working With Photos In Figma 2

4. Working With Illustrations In Figma

5. Figma Plugins And Icons

6. Custom Icons

1. What Is Accessibility

2. Assistive Technologies

3. Visual Patterns For Accessibility

4. Tools To Make Your Design Accessible

5. Visual Patterns For Accessibility Part 2

Tools for next sections

1. What Are Design Patterns

2. Why Are Design Patterns Valuable

3. How To Apply Design Patterns

4. Analyzing Design Patterns

5. Dissecting And Choosing Design Patterns

1. Mobile Design Best Practices

2. Mobile Design Best Practices 2

1. Design Fidelity

2. Style Exploration

3. Style Exploration 2

4. Style Exploration 3

5. Style Exploration 4

1. The Importance Of Motion

2. The Purpose Of Motion

3. Intro To Smart Animate

4. The Power Of Smart Animate

1. What Is A Microinteraction

2. Why Microinteractions Are Important

3. Creating Our Own Microinteraction

4. Creating Our Own Microinteraction 2

5. Using Figmotion

6. Using Figmotion 2

Tools for next sections

1. What Is A Design System

2. Foundation - Color

3. Foundation - Grids + Spacing

4. Foundation - Iconography

5. Foundation - Typography

6. Components - Button

7. Components - Inputs

8. Components - Cards

9. Recipes - Vertical Cards

10. Recipes - Search

11. Recipes - Order List

1. Using Our Design System

2. Using Our Design System 2

3. Using Our Design System 3

4. Final Prototypes

5. Final Prototypes 2

6. Final Prototypes 3

7. Final Prototypes 4

1. The Product Alignment Canvas

2. Project Goals

3. Target Users

4. User Journey Map

5. Risky Assumptions

6. What is a User Story Map

7. Creating a User Story Map

3. Is Bruno Happy

2. Project Handoff

3. How to export and place designs

1. Next Steps