@zander_whitehurst: Stop guessing your website spacing It’s fairly common to guess font size and line heights for your websites. In this episode I share my guidelines to help you get started. Hero heading font size / line height combos Small: 64px / 72px Medium: 72px / 80px Large: 80px / 96px Hero body text font size / line height combos Small: 16px / 24px Medium: 20px / 28px Large: 24px / 32px Button text font size / line height combos Small: 14px / 20px Medium: 16px / 24px Large: 18px / 28px Label text font size Small: 10px / 16px Medium 12px / 16px Large: 14px / 16px Space between hero text Small: 24px Medium: 32px Large: 40px Likely you’ll build in rems and it’s most common to set 1rem to equal 16px so hopefully that helps guide your rem spacing. #ux #ui #webdesign #design
I prefer using percentages than pixels so it is more responsive to screen size differences.
2024-06-04 16:47:59
20
rj_2000 :
Most of this is great advice but I wouldn’t recommend consistent spacing between elements, proximity is a key design principle and so placing elements that are related closer together is best practice
2024-05-10 05:21:24
32
Beth Jelly :
What about between sections?
2024-05-14 22:32:21
10
01100010 :
what keycap set is this?
2024-05-08 13:58:13
9
James Ski :
Yep, 4 grid or non-linear system, or whatever devs call it nowadays, thats for the win. This dude popping in my feed lately and becoming my fave ui guy in TikTok.
2024-05-12 03:17:54
1
Cesar G :
Would this change for mobile?
2024-05-08 13:16:08
8
Bara 🏳️🌈 :
Omg so good! Can you even recommend some resources of if I want to dig deeper?
2024-05-08 15:31:16
3
missdarkberry_ :
I started with UI design almost recently and I would like to know why you prefer Figma instead of Xd.. (I dont mind both apps but maybe Figma is better because of a "reason") 🤷🏻♀️
2024-05-08 14:50:02
2
tpukshorts :
Yeah but quite often you need to compensate elements optically, not geometrically
2024-05-27 12:13:05
0
hademic :
Tailwind css. Done.
2024-05-08 17:08:57
1
Ugoeze the designer :
You have a UI/UX design course?
2024-05-08 12:01:19
2
dickkopfelixir :
or 2rem
2024-05-08 11:50:12
3
Alvaro Guerrero :
sorry random questions what keyboard is that?
2024-05-08 18:39:07
1
Ivana :
I don't agree. The space between button and bodytext should be more, than the space between title and bodytext. You have to tell the story first, title and bodtext, and then find the call to action.
2024-05-30 20:22:12
0
Sunday and Taco’s Mum :
I recommend a small medium large spacing approach. Some visual elements feel heavier, and require more space between them and the next item.
2024-06-04 13:48:39
0
Fuggie :
Can you create custom Shopify websites?
2024-05-08 11:51:33
0
rp2701 :
32 is my go-to guy!
2024-05-30 18:07:57
0
Rab ehe :
i have a quick question if you don't mind : is learning figma variables necessary? i am suffering with them🙂
2024-06-19 19:14:20
0
uinkits - Figma Design System :
Is there a Figma plugin for this? 🤔
2024-05-14 09:53:54
0
arqbyte :
I kinda messed up. I did the design but did not make it responsive
2024-07-24 08:18:12
0
Max :
two words: font baseline. Tell me whenever you get it.
2024-07-03 23:34:10
0
Trevor Manhuwa :
hi I would love to Collab with you one day. I am a full stack web developer
2024-05-20 10:45:02
0
Przemek Kowal :
What’s that keyboard he using?
2024-05-29 09:29:13
0
DougDoes :
you've probably been asked before. but what keyboard is that please.
2024-06-04 18:32:04
0
Pmiiix :
Thanksssssssssss, you just saved my life
2024-05-08 13:05:24
0
To see more videos from user @zander_whitehurst, please go to the Tikwm
homepage.