Patrick Samphire (psamphire) wrote,
Patrick Samphire

Websites for Writers: Principles of Web Design - Part 1

Okay, we've finally reached web design. As always, you can read previous entries in this series here:

Before we get started, I should be clear that I'm not going to teach you how to design a website in these few blog entries. There is far too much to cover, and learning web design is a long, complex process.

What I'm going to do is talk about how you can recognise a good design and how you can go about finding or obtaining one.
I'm going to start off with some general principles, go through some dos and don'ts and then talk about where you can get a design from.

And, if you’ve decided to design your own site, for whatever reason, what I’m going to talk about should point you in the right direction.

So, let's get started.

Principles of Web Design - Part 1

It's very easy to be blinded by websites that are fantastically artistic or full of flashy, animated elements. It happens to all of us. But you need to resist this. Your website has a job to do.

You need to look at it dispassionately and make sure whatever design you go for performs that job. You are a writer. Your website's purpose is likely to convey content of some type. It isn’t there as a piece of art or as cutting edge technology.

That's not to say that your site shouldn't look good. It should. But more importantly, it has to do its job. Its job is to get the visitors to the content they want as quickly, easily and pleasantly as possible, while at the same time meeting whatever objectives you’ve set for your site.

When you're deciding on a design, you need to force yourself to ignore the flashiness of a site and focus on what it does.

In my opinion, a good website design:
  • Lets you see immediately what the site is about
  • Draws your eye in a smooth, easy way through the information that the visitor needs and wants to see
  • Is easy to scan and pick out key info
  • Gives whatever impression you identified as desirable--be it friendly, warm, professional, nostalgic, trendy or whatever else
  • Is easy to navigate through
  • Is clearly coherent
  • Does not compete with itself for your attention
You may come across the acronym C.R.A.P. when reading about design. C.R.A.P. stands for Contrast Repetition Alignment Proximity. It comes from the book 'The Non-Designers Design Book", by Robin Williams, which is well worth a read, even though it looks at all types of design, not just websites.

I’m going to look at the elements one at a time. When I’m done with that, I’ll talk about some more specific issues.


Elements on a page need to stand out from one another. If everything looks the same, the eye will not easily distinguish one thing from another and it will not easily flow through the page. The chances, then, of the visitor picking out the info they want and need is limited.

For contrast to work, elements need to be very different to one another.

For example, there's no point making your headings only marginally bigger than your normal text. Why not make them three times the size? Look at the contrast in text sizes on the 9rules website. It immediately produces a structure to the page that wouldn't be apparent if you made all the text the same size.

Likewise, if you're going to have different sections with different colours, don't make them two very similar shades of the same colour, use something more striking, like this site.

Texture can also produce contrast. Tony Geer’s website uses a different texture in the header section from the main text section. Where the colour there alone would produce relatively little contrast, the texture added to it increases that enormously.

The key point here is that a slight contrast can be confusing and unattractive, while a large contrast makes a site look organised, easy to view and read and quick to scan. If elements are different, make them very different.

You can create contrast with size, colour and texture, but you can also create it through shape and typeface. You can choose any of these elements to create contrast, but you can’t do without it.

Before I finish contrast, though, I want to bring in another 'C': Coherence. You won't achieve useful contrast by simply throwing every type of element you can think of at the screen. Putting a smooth blue and green button on the left here and a bright yellow star there, a giant title here and a background gradient there, a shiny reflection here and a grungy background there will just leave your site a mess.

The elements of your page should not be competing with each other to grab your attention. That is the hallmark of a bad design. They should be working together to guide you.

In other words, even though you are looking for contrast, you need the elements to fit together visually. You need coherence.


To really pull your site together, you need to unify elements across it. You can do that by repeating certain elements throughout the page and site.

What kind of elements? Sometimes it can be very simple. Using a curved top-left corner on everything from images to section outlines could help.

So could repeating colours. In the simplest example, you will probably have all your links the same colour. Or you could be more inventive and reuse the same colours for multiple elements. Look at the way Mint repeats green for different elements, making them all seem to fit together.

Typefaces and text sizes can also be repeated to pull a page together. Again look at the 9rules website and see how the structure repeats down the page. It's very obvious that it all fits together.

The same goes for Avalonstar, which despite its fairly radical design, clearly repeats lots of elements. Look at it carefully and see if you can pick out all of the repeated elements. There are lots of them.

You can repeat graphical elements and shapes. For example, you could take an element of your graphical design or logo and use it as a bullet point throughout the page. Or simply repeat the style of the graphical elements, like on this site (look at how the 'speech bubble' is repeated across the page).

You can repeat the size and style of the images on a page. Look at this designer's portfolio page and see how the images and the borders around them are the same.

You can repeat the style and size of icons that you use. See, for example, 37signals.

You can also repeat colour gradients, heading sizes and styles, lines, textures and a whole bunch of other things.

Repeating elements carefully can unify your website, control the way the visitor sees and uses it, add visual interest and allow your site to be easily understood.

You don't need to repeat every element of your website, but you should certainly repeat some elements.

Next time, I’ll look at Alignment and Proximity, before going on to talk about some specific, important points to remember.
Tags: web design, websites for writers

  • 5 cool things

    Friday is the day in which everyone posts five cool things, right? (Okay, I know that's completely untrue, but you gotta start somehow...) 1. Steph…

  • Clarion West Write-a-thon

    So, I have, after some peer pressure, signed up for this year's Clarion West write-a-thon. Many (most? all?) of you know about this, because plenty…

  • Update, and new website!

    Patrick, I hear you ask, what have you been up to recently? Well, since you ask, I shall tell you. One thing I haven't been doing, obviously, is…

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded