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.
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!
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.
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.
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 😂
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.
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...
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?
"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
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.
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
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 TH-cam 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)
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.
You only explained why grids are not mandatory... you should have showed an example where you use an alternative approach to get the same amount of consistency that grids provide.
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.
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
Grids are so important, everyone needs them. Thanks
I've never missed using grids. I even use them during graphics design for better alignments.
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.
totally agree, they make non-sense in the 90% of things
I use grids in my every design but now I have got an amazing tip today!
Really enjoyed!
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!
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.
I am looking any figma example of not using grid system strictly...bravo for the video. we need more
Amazing video Michael, you help us a lot!
Thank you Rafael!
Love your content! Can you explain the benefits of responsive vs adaptive design?
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.
Yeah Mizko,this would be great and helpful
Can you show an alternative way to design without using a grid? Or your process of not using the grid?
Always use some sort of grid. There is simpler way: th-cam.com/video/JHddHz69B7E/w-d-xo.html
Love the history aspect in this video. Memory lane for me 🙂
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 😂
@@Mizko That history aspect was really well presented; just the right amount of it. 👍
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.
Only in a perfect world....
As a designer how can I learn this? Any tips?
@@joeldias494 just learn some basic frontend coding. Build some websites by bootstrap
I would say check out webflow, you will get what flex/grid and the boxmodel is :)
Right on time, when needed most
✌️
Super informative and really helpful :) thanks for the vid!
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...
thanks a lot!!! so nice reverb
You are amazing, please keep doing what you are doing. Thank you.
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?
Yep... Am using these... 😅 in every project
Great!
"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
the part where he said we won't need his videos anymore XDD
smashed the liked button! but I think I need a new mouse now
😂
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.
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
nice topic, and as always gr8 video, but there are some stripes floating up around your head.
Ah! I think that is from the lighting. I need to get that fixed :)
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 TH-cam 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)
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.
WHAT DO YOU EDIT YOUR VIDEOS WITH MIZZY
ADOBE Premier pro!
@@Mizko thanks man👊
Works well!! DANKEEE
You only explained why grids are not mandatory... you should have showed an example where you use an alternative approach to get the same amount of consistency that grids provide.
Another one 💥
Thank you!
the headphones plugged in but the soft still cos though the computer speakers . It really should be because bluetooth has a delay
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
I use grids, ofcos!
🙏
Now I Don't use grids in my designs. I only use guides using rulers for keeping the margin.
Please show alternative.... Show please 😊
❤❤
🤙
🙏
💯☮️
Well, that Kanye joke didn't age well.
Lol! It was satire
you are sowing disinformation about the essential value of grids for visual rhythm and consistency for the sake of clickbait
Lost me with the Kanye comment. You are better than that.
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.
I respectfully disagree.
UI grids are still essential for scan-ability and consistency.
If only you watched the video
@@Mizko only from end to end 🙂
@@dicktracy5066 You might have missed 06:57 - which is exactly what you're saying right?
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
@@Mizko please share your methodology of designing without hard grids.
Do you just eyeball? 😂
any chinese subtitle?