Starting to create mockups -Introduction to Course 5
Introduction to Course 5: Create High-Fidelity Designs and Prototypes in Figma
()
Welcome to Course 5
Kunal - My journey to UX
()
Starting to create mockups -Begin to create a mockup
Welcome to module 1
()
Introduction to mockups
()
Chikezie - Transition from low-fidelity to high-fidelity designs
()
Foundational skills to build mockups in Figma
Review: Use low-fidelity designs to start project mockups
Starting to create mockups -Use typography in mockups
Introduction to foundational elements of visual design
()
Typography in UX design
()
The importance of typography
()
Work with type in mockups
Add product copy to mockups
Review: Add typography to project mockups
Starting to create mockups -Use color in mockups
Color in UX design
()
Work with color in mockups
Accessibility considerations for color
Review: Add color to project mockups
Starting to create mockups -Use iconography in mockups
Iconography in UX design
()
Work with icons in mockups
Review: Add icons to project mockups
Learn about more visual design elements
Add images to your mockups
()
Find stock images for mockups
Additional design considerations
Starting to create mockups -Understand page layouts - grids and containment
Introduction to layouts
()
Use grids to guide layouts
()
Create grids in mockups
Review: Create grids in project mockups
Use containment in layouts
()
Create containment in mockups
Review: Create containment in project mockups
Starting to create mockups -Understand page layouts - negative space
Use negative (white) space in layouts
()
Use negative space in mockups
Review: Revise project mockups by adding negative space
Common design patterns in apps
Starting to create mockups -Module 1 review
Wrap-up: Starting to create mockups
()
Glossary terms from course 5, module 1
Applying visual design principles to mockups -Apply visual design principles to mockups (part 1)
Welcome to module 2
()
Emphasis in UX design
()
Use emphasis in mockups
Hierarchy in UX design
()
Use hierarchy in mockups
Applying visual design principles to mockups -Apply visual design principles to mockups (part 2)
Scale and proportion in UX design
()
Use scale and proportion in mockups
Unity and variety in UX design
()
Use unity and variety in mockups
Review: Apply visual design principles to project mockups
Applying visual design principles to mockups -Refine mockup designs
Apply Gestalt Principles to mockups
()
Learn about additional Gestalt Principles
Review: Apply Gestalt principles to project mockups
Reflect on your progress
()
Consider additional visual design elements and principles
Learn about interface design principles
Include navigation in mockups
Applying visual design principles to mockups -Module 2 review
Wrap-up: Applying visual design principles to mockups
()
Glossary terms from course 5, module 2
Exploring design systems -Understand design systems
Welcome to module 3
()
Introduction to design systems
()
Benefits of design systems
()
Google's design system: Material Design
()
Shopify's design system: Polaris
()
Explore popular design systems
Exploring design systems -Create a sticker sheet
Create a sticker sheet in Figma
()
Create sticker sheets for design projects
Exploring design systems -Use design systems
Use a design system library in Figma
()
Get inspiration from design systems
Optional - Learn from Figma - Use a design system library
Shabi - Consider assistive technologies when working in design systems
()
Exploring design systems -Module 3 review
Wrap-up: Exploring design systems
()
Glossary terms from course 5, module 3
Creating high-fidelity prototypes-Understand high-fidelity prototypes
Welcome to module 4
()
Introduction to high-fidelity prototypes
()
Create a high-fidelity prototype in Figma
()
Creating high-fidelity prototypes-Explore gestures and motion
Gestures and motion in UX design
()
Explore types of gestures and motion
Add gestures and motion in Figma
()
Follow-along guide: Add gestures and motion in Figma
Learn more about prototyping in Figma
Accessibility considerations for gestures and motion
()
Jen - Design with accessibility in mind
()
Learn from Figma - Prototype interactions and feedback
()
Additional ways to enhance high-fidelity prototypes
Creating high-fidelity prototypes-Module 4 review
Wrap-up: Creating high-fidelity prototypes
()
Glossary terms from course 5, module 4
Exemplars: Create a high-fidelity prototype for your mobile app
Testing and iterating on designs -Plan a usability study
Welcome to module 5
()
Plan a UX research study
()
Learn more about planning a UX research study
Testing and iterating on designs -Conduct a usability study
Conduct a usability study
()
Learn more about conducting a usability study
Testing and iterating on designs -Analyze and synthesize usability study results
Analyze and synthesize usability study results
()
Learn more about analyzing and synthesizing usability study results
Review: Analyze and synthesize the results of a usability study
Testing and iterating on designs -Iterate on high-fidelity designs
Iterate on high-fidelity designs
()
Review: Refine your high-fidelity portfolio project designs
Identify when a design is complete
()
Learn more about identifying when a design is complete
Final designs of the dog walker app in Figma
Testing and iterating on designs -Document and share designs
Document and share designs
()
Hand off designs for production
()
Learn from Figma - Prepare for hand off
()
Create a case study for your portfolio project
()
Learn more about creating a case study for your portfolio project
Testing and iterating on designs -Module 5 review
Wrap-up: Testing and iterating on designs
()
Glossary terms from course 5, module 5
Testing and iterating on designs -Course review
Congratulations on completing Course 5: Create High-Fidelity Designs and Prototypes in Figma
()
Course 5 glossary
Start the next course