Autoplay
Autocomplete
Previous Lesson
Complete and Continue
UI Grids & Layouts Foundations
Files & Resources
UI Grids & Layouts (Basic) Assignments File
UI Basics Kit (Ready-to-go UI Grid Systems)
UI Grids & Layouts Demo File
UI Design Grids & Layouts Glossary
UI Grids & Layouts Kick-off Questionnaire
UI Grids & Layouts Common Mistakes (Checklist)
Custom Grids Guide
How to Document a Custom UI Grid for Developers (Example)
Grids & Layouts Foundations
Grids & Layouts 101 (3:54)
Historical Overview of Grids & Layouts (7:02)
Grids & Layouts Dictionary (9:53)
Everything is a “Box” (3:29)
Types of Grids (11:11)
Types of Layouts (4:57)
Basics of Grids in Figma (Demo) (24:24)
Auto Layout Basics (Demo) (30:44)
Psychology Behind a Great Layouts (8:06)
Quiz: Test Your Knowledge
Visual Hierarchy and Composition
Visual Hierarchy (7:07)
How to Achieve Visual Hierarchy (5:55)
Alignment (3:07)
Whitespace (5:13)
Composition (3:26)
Visual Storytelling (5:17)
Quiz: Test Your Knowledge
Responsive Design
Responsive Design 101 (10:49)
Screens and Units (9:13)
Mobile-first Approach (6:58)
How to Design Responsively (6:21)
Front-end Developer’s Perspective on Responsive Design
Quiz: Test Your Knowledge
Whitespace
Complete and Continue