Graphic Design Principles for Small Business Websites

Most small business websites don't struggle because they look dated. They struggle because a visitor can't tell, within a few seconds, what the business does and what to do next. Graphic design is how you fix that, and it has far more to do with order and clarity than with decoration.

These are the six principles I lean on for every site I build, with what each one means on a real page.

Hierarchy: make the most important thing the biggest

Hierarchy is the order in which someone notices things on a page. Make the thing that matters most the largest and strongest, and let everything else step back.

A visitor's eye goes to the biggest, boldest, highest-contrast element first. On a home page that should be what you do and who you do it for, not your logo or a slogan. After that comes the main call to action, then the supporting detail.

A quick test: step back from the screen, or squint at it. Whatever still stands out is your hierarchy. If it's a stock photo or a decorative heading, the page is telling the wrong story.

• One main heading per page that says plainly what you offer.
• One primary button, styled differently from every other link.
• Smaller, quieter text for the details people read once they're interested.

Contrast: readable first, stylish second

Text has to stand out clearly from its background before it can look good. If someone has to lean in or tilt their phone to read it, the design has failed at its first job.

Light grey text on white looks clean in a mockup and is hard to read on a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) set a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. I treat those as the floor, not the target.

Contrast isn't only about colour. Size, weight and space create it too. A bold heading over regular body text, or a filled button beside a plain text link, shows people which is which without relying on colour alone. That matters for anyone with a colour vision deficiency, and it makes the page easier for everyone else to scan.

Alignment: give everything an edge to line up on

Things that line up look intentional, and things that almost line up look like mistakes. Choose a few strong edges and keep everything to them.

For most pages that means a left edge for text and a consistent grid for anything laid out in columns. Centred text works for a short heading or a single line. For paragraphs it makes every line start somewhere new, which slows reading down. Left-aligned body text with a ragged right edge is the easiest to read in English.

Spacing: let related things sit together

Space is what groups content, so related items should sit close together and unrelated ones further apart. Get the spacing right and a layout explains itself without extra lines, boxes or labels.

Designers call this proximity, and it does a lot of a page's work for free. Put more space above a heading than below it and the heading clearly belongs to the section it introduces. Keep a price close to the thing it prices and nobody wonders what it refers to.

Spacing also covers two practical limits:

• Line length. Paragraphs read best at roughly 45 to 75 characters per line. Wider than that and the eye loses its place moving back to the start of the next line.
• Fingers. On a phone, buttons and links need room around them so people don't tap the wrong one. I build tap targets at least 44 by 44 pixels.

Repetition: the same thing should always look the same

Once you've chosen a style for buttons, headings, cards or links, use it everywhere. Repetition is how visitors learn your site, so the second button they meet should look exactly like the first.

It also makes a small business look settled and organised, because nothing feels improvised. The simplest way to enforce it is a short list of design decisions that every page picks from: a handful of colours, two typefaces at most, a fixed scale of text sizes and a fixed scale of spacing. When something new is needed, it's built from that list rather than invented on the spot.

Restraint: fewer colours, fewer fonts, fewer effects

Every extra colour, typeface or animation competes for attention. Use as few as the job needs, and the ones you keep will do more.

Two typefaces is plenty: one for headings and one for body text. One or two brand colours plus neutrals covers almost every page. Animation earns its place when it explains something, like a menu sliding open, and it should always respect the setting people use to ask their device for less motion.

Restraint also keeps a site fast. Every extra font file, video background and animation library adds weight that someone on a mobile signal has to download before they see anything at all.

A quick check for your own site

You can test any page against these principles in a couple of minutes. If the answer to any of the questions below is no, that's the place to start.

• Can you tell what the business does from the largest text on the page?
• Is every line of text comfortable to read, including on a phone outdoors?
• Do things line up along a few clear edges?
• Are related items grouped, and unrelated ones clearly separated?
• Do buttons, headings and links look the same everywhere?
• Could you remove a colour, a font or an effect and lose nothing?

That last question is the one I ask most often. Taking something away usually improves a page more than adding something new.