Grid is something that I definitely underestimated when I started learning UI, now I know that. I should practice it more. And I think that breaking Grid is ok but only for people who know how to do that :)
Wow, love this.. it's simple and clear, I'm not new to web designing but have always dreaded studying the GRID in depth, my goal is to translate designs into code properly. I'm looking for your next video now, thank you for sharing your knowledge!
I love all the videos you make Jesse! Did you drop off for a while while working for Adobe? I still tell all my budding designer friends about you. Thanks for doing a video about grids! No one really talks about them. Please make another video about breakpoints, if you haven't already, and popular grid frameworks like Bootstrap.
Thank you so so much, Joshua! I really appreciate the support and encouragement. I’m so blessed by the community here! I’ll see what we can do, my friend! 🤘
Can one column have 1 additional pixel? I set up a dashboard 1440x1024 100px margin 24px gutters and the width of the columns are sometimes different (1px difference). Did I just ruin the design system that I’m working on? It just stretched this way.
I cannot imagine a Spanish person trying to explain the grid system... It will take one hours.. 😂That's why I love English speaks.. They are so directly and pragmatic.
I don't know how to adjust the length of my columns. I'm using an e-learning free wordpress theme. My columns are too long and I can't just adjust them the way we do in Word. Please help.
can do a video of process of trasforming UI xd/figma file to acual site please? do devs still start from scratch and use UI as guide or will they use the same files to code? thanks a lot
Great vid! When designing for desktop, do you keep everything inside of a 960 grid? Also what does the term “offset” mean? I’ve seen it on a couple of the UI design softwares. Thanks Jesse!
no 960 is no longer the standard, I try to stay between 1100 and 1400 for desktop. Offset is exactly what is sound like, it offsets it from the center of the design
@@JesseShowalter Thanks for responsing =) . You have a lot of good content on the chanel. Thank you for your work. But once you started wearing those glasses - I can't concentrate on whatever you're explaining. I can't stop noticing those glasses. =) Is there any drop in metrics on your channel after you got them?
![[UNCUT] เก็บ "สจ.โต้ง" เอี่ยวมาเฟีย รู้ตัวคนบงการ ก่อนสั่งลั่นไก I คนดังนั่งเคลียร์ I 13 ธ.ค.67](http://i.ytimg.com/vi/o-J_p62D40w/mqdefault.jpg)
Grid is something that I definitely underestimated when I started learning UI, now I know that. I should practice it more. And I think that breaking Grid is ok but only for people who know how to do that :)
Practice makes perfect 👍🏼👍🏼👍🏼
Completely agree.
I just realized how even your walls look like a well organized, stylish website lol! The lights are insane.
Haha, thanks so much, Ed!! I like clean lines!
Loving this video! Your animations make it easy to visualize the different elements of a grid. Thanks Jesse 👊🏻
Simple and Clear, just as anything Jesse does is.
never though i would be learning about grids from brendon urie, dude's is a tech nerd
Thanks!
Waiting for the video on Responsive grid system!
Coming soon
Thanks jesse for the short information
Wow, love this.. it's simple and clear, I'm not new to web designing but have always dreaded studying the GRID in depth, my goal is to translate designs into code properly.
I'm looking for your next video now, thank you for sharing your knowledge!
Huh...now the bootstrap 12 column grid system makes perfect sense. Thanks Jesse! :)
Thanks so much, Kaveen! Glad you enjoyed it! 🤘
your way of talking is fabulous bro. great, keep it up
Knowledgeable as always! Thank you. Waiting for the Responsive Grid Explanation.
Coming soon 👍🏼
Your background is great.
Best explantion 😊after watching tons of videos
Thanks again for another awesome video. I been out of the design loop for a while now and just relearning everything.
So stoked for you!! Go get em!!
You’ve got this!!
Happy I found you Man!
Once again. Solid.
Amazing breakdown! Thank you.
Thanks, Elizabeth!
You just earned a subscriber 😊
Great video for basic understanding of Grid. I always ignore this one when working on UI.
I love all the videos you make Jesse! Did you drop off for a while while working for Adobe? I still tell all my budding designer friends about you. Thanks for doing a video about grids! No one really talks about them. Please make another video about breakpoints, if you haven't already, and popular grid frameworks like Bootstrap.
Thank you so so much, Joshua! I really appreciate the support and encouragement. I’m so blessed by the community here! I’ll see what we can do, my friend! 🤘
Awesome Man. Thanks.
Thanks, nicely explained.
Thank you sir
Thanks buddy, it was nice and an informative video.
Thanks for watching
amazing
Help full.. thank you so much 😊
Thank YOU, Abuferas! 🤙
Thank you!!
Thanks ❤
Thanks! Great content!
Thanks brother 😊
Your so welcome
How to know how many columns are needed? For example for desktop website. 12 columns will always fit?
there's not hard and fast rules, do what works best for your layouts
Useful...
Thank You
I’m so glad
niiiice intro
Thank you so much for the awesome tips. You're awesome. ❤
Thank you
Your so welcome
So what's the usual margin size to use?., And when an design on website im not sure what size to use
Great video! You say that you'll save the responsive grid system for another video. I'd love to see that video :)
hi, how setup my css under my adobe xd costem design grid?
How do I remove a grid screen overlay from my phone ? I think I did this using my treat scanner app.
QR scanner grid overlay how do I remove from my screen
Which one is good to use when we design a mobile applications and a website, is it column method or an 8 point grid systems??
Can one column have 1 additional pixel? I set up a dashboard 1440x1024 100px margin 24px gutters and the width of the columns are sometimes different (1px difference). Did I just ruin the design system that I’m working on? It just stretched this way.
I cannot imagine a Spanish person trying to explain the grid system... It will take one hours.. 😂That's why I love English speaks.. They are so directly and pragmatic.
Can i use different grid for website? Like one type for landing page and different grid for dashboard
thanks
I don't know how to adjust the length of my columns. I'm using an e-learning free wordpress theme. My columns are too long and I can't just adjust them the way we do in Word. Please help.
You are amazing!
can do a video of process of trasforming UI xd/figma file to acual site please? do devs still start from scratch and use UI as guide or will they use the same files to code? thanks a lot
Great suggestion, I’ll see what I can do!
Bro i love your glasses. Can you tell me the model?
For a mobile app, I’m using 8 columns. Please can u advice me on the size of margin and gutter I should use?
Hi, for mobile best practice is to make it on 4 column
is there a standard for Marigns? or should it always be divisible by 2 3 so on?
always a treat to see your videos, Jesse! Would it be possible to see you build a grid in action (i.e. Figma/Sketch/XD?) Keep it rocking'
That’s a cool idea, I’ll add it to the list
nice video
Do Graphic Design programs (I've been learning with Adobe and Affinity specifically) have premade grids that you can use? Math is hard.
Yes a lo of programs have built in grids. Adobe XD, Figma and Sketch all have this capability
Great vid! When designing for desktop, do you keep everything inside of a 960 grid? Also what does the term “offset” mean? I’ve seen it on a couple of the UI design softwares. Thanks Jesse!
no 960 is no longer the standard, I try to stay between 1100 and 1400 for desktop. Offset is exactly what is sound like, it offsets it from the center of the design
Where are your glasses from? =)
perfect)
Thanks so much!
Thanks!
oh jesses
general intro nothing special incomplete tut
I can't trust advices from designer with that ugly glasses. Previusly I was watching your videos - but with this glasses - no chance.
This is hilarious. Sorry they bug you so much 🤣
@@JesseShowalter Thanks for responsing =) . You have a lot of good content on the chanel. Thank you for your work. But once you started wearing those glasses - I can't concentrate on whatever you're explaining. I can't stop noticing those glasses. =) Is there any drop in metrics on your channel after you got them?
gutter and columns size in px?