[VIP] MOONLEARNING: Grids & Responsive Design. Ultimate Guide for UX/UI Designer

About This Class

Grids are not only your best friend when it comes to creating a consistent layout. They are also the backbone when it comes to responsive design and making your product shine across all screen sizes.

We will start from zero and make sure you will be a pro by covering the following subjects:

• We will learn about the basic setup like Columns, Grutter, Margin, and Rows
• We will learn how to add content to the grid
• We will make sure to avoid common positioning mistakes
• Then we will have an intensive look at how Grids make your design responsive
• And how you, as a UX/UI Designer set up your designs in Figma accordingly
• We will get into the details of how breakpoints work, where we can find them, and why they are such strange numbers
• We will learn about the difference between responsive and adaptive behavior
• As a final project, we will be building our own responsive portfolio in Figma

Besides the classic Grids like Bootstrap and co, I will tell you a bit about my favorite grid, the CSS Grid, full of possibilities.

And yes, we will go the extra mile and look at some basic code, all set up for UX/UI Designers to really understand the technicality behind the product you are building.

The Figma and code template that I will show you are part of the course material to make sure you can dive right into the making. 

General: 

Figma Bootstrap Grid Template

A list with links to helpers & inspirations

Design Handoff to Development Course

Pdf Cheatsheet: Asset Export the right way

Design Handoff to development course Figma file (.fig)

UX/UI Basics

UX Principles Exercise in Figma (.fig)

UI Principles Exercise in Figma (.fig)

How Stuff works in UX/UI Design Class

Colour Stylesheet  (.fig)

Typography Stylesheet 8/4pt Approach (.fig)

Typography Stylesheet Ratio Approach (.fig)

Grids & Responsive UI Design Class

Responsive & Adaptive Grids in Figma (.fig)

CSS Grid Figma Playground (.fig)

Course Project: Responsive Portfolio in Figma (.fig)

Bootstrap Playground (HTML & CSS)

CSS Grid Playground (HTML & CSS)

Design Handoff to Development Course

Pdf Cheatsheet: Asset Export the right way

Design Handoff to development course Figma file