Grid Systems in Web & UI Design

In Web Design, grid systems are invisible structures that collect all the elements together. A structure made up of a series of columns, gutters, and margins used to structure content. Let's dive into the basics of grid systems in web and UI design. Remember to Subscribe goo.gl/6vCw64
Join this channel to get access to perks:
/ @jesseshowalter
0:00 - Intro
0:31 - What is a Grid System?
0:52 - How do we use a Grid System?
1:16 - Basic Terms
1:20 - Columns
1:30 - Gutters
1:41 - Margins
2:10 - 12 Column Grid
3:05 - Breaking the Rules
Great Examples of using and breaking the grid
stripe.com/
www.figma.com/
letsxd.com/
------------------------------------------------------------------------------------
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter.com/newsletter
////////// Elevate your videos with record-label quality music from Musicbed👇🏼
share.mscbd.fm/imjesseshow
////////// Equipment 📸
www.amazon.com/shop/jesseshow...

Пікірлер: 84

  • @PaytonClarkSmith
    @PaytonClarkSmith2 жыл бұрын

    Loving this video! Your animations make it easy to visualize the different elements of a grid. Thanks Jesse 👊🏻

  • @chichi-bu9xu
    @chichi-bu9xu2 жыл бұрын

    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!

  • @rehanqureshiyt
    @rehanqureshiyt3 жыл бұрын

    Knowledgeable as always! Thank you. Waiting for the Responsive Grid Explanation.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Coming soon 👍🏼

  • @krzysztofchoma9495
    @krzysztofchoma94953 жыл бұрын

    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 :)

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Practice makes perfect 👍🏼👍🏼👍🏼

  • @chichi-bu9xu

    @chichi-bu9xu

    2 жыл бұрын

    Completely agree.

  • @stephanienoel2902
    @stephanienoel29023 жыл бұрын

    Thanks again for another awesome video. I been out of the design loop for a while now and just relearning everything.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    So stoked for you!! Go get em!!

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    You’ve got this!!

  • @vishnurnair6400
    @vishnurnair6400 Жыл бұрын

    Thank you so much for the awesome tips. You're awesome. ❤

  • @josh_ux
    @josh_ux3 жыл бұрын

    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.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    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! 🤘

  • @sengkeavideos
    @sengkeavideos2 жыл бұрын

    Great video for basic understanding of Grid. I always ignore this one when working on UI.

  • @danecustance2734
    @danecustance27342 жыл бұрын

    Thanks, nicely explained.

  • @elizabeth43213
    @elizabeth432133 жыл бұрын

    Amazing breakdown! Thank you.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thanks, Elizabeth!

  • @jonaspedersen3634
    @jonaspedersen36342 жыл бұрын

    Great video! You say that you'll save the responsive grid system for another video. I'd love to see that video :)

  • @hongganglai3758
    @hongganglai37583 жыл бұрын

    Thanks! Great content!

  • @vsk.design
    @vsk.design3 жыл бұрын

    Thanks! Waiting for the video on Responsive grid system!

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Coming soon

  • @kaveengoonawardane9651
    @kaveengoonawardane96513 жыл бұрын

    Huh...now the bootstrap 12 column grid system makes perfect sense. Thanks Jesse! :)

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thanks so much, Kaveen! Glad you enjoyed it! 🤘

  • @obedt
    @obedt2 жыл бұрын

    Awesome Man. Thanks.

  • @DanOladipo
    @DanOladipo8 ай бұрын

    Simple and Clear, just as anything Jesse does is.

  • @Coco-vi3sc
    @Coco-vi3sc3 жыл бұрын

    I just realized how even your walls look like a well organized, stylish website lol! The lights are insane.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Haha, thanks so much, Ed!! I like clean lines!

  • @vrm_ravi
    @vrm_ravi2 жыл бұрын

    your way of talking is fabulous bro. great, keep it up

  • @Sara-oy6ly
    @Sara-oy6ly7 ай бұрын

    Best explantion 😊after watching tons of videos

  • @johnnygarces2216
    @johnnygarces22163 жыл бұрын

    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'

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    That’s a cool idea, I’ll add it to the list

  • @codeandcurious
    @codeandcurious2 жыл бұрын

    Thanks jesse for the short information

  • @iamgavcarter
    @iamgavcarter Жыл бұрын

    Once again. Solid.

  • @EpicDurian6964
    @EpicDurian69643 жыл бұрын

    Thanks buddy, it was nice and an informative video.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thanks for watching

  • @tejumadeolomola2627
    @tejumadeolomola26272 жыл бұрын

    Happy I found you Man!

  • @juliberk
    @juliberk Жыл бұрын

    Your background is great.

  • @maneldrareni
    @maneldrareni2 жыл бұрын

    You are amazing!

  • @Krishna-le3fo
    @Krishna-le3fo3 жыл бұрын

    Useful... Thank You

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    I’m so glad

  • @muhsin_abdallah
    @muhsin_abdallah8 ай бұрын

    You just earned a subscriber 😊

  • @hudsontaylor7779
    @hudsontaylor77793 жыл бұрын

    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!

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    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

  • @user-mr2zl5wt6m
    @user-mr2zl5wt6m9 ай бұрын

    amazing

  • @moazelsawaf2000
    @moazelsawaf2000 Жыл бұрын

    Thanks ❤

  • @TechnoAsh
    @TechnoAsh3 жыл бұрын

    Thanks brother 😊

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Your so welcome

  • @snehilm5135
    @snehilm51352 ай бұрын

    Thank you sir

  • @abuferashamdani4827
    @abuferashamdani48273 жыл бұрын

    Help full.. thank you so much 😊

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thank YOU, Abuferas! 🤙

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thank you!!

  • @nazaradana1252
    @nazaradana1252 Жыл бұрын

    never though i would be learning about grids from brendon urie, dude's is a tech nerd

  • @nithishnitiz5891
    @nithishnitiz58912 жыл бұрын

    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??

  • @teerawutphonghan4432
    @teerawutphonghan44323 жыл бұрын

    Thank you

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Your so welcome

  • @GhostFront
    @GhostFront3 жыл бұрын

    Bro i love your glasses. Can you tell me the model?

  • @abdelazizpsy
    @abdelazizpsy2 ай бұрын

    thanks

  • @marlpiece7175
    @marlpiece71752 жыл бұрын

    is there a standard for Marigns? or should it always be divisible by 2 3 so on?

  • @aashanyoutube
    @aashanyoutube2 жыл бұрын

    Can i use different grid for website? Like one type for landing page and different grid for dashboard

  • @tomashruska2171
    @tomashruska2171 Жыл бұрын

    nice video

  • @dabs91
    @dabs912 жыл бұрын

    So what's the usual margin size to use?., And when an design on website im not sure what size to use

  • @abdulmagidelmaghbub9950
    @abdulmagidelmaghbub9950 Жыл бұрын

    niiiice intro

  • @CanadianChick811
    @CanadianChick8113 жыл бұрын

    Do Graphic Design programs (I've been learning with Adobe and Affinity specifically) have premade grids that you can use? Math is hard.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Yes a lo of programs have built in grids. Adobe XD, Figma and Sketch all have this capability

  • @ByInside
    @ByInside2 жыл бұрын

    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.

  • @Rotem-er9wd
    @Rotem-er9wd3 жыл бұрын

    How to know how many columns are needed? For example for desktop website. 12 columns will always fit?

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    there's not hard and fast rules, do what works best for your layouts

  • @tonys490
    @tonys4903 жыл бұрын

    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

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Great suggestion, I’ll see what I can do!

  • @tochidioka6019
    @tochidioka60192 жыл бұрын

    For a mobile app, I’m using 8 columns. Please can u advice me on the size of margin and gutter I should use?

  • @vermagagan22

    @vermagagan22

    2 жыл бұрын

    Hi, for mobile best practice is to make it on 4 column

  • @jaloliddinesonboyev
    @jaloliddinesonboyev3 жыл бұрын

    perfect)

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thanks so much!

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    Thanks!

  • @Sebastian-zs8cp
    @Sebastian-zs8cp2 жыл бұрын

    hi, how setup my css under my adobe xd costem design grid?

  • @liadecarvalho5270
    @liadecarvalho52702 жыл бұрын

    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.

  • @delta_7983
    @delta_79832 жыл бұрын

    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.

  • @marquezce14
    @marquezce142 жыл бұрын

    Where are your glasses from? =)

  • @LUCA54
    @LUCA542 жыл бұрын

    oh jesses

  • @zingnolan
    @zingnolan Жыл бұрын

    general intro nothing special incomplete tut

  • @Olexandr____
    @Olexandr____3 жыл бұрын

    I can't trust advices from designer with that ugly glasses. Previusly I was watching your videos - but with this glasses - no chance.

  • @JesseShowalter

    @JesseShowalter

    3 жыл бұрын

    This is hilarious. Sorry they bug you so much 🤣

  • @Olexandr____

    @Olexandr____

    3 жыл бұрын

    @@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?

  • @motombo2007
    @motombo2007 Жыл бұрын

    gutter and columns size in px?