Baseline Grids | The basics of Baseline Grids in UI & Web Design

Рет қаралды 107,561

Күн бұрын

A baseline grid is an underlying structure built from invisible units of measurement... more simply put, it lines your stuff up. It’s an excellent typographic tool, but also comes in handy when laying out other elements on the page. A baseline grid is a way to help you make decisions and build consistency into your UI and Web Designs. Remember to Subscribe goo.gl/6vCw64
More reading on Baseline Grids ---------------------------
superdream.com/news-blog/tuto...
webdesign.tutsplus.com/articl...
www.creativebloq.com/web-desi...
------------------------------------------------------------------------------------
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
Anchor: anchor.fm/imjesseshow
Medium: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
share.mscbd.fm/imjesseshow
////////// Equiptment 📸
www.amazon.com/shop/jesseshow...

Пікірлер: 228

@sokik6936 Жыл бұрын

Thanks for explaining this with visuals, I'm currently in a bootcamp and they made us read articles about grids and being divisible by 8. My mentor even explained it to me, but I still didn't quite understand it so I never used a grid in my assignments. This video fit my learning styles with visual examples and I finally get how to use it now. I appreciate you for this video!

@giardiniera7130 8 ай бұрын

Springboard?

@21copyCat Жыл бұрын

Probably the best video about baseline grid around

@nravanilla 3 жыл бұрын

May I just say, you're an awesome teacher. Your pedagogy skills are on point!

@JesseShowalter 3 жыл бұрын

I appreciate it

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally for my designs..?

@mayanksaxena6273 2 жыл бұрын

@@God-T yes and no. If you're doing dev handoffs, yes.

@God-T 2 жыл бұрын

@@mayanksaxena6273 Thx for the reply, I've been waiting 5 months :) !

@rawr-asmr 3 жыл бұрын

This was so ridiculously short but super insightful, I love it!

@JesseShowalter 3 жыл бұрын

Thanks so much, Marshmellow!

@kailikameoka4915 4 жыл бұрын

This is another part of UI design that puzzled me that I had never thought to look into. Thnx for another great video.

@JesseShowalter 4 жыл бұрын

You’re so so welcome, Kaili!! 🤘

@felipefelixsantos 4 жыл бұрын

I'm working in a desing projet rigth now and this baseline aligment is gonna help me a lot! Thanks once more Jesse! You're the best!

@JesseShowalter 4 жыл бұрын

Yes!!! So stoked I could be of help! Go make amazing things, Felipe!

@itsa_cat 4 жыл бұрын

Thank you! This is so easy to understand and digest- your delivery is also really approachable. I really learned something that I'll apply after watching this video.

@JesseShowalter 4 жыл бұрын

Thanks so much, so glad you liked it!

@revillsimon 3 жыл бұрын

This is exactly what I’ve been looking for. Thanks so much for making this. 😎👍

@joeyp734 2 жыл бұрын

THANK YOU! I was struggling with this so much, and this video was perfect solution!

@bsewall 4 жыл бұрын

This is a fantastic video! So well described and easy to understand. Even though the design was simple, it made my left brain totally feel at ease. I'm definitely going to share with my team and (hopefully) get on board with a baseline grid system.

@JesseShowalter 4 жыл бұрын

Thank you so much for the kind words, Brady! I’m so glad I was able to help you out!

@RedFox-st1yw 2 жыл бұрын

It took me some time to get the concept, you simplified it in 10 minutes wow

@freelancework2413 4 жыл бұрын

Thank you, Jesse, for this guidance. I didn't know that the baseline grid can do such beautiful creations. Thanks again.

@JesseShowalter 4 жыл бұрын

It’s such a great launching point- the possibilities are endless!

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?

@miguelolivares3301 Жыл бұрын

Really nice and clean video, really enjoy it!

@Super5estrellas 2 жыл бұрын

I love it! Thanks for all the advice, helped me so much

@michalpollard870 4 жыл бұрын

This video is great! It makes so much sense with such clarity Jesse :) Thank you!

@JesseShowalter 4 жыл бұрын

Thanks so much for the support, Michal!!

@abhinavkhare8921 4 жыл бұрын

This is what I was confused about yesterday. Thank you so much!!

@JesseShowalter 4 жыл бұрын

Yes!!! So stoked!!

@Keliiyamashita 4 жыл бұрын

Aloha Jesse! I’m glad I found this. I’m learning design now and building web services. I’m glad you dropping awesome content for noobs like me! Mahalo!

@JesseShowalter 4 жыл бұрын

Aloha!! Many mahalos to you!!

