Really Basic Concepts For Website Design

(Reading time: 3 – 5 minutes)

Does the notion of web site design give you the creeps?

Are you one of us whose artistic ability was stunted at the level of crayons and coloring books?

Don’t fret, you’re in good company!

It turns out that presentable design is not that difficult, provided you divide—chunk down—the work into tasks that can be accomplished separately. Chunking down allows you to focus on one task at a time, tasks can proceed simultaneously, tasks can be outsourced, you can develop expertise in one set of the tasks.

Cut your work in half

Design can be decomposed into two categories:

1. Structural elements
2. Display elements

Structural elements govern the placement of text and images. For example, at the top of this web page is a menu list followed by a large image spanning the entire width of the web page. How this image placement is controlled is a structural design consideration.

Display elements can be considered as both text and images. You have to choose font families and sizes, and determine what the purpose of your images will be. The Website In A Weekend banner at the top of the page promotes the notion of an intensive and compressed learning experience: white lettering on chalkboard green with a weekend circled on a calendar.

There is some overlap between structure and display, but separating the two is a good place to start.

Lay out your structure

For structural elements, I recommend digging into grid-based design. Grid Systems by Kimberly Elan profoundly changed my understanding of design, especially layout. Actually, that’s not exactly true… Grid Systems reminded me of lessons I learned many years ago using graph paper and pencil, before CAD and computer drawing, back when real drawings were inked with expensive rapidographs (I still have complete sets of Koh-I-Noor and Rotring pens).

The cool thing about structural elements is that anyone with some common sense and a pad of graph paper can work out something that look better than 90% of everything you’ll ever see. Check out my friend Sean’s website for Only The Valiant. Yep, that’s a WordPress website, and he laid the whole website out on graph paper before he started tinkering with the theme. (Smart bears might take a look through his CSS to examine exactly how he did that… or you could hire him to design your site for you. Tell him Dr WordPress sent you.)

Create text and images

Wilber is your friend

While I’m much more comfortable working with structural elements (which lend themselves to programming), perhaps you are much more comfortable working with images using programs such as PhotoShop or Gimp. I do some of the image work on Website In A Weekend myself, I barter for some of it, and I pay for some of it. By the time I pay for image work, I have a very clear idea of exactly what I want, so it’s not expensive. Can you tell which images on Website In A Weekend I did myself?

You can do your own design

You don’t need to master design. That’s 10,000 hours away. However, if you want to create a website with a totally killer design, you need to either learn enough of the vocabulary of design to effectively communicate with designers… or you just need to pay someone a lot of money and not worry about it. Mastering the vocabulary and learning enough of the tools of the trade will allow you to much more effectively communicate with graphics professionals, and that will pay back your effort in spades.