Creating a good Web site takes a lot more than just typing some code and saving it as a Web page. Anybody can hammer a nail to a piece a wood, but it takes more than that to build a house. Web design, the process of designing Web pages, can be thought of in the same way.
To begin the process we must first understand design. According the to the dictionary, design means "to prepare the preliminary sketch or the plans for (a work to be executed), to plan the form and structure of". Simply put, design is all about communicating a message!
The main challenge with Web Design is to communicate a message to the users of the Web site. In doing so we must keep in mind several things, including:
Read Jared Spool's article The Road to Recommendation, in which he cautions against deducing poor inferences that don't actually explain what's happening in the design
Talk to seven Web designers and you will hear seven different processes for creating a Web site. Generally that process will include some combination of the following:
Granted, you could skip all of these steps and just start coding, but chances are you would have to start over many times, as issues you might not have initially considered began to arise. If we go back to our model of building a house, imagine that you laid the foundation, nailed up the walls and started on the roof when the person you are building the house for says... "but I also want a garage". So you stop the roof, add some more foundation, nail some more walls and just as you start on the roof again, they say "... can we make it two stories?" Then you have to kill them. You could have saved a lot of time and money (and attorney fees) if you had just sat down in the beginning and planned out the design and steps for building. This is what the Web design process does.
Before you go on a trip, you usually want to have a destination in mind. The same is true of the Web. Before you design a Web site, identify the message you are trying to send. Establish some clear goals for your Website. If you skip this step, you can easily lose sight of what you are trying to accomplish and what message you are trying to send.
The process of determining goals for your site is often called predesign, because (if you know what you're doing) it takes place well before any design work begins. Many professional Web designers create predesign questionnaires to help clients establish their goals for their Web sites. Although the questions asked in predesign differ greatly from designer to designer or project to project, the following points need to be addressed in some form.
Take a look at the Web sites below. As you look at these sites, keep in mind the five questions from the previous page.
Can you determine the site's objectives, its purpose or potential audience, the message and purpose of the site?
Please post your thoughts in the "Design" forum under Communications/Discussion Board.
Before a house is built, an architect maps out the layout of the rooms, determines where doors and windows will go and how people will live in the house. This map is called a blueprint and it is essential for the building process. An architect who builds from a blueprint is a lot more credible than one who doesn't, and also charges a lot more money. In the world of Web design, the same process is essential before we begin to build the Web site, and the same concepts of credibility and fees also hold. A Web designer must determine how people are going to move through the Web site, how they will navigate from section to section and how the sections will be linked together. This blueprint for a Web site is usually called a flow chart, flow diagram, or site map.
Once the predesign step has been completed, the next step is to create a flow diagram. There are many ways that you can create a flowchart. In fact there are entire software packages devoted to mapping information. One such program commonly used in the industry is Visio, now owned by Microsoft. More affordable (as in free) is the concept mapping software from the University of West Florida Institute for Human and Machine Cognition.
You may already have software on your computers that would allow you to create attractive and professional looking flow diagrams. Microsoft Excel and MS Paint and a variety of word processing programs can be used to create flowcharts.
One of the first steps in creating a flow diagram is to make a list of all the content that you want to include in your site. You may find that as you create your list, some items are combined and others are omitted. After you have come up with a list, write the name of each element on a card or post-it note. Using a plain piece of paper, organize the elements into a desired configuration that represents how the various sections of the site will interact and how the user will navigate through the site. Later, draw lines between the various elements to indicate possible links and navigation.
Examples of basic flow diagrams
Navigation is an essential part of any Web site. Navigation allows the user to figure out where they are, gives them insight into the organization of your site, and keeps in mind the goals of your site and your user.
There are many different ways to represent navigation on a Web site. By far the easiest is to have simple text links to the various parts of your Web site. Below are several examples of different forms of navigation.
Take a look at the sites below. How do these sites handle navigation? Is their navigation effective? Why or why not?
Please post your thoughts in the "Navigation" forum under Communications/Discussion Board.
Storyboards give one an idea of what a Web page will look like. All of the visual elements of a Web page including the text, interactivity and links are mapped out ahead of time to give the designer or client an idea of how things will look.
One of the easiest ways to create a storyboard is to draw it out by hand. Use an 8 1/2 by 11 piece of paper turned on its side to represent the Web page, and draw in your elements with a marker or pencil. Storyboards can also be created using computer software programs such as Adobe PhotoShop or Illustrator, Microsoft Word or Powerpoint, etc.. As you become more proficient at Web building, you will discover that the added benefit of using a software program--particulary an image editing program like Photoshop or Illustrator--to create a storyboard is that the storyboard can later be split up into the various graphic elements of the Web page.
A storyboard is essential for helping us to work out any problems or questions we may have with graphics, content, navigation or links, before we spend time writing the HTML code.
The storyboards below illustrate the design of the page including color, graphics, text and link location. A client or designer can get a conceptual idea of what a page will look like and make changes accordingly, before time is invested in writing the HTML.
Once a storyboard is finalized, the next step is to turn it into a Web site. Use the storyboard as a set of visual directions for where you should place graphics, links and text on your Web page.
If you have ever had to write an article or paper, you may have experienced writer's block. No matter what you do, you can't think of the words to write. The same thing happens with design. You may have done your predesign, set the site goals and even started the flowchart, but you can't imagine what your page should look like.
Start by pretending you're a potential user of the Web site. What task would you be trying to accomplish? What steps would you expect to take? What would you like to see? What would get in the way?
Finding inspiration can be a click away. Looking at Web sites that you like and taking note of what they did for design is a good way to pick up ideas. Draw some sketches to get a better handle on how you'd like your pages to look.
Another thing you might want to do is to try some brainstorming about the look and feel of your site. Take a magazine and cut out images that make you think about your content and goals. Maybe the images are of people who might use your site; maybe they are of items that make you think of your content. Place the articles around your work area or on a piece of paper like a collage. Use them as a way to start your imagination and spark ideas, sketches, etc.
ComArts Interactive Design
At this point in the class you should be comfortable with the following:
Designing Web Navigation
Amateur Web Sites the Top
Menus with Beauty and
Brains: The Heart of an Excellent Site