@lavender_moon9 3 жыл бұрын

You explain things so well and I find it easy to follow without feeling overwhelmed. Really enjoyed learning from you, thanks!

@JesseShowalter 3 жыл бұрын

Thank you so much for the kind words and support!

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?

@mahsarouhani9885 7 ай бұрын

Thanks Jesse! You are the best!

@patiuiux5749 3 жыл бұрын

Great video Jesse! thanks!!!

@emma_lj 4 жыл бұрын

changing my shift+nudge preference from 10px to 8px has changed my life!

@JesseShowalter 4 жыл бұрын

Yes!! Get it, Emma!

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?

@skysaville 4 жыл бұрын

I think my mind just blew up a little bit! This is fantastic

@JesseShowalter 4 жыл бұрын

Thanks so much, Sky!!

@christianelourenco8424 3 жыл бұрын

Excellent video. Thank you!!

@johnnygarces2216 4 жыл бұрын

countless of medium articles later, along came Jesse Showalter and broke it done to simplicity. thank you!!

@JesseShowalter 4 жыл бұрын

Thank you so much for your kind words, Johnny! Have a good day!

@sk8trsurfr Жыл бұрын

Another great post from JS!

@ioannisme7495 3 жыл бұрын

amazing, clear and to the point explanation.. subscribed!!!

@JesseShowalter 3 жыл бұрын

Thanks so much for the support, Ioannis!

@megadayve 3 жыл бұрын

Thank You! Excellent!

@rosengarten3210 3 жыл бұрын

Your Videos are just the best ✌️thxxx

@RoosterAirsoft 2 жыл бұрын

Very insightful! Great Vid 👍

@aci25tv 4 жыл бұрын

Awesome tutorial...a lot of great information. Gracias!

@JesseShowalter 4 жыл бұрын

Gracias, amigo!! 🤙

4 жыл бұрын

So much to learn in design :) It seems like I've not got a clue yet, but slowly and slowly I'm learning.

@JesseShowalter 4 жыл бұрын

We are all learning!! There’s so much beauty in that.

@andraewaters4384 4 жыл бұрын

Keep going man!!

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?

@BrysonThill 3 жыл бұрын

Thank you so much for this!

@rorymacdonald7529 Жыл бұрын

love this!

@chienandaluz 4 жыл бұрын

8pt grid 😍 It gives some peace to my mind. Great video!

@JesseShowalter 4 жыл бұрын

Yes!! 🔥🔥🔥

@chethanforyou 4 жыл бұрын

Your content is awesome. Fastest time from discovering your channel to subscribing for me.

@JesseShowalter 4 жыл бұрын

Thanks so much Chethan I really appreciate the kind words

@JudyLouiseN 3 жыл бұрын

Mind blown. Thank you!!

@JesseShowalter 3 жыл бұрын

You’re very welcome, Judy!

@scottfwalter 2 жыл бұрын

First-time subscriber here :-) I'm a developer, who's trying to increase my design chops. Your channel is a gold mine of useful tidbits.

@JesseShowalter 2 жыл бұрын

Thanks Scott, I hope I can bring some value to your growth

@thiagodambttr1895 2 жыл бұрын

Awesome content!! Thanks a lot =D

@knallkoko 3 жыл бұрын

Awesome! Thank you so much. I'm getting started in XD and your Video really helped.

@JesseShowalter 3 жыл бұрын

That’s AMAZING!! I’m so stoked!

@borisnkuako2936 4 жыл бұрын

Thank you for these useful tips !

@JesseShowalter 4 жыл бұрын

Thank you so much for the support!

@Daadaala 3 жыл бұрын

Thanks! You are great at teaching.

@JesseShowalter 3 жыл бұрын

Thanks so much for the support!

@Kai-fp3kd 4 жыл бұрын

Super awesome! Thanks, Jesse!

@JesseShowalter 4 жыл бұрын

Thanks so much, Kai! 🔥

@mihailbotnarciuc5075 3 жыл бұрын

Freaking amazing dude, I'm going to binge-watch your channel

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?

@lubomyrtlustyk5768 2 жыл бұрын

@@God-T yeah, and I am confused about it now. Unfortunately, it doesn't work with all the font sizes and sometimes, the actions you have to do according to baseline, they don't match the fundamentals of ux design. But, anyway, its interesting

@Ozeki_Negima 4 жыл бұрын

You are so freakin' good, Jesse! Loved the video!

@JesseShowalter 4 жыл бұрын

Thanks so much, Ozeki! So glad you liked it!!

@stavlifman4817 3 жыл бұрын

Very Helpful, thanks alot!

@JesseShowalter 3 жыл бұрын

Thank you! Have a good one!

@nicholasmackey 4 жыл бұрын

This was awesome. Thanks Jesse.

@JesseShowalter 4 жыл бұрын

Thanks so much, Nicholas!

@nezarfadle7715 3 жыл бұрын

Fabulous, awesome, that was incredibly informative and eye opener, thank you so much

@JesseShowalter 3 жыл бұрын

So glad I was able to help out! 😊

@nezarfadle7715 3 жыл бұрын

Yes you did 😊, Actually your tutorial was the second part of this ( The power of 8 ): blog.prototypr.io/smart-ui-dimensions-for-any-screen-size-cc532f92c2f8 @@JesseShowalter

@clydeugene 4 жыл бұрын

This was really helpful, thanks for the great tutorial

@JesseShowalter 4 жыл бұрын

Thanks so much, Clyde! Have a good day!

@God-T 3 жыл бұрын

Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?

@uiuxshariar 2 жыл бұрын

Awesome!!

@AncientEchoesOfHistory 4 жыл бұрын

Thanks Jesse! Great vid.

@JesseShowalter 4 жыл бұрын

Thanks so much, Nick!! 🤙

@ebeprstudios 2 жыл бұрын

I like it. New subscriber

@Ostluund 10 ай бұрын

Really good stuff!

@JesseShowalter 9 ай бұрын

Thanks! Cheers!!

@bl_int 3 жыл бұрын

awesome, thanks

@JesseShowalter 3 жыл бұрын

Thank you so much for your continued support, Ibrohim!

@aspected 4 жыл бұрын

Awesome video.

@JesseShowalter 4 жыл бұрын

Thanks, Sam!!

@dc-tlc9654 2 жыл бұрын

Thanks!

@radulica 3 жыл бұрын

This is one of the first things you should know when designing with text. Unfortunately I only learned about this today, haha. But nevertheless, thanks Jesse!

@JesseShowalter 3 жыл бұрын

Hahaha! Hey, we are better today than we were yesterday! Keep plugging away, man!

@roypolash9817 4 жыл бұрын

Amazing thanks

@JesseShowalter 4 жыл бұрын

Thank YOU, Roy!

@pvsabnis 4 жыл бұрын

Too good video......keep it up!!

@JesseShowalter 4 жыл бұрын

Thanks so much, man!

@dansolo360 4 жыл бұрын

Super helpful.

@JesseShowalter 4 жыл бұрын

Thanks so much!

@CaioGonzalez 3 жыл бұрын

Hey Jesse how are you doing? thanks for sharing this video, it's very helpful! I've been having so many issues with my developer because I wasn't using the proper grid and this video really helped me. I have a question not related to the subject, Do you use a program to record your screen and yourself at the same time? or you use premiere pro to edit your camera footage and your screen footage? thank you very much

@robsonsevero2494 3 жыл бұрын

I can't thank you enough

@aaronmarquez9338 2 жыл бұрын

Hey Jesse, nice video, should the text box be aligned with the grid as well? I'm asking this because how developers can calculate a perfect padding between elements divided by 8? thanks

@adhamelkelany 4 жыл бұрын

Thanks for sharing that!!!! I think adobe Xd should fix the text line height issue, which I mean a headline of 32px line-height should be a 32px height, not 38px or another random number.

@imsamcastillo 4 жыл бұрын

Great!!!

@JesseShowalter 4 жыл бұрын

Thanks, Sam!!

@donbao 3 жыл бұрын

Nice!

@JesseShowalter 3 жыл бұрын

Thank you!

@davidnagy1046 4 жыл бұрын

huh, ever since i read the Material Design guideline's spacing section i've been doing the same thing :O

@JesseShowalter 4 жыл бұрын

it works great

@CaptainBullzAQW 2 жыл бұрын

ahh I finally found it, these are the secrets on why product designer's designs are so neat and so easy to read! we graphics designer avoid grids for our layout due to how cocky and robotic it will become, especially when making illustrations or even minimalistic poster, thank you!!

@appustudio8637 4 жыл бұрын

cool and innovative

@JesseShowalter 4 жыл бұрын

Thanks so much! Have a good day!

@peterretvari7053 3 жыл бұрын

Hey Jesse, I believe that your whole channel is awesome. Content 10/10, Teaching 10/10, Presentation 10/10 😇😎 I have just one question regarding this Baseline Grid. It looks professional indeed, however, how can I use this when I'm developing a website? I mean the second stage of the design process. Ok, maybe one more question :) In the grid system, there are just whole numbers. How can I use the 1.618 golden ratio when I would like to arrange my elements into the "magical grid system" 😊?

