Grid Systems in Web & UI Design

Sdílet
Vložit
  • čas přidán 8. 09. 2024

Komentáře • 86

  • @krzysztofchoma9495
    @krzysztofchoma9495 Před 3 lety +17

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

  • @PaytonClarkSmith
    @PaytonClarkSmith Před 2 lety +8

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

  • @Coco-vi3sc
    @Coco-vi3sc Před 3 lety +1

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

  • @kaveengoonawardane9651
    @kaveengoonawardane9651 Před 3 lety +2

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

    • @JesseShowalter
      @JesseShowalter  Před 3 lety +1

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

  • @rehanqureshiyt
    @rehanqureshiyt Před 3 lety +5

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

  • @chichi-bu9xu
    @chichi-bu9xu Před 2 lety +5

    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!

  • @vsk.design
    @vsk.design Před 3 lety +2

    Thanks!
    Waiting for the video on Responsive grid system!

  • @josh_ux
    @josh_ux Před 3 lety +5

    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  Před 3 lety

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

  • @DanOladipo
    @DanOladipo Před 11 měsíci

    Simple and Clear, just as anything Jesse does is.

  • @nazaradana1252
    @nazaradana1252 Před 2 lety

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

  • @snehilm5135
    @snehilm5135 Před 5 měsíci

    Thank you sir

  • @user-mr2zl5wt6m
    @user-mr2zl5wt6m Před 11 měsíci +1

    amazing

  • @codeandcurious
    @codeandcurious Před 2 lety

    Thanks jesse for the short information

  • @Sara-oy6ly
    @Sara-oy6ly Před 10 měsíci

    Best explantion 😊after watching tons of videos

  • @vrm_ravi
    @vrm_ravi Před 2 lety

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

  • @stephanienoel2902
    @stephanienoel2902 Před 3 lety +1

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

  • @sengkeavideos
    @sengkeavideos Před 3 lety

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

  • @abdelazizpsy
    @abdelazizpsy Před 4 měsíci

    thanks

  • @juliberk
    @juliberk Před rokem

    Your background is great.

  • @elizabeth43213
    @elizabeth43213 Před 3 lety +1

    Amazing breakdown! Thank you.

  • @vishnurnair6400
    @vishnurnair6400 Před rokem +1

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

  • @abdulmagidelmaghbub9950

    niiiice intro

  • @iamgavcarter
    @iamgavcarter Před rokem

    Once again. Solid.

  • @EpicDurian6964
    @EpicDurian6964 Před 3 lety +1

    Thanks buddy, it was nice and an informative video.

  • @tejumadeolomola2627
    @tejumadeolomola2627 Před 2 lety

    Happy I found you Man!

  • @teerawutphonghan4432
    @teerawutphonghan4432 Před 3 lety +1

    Thank you

  • @obedt
    @obedt Před 2 lety

    Awesome Man. Thanks.

  • @Chasing_the_wind
    @Chasing_the_wind Před 11 měsíci

    You just earned a subscriber 😊

  • @danecustance2734
    @danecustance2734 Před 2 lety

    Thanks, nicely explained.

  • @TechnoAsh
    @TechnoAsh Před 3 lety +1

    Thanks brother 😊

  • @johnnygarces2216
    @johnnygarces2216 Před 3 lety +5

    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  Před 3 lety +3

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

  • @Krishna-le3fo
    @Krishna-le3fo Před 3 lety +1

    Useful...
    Thank You

  • @moazelsawaf2000
    @moazelsawaf2000 Před 2 lety

    Thanks ❤

  • @tomashruska2171
    @tomashruska2171 Před rokem

    nice video

  • @abuferashamdani4827
    @abuferashamdani4827 Před 3 lety +1

    Help full.. thank you so much 😊

  • @jonaspedersen3634
    @jonaspedersen3634 Před 3 lety

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

  • @hongganglai3758
    @hongganglai3758 Před 3 lety

    Thanks! Great content!

  • @delta_7983
    @delta_7983 Před 2 lety +1

    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.

  • @maneldrareni
    @maneldrareni Před 3 lety

    You are amazing!

  • @Rotem-er9wd
    @Rotem-er9wd Před 3 lety +1

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

    • @JesseShowalter
      @JesseShowalter  Před 3 lety +1

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

  • @GhostFront
    @GhostFront Před 3 lety

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

  • @nithishnitiz5891
    @nithishnitiz5891 Před 2 lety

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

  • @hudsontaylor7779
    @hudsontaylor7779 Před 3 lety +1

    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  Před 3 lety +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

  • @CanadianChick811
    @CanadianChick811 Před 3 lety +1

    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  Před 3 lety

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

  • @wendyblaschack4590
    @wendyblaschack4590 Před 2 měsíci

    How do I remove a grid screen overlay from my phone ? I think I did this using my treat scanner app.

  • @ByInside
    @ByInside Před 2 lety

    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.

  • @tonys490
    @tonys490 Před 3 lety +1

    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

  • @aashanyoutube
    @aashanyoutube Před 2 lety

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

  • @dabs91
    @dabs91 Před 2 lety

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

  • @marlpiece7175
    @marlpiece7175 Před 2 lety

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

  • @tochidioka6019
    @tochidioka6019 Před 2 lety

    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 Před 2 lety

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

  • @liadecarvalho5270
    @liadecarvalho5270 Před 2 lety

    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.

  • @jaloliddinesonboyev
    @jaloliddinesonboyev Před 3 lety +1

    perfect)

  • @Sebastian-zs8cp
    @Sebastian-zs8cp Před 3 lety

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

  • @marquezce14
    @marquezce14 Před 2 lety

    Where are your glasses from? =)

  • @LUCA54
    @LUCA54 Před 2 lety

    oh jesses

  • @zingnolan
    @zingnolan Před rokem

    general intro nothing special incomplete tut

  • @Olexandr____
    @Olexandr____ Před 3 lety +1

    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  Před 3 lety +4

      This is hilarious. Sorry they bug you so much 🤣

    • @Olexandr____
      @Olexandr____ Před 3 lety

      @@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 Před rokem

    gutter and columns size in px?