The Secret Science of Perfect Spacing

Chainlift
2 HN recommenders · recommended in 2 months, 2024–2026
YouTube
677K views · 2 years ago · explainer · evergreen

Chainlift, the creator behind the LiftKit UI project, explains how spacing works in interface design and shows examples of consistent versus off spacing. It covers why spacing scales and proportion make layouts look right.

HN people recommend it to developers who cannot make a decent-looking GUI, as a good set of spacing examples.

“This video does a decent job showing examples”
Layout, grids & compositionUI design craft
#spacing#uidesign#layout#visualrhythm#goldenratio

2 comments from Hacker News

l
@learyjk2026 · in “LiftKit – UI where "everything derives from the golden ratio"”
The creator of this is a friend of mine and just gonna chime in that he’s a fantastic and talented dude. Nice surprise to see his project listed here! I think he’s working on something new called Liftkit Studio too I’m looking forward to. He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing” ▶ this video Party on
RecommendsView on HN
w
@wonger_2024 · in “Ask HN: I cannot make a decent looking GUI from scratch. How do I learn?”
You can immediately learn a lot from the "Refactoring UI" series: link These tips seem good too: link A lot of UI design is about spacing elements properly and consistently. Humans subconsciously notice when spacing is off. This video does a decent job showing examples: ▶ this video Here's a good tool for making spacing and sizing scales in CSS: link link will show you the right CSS for common web layouts. They have a few free examples. Try practicing by coding some single page HTML/CSS experiments, or sketching some wireframes, or redesigning someone else's webpage. Use color palette generators unless you want to study color theory. Use other people's design systems if you want to ship something instead of just practice. Material Design, Pico CSS, component libraries, whatever looks good with minimal fuss.
RecommendsView on HN