Grids and Layouts masterclass

Master the secrets of Grids in UI and Web design

The ultimate 5-hour practical video course for UX/UI Designers

  • The EXACT steps to create and use Grids to design professional websites, mobile apps and dashboards

  • Gestalt Principles for exceptional UI design

  • All types of grids you need to know if you design websites or apps

  • 🎁 Bonus: Grids for professional Instagram posts & carouselsο»Ώ

β˜…β˜…β˜…β˜…β˜… (4.86/5) from 238 students

Grids and Layouts for Websites and Mobile apps Masterclass by Alexunder Hess
Grids & Layouts for Websites & Mobile apps

The ultimate 5-hour video course

$150

secure-payment

Payment is processed and secured πŸ”’ by Stripe and PayPal by 128bit SSL encrypted payment.

β˜…β˜…β˜…β˜…β˜…

"I only used 12 columns by now as I don't have anybody to ask if there are other options.

The class is perfectly prepared and I feel so much more confident now. I am so excited to use this new knowledge!

I am more confident to explain my decisions to my clients, PO and devs."

Laura-Breban

Laura Breban

Product Designer at DIAMIR πŸ‡¦πŸ‡Ή

β˜…β˜…β˜…β˜…β˜…

"Grids are maybe the thing I struggled to understand the most in design.

The masterclass is simply amazing. It helps a lot with understanding how to calculate, what's the purpose and how to apply girds to, basically anything you're designing.

The whole masterclass holds so much value in every word, that should be charged even more."

Katarina Casic UI/UX Designer

Katarina Ćasić

UI/UX Designer at Global Payments Inc. πŸ‡²πŸ‡Ή

β˜…β˜…β˜…β˜…β˜…

"I felt like I needed to learn more about grids and was stuck at some times where I didn't know how to continue.

This masterclass is amazing and full of value and knowledge. It made me feel more confident about my designs and opened up more possibilities for what I can do."

Hussein Saeed UX Designer

Hussein Saeed

UX Designer at Lumi πŸ‡¦πŸ‡ͺ

grids-for-websites-uxui-design-min
grid-for-ecommerce-website-fullwidth-uxuidesign-min

This class is not only about Grids & Layouts

It's about the Psychology of UI layout 🧠, how to make your digital designs look professional πŸ₯‡, make your life easier 🀩, save you time ⏳, design high-quality products 😎, get visible and help you charge more πŸ’΅ for your work.

β˜…β˜…β˜…β˜…β˜…

"This masterclass made me completely rethink how I will layout websites and apps. Now that I know the rules properly, I can break them meaningfully for the best user experience!πŸ‘¨πŸ»β€πŸ’»βœ¨

I'm so hyped and excited and already re-working my current project to lay out the content in a much more meaningful way!"

Jan-Schuepbach

Jan Schuepbach

Associate Director UX Design at IBM πŸ‡¨πŸ‡­

β˜…β˜…β˜…β˜…β˜…

"Mind blown about the psychology behind the grids. Very happy to know there are too much to know about the grids.

I was struggling to create different layouts. Didn't know why the grids are applied to a website or apps. wanted to know how we can use different layouts and grids.

I love this masterclass, explanation are clear and on point. The examples you show are easy to grasp and obviously need to practice to improve my skills. AND it is WAY BETTER than what I have learned from other designers or courses."

Shabil-B-H

Shabil B H

UX Designer at GTECH Information Technology πŸ‡¦πŸ‡ͺ

grids-and-layouts-masterclass-alexunder-hess-layout-psychology-min
grids-for-mobile-apps-grids-and-layouts-masterclass-alexunder-hess-min

You'll learn:

  • The benefits of using Grids for websites and mobile apps
  • How you used Grids when you were a child
  • How to create professional-looking websites and mobile apps Layouts with Grids
  • Psychology of a professional website layout
  • How to understand what Grid to use and how to create it
  • Universal Grids for Websites (desktop, tablet, mobile), mobile apps, Instagram carousels and posts
  • Examples of different types of Grids and Layouts
  • Why and where you don't need to use 12-column and 8px Grids

It's a 5-hour practical masterclass, so you'll also learn πŸ‘‡

  • Breaking the rules: How to create a custom Grid for your specific project
  • How Gestalt principles define the Layout and why you need to know about it before you start designing anything
  • Practice: combining the knowledge (Gestalt, Grids, Layouts)
  • Practice: let's create Grids and layout for a website (+some tricks and secrets, hint: we will be using Math)
  • Practice: let's create a Grid for a mobile app (tab bars, filters, buttons, content + layout accessibility secret from my experience)
  • Practice: let's create a web app with a dashboard (say "No!" to a 12-col Grid, we will create something mindblowing + animation)

