Misconceptions about UI Grids (Everything you need to know)

Zeplin provides a simple workspace for your entire team to collaborate and build your designs. Simply upload your designs from Figma, Sketch, or XD and they'll handle the rest. Zeplin saves you time preparing and explaining your designs, so you can get back to designing them.
Get started for free
👉 bit.ly/3zSGQEl
===
Timestamps
00:00 - Biggest misconceptions on UI Grids
00:47 - History class on UI Grids
03:00 - Zeplin - Spacing Tokens
05:05 - History class on UI Grids
06:40 - 3 final thoughts and lessons
===
My Ultimate Figma Design Masterclass (3,800+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko

[@vaishnavipahari8107]

Grids are so important, everyone needs them. Thanks

[@anasraza277]

I use grids in my every design but now I have got an amazing tip today! Really enjoyed!

[@ifeanyieze2727]

I've never missed using grids. I even use them during graphics design for better alignments.

[@rafacavalcante]

Amazing video Michael, you help us a lot!

[@Mizko]

Thank you Rafael!

[@raskarjr]

You are amazing, please keep doing what you are doing. Thank you.

[@altheadsilva]

Super informative and really helpful :) thanks for the vid!

[@njengathegeek]

Right on time, when needed most

[@Mizko]

✌️

[@alfinfathildifan9003]

thanks a lot!!! so nice reverb

[@georgezorbas9036]

I am looking any figma example of not using grid system strictly...bravo for the video. we need more

[@sanwalpreet]

Love your content! Can you explain the benefits of responsive vs adaptive design?

[@sekeidesign]

This is great! I’ve been saying this in all of my classes when students ask, I’ll be linking them to this in the future 🔥 However I do want to say that Tailwind doesn’t make use of grids, they just have utility classes for grids so that you can use CSS grid if you’d like, but it doesn’t add anything on top of existing CSS grid!

[@Mizko]

Thanks Sekei! Appreciate it a lot. Sorry, I should have been more explicit when I mentioned Tailwind's utility classes for grids. You are 100% correct. Tailwind does not rely on a standardised grid system, instead you can simply add the utility class to a container where needed.

[@vaibhavtaylor07]

Can you show an alternative way to design without using a grid? Or your process of not using the grid?

[@antonijapek]

Always use some sort of grid. There is simpler way: kzbin.info/www/bejne/gHnHlXuwa551bac

[@amansaini8259]

Thanks Mizko for such an amazing videos, it will help me to collaborate with much more efficiently. I have questions that I regularly use grids while designing for mobile and desktop and some time also use for inner elements like cards, sections etc. So, should we keep something in mind for them also?

[@sridentallibonrawalumbu6722]

Works well!! DANKEEE

[@dotsona07]

Love the history aspect in this video. Memory lane for me 🙂

[@Mizko]

Haha! It was definitely nostalgic for me when I was putting the video together. Could have gone much deeper into the history, but I think I would have lost everyone 😂

[@Line49Design]

@@Mizko That history aspect was really well presented; just the right amount of it. 👍

[@ajgaming7167]

Haha don't worry mizko, very sure I'm going to keep watching your videos. Any chance you could make a roadmap video on your journey to being a UI/UX designer & Product Designer, Skills you have to learn and the order in which you have to learn them. A bit stuck and I don't want my learning process to be all over the place. Also if you could make a wireframe tutorial for beginners that would be very much appreciated. Love the videos miz, doing amazing work.

[@mojisayoawolesi]

Yeah Mizko,this would be great and helpful

[@frujunior67]

Another one 💥

[@Mizko]

Thank you!

[@hugot8226]

Always thought that frontend devs should have knowledge in the UI/UX field to properly understand those responsive missing "gaps" in a design. Designers should have dev knowledge too, at minimum, knowing the basics principles of flex/grid and a bit of frameworks to better anticipate the technicals concerns.

[@pregret]

Only in a perfect world....

[@joeldias494]

As a designer how can I learn this? Any tips?

[@pregret]

@@joeldias494 just learn some basic frontend coding. Build some websites by bootstrap

[@tGxChief1]

I would say check out webflow, you will get what flex/grid and the boxmodel is :)

[@AMDesignAndDev]

Great points Mizko. I honestly haven't used grids both for personal and commercial projects. One point about tailwindcss though, as a frontend developer, I routinely use tailwind css, but in tailwind css, I and I would argue most people usually don't structure whole pages based on grids, which is how designers usually like to use them, rather tailwindcss allows us to use them when required in sections/certain areas. Even if you see tailwind's offical website, they themselves don't use css grids to structure their pages, rather certain sections at times. Additionally, even back in the bootstrap days when people used columns religiously to structure pages, they used to use them multiple times in a nested manner, which gets super confusing and cumbersome to work with in a tool like Figma. Which is why I advocate to drop them all together.

