Designing for the Web

About Web Design

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:

  • remember to reach all of our users (not just the ones with fast modems)
  • the Web is very different from traditional print media
  • legend says less then 10% of your users will scroll beyond the first screen. Studies disagree, but show that users will only scroll if they have reason to believe there's compelling content further down the page. It's safe to assume information overload and a short attention span are normal unless the target audience is highly motivated to read your information.

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

 

printer-friendly page

The Process of Web 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:

  1. The Idea
  2. Pre Design- Setting Goals - Determining your Audience
  3. Flow Charts- Information Architecture- Mapping out the content
  4. Story Boards - The look and feel
  5. Final Design
  6. Building the Site
  7. Test Test Test 
  8. Launch

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.

Pre-Design

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.

  • Why are you building this site? (site description or statement of purpose )
  • Who is your audience? and who are you? (or who do you want your audience to believe you are?)
  • What are the objectives of this site? (what are you trying to accomplish?)
  • What kind of information will be on this site? (outline of the information)
  • How will the site affect the user?

 

 

Sites to Talk about

Take a look at the Web sites below.  As you look at these sites, keep in mind the five questions from the previous page. 

  • Why did they build this site? (site description or statement of purpose )
  • Who is their audience? and who are they? (or who do they want your audience to believe they are?)
  • What are the objectives of this site? (what are they trying to accomplish?)
  • What kind of information will be on this site? (outline of the information)
  • How will the site affect the user?

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.

Flow diagrams

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.

Creating a Flow diagram

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

flow diagram: author site

flow diagram: personal site

flow diagram: Mooka the Goldfish fan club site

flow diagram: parachute chart

flow diagram: complex site


Examples of a Workplan Flow diagram for a Websitework flow diagram

work flow diagram

Navigation

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.

Some Things to Remember About Good Navigation

  • Users should always be able to go home or back to the main page
  • Navigation should be obvious and easy to figure out
  • Offer clear and understandable labels
  • Users should be able to tell where they are at all times
  • Let users maneuver without relying on the browser buttons
  • Make all parts of your site accessible
  • Identify the site on every page
  • Support user goals and behaviors
  • Remain consistent throughout the site

Common types of navigation

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.

Navigation: sites to talk about

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

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.


A simple sketched storyboard:

storyboard sample


A more visually detailed storyboard

another storyboard sample
 

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.

Finding Inspiration

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.

Good sites for inspiration

Coolhomepages
http://www.coolhomepages.com/

Lynda.com Inspirational Sites
http://www.lynda.com/resources/inspiration/index.html

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
http://www.designinteract.com/

Terms and concepts to know

Purpose of Design
Usability
Pre-Design
Web Design Process

Flowchart
Story boards
Navigation
Types of Navigation

What should I know at this point?

At this point in the class you should be comfortable with the following:

  • usability concepts (in other words, what you have to do to make things work for users)
  • Web design process
  • basic document structure
  • formatting text tags for space and alignment
  • 3 types of lists
  • links to
    • external,
    • local, and
    • internal
  • graphics
  • thinking
  • problem-solving

Readings

Information Architecture Tutorial 
http://www.hotwired.com/webmonkey/design/tutorials/tutorial1.html

Designing Web Navigation 
http://www.ahref.com/guides/design/199808/0831jef.html

Amateur Web Sites the Top Ten Signs
http://www.webdevelopersjournal.com/columns/abc_mistakes.html


More information

Web Design

Web Design Guru: Lynda Weinman

About.com: Web Design Guide

Yale Web Style Manual


Good sites for inspiration

Coolhomepages
http://www.coolhomepages.com/

Lynda.com Inspirational Sites
http://www.lynda.com/resources/inspiration/index.html


Navigation

Menus with Beauty and Brains: The Heart of an Excellent Site
http://www.webreference.com/graphics/column42/index.html