The Ultimate UI Grids & Layouts Masterclass

7h 6m 36s
English
Paid

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.

About the Author: Andrija Prelec

Andrija Prelec thumbnail

Andrija Prelec is a product designer with a decade of industry experience.

He has worked on over 50 projects, including websites and mobile applications, which have reached more than 10 million users worldwide. Previously, he worked as a UX/UI designer at product design agencies (the most notable being the New York agency Five) and as a freelance product designer.

Currently, he is the CEO and lead designer at Sharc, as well as a UX instructor and mentor at Algebra. He focuses on developing product strategies, conducting user and market research, and creating impactful user interfaces and experiences. Outside of design, he has experience in hiring, mentoring, team management, client relationship building, and much more.

Andrija has trained thousands of current and future designers through his work, lectures, workshops, and courses. He also holds a master's degree in multimedia design.

Watch Online 34 lessons

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