• Just Ship It
  • Posts
  • Design beautiful websites to sell your product — Spacing

Design beautiful websites to sell your product — Spacing

Forget creativity, design is about rules. Here’s there 80/20.

07:23 am. Bali is windy. The surf session will wait until tomorrow.

We’ve covered headline and paragraph UI design. Let’s combine them with spacing.

Solopreneur update

I launched IndiePage Leaderboards to gamify startups.

The number of solopreneurs crushing it blows me away 🤯

Last 30 days of revenue — verified with Stripe and updated every 12 hours

Lighter than text, but more powerful than words.

Spacing in UI design refers to the use of empty space between elements to enhance readability, visual hierarchy, and overall user experience.

Place a button too close to the headline and you confuse users. Luckily, you can be a wizard with these 3 rules:

Use the 4 points grid system

Every space (margin or padding) between elements (text, button, image, section) should be divisible by 4.

4px, 16px, 48px

It helps users understand how components relate to each other. And it’s a shortcut to designing faster

Use limited constraints

Spacing is semantic. The distance between UI elements explains their relationships.

A headline and a paragraph should be close to each other because the latter explains the former. The illustration, however, should sit farther away from the text block.

To help users create relationships between elements, we need rules:

  • Paragraph to headline: 16px

  • Button to text block: 32px

  • Image to  text block: 48px

  • Section to section: 256px

Define your rules before coding. 5 to 6 maximum. Use them across all the landing page for clarity.

Let it breathe

When the UI is cramped, users get confused and leave.

If in doubt, add too much empty space.

Whenever you're ready, there are 5 ways I can help you:

  1. ShipFast: Ship startups in days, not weeks with the NextJS boilerplate loved by 3,100+ developers.

  2. LaunchViral: Grow your startup with viral launch videos.

  3. IndiePage: Join 5,000+ solopreneurs and showcase your startups.

  4. PoopUp: Turn your visitors into customers with wake-up call popups.

  5. ZenVoice: Stripe invoices, without the 0.4% fee.

Join the conversation

or to participate.