Adobe Web Tech Curriculum
Unit 2: Planning a Web Project, Part 1
Lesson 2.1: The Web Design Process (Printable Version)
| ! | Lesson Goal: Get an overview of how to plan your website's design. |
Most individuals interested in designing websites want to get straight to the actual coding of the site, i.e., to start adding text and images to the pages right away. Page design certainly is an important aspect of the process; however, much of the success of a website is based on the overall planning of the site, long before the coding ever takes place. Whether you will be creating websites for yourself or for someone else, you first must consider the purpose of the website and how you plan to get its intended message across to the audience.
Overview of the Design Process
|
There are three critical phases to the web design process, as illustrated in Figure 2.1-1. It is important to approach the three design phases in the order they are presented below:
|
Figure 2.1-1: Three Phases of website Design |
In their book Web Page Design, Stubbs, Barksdale & Crispen (2000) introduce a powerful teaching and learning tool called "reverse-identifying." Reverse-identifying involves applying each of the design phases to websites that already exist. This process provides a wonderful opportunity for you to evaluate websites to become more aware of the significance and the potential impact each of the design phases can have on the audience.
For example, the following tables can help you organize your analysis of two different websites' purposes and intended audiences:
| website 1: | website 2: | |
|---|---|---|
| What do you believe is the purpose of the site you visited? | ||
| Is the purpose of the site clearly stated? |
||
| If the purpose is not clearly stated, what information provides you with a clue regarding the intended purpose? | ||
| Approximately how long did it take you to identify the intended purpose of the site? | ||
| What could have been done differently to make the purpose more clear? |
| website 1: | website 2: | |
|---|---|---|
| Who is the intended audience of the site you visited? | ||
| Does the website make clear who its intended audience is? | ||
| If not, what information presented provided you with clues about the intended audience? | ||
| Approximately how long did it take you to identify the intended audience? | ||
| What could have been done differently to make the intended audience more evident? |
Design Considerations
There are several issues to consider when designing a website. These issues range from technical considerations to usability and accessibility.
Technical Considerations
Technical considerations include:
- Browser considerations
- What features are supported by the most popular browsers? What version of each browser began supporting each feature?
Additional Resources
- Browser support charts for Windows platform (http://hotwired.lycos.com/webmonkey/reference/browser_chart/)
- Browser support charts for Macintosh platform (http://hotwired.lycos.com/webmonkey/reference/browser_chart/index_mac.html)
- What updates (e.g., requiring the most recent version of a browser) or plug-ins do I really want to require my users to have? How might those choices limit my potential audience?
- Will my site be usable by people using text-only browsers?
- What features are supported by the most popular browsers? What version of each browser began supporting each feature?
- Connection considerations
- What connection speed will most of my users have? How might that influence the size of the pages (especially images) that I include?
- What connection technology will my users use? Will they be dialing in by modem, or will they use cable modems, DSL, ISDN, or other technologies?
Additional Resources
- See the PC Pitstop (http://www.pcpitstop.com/internet/default.asp) for helpful information regarding Internet connection speeds as well as Internet upload and download speed tests.
- Platform considerations
- PCs and Macs render colors differently. Should you stick to browser safe colors (the 216 colors shared by both platforms)?
Additional Resources
- Visit lynda.com to see browser safe colors organized by value (http://www.lynda.com/hexv.html) and browser safe colors organized by hue (http://www.lynda.com/hexh.html).
- For a discussion of whether it's still necessary to stick to browser safe colors, see The Web-Safe Color Dilemma (http://www.lynda.com/hex.html) or VisiBone's Frequently Asked Questions (http://www.visibone.com/color/faq.html).
- PCs and Macs render colors differently. Should you stick to browser safe colors (the 216 colors shared by both platforms)?
Knowing these technical considerations should lead you to adopt this important habit: Always preview your website on different platforms, with different browsers, and at different screen resolutions. Just some of the factors that affect document display include:
- Which browser is being used?
- ... and which version?
- ... on which platform (i.e., PC, Mac, etc.)?
- Which HTML standards are supported by that particular browser version?
- Is the browser graphical or text-only (or does the user have graphics turned off)?
- How does the user have his or her browser configured?
- What size monitor is being used and what is its screen resolution setting?
The Bottom Line
As a web designer, you can only control content. The user's browser has the final say on presentation (what your pages look like onscreen).
Usability Considerations
Usability refers to how easy a site is to use and how well it functions. Related issues can be as straightforward as basic design tips or as complex as overall site design/structure for an e-commerce site. Jakob Nielsen is often thought of as the guru of website usability. Here are some of the Top Ten Mistakes in Web Design (http://www.useit.com/alertbox/9605.html) he identifies in one of his Alertbox columns:
- Gratuitous use of bleeding-edge technology
- Scrolling text, marquees, and constantly running animations
- Lack of navigation support
- Outdated information
- Overly long download times
Besides telling us what not to do, Nielsen also provides a column about Ten Good Deeds in Web Design (http://www.useit.com/alertbox/991003.html). These good deeds include:
- Place your name and logo on every page and make the logo a link to the home page (except on the home page itself).
- Provide search if the site has more than 100 pages.
- Write straightforward and simple headlines and page titles that clearly explain what the page is about.
- Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance.
- Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site.
Among other things, poor usability can affect a web business's bottom line. According to Michelle Delio in the November 2000 issue of Smart Business for the New Economy (page 176), Creative Good, a research and consulting firm, observed 45 average online shoppers attempt to navigate various websites in order to purchase items. The results of the research indicated that "thirty-nine percent of shoppers failed in their buying attempts because they found the sites too difficult to use. And 56 percent of the search attempts — using the sites' own search engines — also failed."
She further states:
Creative Good's CEO Marc Hurst speculates that if just 25 percent of those misfired search attempts had succeeded, online retailers would have earned an additional $3 billion this year. And when you add the $3.7 billion lost from the 39 percent that failed in their initial shopping attempts — Hurst claims the result is a total of more than $6 billion in unrealized sales.
| It's time! |
2.1.2: Individual or Group Assignment Conduct an Internet search on website usability and identify three additional usability "mistakes" and three additional usability "good deeds." |
Accessibility Considerations
The final design consideration discussed here concerns the many issues surrounding web accessibility. What is web accessibility, who does it affect, and why is it important? People with disabilities need access to information on the web just as people without disabilities do. However, if your web pages aren't created with accessibility in mind, you may unintentionally prevent certain groups of people from being able to access the information you've posted.
The WebAIM (Web Accessibility In Mind) website has an excellent article entitled Introduction to Web Accessibility (http://webaim.org/intro/). This article presents the major disability groups affected by inaccessible websites and explains the challenges faced by each group in terms of poorly designed websites. Here are two quick examples:
- Images on web pages don't do a blind person any good unless you include an alternative text description of each image.
- Audio clips don't do a deaf person any good unless you provide a transcript of each clip.
The World Wide Web Consortium (W3C) has devoted a great deal of time to developing the Web Accessibility Initiative (WAI) (http://www.w3.org/WAI/). This initiative focuses on the technology, guidelines, and tools related to web accessibility and gives specific examples for how to make various web page elements accessible.
Tim Berners-Lee, W3C Director, has stated, "The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect."
Unfortunately, accessibility issues have not been a significant focus for webmasters in the past. Throughout this course, you'll learn about accessibility issues as they relate to various website components (e.g., page organization, hyperlinks, images, tables, etc.).
| It's time! |
2.1.3: Individual or Group Assignment Read the entire WebAIM article Introduction to Web Accessibility (http://webaim.org/intro/). After reading the article, summarize it briefly in a table like the one below that lists each disability group and the particular challenges faced by its members in terms of web accessibility.
Continue to add a table row for each remaining disability group discussed in the article: deafness, deaf-blindness, mobility impairments, cognitive impairments, and seizure disorders. |
Introduction to Web Teams
The development of an effective web team is a crucial step in the design process. You will be working in web teams throughout this class. Each web team will play two different roles in the web design process:
- Web designer: As web designers, your team will build a website based on client requirements. You'll need to gather critical information, design the site accordingly, implement the design (i.e., create the website), and obtain client approval at appropriate stages of the process. Another team will act as your team's client.
- Client: As clients, your team will come up with a website you'd like to have designed, communicate important information to the team in charge of creating the website, and give appropriate feedback at each stage of the process.
Playing both roles will help each team member become more familiar with the two different perspectives that must be considered when designing a web project. In addition, the web team aspect of this class will help with the development of critical thinking skills, problem-solving skills, and what employers call "soft" skills, those skills required for effective teamwork (e.g., listening, communication, and working with others).
As clients, each team will take on the responsibility of making decisions about the type of site that will be created, the target audience, etc. Examples of possible client sites include:
- coffee house
- school athletic team or club
- non-profit organization
- outdoor recreation organization
As web designers, each team will take on the responsibility of gathering information from their clients, creating a comprehensive design document, creating sketches and prototypes, dealing with client change orders, etc.
Copyright © 2002-2005 Adobe Systems Incorporated, except those portions marked copyright © 2000-2005 ID 4 the web. All rights reserved.
