Skip to main content

The Ultimate UI Grids & Layouts Masterclass

7h 6m 36s
English
Paid

Course description

The course is filled with real advice and tricks from a senior product designer with ten years of experience in design.

In addition to learning how to work effectively with grids and layouts in interface design, you will also discover what changes in your approach are necessary depending on different situations or types of UX/UI design projects - from web applications to mobile applications, from websites to wearable devices.

This is a highly practical course, and it includes numerous assignments that will help you solidify your new knowledge.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 34 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online The Ultimate UI Grids & Layouts Masterclass

0:00
/
#1: Welcome

All Course Lessons (34)

#Lesson TitleDurationAccess
1
Welcome Demo
03:48
2
Course Overview
02:50
3
Set Yourself Up for Success
02:28
4
Grids & Layouts 101
03:55
5
Historical Overview of Grids and Layouts
07:03
6
Grids and Layouts Dictionary
09:54
7
Everything is a "Box"
03:30
8
Types of Grids
11:12
9
Types of Layouts
04:58
10
Basics of Grids in Figma (Demo)
24:25
11
Auto-layout Basics (Demo)
30:46
12
Psychology Behind a Great Layout
08:07
13
Visual Hierarchy
07:08
14
How to Achieve Visual Hierarchy
05:56
15
Alignment
03:08
16
Whitespace
05:14
17
Composition
03:27
18
Visual Storytelling
05:18
19
Responsive Design 101
10:50
20
Screens and Units
09:14
21
Mobile-first Approach
06:59
22
How to Design Responsively
06:22
23
Auto-layout Mastery (Demo) Part 1
20:24
24
Auto-layout Mastery (Demo) Part 2
24:30
25
Auto-layout Mastery (Demo) Part 3
17:16
26
Auto-layout Mastery (Demo) Part 4
12:06
27
Auto-layout Mastery (Demo) Part 5
27:16
28
Practical Mobile App Grids (Demo)
42:08
29
Practical Web App Grids (Demo)
41:57
30
Practical Responsive Website Grids (Demo) Part 1
19:47
31
Practical Responsive Website Grids (Demo) Part 2
26:21
32
Practical Iconography Grids (Demo)
11:28
33
Main Takeaways
04:57
34
Congratulations
01:54

Unlock unlimited learning

Get instant access to all 33 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Books

Read Book The Ultimate UI Grids & Layouts Masterclass

#Title
1UI Design Grids & Layouts Glossary
2UI Grids & Layouts Kickoff Questionnaire
3UI Grids & Layouts Common Mistakes Checklist
4UI Grids & Layouts Custom Grid Guide
5UI Grids & Layouts How to Document a Custom UI Grid for Development Example

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

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

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

Sources: udemy, zerotomastery.io
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently
20 hours 31 minutes 41 seconds
UI Design Foundations

UI Design Foundations

Sources: Andrija Prelec
Lay the foundation for your skills in UI design and equip yourself with the necessary knowledge and abilities to create captivating digital interfaces. Study...
4 hours 30 seconds
The Ultimate UI Typography Masterclass

The Ultimate UI Typography Masterclass

Sources: Andrija Prelec
The course is filled with real advice and tricks from a senior product designer with ten years of experience in design. Besides learning...
4 hours 53 minutes 7 seconds
Subatomic: The Complete Guide To Design Tokens

Subatomic: The Complete Guide To Design Tokens

Sources: Ian Frost, Brad Frost
A deep and comprehensive course on design tokens: from concepts and variables in Figma to code, processes, best practices, and much more.
13 hours 27 minutes 4 seconds
The Ultimate UI Colors Masterclass

The Ultimate UI Colors Masterclass

Sources: Andrija Prelec
The course is filled with real advice and tricks from a senior product designer with a decade of experience in design. In addition to learning...
5 hours 35 minutes 10 seconds