@rohmanhameed 3 жыл бұрын

Hi Jesse, thanks a lot for this tutorial, i saw another video where the designer uses 8 point grids and keeps space between each element in multiple of 8 but when i arrange my text to the baseline grid how you showed spacing between two text boxes is either 9 or 11, am not able to achieve that 8 point space and baseline text at same time, am i doing something wrong here?

@TheCleft 3 жыл бұрын

Hello Jesse, that is a clever way to align texts and components, but the problem is that with this method you cannot use the text boxes as alignement standards or with pixel counters, especially with "developer" hand off mode in XD. How do you deal with it?

@Smaskrifter 4 жыл бұрын

Yes! I was always wondering why so much UI designers ignoring basic typographic rules which we all know from print design.

@JesseShowalter 4 жыл бұрын

Right!!

@vinamraagarwal5095 3 жыл бұрын

Hey Jesse, a great tutorial. So when there is this 8 point grid guidelines to work for UI design. How do we deal with font sizes which are not divisible by 8? There are 4 point base grids for typography. But when there are certain fonts which have sizes of 11pt, 13pt etc.( iOS HIG) how do we make the 8 point grid work in those designs?

@TheWestHarbour 2 жыл бұрын

I think the 4pt grid is starting to become more popular for this reason (flexibility). Webflow has stated that they use a 4pt now. You can use font sizes not divisible by 4 or 8 (for example, 18). Just make sure the line height is still on your grid :)

@loule7872 3 жыл бұрын

Hi Jesse, always love your videos, appreciate all the rad content. Quick question for you.. When working with a grid if you align your baseline text to the grid instead of the bounding box, the spacing can be inconsistent (not multiples of 8) in order to line up other elements to the grid.. Is that right or am I missing something?

@jumokeabdulazeez2870 2 жыл бұрын

Reference baselines for vertical alignment, instead of bounding boxes. This produces more accurate implementation across design software and platforms.

@StarOnCheek 2 жыл бұрын

I am so surprised that this is something you have to even teach. That was literally the first thing i thought would need to be done when i started designing. Of course without a grid it is not gonna work, and on top of that, it is going to be much harder for me because i need to align elements to each other and fight the alignment assistant

@yuval14 Жыл бұрын

Hey Jesse! Thanks for the video, really helped a lot! I have a question for you. I noticed you’re aligning everything based on the characters, but aren’t we supposed to align everything based on the containers that surrounds the characters? Thanks a lot!

@brunosoares9021 3 жыл бұрын

Cool! I wonder how to transfer this to Elementor (for example) that doesn't have that awesome grid options!

@frsm_ 4 жыл бұрын

funny to see this here. I just lately stumpled upon vertical rythm since switching alot from print to web design. The only issue i had alot is that css massures line height above and beyond cap and descender and not just in between the lines, which means it adds the line height addionally on top and bottom line of my text block. The only solution i found to establish a nice rythm throughout my layout is to align the top and bottom of my textblock (which means text block + additional lineheight on top and bottom) to my grid insted of the acctuall baseline of my typo. Otherwise you will always start to get uneven gaps between textblocks, headlines or graphics because of different line heights.

@primatondyaryakurniawan267 3 жыл бұрын

One big question is, how can i achive it when writing css

@ibrahimbadran7198 3 жыл бұрын

thank you so much for this tutorial, but I have a question about the design itself, I faced a problem with XD about importing my design from Illustrator, not everything would be imported correctly like gradient, objects illustrated with mesh tool, objects had effects like a feather effect. If I select and copy-past or even imported the whole file, some objects would disappear or destroyed... I don't know what I have to do !!! Please advice

@marcofinucci5843 4 жыл бұрын

Fantastic video! But how i can transform pt in pixel? Thank youu

@elonmusk6029 3 жыл бұрын

Great video @jesse showalter

@deipty222 3 жыл бұрын

Please show how you would use the golden ratio for line-heights that sit on the baseline grid. TIA!

@sammiller9855 2 жыл бұрын

In your other video, you suggested using the golden ratio to determine hierarchy of size. How does that work with the recommended grid system you used here? Thanks, Sam

@rune96 2 жыл бұрын

Hi Jesse, awesome work! Somebody told me I should align the text box(set the height of it which can be divisible by 8) to the grid, not the baseline. Is that correct?

@SatbirArora 3 жыл бұрын

