Ian Swenson .com

The first thing to do when you’re planning on creating a new web site or just redesigning and existing one is to conceptualize it. Do two things:

Decide Your Aims and Goals

Figure out what you want the web site to accomplish. Why does it exist? If you’re a business, then your answer should be pretty simple: to sell your services/products. If your site is personal, decide what you want featured. Maybe it’s pictures of you and your (grand)child(ren). Maybe it’s your social commentary of the day. Whatever it is, figure it out.

Another good idea is to figure out your audience. Who are you creating this web page for? Friends and family? The public at large? This can drastically alter the presentation of your site, its content, and the overall feel. It’s good to make this decision at the outset.

Write down a list of the areas you want to display in your web site — your main points, if you will. These don’t have to be concrete yet. For example, my points on my page were: a blog where I could post things like this as well as my thoughts, a place to display various media I’ve created, and a little “about me” section.

Doing all of these things up front can save you plenty of time later on. Remember too that none of this is set in stone yet, it’s just a good way to get started.

Sketch Your Layout

The second thing to do is to figure out your layout. I’ve found it’s best to grab a piece of paper and just start sketching. And believe me, I can’t sketch to save my life, but a rough skeleton on paper helps me figure out if the design is really what I want before I even do any graphics work or coding. You can include drawings of your graphics on the paper at this stage if you wish, but boxes work just as well.

There are plenty of different layout possibilities. Fixed width or fluid; single- or multi-column; grid-based; float-based, etc. But, as an avid internet user, you’ve seen plenty of layouts in your day. If you need more examples, try these layouts.

My page uses the standard header/footer fixed-width two-column layout with a little flair thrown in for the waterfall. A basic wireframe of it looks like this:

The true wireframe is actually quite a bit more complicated than that, but we’ll get to that later. This is the kind of thing I sketch out, usually with a couple poor graphics to go along with.

Okay, with these first two steps done we can move on … next time.