And that's not everything, the masterclass includes:

  • Grids for Modal screens
  • Grids for Navigation
  • Grids and Buttons (should the button be the size of columns)
  • 3-,5-,7-column Grids in mobile apps 
  • Left and Right direction Grid (where to use)
  • Grids and Layouts without Grids (Wow!)
  • Simple ugly Layout for a high converting website (marketing tip)
  • Simple beautiful Layout for a high converting website (design tip)
  • How to define what Grid a website uses

Ready for some bonuses? All for you!

  • How to use a Grid calculator I created for you
  • Should you use a 4px grid for a mobile app
  • Is it possible to use Grids with 0px margin, gutter or column width? If yes, where.
  • + Special lesson: Grids for Instagram posts and carousels (rules & problems to avoid)
  • + the Math behind Complex Grids

 

3-columns-grids-and-layouts-masterclass-complex-grids-in-webdesign-alexunder-hess-design

Many UX Designers don't really know how to work with grids for websites and mobile apps.

They use 12-column grids for desktop and 2-column grids for mobile but can't explain WHY. They don't even consider other options in design. Unfortunately, when we can't explain our decisions clearly, it leads to anxiety and imposter syndrome.

When you don't know Why, you might face imposter syndrome.

Imposter syndrome comes from knowledge gaps. Our brain sees grids everywhere because we've been using them since childhood. You can use a 7-column grid for mobile apps if you know WHEN and WHY. You don't have to use 8px grids in web design and 4pt grids for mobile apps if you know WHY. And once you learn it, you'll become a confident designer.

Close your knowledge gaps and become a Pro in Grids and Layouts for websites and mobile apps.

With the current level of competition on the market, you need to close the knowledge gaps and become more confident in your craft than ever!

β˜…β˜…β˜…β˜…β˜…

"Excited! Positive! Enthusiastic! Ready! A LOT of great insight that will take time to learn and utilize and improve on. But I'm ready!)"

Elva Björk

Elva BjΓΆrk

Director of UX Design at JΓΆkulΓ‘

β˜…β˜…β˜…β˜…β˜…

"The masterclass had an amazing amount of information and value and honestly I have learned a lot about complicated advanced stuff which would have otherwise taken me months to understand I got it under 3 hours."

Alisa Prem UX/UI designer

Alisa Prem

Product Designer at American Express

grids-for-mobile-apps-1-grids-and-layouts-masterclass-alexunder-hess-design-min
grids-for-mobile-apps-2-grids-and-layouts-masterclass-alexunder-hess-design-min

This masterclass is for:

UX/UI Designers

You'll understand the What, How and Why behind Grids and Layouts to make your design process super efficient and your designs more professional.

Graphic Designers

You'll learn lots of Psychology & Marketing secrets and how to create and use grids for Instagram posts.

Developers

You'll understand how designers create Grids and Layouts and the Math behind them, so it will be easier for you to code layouts and communicate with Designers.

Content Creators

One of the masterclass sections will be about grids for social media posts and Instagram carousels. You'll learn the rules that will make your post stand out.

Bonus:
Grids for Instagram Carousels and Posts

grids-and-layouts-masterclass-alexunder-hess-grids-for-instagra-carousels-min

β˜…β˜…β˜…β˜…β˜…

"1st time I put a 10/10, it was very worth it. A lot of tips that for sure, make me more efficient."

Natacha A. L. Product & Visual Designer
Natacha A.L.

Product & Visual Designer

Author of the class, Alexunder Hess

boost-your-creativity-masterclass-alexunderhess
  • A designer with over 15 years of hands-on experience in designing websites, apps and other digital products (LinkedIn)

  • Helped students launch their digital products

  • Founder of the AH Design Academy with 6000+ students

  • Creator of 14 unique masterclasses and courses

  • Helped my client make $500K with a typography-based website

  • Designed Chrome extension for SEO specialists that is used by 75,000 users every day β€” SEO Pro

  • Designed a data-heavy mobile application used by 3+ million users and improved its performance through API optimization (Wargaming)

  • Worked with the biggest car soft providers (Ford, SiriusXM) and media companies (NBC, Radio.com, iHeartRadio) and designed infotainment systems and TV apps for millions of users

Grids and Layouts for Websites and Mobile apps Masterclass by Alexunder Hess

Grids & Layouts for Websites & Mobile apps

5-hour practical video course
  • Grids and Layouts in UI design
  • Gestalt Psychology in UI Design
  • Different types of grids in design
  • How to create professional layouts for your designs using Grids
  • How to create complex grids easily
  • How alignment in design impacts marketing
  • 3 universal grids for any project
  • Advanced ways of using grids
  • Bonus: Grids for Instagram posts and carousels
secure-payment

Payment is processed and secured πŸ”’ by Stripe and PayPal by 128bit SSL encrypted payment.