The W’s of Web Design
By John Finnegan and Jeffrey A. Griffin
John Finnegan and Jeffrey A. Griffin are the authors of The Web Page Workbook: Second Edition. Download the PDF file for this article.There is no doubt that the World Wide Web and the Internet are good things for anyone wanting to share information or promote something—whether it be themselves, a cause, or a business. Many people are rushing to create or have created a web presence. As they surf the web, they are inundated with a visual chaos that is astounding. Each time we see something new or different, we think, “My site should have that!” However, there is much pre-planning that must occur before considering what a web site will look like and how it will behave. The “eye-candy” will have to wait until the practical questions and considerations have been addressed. This article will focus on the pre-design questions that a designer and client should address before putting pixel to paper!
The extremely popular and dynamic sites that people love to experience when they surf the web did not develop overnight. Though these sites seem to appear (and disappear) as if by magic, there are scores of people working behind the scenes to ensure that the experience of each user is consistent, interesting and purposeful—whatever that purpose may be.
Recently, PUBLISH! Magazine did a story on the design and implementation of The Discovery Channel web site. The striking thing about the design of this wonderfully interactive site is not it’s look and feel, but the fact that it took the better part of nine months to plan the who, what, when, why, and how of the site. So, when a client excitedly asks such questions as, “Will there be rollovers?” or “Can we do animated GIFs?” or “I think purple and yellow would be good colors,” the site designer should focus their energies on the “Why” of the design efforts.
- Why do you or your business really need a web presence?
- Will having a web site greatly enhance communication with your intended audience?
- Will the overhead and costs associated with creating a web site be beneficial in the long run?
- Will a web presence be just a repeat of printed collateral or will it allow the company to reach a different market?
If the answers to these questions are not specific or seem unclear, stop and examine the question seriously before moving on to the next phase of web site design planning—Who.
Who is the intended audience the new web site will target? Many communication efforts fail to clearly identify who is being targeted. Often there is a vague and generic image of “the customer” which sometimes assumes customer interests and desires. The process of defining the audience often leads to a definition or refinement of the message to be communicated. Sometimes there are multiple messages to communicate to vastly different groups of people. The result may be an internal audience (current students, faculty, and staff) and an external audience (prospective students, community leaders, and other educational institutions). Web sites and the messages to be communicated need to be tailored to each of the audiences being targeted or they run the risk of losing audience interest.
The next phase of the design process—the “what”—is the entrée. People and businesses are offering up the what for clients and consumers to devour. The web is a smorgasbord of whats—products, services and information, to name a few. Web designers must determine what the client wants or needs to promote. Again, clearly defining the what can prevent the web site design process from becoming derailed.
The what of the web site must also be judged against the who
and the why of the web site. If what is being promoted doesn’t
meet the needs of the audience groups previously identified,
then further definition of the audience needs to be done. If
what is being promoted doesn’t align with why a web site
is needed, then the initial purpose of the web site has to be
reconsidered, modified and revamped. Then the design phase can
move on to the “where” question.
The larger question of “where” was answered when the
decision was made to enter the world of the Internet. But this
is just the beginning of answering the where question. If the
client is an educational institution or a large corporation,
they probably have a web server that will house the site. The
client has probably also obtained a domain name (purdue.edu)
and the associated IP address (149.160.7.1).
If the client is a small business or an individual, a domain
name will need to be obtained. This is done by contacting Internic.net
or other authority to see if the .com desired is available. The
next step is to obtain an Internet Service Provider that offers
commercial web space on their server. The ISP will arrange for
the IP addresses and will assist with housing the site on their
server.
Designers and web builders are now ready to load the site onto
the server and make it available to the web-surfing public.
The final question to be answered in the web site design process is “when.” When the previous design phase questions have been answered, when the layout of the site includes all the bells and whistles desired, and when the site has been carefully organized to reflect the mission of the site as it was defined, then the site is ready to go up.
Registering with search sites such as Yahoo! Alta Vista and other search engines is very important in announcing the site. Most people use the search features of the web first, so having the site available in these databases can greatly increase the likelihood that people will visit.
Included here is a Web Site Development Form, which was published in The Web Page Workbook, Second Edition. It is useful to begin with this or some other simple questionnaire that will help focus the web site design efforts. Then, as the analysis process becomes more familiar, the complexity of your questions and research can be increased.
The Web site development form guides site designers through the first two stages of Web site development: specification and design. Once the form is complete, the next step is to move into the implementation stage by beginning to construct a simple prototype of the site.
Keep the following in mind throughout the development process:
- Don’t get locked into perfection on any of this. Web pages evolve. When starting a new page or site, try for “okay” instead of “perfect.”
- Don’t get rigid figuring out the details. Details can always be changed.
- Fill out the form quickly. Keep moving through the questions. The faster the work, the less likely the process will become mired in a single idea or page concept. This is an overall envisioning process; the details can be worked out later.
- Have fun. This is a creative endeavor.
Take no more than 30 minutes to fill out this form. Enjoy the envisioning process but don’t spend too much time on details. Don’t worry if it’s sketchy in places (fill it in later). Once the 30-minute time frame has elapsed, begin by authoring a simple local prototype of a home page or another simple web page design.
Web Site Prototype Development Form Specifications
1. What is the purpose of your Web page?
Sample answer: The purpose of this Web page is to introduce
me to the world. It’s for fun, a job reference, and to advertise
my writing.
2. Who is your audience?
Sample answer: Mostly adults. My preferred audience would
be potential employers, friends of mine, vegetarians, people
interested in my books. Potential employers would want to know
about my work background, successes, professionalism. Friends
would want to see the lighter side of me. Vegetarians would want
other Web sites on that subject. Maybe good recipes....
3. What benefits will people receive by visiting your site? If there’s no benefit beyond reading about you and your life, think about your hobbies or your job. What information can you gather about a topic that is important to you? Practical information encourages repeat hits.
Sample answer: I’d like to include a list of web sites on vegetarianism. Employers would want to see a good bio sketch and a professional resume.
DESIGN
4. What kind of information will be presented at your site? (If you want to add information that doesn’t cater to your audience, do you need to expand or change your audience specification?)
Sample answer: A welcome graphic; favorite links; pictures
of my dog, Herman, and my family; a resume and brief bio sketch;
a photo of me; a list of my heroes; my favorite music; my favorite
vegetarian recipes; links to business associates.
5. How can you group the subjects together?
Sample answers:
- Home page: welcome graphic, welcome text, menus of links,
return address.
- Resume and Bio: all bio material including a photo of me,
photos of my family, and, of course, Herman; maybe bio should
be a link off of resume.
- Vegetarian page: a link to veg pubs on the Net, recipe of
the week, graphic of a happy chicken...
6. How can you graphically sketch a diagram of your site?
Use arrows to indicate link directions. Put question marks where
you need to fill in data.
7. Do you need to write a “to-do” list?
Sample answer:
- Design my prototype home page (today and tomorrow)
- Design a welcome graphic (next Saturday)
- Convert my resume to HTML (date?)
- Search the web for veg sites (study about search utilities) (date?)
8. What do you want to eventually add that will stretch your HTML skills?
Sample answer: Add an audio file of Herman barking.
OK, so you've completed your site and you're ready to upload
it to the server. You've thought carefully about the who, what,
where, and when of your web site, and you're satisfied with what
you have. Here's a checklist to help you do some final troubleshooting
before you transfer your files to the server to publish your
site:
1. Preview your pages.
This may seem obvious, but it's too crucial to leave out. Use the File, Open Page option on your browser to see how your files will appear when others view them. If you own other browsers, why not look at your pages on them as well?
2. Check the links within the pages of your site.
If you've created your site using design software such as FrontPage or PageMill, you can check your links by clicking on them in page preview mode. This is not foolproof, as we'll see later, but it will be helpful in eliminating obvious dead links. Links to pages of sites other than your own cannot be tested offline; you must test those online.
3. Check your image file locations.
Your images need to be located in their correct directories and remain that way when they are uploaded to your server. If you use an image multiple times, make sure the reference to that file is correct in every instance. There may be times when it is logical to have multiple copies of the same image in different directories throughout your site (especially when the image file is very small). In those cases, you'll have to copy the image file into the correct directories as you transfer files to your server.
4. Talk to your Internet Service Provider about file formats for your server.
The web is a great equalizer-web sites are virtually identical for a user of a PC, Macintosh or Unix system. That's because they all use the same language—HTML. But you still should be mindful of the system your server is using (often this will beUnix). If you are using a Unix server (which is case-sensitive) and your own files have been created using a PC or Macintosh (which are not case-sensitive), you'll need to check that your files and links are all matching case. To simplify things, use only lowercase for all file names and extensions within your web site. Being aware of this concern could help you understand why a link could work on your own desktop, but not after it has been transferred to your server and published on the web.
—Tom Sumner eTechNotes