logo

Grids & Responsive Design. Ultimate Guide for UX/UI Designer (Figma Files + Basic HTML & CSS)

feature icon

Self-paced course

Price

Rating

Overview

In this class, you'll learn everything about using grids for your UI Design.

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 b asic 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 t ell 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.

© moonlearning.io with moon learning

Skills you will gain

Similar courses

course image
Webflow for Beginners: Design Your Portfolio Site
logo
Skillshare
course image
UX Design Fundamentals: Everything You Need to Know (and More)
logo
Skillshare
course image
Stick to It: How to Maintain a Creative Practice
logo
Skillshare
course image
Misingi ya Design (Graphics Design Fundamentals)
logo
Skillshare
course image
Smart Responsive UX Design: Clever Tips, Tricks and Techniques
logo
Skillshare
course image
Design is in the Details: How to Accessorize Like a Pro
logo
Skillshare

Featured articles

Sep 12, 2022

WATCH these YouTube videos if you can't start learning a language

5

0
1
4K

Sep 12, 2022

How Memrise works + reviews [2022]

6

0
1
4K

Sep 12, 2022

5 tips to learn languages with YouTube videos [2022]

7

0
1
4K

Sep 12, 2022

How I Became a Marketing Manager at Microsoft

8

0
1
2K

Sep 24, 2022

How Edureka works + reviews [2022]

3

0
2
2K

Sep 27, 2022

How Codecademy works + reviews [2022]

3

0
2
2K
course image
feature icon

1266 students

feature icon

English

feature icon

Beginner

Provided by

Authored by