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 – Alexunder Hess

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.

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