Alexunder Hess – The Power & Psychology of UI Grids and Layouts for Websites and Mobile apps

Alexunder Hess – The Power & Psychology of UI Grids and Layouts for Websites and Mobile apps

Learn how to create professional layouts for websites, mobile apps, Instagram carousels, and other digital products using Grids.

+ for eCommerce, marketing websites, web apps and dashboards, desktop, tablet, and mobile versions, for simple one/two-column and complex 7-column mobile apps

+ Psychology, Marketing, and Design Process secrets

+ Instagram posts & carousels grids & layouts

+ How to find inspiration for your stunning works all around you

Grids are one of the most effective design tools that will forever change the way you design websites and mobile apps.

This class is not only about Grids & Layouts

it’s about the Psychology of UI and how to make your works look professional, make your life much easier, save you time, give the feeling of a high-quality product, and help you charge more for your work and get visible.

In this masterclass you’ll learn

• 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 Great 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
• 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)
• Q&A: Grids for Modal screens (how many columns?)
• Q&A: Grids for Navigation (on or off the grid?)
• Q&A: Grids and Buttons (should the button be the size of columns?)
• Q&A: 3-,5-,7-col Grids in mobile apps (where to use and for what)
• Q&A: Left and Right direction Grid (where to use?)
• Q&A: Grids and Layouts without Grids (Wow!)
• Q&A: Simple ugly Layout for a high converting website (marketing tip)
• Q&A: Simple beautiful Layout for a high converting website (design tip)
• Q&A: How to define what Grid a website uses
• Q&A: How to use a Grid calculator I created for you
• Q&A: Should you use a 4px grid for a mobile app?
• Q&A: 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

This masterclass is for Mid- and Senior Designers.

If you’re a Junior UX/UI Designer and you understand how to design websites or mobile apps, you used Grids before but don’t know exactly why and how to apply them, this class will also be beneficial for you.

UX/UI Designers

You’ll understand the What, How and Why behind Grids and Layouts, and it will make your design process super efficient and your works will look more professional.

Graphic Designers

In the masterclass we will cover how to create and use Grids for Instagram posts and lots of Psychology & Marketing secrets. You will love it.

Developers

You’ll understand how designers create Grids and Layouts and the Math behind them, so it will be easier for you to calculate and code them.

Content Creators

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