Responsive Design with Grids. A Guide for UX/UI Designer
104.2k students
4.3 (3.7k ratings)
1h 30m
English
This Course Includes
1.5 hours On-Demand Video
Full Lifetime Access
Access on Mobile, Desktop and TV
Certificate of Completion
Mentor
Athena Joy
236k followerss
4.3 (3.7k ratings)
Following
Details
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.
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
What You'll Learn
- Everything about Responsive Grids from 0 to hero
- Basic setup like Columns, Grutter, Margin, and Rows
- Understand the difference between responsive and adaptive behaviour
- Understand what breakpoints are, where they come from and how to use them
- Classic Grid Systems such as Bootstrap Grids and CSS Grid
- Setting up Adaptive, Responsive and CSS Grids in FIGMA and adding content the right way
- Adding content to the grid, avoiding common positioning mistakes
- How Grids make your design responsive
- As a final project, we will be building our own responsive portfolio in Figma
- 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.
Who This Course is For
- Beginner and Advanced UX/UI Designer
- Graphic Designer switching over to UX/UI Design
- Front-End Developer wanting to improve their communication with the design team
- Anyone interested in learning about Grids in UX/UI Design
- Sketch or XD users switching over to Figma
Requirements
- No requirements but recommended: (Free) Figma account
- Basic knowledge of Figma (or any other UI Design software)
Course content
Overall Reviews
4.3
out of 5
32%
62%
3%
2%
1%
Ami Jackson
20 minutes ago
The course is very good. the explanation of the mentor is very clear and easy to understand 😎😎
Was this review helpful?
369
10
Kevin Smith
1 week ago
Throughout the course, She explained everything so much more clearly, everything was easy, and the course is quite good.
Was this review helpful?
463
56
Laura Flemo
2 week ago
Really appreciated this course, in helping me better understand designing with grids. Though, would like the section on adding elements to the grid to be more in depth. Exploring a larger variety of layouts.
Was this review helpful?
1k
256
Caity Laurance
3 week ago
The creator has a great voice and is good at explaining the concepts in general... however, The title is totally misleading. It's really not an ultimate guide.
Was this review helpful?
344
28
Share
Students Also Bought
3D Design
Learning Blender & 3D Max for...
Development
Learning Python For Data Analy...
FAQs
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Using your order number and email address or phone number, you can track your order online.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.