Navigation

The Steps to Creating a Web Page

What Do You Need to Know?

Get the answers to some basic questions of what you need to know.

Planning Your Design - Client Input

There are many elements that need to be examined before starting your design work. The first thing is to meet with the client to determine what they want (if you're designing a website for yourself, you'll still need to do some work in order to understand precisely what you want to accomplish).

When speaking to the client, here are is the type of input you will need:

What is the purpose of this site?
What information will be conveyed on the site? How should this information be organized? (this is the basis for designing site navigation).
Do you have a vision of how you would like the website to look? What colors, design elements, graphics, images, video, audio do you have available for use on the site? Do you have examples of other sites that you like (and is this from a design point of view or a functional point of view, or both?)
Would you like to have animation on the site? What will be the purpose of this navigation?
Do you have existing company identity elements (logo, business cards, stationary, brochures). Would you like to utilize these existing elements on your website? (this may seem like a silly question, however I've done several sites where the client wanted me to design a new identity (logo, colors, look, etc), and then use that as a basis for recreating their materials).
Would you like to select a template to serve as a basis for your site? Often, selection of a template will keep design costs down. If the client has existing corporate identity elements, check and make sure that these are compatable with the template. For example, a logo may come in a size or shape that is difficult to integrate into a particular template design. Other times the logo will fit in the alloted space, but will be so small that it is unrecognizable.
Would you like to receive input from your customers, and in what form would you like to receive it?
Do you need a shopping cart installed on the site to sell products?
Do you want to collect clients e-mail addresses and send them a newsletter? Do you want a blog? Do you want a forum?
Are you going to place advertising on the site? (Banners, Google AdSense)?
Do you want the ability to search the site?

Planning Your Design - Your Analysis

Armed with the client's input, you can assess what elements need to go into the web site; how the site needs to be organized, what type of navigation to use, what will the site look like, what elements (sign in, search box, advertising, current news) need to be integrated into the pages, etc.

HTML, Flash or Both?

If you're trying to decide whether to create a site in HTML or Flash, read this discussion.

Create Mockups in Photoshop or Fireworks

Whether creating a custom design or modifying a template – I almost universally begin by creating a mockup in either Photoshop or Fireworks.

A mockup is not a web page, but a "picture" of what the web page will look like when it is created. It is an image file (such as .jpg or .gif) that you can easily send to a client via e-mail, or quickly embed in a web page that the client can view in their web browser. Because it is an image, it is non-functioning - the navigation does not work, links don't work, etc.

There are a couple of reasons to create a mockup first;

Everything is there for the client to see, and give feedback on layout, colors, navigation, etc. And, you can create, relatively quickly, several variations for a client to look at.
It often takes quite a while to create a good looking HTML web page that works properly. It would be a monumental waste of time to go through all the trouble just to hear the client say they don’t like what you’ve done and you need to start over.

Based on client input and your analysis, you'll have a pretty good idea of the required elements, and possibly some design ideas. Next, you'll use your design software to translate this into a web page design (read a discussion of graphic design software).

I primarily use Photoshop, and occassionaly Fireworks or Illustrator to create a design. There are so many things to be aware of when creating a design, especially one that works well on the web.

This web site will deliver tips that will save you from having to discover the tricks on your own.