[@ulikszenelaj7465]

totally agree, they make non-sense in the 90% of things

[@andrew.schaeffer4032]

I like to at least have a page width, sort of like bowling bumpers. After that i tend to set up a grid for each section to lay things out, then flexbox for smaller things like cards

[@RLNDcaST]

Yep... Am using these... 😅 in every project

[@Mizko]

Great!

[@rssamarth099]

the part where he said we won't need his videos anymore XDD

[@allencabo]

smashed the liked button! but I think I need a new mouse now

[@Mizko]

😂

[@KRUChY_80]

nice topic, and as always gr8 video, but there are some stripes floating up around your head.

[@Mizko]

Ah! I think that is from the lighting. I need to get that fixed :)

[@oscarhorn3399]

"And you might not even need to watch any of my videos in the future. I'm kidding. Make sure you like, subscribe and also turn on that damn bell notification" hahahahaha thanks mizko

[@rabbythesr]

❤❤

[@kennethlucas]

I haven't touched Zeplin since Figma. Weird to see such a push here when Figma does all that and more. Is there a reason? Do you REALLY use Zeplin in projects still? Or just because they sponsored this? Hard to follow without knowing what is good advice and what is sold out info.

[@vasiovasio]

Great video Mizko, but something is not right with the video - look, for example, 6:27 - some sort of horizontal waves from bottom to top over you speaking, like pulses...

[@jeffersgaming2385]

WHAT DO YOU EDIT YOUR VIDEOS WITH MIZZY

[@Mizko]

ADOBE Premier pro!

[@jeffersgaming2385]

@@Mizko thanks man👊

[@onyeka_ezeneche]

I use grids, ofcos!

[@Mizko]

🙏

[@csabaivanyi]

To be honest I'm confused about grid system :/. Yes.. I'm know it is important and useful but I don't understand what is the "rule" of grid system. How much margin and gutter should I use because on the KZbin or other forums there are as many suggestion as many designer. Also what is better if the content focus on the centre of the screen (much margin) or fill almost the whole screen (example 32-32 margin)? Or it is just depends on the project and I can decide which way I want to follow? Thank you so much if somebody try to help me about this :)) (sorry about my English)

[@dievas_]

Always use 8px system, make sure all your sizes are divisible by 8. Smaller elements should be divisible by 4 at least. In that way, your column might be 64 or 80 or 88, your gutters may be 8, 16, 24 depending on how much columns you have in your grid.

[@nishthaphutela3031]

the headphones plugged in but the soft still cos though the computer speakers . It really should be because bluetooth has a delay

[@sachinRao15]

💯☮️

[@rezaulkarim7245]

🤙

[@Mizko]

🙏

[@adied7725]

Please show alternative.... Show please 😊

[@uxalok]

Designer In my team! : hey Alok where is grid sysem I created! someone deleted it! -----Me: Oh did you not see Mizko has droped a new video

[@dicktracy5066]

I respectfully disagree. UI grids are still essential for scan-ability and consistency.

[@Mizko]

If only you watched the video

[@dicktracy5066]

@@Mizko only from end to end 🙂

[@Mizko]

@@dicktracy5066 You might have missed 06:57 - which is exactly what you're saying right?

[@luisvasquez3083]

Yep, but instead of using hard grids it's better to use soft grids with some defined spacing tokens, it will make your design more flexible and will be most easy for developers to implement

[@dicktracy5066]

@@Mizko please share your methodology of designing without hard grids. Do you just eyeball? 😂

[@rasula9]

Now I Don't use grids in my designs. I only use guides using rulers for keeping the margin.

[@punkshit120]

any chinese subtitle?

[@gochagochashvili9363]

Well, that Kanye joke didn't age well.

[@Mizko]

Lol! It was satire

[@timoti2]

you are sowing disinformation about the essential value of grids for visual rhythm and consistency for the sake of clickbait

[@kennethlucas]

Lost me with the Kanye comment. You are better than that.

[@dievas_]

Grids are useful in most real world projects. Most projects has some lists of cards. Most web apps has area that uses grids. Websites you see in awwwards are not really real world, only visitors they get are mostly from awwwards, which is bad design and UX circlejerk website. Yes, you do not need any limiting CSS frameworks anymore, since css grid every page section can have different grid, but there's still a grid. Also container grids are coming, these will change everything. TL;DR, you need grid(s) on most real projects.