I write the copy, not the CSS. For years that felt like a clean division of labour: I’d hand over the words, a designer would make them look good, and the page would do its job. Then I spent a few months pulling apart SaaS and fintech homepages for my swipe file. The pages that converted didn’t have better sentences than the ones that didn’t. They had sentences a visitor could find, read, and act on without thinking about it.
So the design choices wrapped around your copy are conversion choices, and they belong to whoever cares about the conversion. That’s you. Where the button sits, how many menu items you offer, whether the background is fighting the text: all of it decides whether the words get read at all. Here’s what I’d fix first.
Familiar design beats clever design
Skeuomorphism is the technique of making something new look like its real-world counterpart. The trash icon looks like a trash can. Apple’s original Notes app looked like a notepad. The mail icon is an envelope. The whole thing leans on familiarity, and that’s the point: visitors arrive with expectations, and when you match them, they spend zero effort working out what they’re looking at.
The traditional version is a call to action that looks like an actual button, with a bit of relief, a shadow, and a colour that says press me. Flat design pushed most of that out of fashion, and plenty of pages now have “buttons” you can’t tell apart from a caption. When someone has to hover over an element to learn whether it’s clickable, you’ve spent their attention on your interface instead of your offer.
Make buttons look like buttons and say what happens next
Every button is built to be clicked, and some do the job far better than others. Usually for one of two reasons: they stand out more, or the copy is clearer.
Standing out is mechanical, and it comes down to five things:
- Good contrast between the button and the background
- Good contrast between the button and its own text
- A shape that isn’t repeated anywhere else on the page
- An arrow or icon to signal that something happens next
- One primary button that’s louder than every other clickable thing
A shadow that lifts the button off the page helps too, and hardly anyone uses it any more. Position matters as much as looks: put the button where people already expect it, which for a contact or signup CTA means the top-right corner.
Then write the copy properly. A button is a promise about the next screen, so “See pricing” beats “Learn more” and “Book a 20-minute call” beats “Get started”. If someone knows exactly what happens after the click, clicking gets a lot cheaper.
Light background, dark text, almost no exceptions
Most websites use a white background with black text, and that’s a good default. The contrast is high and it reads easily. You can do slightly better with an off-white background like #EEEEEE and a dark grey like #111111, which takes the glare off without losing legibility.
Some people flip it and go dark background, light text. The contrast is still technically fine, but it’s harder on the eye over any real length of text. For a design-led portfolio it can work beautifully. For a text-heavy page it’s a slog.
If you want to stand out, use colour instead of inversion. Wynter’s yellow hero is a good example: the background shouts, but it’s still light with dark text on top, so the contrast holds. The rest of the page is white, not yellow, because that much brightness gets tiring fast.
Where colourful backgrounds go wrong is in the details rather than the body copy. The title becomes hard to read, or the CTA button disappears into the colour behind it. So when you pick a brighter background, check the headline and the button before you check anything else.
Cap your navigation menu at six items
Ever been to a restaurant with a twelve-page menu? It doesn’t make choosing easier, and somewhere around page four you start doubting the kitchen, because nobody sources that many dishes fresh.
Your navigation works the same way, and more options don’t reflect well on the business behind them. Six items is the ceiling, and most companies already agree. I analysed 58 SaaS and fintech websites: only three had more than six menu options, the majority had four, five or six, six sites had three, and two got by with two.
The options themselves cluster hard. Pricing appeared 32 times, Resources 26, Product(s) 20, About us 20, Solutions 18 and Blog 13. After that it thins out into Partners, Company, Contact, Customers, Industries, Features, Why us and about twenty labels that showed up exactly once.
Getting down to six is easier than that list makes it look, because most of it doesn’t belong up top. Resources, About us, Blog, Partners, Company, Jobs, Developers, FAQ, Learn, Enterprise, Templates, Invest and Support all live happily in the footer. The exception is when you have an urgent need to fill vacancies or close a funding round, in which case put Careers or Invest in the header and take it out again when the need passes.
Then look for overlap, because there’s usually plenty: Resources, Learn and Blog are the same idea, so are About us and Company, and Industries, Customers and “Who is this for?” are three names for one page. The perfect minimal menu doesn’t exist, but here’s how I’d build one: Why us, Solutions, Use cases, Pricing.
Give every visual a job
Images do real work in a hero section. A page above the fold is occasionally stronger without one, but the far more common problem is a visual that’s there because the template had a slot for it.
Some companies have plenty of material to show, others have none and have to get creative, which is why hero sections have settled into a handful of recognisable approaches. Stock photos (Freshbooks, Spendesk), GIFs (Wynter, Apollo.io), drawings (Finflag, Payment Cloud), drawings in the background (Easyvest, Lemonade), video in the background (FranShares, Intergiro), a demo video in the background (Robovision), video in a box (Soar Payments), screenshots (Stripe, Divvy) and product previews (Rock.estate, gohenry). Most real pages mix two of them, usually a stock photo with a screenshot, icons or a product preview.
My favourite pattern is the one I keep seeing more of: an image that turns into a video. Qashio, Voucherify, Vivid and Chili Piper all do it. The still frame lands instantly and carries the message on its own, and the motion arrives a beat later to show the product working. You get the clarity of a screenshot and the proof of a demo without making anyone press play.
The test for any visual is whether it tells the visitor something the headline can’t. If it does, keep it. If it’s decoration, it’s competing with your copy for the same attention.
Count the choices you hand people
Two laws explain most of what goes wrong on a busy homepage. Hick’s Law says the more options you offer, the longer a decision takes. Miller’s Law says people hold roughly seven things in short-term memory at once. Cross those two and you get a visitor who’s still deciding where to look when they’d rather be reading.
The usual setup is three call to action buttons of equal weight, seven menu items, a row of social icons in the header, and a chatbot that opens by itself after four seconds. Each one is defensible on its own. Together they ask someone to make a choice before they’ve understood what’s on offer, and the easiest choice available is to leave.
There’s normally one thing you want a visitor to do, which is buy, and sometimes a second one, which is get more information. The first is easy to design for. The second tempts you into adding links, and it doesn’t need them: if someone wants your blog, your contact details or your team page, they’ll scroll to the footer and find them. And if they want you on LinkedIn, let them go there in their own time, in their own tab, instead of you handing them the exit.
So a hero section needs a primary button, optionally a secondary one, and a menu of five items or fewer. That’s already more choice than plenty of visitors need, which is why the best sales pages carry a single action and nothing else.
The same thinking applies below the fold. Keep the design simple, avoid moving elements, chunk related information together, use design patterns people already recognise, and add more white space than feels necessary. Split long numbers like credit cards and phone numbers into separate fields. Use a background colour change to signal where one section ends and the next begins. Put images in a gallery or a slider instead of a wall.
Where to start on your own page
Open your homepage and count everything a visitor can click above the fold. Then count how many of those you’d actually be pleased to see them click. The difference between the two numbers is your first design task, and closing it is usually the fastest conversion win on the page. Every choice you take away makes the one you want them to make easier to see.