The Start of a New Website, Part 2

A good way to start thinking about the design of a new website is to challenge your mind to open up, consider colors, big ideas, and potential themes. I wrote about this in The Start of a New Website, Part 1.

Here's some examples of the process.

I met with my clients and they showed me printouts of websites, screenshots, and brochures. The discussion allowed me to choose some examples that seemed to be close to what they were envisioning.

I took all the samples home, reviewed them briefly, and then put them to one side.

Grabbing my granddaughter's crayons and some manila drawing paper, I sketched out a design.

This design roughly followed that of a related website. The name of the organization is most prominent, large space for a welcome box and news, with navigation menu on the left and photos on the right.

I included a lightly drawn background image based on a map of the organization's region.

The advantage of using crayons is that it forces me to think conceptually, helping me to avoid getting bogged down in details. I roughly suggest font style and size, emphasizing placement and colors. The thick line of the crayon requires me to use brief phrases and titles. A website must capture a visitor's interest, conveying the essential information, in less than ten seconds. Expecting a visitor to stay longer than ten seconds in an attempt to figure out what's going on is not realistic.

My next version was looser, more imaginative. Now, keep in mind that I am basically a linear, logical thinker, so this more abstract version is actually quite daring for me!

But that's what design-by-crayon is good for - it helps my left brain step back and let my right brain do what it is skilled at: colors, emotion, abstract, and feeling.

The words in clouds actually began in the center, with what I considered to be the concept most prominent in my client's organization. From there, I added supportive concepts, each in the form of a bubble or cloud.

I wanted to suggest the importance of our river systems, so I very loosely followed the regional map, exaggerating the flow, adding lighter blue above for the sky, and green below for the land.

I ran out of room for the bottom text, but printing it in red helps it stand out, along with the red arrow.

I liked the spontaneity of this design. It seems childish, of course, and perhaps that's a good thing - it depends upon the target audience of the organization. Recreating it with Gimp will make it more polished.

I was tempted to simply scan this image and use it directly as the background image for the website. But large images with detailed colors and textures is very memory-intensive. For users with slower internet connections, the load time for such large images is unacceptable. The better option is to make the design simple, using solid, internet-safe colors, creating a GIF image, rather than JPEG.

I did one more version in crayon.

This one featured catch-phrases and menu items gleaned from the brochures I grabbed from the organization's bookstand.

I considered this version a compromise, or blending of some of the elements of the first two. I started with a sketch of the organization's logo, adding a phrase that seemed to capture their mission statement. A simple map of the region and an abbreviated menu made it simpler and more direct.

And then I was done - for a bit. I put it all way to stew in my mind for a while, and then I will come back to it and actually write the HTML and CSS code for some trial website pages.

This work is licensed under a Creative Commons Attribution 3.0 Unported License.