CF

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

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

#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

Related courses

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.