Hi Jesse, *XD is problematic* with text math calculations. When you give "Massive Headlines Work too!" text size 96px and line-height also same as 96px , the text block/container should have a height of 192 px (96 * no. of lines) / (96 * 2) = 192px. But XD gives you 231px. Is that right? How is this height calculated? Do you have any fix for that or any calculation we can use? Thank You.

@TheCleft 4 жыл бұрын

it's interesting to see how most of designers have now switched from Sketch to other platforms. I've been watching your videos for long and I remember the time (2 1/2 year?) where you were swearing only by Sktech x Invision. Nice to see that things have evolved! However, the quality of your advice and videos remains stunningly unaltered!

@prashantgupta7263 4 жыл бұрын

A lot of designers are turning to XD because of the amount to updates it has.

@mrnickb 3 жыл бұрын

Can following a system like this become restrictive? For example, if I want to use a body text of 16pt and a subtitle text of 14pt, there is only a 2pt gap between them, therefore they will mess up the grid system? Great video, thanks!

@jtorresmorag 4 жыл бұрын

Hey Jesse great tip. In Affinity Publisher or InDesign have more advanced methods for use baseline grid for digital and print. I hope a new video for this. See you!...

@JesseShowalter 4 жыл бұрын

Great tip! Thanks so much for info

@xrplayground 4 жыл бұрын

Nice one. I wondered how devs would use it as it’s easy to move visuals around and check the baseline but don’t seem easy on their side. I’ve asked a developer and he said he would measure the space from text’s bounding area to the next edge instead of baseline. How would you ask a dev to implement a specific space from baseline to another baseline?

@martiandesign9649 4 жыл бұрын

Unfortunately Adobe XD text aligns to the top of the text box only ( no vertically centered text). When the design is coded, the text will be vertically centered within its text box using the line-height property in CSS. This means that the alignment to the baseline grid will be lost during hand-off to dev. This is a very overlooked missing feature of XD and so if you want vertical rhythm you’re better off with Sketch or Figma which can both vertically align text within the text box.

@StarOnCheek 2 жыл бұрын

Work in units and not pixels, then just identify all sizes and distances to the developers in units. The size of the unit does not matter and will probably change based on screen size or user preferences. Whenever i receive a design that fails to make it's proportions obvious i realign it to be on the unit grid

@srijanlama6446 4 жыл бұрын

great video always had issue with alignment and typographic scale

@JesseShowalter 4 жыл бұрын

I’m so glad you liked it, Srijan!!

@JakePomperDesign 4 жыл бұрын

lol I legit just made a video on grids! Nice one

@JesseShowalter 4 жыл бұрын

Haha, yes!!🔥

@petarenev2909 3 жыл бұрын

4:45 - Why would you make the headline point text and not area text?

@jerry3264 3 жыл бұрын

How to achieve this in iOS design as iPhone artboard is 375px width? Thx so much.

@jenninexus 4 жыл бұрын

What is that simple program he's using for the layout? Thx

@JesseShowalter 4 жыл бұрын

Adobe XD

@SamyadeepPurkayastha Жыл бұрын

what about fonts like Nunito which doesn't completely sit on the grid?

@AlexisColladoUX 4 жыл бұрын

Hi Jesse! How does this translate to the html/css? Are you making a video on the actual production of the code or implementing this with a developer? Thank you, I learned a lot!

@JesseShowalter 4 жыл бұрын

This is good thing to do in all designs, I'm not making a video on development implementation

@martiandesign9649 4 жыл бұрын

Doesn’t work in css

@2conRazor 3 жыл бұрын

How does an 8pt grid work on mobile design with typography? For example - if 16px is your body text does the next text below that need to be 8px? Isn’t that too small for mobile standards?

@ag34393 4 жыл бұрын

Hi Jesse, Beginner question here: Can your typographic grid be built off of a different base number that your layout grid? I tried using this 8px baseline grid on top of a column grid and they did not match because the device frame size was just not divisible by 8...

@JesseShowalter 4 жыл бұрын

I do sometimes alter my grid based on canvas size but I prefer to integrate my type grid in the baseline grid size because it makes it all easier. If it's a decision between satisfying my OCD with he canvas size and having a smooth experience with my grid and type scale, I'll choose the later

@frsm_ 4 жыл бұрын

Could you maybe do a follow up video regarding css Implementation to this?

@JesseShowalter 4 жыл бұрын

Stay tuned! 🤘🤘🤘

@martiandesign9649 4 жыл бұрын

Can’t be successfully implemented in CSS. XD text is top-aligned within the text box but Line-height is coded with vertically centered text in CSS.