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

Design beautiful websites to sell your product — Paragraphs

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

Bali. 09:23 am. Linkin Park in my ears.

Last week, we talked about designing remarkable headlines. Today, let’s redesign the supporting text below your headlines.

Solopreneur update

I launched Insighto on Product Hunt last week and… It got the #1 Product of the Day 🤩

I also bought my first premium domain name — shipfast.com — for…

🥁

…$5,000. That’s 3x my revenue in April 2023. It feels unreal.

The supporting text below the headline is crucial. It’s how you convert attention to action. 

But most people won’t read it. Here are 5 design tips:

Use a secondary color

The supporting text should be written in a color that contrasts less with the background than the headline color.

That’s why we made the Base Content Secondary color previously. It creates a visual hierarchy.

Use the default font weight (400) and font size (16px) for paragraphs.

Let the content breathe

Unlike headlines, reading a paragraph in a small font size requires a visual effort.

Make it easy for your visitors by increasing the height of each line.

Align text on the left (or right)

Our eyes are used to read from the left.

At the end of a line, we know where to look: The line below, on the left.

Centered-aligned text is hard to read because the eye has to scramble around looking for the beginning of the next line.

It’s OK for short paragraphs (2-3 lines). But avoid centering longer blocks of text.

Good design = easy understanding for users.

Write blocks, not lines

Finding the beginning of the next line is hard when the line is long.

Add a maximum width to each paragraph. 500 px is a good range. It makes it easy for the eyes to find the start of the next line.

Don’t write a novel

A big block of text is scary. Most visitors won’t read it.

Structure your text block using bullet points.

You can also use multiple paragraphs and emphasize some words to create rhythm.

Use your Base Content color and medium/semibold font weight to emphasize words

I listened to the Hybrid Theory album 3 times. It’s time to have lunch with my wife. Have a good weekend!

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.

Reply

or to participate.