The Ultimate UI Grids & Layouts Masterclass
Unlock the secrets of
Unlock the secrets of
UI grids & layouts
UI grids & layouts
Unlock the secrets to creating visually stunning and highly functional UI layouts.
Preorder now at $111 (full price: $249) and take your design skills to the next level!
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
09 days 14 hours 49 minutes 07 seconds
09 days 14 hours 49 minutes 07 seconds
Our masterclasses are rated 4.9/5.0
Our masterclasses are rated 4.9/5.0
Does this sound familiar?
Are you struggling to create consistent and well‑structured UI layouts? Do your designs lack the professional polish that sets top‑tier designers apart?
Are you struggling to create consistent and well‑structured UI layouts? Do your designs lack the professional polish that sets top‑tier designers apart?
Welcome to The Ultimate UI Grids & Layouts Masterclass, where you'll learn the principles and techniques to elevate your design skills and create impeccable UI grids and layouts, and as a result, UI designs.
This comprehensive, self-paced video course covers everything you need to know about UI grids and layouts. Designed for both beginners and experienced designers, our masterclass includes in-depth tutorials, practical exercises, and cheat sheets to reinforce your learning.
Our masterclass isn't just about theory; it's about transforming your skills and confidence as a UI designer.
Welcome to The Ultimate UI Grids & Layouts Masterclass, where you'll learn the principles and techniques to elevate your design skills and create impeccable UI grids and layouts, and as a result, UI designs.
This comprehensive, self-paced video course covers everything you need to know about UI grids and layouts. Designed for both beginners and experienced designers, our masterclass includes in-depth tutorials, practical exercises, and cheat sheets to reinforce your learning.
Our masterclass isn't just about theory; it's about transforming your skills and confidence as a UI designer.
Welcome to The Ultimate UI Grids & Layouts Masterclass, where you'll learn the principles and techniques to elevate your design skills and create impeccable UI grids and layouts, and as a result, UI designs.
This comprehensive, self-paced video course covers everything you need to know about UI grids and layouts. Designed for both beginners and experienced designers, our masterclass includes in-depth tutorials, practical exercises, and cheat sheets to reinforce your learning.
Our masterclass isn't just about theory; it's about transforming your skills and confidence as a UI designer.
Syllabus
Collapsed
Expanded
Collapsed
Expanded
Collapsed
Expanded
Collapsed
Expanded
Collapsed
Expanded
Module 1
TBD
Introduction
Lessons
Welcome
Course Overview
Set Yourself Up for Success
Click to expand
Module 2
TBD
Foundations
Lessons
Grids and Layouts 101
Historical Overview of Grids and Layouts
Grids and Layouts Dictionary
Everything’s a “box”
Types of grids
Types of layouts
Basics of Grids in Figma (Demo)
Auto-layout Basics (Demo)
Psychology Behind a Great Layout
Click to expand
Module 3
TBD
Visual Hierarchy and Composition
Lessons
Visual Hierarchy
How to Achieve Visual Hierarchy
Alignment
Whitespace
Composition
Visual Storytelling
Click to expand
Module 4
TBD
Responsive Design
Lessons
Responsive Design 101
Screens and units
Mobile-first Approach
How to Design Responsively
Front-end Perspective on Responsive Design
Click to expand
Module 5
TBD
Practical Grids & Layouts
Lessons
Auto-layout Mastery (Demo)
Nesting in Figma (Demo)
Practical Mobile App Grids
Practical Web App Grids
Practical Website Grids
Iconography Grids
Click to expand
Module 6
TBD
Grids & Layouts Mastery
Lessons
Analyzing Grids and Layouts
Custom vs. Premade Grids
Breaking the Grid
Grids & Layouts Best Practices
Grids & Layouts Common Mistakes
Impact on Accessibility and Usability
The Future of Grids & Layouts
Click to expand
Module 7
TBD
Final Thoughts
Lessons
Main Takeaways
Congratulations
Bonus Materials
Certificate
Click to expand
Module 1
TBD
Introduction
Lessons
Welcome
Course Overview
Set Yourself Up for Success
Click to expand
Module 2
TBD
Foundations
Lessons
Grids and Layouts 101
Historical Overview of Grids and Layouts
Grids and Layouts Dictionary
Everything’s a “box”
Types of grids
Types of layouts
Basics of Grids in Figma (Demo)
Auto-layout Basics (Demo)
Psychology Behind a Great Layout
Click to expand
Module 3
TBD
Visual Hierarchy and Composition
Lessons
Visual Hierarchy
How to Achieve Visual Hierarchy
Alignment
Whitespace
Composition
Visual Storytelling
Click to expand
Module 4
TBD
Responsive Design
Lessons
Responsive Design 101
Screens and units
Mobile-first Approach
How to Design Responsively
Front-end Perspective on Responsive Design
Click to expand
Module 5
TBD
Practical Grids & Layouts
Lessons
Auto-layout Mastery (Demo)
Nesting in Figma (Demo)
Practical Mobile App Grids
Practical Web App Grids
Practical Website Grids
Iconography Grids
Click to expand
Module 6
TBD
Grids & Layouts Mastery
Lessons
Analyzing Grids and Layouts
Custom vs. Premade Grids
Breaking the Grid
Grids & Layouts Best Practices
Grids & Layouts Common Mistakes
Impact on Accessibility and Usability
The Future of Grids & Layouts
Click to expand
Module 7
TBD
Final Thoughts
Lessons
Main Takeaways
Congratulations
Bonus Materials
Certificate
Click to expand
Module 1
TBD
Introduction
Lessons
Welcome
Course Overview
Set Yourself Up for Success
Click to expand
Module 2
TBD
Foundations
Lessons
Grids and Layouts 101
Historical Overview of Grids and Layouts
Grids and Layouts Dictionary
Everything’s a “box”
Types of grids
Types of layouts
Basics of Grids in Figma (Demo)
Auto-layout Basics (Demo)
Psychology Behind a Great Layout
Click to expand
Module 3
TBD
Visual Hierarchy and Composition
Lessons
Visual Hierarchy
How to Achieve Visual Hierarchy
Alignment
Whitespace
Composition
Visual Storytelling
Click to expand
Module 4
TBD
Responsive Design
Lessons
Responsive Design 101
Screens and units
Mobile-first Approach
How to Design Responsively
Front-end Perspective on Responsive Design
Click to expand
Module 5
TBD
Practical Grids & Layouts
Lessons
Auto-layout Mastery (Demo)
Nesting in Figma (Demo)
Practical Mobile App Grids
Practical Web App Grids
Practical Website Grids
Iconography Grids
Click to expand
Module 6
TBD
Grids & Layouts Mastery
Lessons
Analyzing Grids and Layouts
Custom vs. Premade Grids
Breaking the Grid
Grids & Layouts Best Practices
Grids & Layouts Common Mistakes
Impact on Accessibility and Usability
The Future of Grids & Layouts
Click to expand
Module 7
TBD
Final Thoughts
Lessons
Main Takeaways
Congratulations
Bonus Materials
Certificate
Click to expand
Module 1
TBD
Introduction
Lessons
Welcome
Course Overview
Set Yourself Up for Success
Click to expand
Module 2
TBD
Foundations
Lessons
Grids and Layouts 101
Historical Overview of Grids and Layouts
Grids and Layouts Dictionary
Everything’s a “box”
Types of grids
Types of layouts
Basics of Grids in Figma (Demo)
Auto-layout Basics (Demo)
Psychology Behind a Great Layout
Click to expand
Module 3
TBD
Visual Hierarchy and Composition
Lessons
Visual Hierarchy
How to Achieve Visual Hierarchy
Alignment
Whitespace
Composition
Visual Storytelling
Click to expand
Module 4
TBD
Responsive Design
Lessons
Responsive Design 101
Screens and units
Mobile-first Approach
How to Design Responsively
Front-end Perspective on Responsive Design
Click to expand
Module 5
TBD
Practical Grids & Layouts
Lessons
Auto-layout Mastery (Demo)
Nesting in Figma (Demo)
Practical Mobile App Grids
Practical Web App Grids
Practical Website Grids
Iconography Grids
Click to expand
Module 6
TBD
Grids & Layouts Mastery
Lessons
Analyzing Grids and Layouts
Custom vs. Premade Grids
Breaking the Grid
Grids & Layouts Best Practices
Grids & Layouts Common Mistakes
Impact on Accessibility and Usability
The Future of Grids & Layouts
Click to expand
Module 7
TBD
Final Thoughts
Lessons
Main Takeaways
Congratulations
Bonus Materials
Certificate
Click to expand
Module 1
TBD
Introduction
Lessons
Welcome
Course Overview
Set Yourself Up for Success
Click to expand
Module 2
TBD
Foundations
Lessons
Grids and Layouts 101
Historical Overview of Grids and Layouts
Grids and Layouts Dictionary
Everything’s a “box”
Types of grids
Types of layouts
Basics of Grids in Figma (Demo)
Auto-layout Basics (Demo)
Psychology Behind a Great Layout
Click to expand
Module 3
TBD
Visual Hierarchy and Composition
Lessons
Visual Hierarchy
How to Achieve Visual Hierarchy
Alignment
Whitespace
Composition
Visual Storytelling
Click to expand
Module 4
TBD
Responsive Design
Lessons
Responsive Design 101
Screens and units
Mobile-first Approach
How to Design Responsively
Front-end Perspective on Responsive Design
Click to expand
Module 5
TBD
Practical Grids & Layouts
Lessons
Auto-layout Mastery (Demo)
Nesting in Figma (Demo)
Practical Mobile App Grids
Practical Web App Grids
Practical Website Grids
Iconography Grids
Click to expand
Module 6
TBD
Grids & Layouts Mastery
Lessons
Analyzing Grids and Layouts
Custom vs. Premade Grids
Breaking the Grid
Grids & Layouts Best Practices
Grids & Layouts Common Mistakes
Impact on Accessibility and Usability
The Future of Grids & Layouts
Click to expand
Module 7
TBD
Final Thoughts
Lessons
Main Takeaways
Congratulations
Bonus Materials
Certificate
Click to expand
Become a UI Grids & Layouts Master
Invest in your future at a fraction of the cost
Special pricing is available for a limited time as a part of a blind sale. Don’t miss out on the opportunity to advance your design skills today. Act now to take advantage of this time-limited offer. Your design career will thank you!
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
Get 65% off!
Blind sale discount
$87
$87
Expired
Expired
40% off
Early bird discount
$111
$111
Inclusive of VAT, if applicable
Inclusive of VAT, if applicable
09 : 14 : 49 : 07
No discount
Full release
$249
$249
Price on the release
Risk-free purchase
Supercharge Design 7-day money back guarantee
We offer a 7-day no-questions-asked guarantee for our video courses through Teachable, one of the most well-known educational platforms in the world.
We are confident you’ll love our products and that they will help you reach your goals, but we also know it’s a lot easier to make a decision once you know there’s no risk for you. 🤗
Best case scenario — you become a Figma pro and supercharge your design career with us. Worst case scenario — we give your money back, shake hands, and part our ways hassle-free.
![Badge with the text "7-day money back guarantee"](https://framerusercontent.com/images/jN8Xftb9qiZqBqyVI2ffTtoTzrg.png)
![Badge with the text "7-day money back guarantee"](https://framerusercontent.com/images/jN8Xftb9qiZqBqyVI2ffTtoTzrg.png)
![Badge with the text "7-day money back guarantee"](https://framerusercontent.com/images/jN8Xftb9qiZqBqyVI2ffTtoTzrg.png)
![Badge with the text "7-day money back guarantee"](https://framerusercontent.com/images/jN8Xftb9qiZqBqyVI2ffTtoTzrg.png)
![Badge with the text "7-day money back guarantee"](https://framerusercontent.com/images/jN8Xftb9qiZqBqyVI2ffTtoTzrg.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
Andrija
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
![Portrait photo of Andrija Prelec](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
Andrija
![Portrait photo of Andrija Prelec, mentor of Figma Course](https://framerusercontent.com/images/2h6qKvi5U8OEXwH76agKdoR9D14.png)
Andrija
Meet your instructor
Learn from Andrija, master of product design
Benefit from the unparalleled expertise of The Ultimate UI Colors Masterclass instructor with over 10 years of relevant design and teaching experience.
This course is your opportunity to learn from a seasoned professional who has played a pivotal role in transforming hundreds of ideas into tangible, successful products. The course goes beyond just basic UI colors skills, and gives you a deeper understanding of the transformative power of color within UI/UX design.
Andrija has worked on 50+ complex digital products, and his work has improved the lives of millions of users worldwide. Currently, he works as a CEO and a product design lead at Sharc and Supercharge Design, and as a UX lecturer and team lead at Algebra, a rewarded educational institution and college in Croatia.
Over the years, he mentored tens of thousands of budding designers, through different mediums like lectures, workshops, in-person boot camps, and online video courses.
Learn the secrets of UI colors and beyond – directly from a user experience and interface design master who doesn’t just teach but inspires.
Enviable
experience
![Group of employees](https://framerusercontent.com/images/0ep0DiwVacchubo2cUtLbY7M.png)
![Group of employees](https://framerusercontent.com/images/0ep0DiwVacchubo2cUtLbY7M.png)
![Group of employees](https://framerusercontent.com/images/0ep0DiwVacchubo2cUtLbY7M.png)
![Group of employees](https://framerusercontent.com/images/0ep0DiwVacchubo2cUtLbY7M.png)
![](https://framerusercontent.com/images/pT5rvlPiil4ilVcoXowP79Q3iso.png)
![](https://framerusercontent.com/images/PgPvfT9WqDONMRVLj62jrXUv4.png)
![](https://framerusercontent.com/images/JWgJfHcMZZjWbLWOgMKyIfKUPc.png)
![](https://framerusercontent.com/images/sPRckYRi8rI3dYgWENFbbjhY.png)
![](https://framerusercontent.com/images/fv7LuRduxUGqMaP5VTR7IHHNCu0.png)
![](https://framerusercontent.com/images/oQ49HlF0EQ7rHVzjZ4yrrkHtcQ.png)
Andrija has worked at multiple award-winning product design agencies with ratings exceeding 4.9 on Clutch
Andrija has worked at multiple award-winning product design agencies with ratings exceeding 4.9 on Clutch
Andrija has worked at multiple award-winning product design agencies with ratings exceeding 4.9 on Clutch
Andrija has worked at multiple award-winning product design agencies with ratings exceeding 4.9 on Clutch
Enviable
experience
![Group of employees](https://framerusercontent.com/images/0ep0DiwVacchubo2cUtLbY7M.png)
![](https://framerusercontent.com/images/pT5rvlPiil4ilVcoXowP79Q3iso.png)
![](https://framerusercontent.com/images/PgPvfT9WqDONMRVLj62jrXUv4.png)
![](https://framerusercontent.com/images/JWgJfHcMZZjWbLWOgMKyIfKUPc.png)
![](https://framerusercontent.com/images/sPRckYRi8rI3dYgWENFbbjhY.png)
![](https://framerusercontent.com/images/fv7LuRduxUGqMaP5VTR7IHHNCu0.png)
![](https://framerusercontent.com/images/oQ49HlF0EQ7rHVzjZ4yrrkHtcQ.png)
Andrija has worked at multiple award-winning product design agencies with ratings exceeding 4.9 on Clutch
Seasoned
lecturer
![Andrija Prelec holding a talk at a conference](https://framerusercontent.com/images/xpOsyS6xyQVIqOB1SbPTfIbEOA.png)
![Andrija Prelec holding a talk at a conference](https://framerusercontent.com/images/xpOsyS6xyQVIqOB1SbPTfIbEOA.png)
![Andrija Prelec holding a talk at a conference](https://framerusercontent.com/images/xpOsyS6xyQVIqOB1SbPTfIbEOA.png)
![Andrija Prelec holding a talk at a conference](https://framerusercontent.com/images/xpOsyS6xyQVIqOB1SbPTfIbEOA.png)
![](https://framerusercontent.com/images/jwKnLscdmu6zhR16iJCVgpGc8.png)
![](https://framerusercontent.com/images/sLDdlqB62uNbJHdjLQeti9koMw.png)
Andrija shines as an educator, having taught numerous in-person boot camps and workshops and nurturing thousands of students enrolled in online courses
Andrija shines as an educator, having taught numerous in-person boot camps and workshops and nurturing thousands of students enrolled in online courses
Andrija shines as an educator, having taught numerous in-person boot camps and workshops and nurturing thousands of students enrolled in online courses
Andrija shines as an educator, having taught numerous in-person boot camps and workshops and nurturing thousands of students enrolled in online courses
Seasoned
lecturer
![Andrija Prelec holding a talk at a conference](https://framerusercontent.com/images/xpOsyS6xyQVIqOB1SbPTfIbEOA.png)
![](https://framerusercontent.com/images/jwKnLscdmu6zhR16iJCVgpGc8.png)
![](https://framerusercontent.com/images/sLDdlqB62uNbJHdjLQeti9koMw.png)
Andrija shines as an educator, having taught numerous in-person boot camps and workshops and nurturing thousands of students enrolled in online courses
Inspiring
leader
![Group of employees of Supercharge design standing](https://framerusercontent.com/images/Wqv72sLQFjnqyZ1bAx1LLn1qk.png)
![Group of employees of Supercharge design standing](https://framerusercontent.com/images/Wqv72sLQFjnqyZ1bAx1LLn1qk.png)
![Group of employees of Supercharge design standing](https://framerusercontent.com/images/Wqv72sLQFjnqyZ1bAx1LLn1qk.png)
![Group of employees of Supercharge design standing](https://framerusercontent.com/images/Wqv72sLQFjnqyZ1bAx1LLn1qk.png)
Andrija leads a team of 30+ UX design lecturers of in-person boot camps besides spending years mentoring design teams as a CEO and lead designer
Andrija leads a team of 30+ UX design lecturers of in-person boot camps besides spending years mentoring design teams as a CEO and lead designer
Andrija leads a team of 30+ UX design lecturers of in-person boot camps besides spending years mentoring design teams as a CEO and lead designer
Andrija leads a team of 30+ UX design lecturers of in-person boot camps besides spending years mentoring design teams as a CEO and lead designer
Inspiring
leader
![Group of employees of Supercharge design standing](https://framerusercontent.com/images/Wqv72sLQFjnqyZ1bAx1LLn1qk.png)
Andrija leads a team of 30+ UX design lecturers of in-person boot camps besides spending years mentoring design teams as a CEO and lead designer
Master
of design
![Andrija Prelec in Supercharge Design studio](https://framerusercontent.com/images/fcUxXLnOVGGBmGWx1AHs8g5cdo.png)
![Andrija Prelec in Supercharge Design studio](https://framerusercontent.com/images/fcUxXLnOVGGBmGWx1AHs8g5cdo.png)
![Andrija Prelec in Supercharge Design studio](https://framerusercontent.com/images/fcUxXLnOVGGBmGWx1AHs8g5cdo.png)
![Andrija Prelec in Supercharge Design studio](https://framerusercontent.com/images/fcUxXLnOVGGBmGWx1AHs8g5cdo.png)
![](https://framerusercontent.com/images/XaD8F5cOvBd4MiPOH7iokMGVZ0.png)
He is one of the top 3% of freelance UX/UI and product designers in the world, according to Toptal
He is one of the top 3% of freelance UX/UI and product designers in the world, according to Toptal
He is one of the top 3% of freelance UX/UI and product designers in the world, according to Toptal
He is one of the top 3% of freelance UX/UI and product designers in the world, according to Toptal
Master
of design
![Andrija Prelec in Supercharge Design studio](https://framerusercontent.com/images/fcUxXLnOVGGBmGWx1AHs8g5cdo.png)
![](https://framerusercontent.com/images/XaD8F5cOvBd4MiPOH7iokMGVZ0.png)
He is one of the top 3% of freelance UX/UI and product designers in the world, according to Toptal
Become a UI Grids & Layouts Master
Invest in your future at a fraction of the cost
Special pricing is available for a limited time as a part of a blind sale. Don’t miss out on the opportunity to advance your design skills today. Act now to take advantage of this time-limited offer. Your design career will thank you!
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
It’s time to learn all the secrets of UI grids and layouts, and feel confident in your design decisions. Take your designs from average to exceptional by enrolling in this engaging, practical, and all-inclusive video course.
Get 65% off!
Get 65% off!
Get 65% off!
Get 65% off!
Blind sale discount
Blind sale discount
Blind sale discount
Blind sale discount
$87
$87
Expired
Expired
40% off
40% off
40% off
40% off
Early bird discount
Early bird discount
Early bird discount
Early bird discount
$111
$111
Inclusive of VAT, if applicable
Inclusive of VAT, if applicable
09 : 14 : 49 : 07
No discount
No discount
No discount
No discount
Full release
Full release
Full release
Full release
$249
$249
Price on the release
Price on the release