How to make your website look professional: the 4 big rules of graphic design
January 8, 2008
Do you look at your website and know you don’t like how it looks, but aren’t sure how to make it better?
Would you like your site to look more polished and professional but don’t know how?
Luckily, there are some basic concepts that, once you know how to use them, will have your website looking like it was professionally done.
A quick note: this article is just about “graphic design”, or what your website looks like.
Graphic Design is only one of the 4 Building Blocks of a Successful Website.
Be sure to learn more about the other 3 building blocks in Learn Good Design.
Good graphic design = rules + boldness
A lot of people think design is completely a matter of opinion, that no one has the right to call something “good” or “bad” because it’s subjective.
Rubbish.
What makes the Parthenon, Notre Dame, Westminster or the U.S. Capitol such enduring symbols? Good design.
Classic buildings follow a number of long-established rules that we interpret as being beautiful, elegant. Rules like balance, symmetry and proportion.
These same rules apply to graphic design on the web.
4 Big Rules of Graphic Design
In The Non-Designer’s Design Book, Robin Williams lays out 4 principles that can transform your obviously DIY brochure, leaflet, web page or business card into a professional, polished product:
- Contrast
- Repetition
- Alignment
- Proximity
I use these rules all the time, and they make a huge difference.
Contrast
If you have two things that aren’t the same, then make them very different.
Repetition
Use the same element over and over again.
Alignment
Line up your text and images.
Proximity
Group like things together.
Here’s what those rules look like in practice.
Good design
Apple are design masters, so it’s no surprise their Get a Mac website shows off all 4 design principles to perfection.
Bad design
While I love her books, best-selling vampire author Laurell Hamilton has a website that misses all 4 design rules (and several more besides).
A lot of fans probably like the fact that the website looks like she made it herself, and since she sells millions of books, she doesn’t need to impress.
But if you sell less than a million books, skip this look.
Contrast
Apple is using the big image of the 2 guys and the text to contrast with all the white space of the background. They’re being bold by having so little on the page so it stands out.
Contrast is about being bold, often being big. Using one central image or text to stand out on the page.
Repetition
See how the little icons repeat the style of the big image? Repetition is also used in the use of the same fonts, same headers, use of white and grey everywhere.
Repetition makes the page feel more consistent, more polished.
Alignment
This is a bit more complicated an alignment than I’d recommend for most people, but Apple makes it work. See how elements like icons and text are vertically aligned along one axis?
Horizontal alignment is also happening here. Notice the faint grey line running across, the how the text, smiley face, and grey box all line up beneath it.
Alignment helps give structure, balance and order.
No alignment
Compare the Apple page to the Laurell Hamilton one again:
Yikes. Do you see any element that’s in alignment?
STOP USING CENTRE ALIGNMENT. Beginners love it, and it shows. It’s a dead giveaway for an amateur design. By definition, it breaks alignment, and easily makes a page look sloppy.
Until you’ve mastered the rules of graphic design, just skip the centre-alignment button altogether.
Proximity
Proximity groups like things together. It helps you understand how to read a page.
The big central text, “See the ad” and image are all about the Leopard operating system. The headline of “It just works.” is right next to the explanatory text below.
Note how info about switching from Vista (PCs) to Mac is in grey — it’s grouped together and in grey to distinguish it from everything else on the page which is about Leopard.
Subtle, but helpful in understanding what’s going on.
No Contrast, Repetition or Proximity
Conclusion
Hopefully, you now have a better idea of how the 4 Big Design Rules of Graphic Design can make or break your website.
I’ll be writing tutorials on each of the rules to go into more detail, or you can find more examples in The Non-Designer’s Design Book.
If you start following these rules with your own website, you can help take your business image from simple to sophisticated.
