CF

The Ultimate UI Grids & Layouts Masterclass

7h 6m 36s
English
Paid
Updated September 2026

The Ultimate UI Grids & Layouts Masterclass is a 34-lesson 7 hours 6 minutes self-paced course by Andrija Prelec. Grids and layout look simple until a design has to hold up across a website, a mobile app, and a wearable screen at once.

Course facts

Lessons
34
Duration
7 hours 6 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Andrija Prelec
Price
Premium

Grids and layout look simple until a design has to hold up across a website, a mobile app, and a wearable screen at once. This course, taught by a product designer with ten years in the field, works through what actually changes in your approach depending on the platform and project type.

Rather than a single set of rules, it treats layout as something that adapts — web app conventions differ from mobile ones, and both differ again from designing for small wearable displays. The course is hands-on throughout, with assignments built in so the ideas get applied rather than just watched.

Who teaches The Ultimate UI Grids & Layouts Masterclass? Andrija Prelec

Andrija Prelec thumbnail

Andrija Prelec is a software engineer and educator publishing course material on the modern web and full-stack development landscape.

The course catalog covers a range of practical topics in modern web development. Material is taught at a level aimed at intermediate developers building real applications, with each course typically structured around a substantial project or focused topic deep-dive.

The CourseFlix listing under this source carries 7 Andrija Prelec courses. Material is paid; the catalog page lists course titles, lesson counts, and the specific category each one covers. For broader content in any specific technology, see the corresponding Topic and Category pages on CourseFlix.

What lessons are included in The Ultimate UI Grids & Layouts Masterclass?

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

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

What courses are similar to The Ultimate UI Grids & Layouts Masterclass?

More courses by Andrija Prelec

Frequently asked questions

What prerequisites should I have before enrolling in this course?
This course does not specify strict prerequisites but having a basic understanding of design tools and principles will be helpful. Familiarity with Figma, as it is used in several demonstration lessons, will enhance your learning experience. Prior experience in UX/UI design is beneficial, especially since the course discusses advanced topics such as responsive design and auto-layout mastery.
What will I build during the course?
Throughout the course, you will engage in practical assignments that focus on designing grids and layouts for different platforms. This includes creating mobile app grids, web app grids, and responsive website grids. The course also covers practical exercises on iconography grids, giving you hands-on experience in applying concepts to real-world design projects.
Who is the target audience for this course?
This course is ideal for designers looking to deepen their understanding of grids and layouts in UX/UI design. It is suitable for both beginners who want to learn about the fundamentals of grid systems and experienced designers who wish to refine their skills in responsive design and auto-layout techniques across various platforms, including web, mobile, and wearable devices.
How does the course content compare to other design courses?
The course offers a specialized focus on grids and layouts, providing insights from a senior product designer with a decade of experience. Unlike general design courses, this course delves deeply into the psychology behind layouts, responsive design principles, and specific tools such as Figma's auto-layout feature, offering both foundational knowledge and advanced techniques specific to interface design.
What platforms or tools are specifically covered in this course?
Figma is prominently featured in the course, with multiple demo lessons dedicated to mastering its auto-layout features. The course also discusses the principles of responsive design, applicable across various platforms like web applications, mobile applications, and wearable devices, ensuring you gain versatile skills for different design environments.
What topics are not covered in this course?
The course does not cover introductory design tools or general graphic design principles. It assumes some familiarity with design software and focuses specifically on grid systems and layout techniques in UX/UI design. Broader topics like branding, color theory, or typography are not the primary focus of this course.
How much time should I expect to dedicate to this course?
The course consists of 34 lessons, and while the total runtime is not specified, it includes numerous assignments designed to reinforce learning. The time commitment will depend on your pace and the depth of engagement with practical exercises. Expect to spend additional time applying concepts from lessons such as Auto-layout Mastery and Responsive Design 101 to fully grasp the material.