4Lesson 4:
Web Site
Development Process
Objectives
By the end of this lesson, you will be able to:
1.1.4: Determine the audience for the site.
1.1.5: Develop a Web site vision statement.
1.1.6: Develop a site strategy and identify strategy implementation tactics.
1.1.7: Use the mindmapping process to structure a Web site.
1.1.8: Set design goals appropriate for the business/organization represented by the site and the site's intended audience.
1.1.9: Create a site metaphor.
1.1.10: Develop site design and architecture specifications.
1.1.16: Use flowcharts and Web wireframes to determine page layout.
1.2.8: Create Web page and site templates that fulfill design specifications.
1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers.
Pre-Assessment Questions
1. Which of the following defines the scope and intent of a Web site?
a. Tactic b. Strategy c. Metaphor d. Vision statement
2. Which Web design approach suggests an analogy with other ideas or objects, creating a familiarity for users of a Web site?
a. Tactic b. Strategy c. Metaphor
d. Vision statement
3. During which phase of the Web development process would the development team create the vision and strategy for its Web site?
Bottom-Up Approach to Web Development
As you saw in the previous lesson, it is important for Web designers to learn the customer's needs and the site's audience before forming ideas about the design and objectives for the site. These factors determine all the components needed for the site to be successful, from its look and feel to its functionality.
You can establish a set of desired user behaviors for a Web site. Each of these desired behaviors introduces possible scenarios to be considered. Scenarios greatly facilitate the process of developing a Web site. They first provide you with a clear image of the project scope, and then they serve as a tool during site development to keep the project on track, budget and schedule.
It is tempting to approach the design process from the top down: Define and design the look and feel of the site, then conform user interaction to that particular design. However, the scenario-development process is centered on identifying desired system behaviors in response to user behaviors. Thus, the Web site design process is reversed. The look, feel and functionality of a Web site emerge as the various user scenarios are developed from the user's point of view — a bottom-up approach.
Understanding the Business Process
The role of the Web designer is becoming more complex. In the past, Web designers could suffice with the skills to create a Web presence for the customer organization. Today, having a Web presence is not enough. The Internet is no longer a repository of electronic brochures, but rather a collection of increasingly sophisticated technologies that offer the ability to develop lucrative Internet-based businesses.
The concepts for these successful electronic businesses are varied. Generally, they can be placed into two categories: sites that deliver products intrinsically dependent on the Internet (such as interactive games or tools for searching the Internet), and sites that deliver existing products and services to a global market via the Internet. What the known successful Web sites have in common is that they focused on the goal of fulfilling unmet needs for Web site users.
Book selling is an excellent example. Bookstores in major metropolitan areas are exciting, large and comprehensive. However, they cannot each carry 5 million titles, and these stores are only accessible to people near the major metropolitan areas. Amazon.com responded to this need. Anyone with access to the Web now has access to the millions of book titles at www.amazon.com. How does one start such a business? It begins with a vision. In this case, the vision was to sell books on the Internet without maintaining an inventory.
Jeff Bezos, founder and CEO of Amazon.com, realized that publishers are always faced with a difficult dilemma: They must invest heavily in the production of a book. In turn, they sell this book to a retail store at wholesale price. If the retailer is conscientious, it will pay the publisher 30 days later. Amazon.com approached publishers and told them that each book it sells on the Internet will be paid for before it is shipped from the publisher. In return, Amazon.com wanted the capability to "drop-ship" books directly from the publisher to the reader.
Due to its success, Amazon.com's model has changed somewhat. The company now has huge inventories of many books and other products, which results in a quicker
turnaround for high-volume items. More than 70 percent of Amazon.com's business is with repeat customers.
OBJECTIVE 1.1.4: Determining site audience
NOTE:
You should consider the goal of establishing desired user behaviors:
What do you want users to do at your Web site?
OBJECTIVE 1.1.8: Design goals for customer and audience
NOTE:
Again, keep in mind that the Web designer's job does not necessarily end when the completed site is posted to the Web.
The Amazon.com success story still provides a strong and useful example for electronic business models.
Defining a Web Site Vision
As mentioned in the previous lesson, defining a Web site vision statement is a key activity that takes place during the conceptualization phase of a Web development project. The vision statement is the fundamental framework that defines the scope and intent of a Web site. This statement should be concise enough that everyone involved in the development process can focus on fulfilling the intended vision. The vision statement should include a value and a measurable goal.
The following example can be considered a good vision statement for a business such as Amazon.com:
We will become the world's pre-eminent Internet book retailer, selling
$1 million in books per day by the end of next year.
Inherent in this statement is a value ("pre-eminent Internet book retailer") and a measurable goal ("$1 million per day by the end of next year").
Many companies post some version of their vision statements (also often called mission statements) on their Web sites. These statements may include other details to appeal to their customers, but generally define the scope and intent of the businesses they represent.
In the following lab, you will create a vision statement for a Web site. Suppose that you want to start your own online business. You might develop the Web site yourself or you might employ a team of professionals to develop it for you. In either case, creating a vision statement is a good place to start your Web-based business. If you understand the questions your vision statement must answer and the information it must provide, then your vision statement will help you focus your efforts as you launch your business, as well as focus your team on creating the most appropriate and effective site for your business.
Lab 4-1: Creating a vision statement for a Web site
In this lab, you will create a vision statement for your Web site. Write your answers in the spaces provided.
1. What are some values that can be stated for your Web-based business?
2. What are some measurable goals that can be stated for your Web-based business?
3. Combine these values and goals, and write a concise vision statement.
OBJECTIVE 1.1.5: Web site vision statement
NOTE:
A vision statement provides a solid goal toward which to work. Vision statements are just as useful for small sites as they are for large e-commerce businesses because they help all developers focus on achieving goals of any size.
NOTE:
Vision statements are as useful for personal goals as they are for business goals. Have you ever written your personal goals in this type of format? Was it helpful? You can try applying vision statements to personal goals in Activity 4-1:
Creating a vision statement for a personal goal.
4. Browser: Visit a search engine such as Yahoo! or Google, and conduct a search for the phrase "Company Vision Statement." (For more results, you may also try searching for "Company Mission Statement.") Also visit the Web sites of some of your favorite online businesses, and look for the company vision statement at each site. Do many Web sites post their vision statements for the public to view? What details are generally omitted from a company vision statement posted on its public site? What new details are included? What version of your company vision statement would you post on your site for customers to see?
From Vision to Strategy
So far, you have created a vision statement that will guide your efforts to create a successful Web site. The next step is to determine how you will achieve that vision. For this, you need a strategy.
Defining the Web site strategy
Your strategy must be focused on persuading users to spend time on your Web site and return to it in the future. In fact, the goal of electronic commerce — indeed, of any business — is to attract and keep customers. To accomplish this goal, you can use the unique features of the Internet to your advantage.
As stated earlier in this course, the Internet can address individual needs. It is more similar to the local grocery store than to the media of television or publishing. You enter a grocery store when you please. Inside, you decide whether to just browse or to buy, and you choose how you move around the store.
Thus the Web strategy is not to build the best looking or most useful Web site. The basic strategy of a business Web site is to attract and retain customers. The details of
implementing a Web strategy make the task complex.
Defining the Web site tactics
A tactic is a method used to implement your strategy. For example, if you want to gather personal information from your users, you need a tactic. A widely used tactic is to offer something in exchange for that information. A business might offer a screen saver, software, discounts or a free product in return for the requested information.
Another common tactic rewards the "first-time buyer." If you place an order now, you will receive an additional discount or bonus.
The net effect is that you now have the customer's information. The next time he or she visits your site, you can use this data to complete the customer's purchase or transaction much more quickly. You can also market to users based on their preferences from previous purchases.
In the following lab, you will develop tactics to support a Web site vision and strategy.
Suppose you are launching your own online business. Your vision for your site is strong, but you need ways to attract customers to your site so you can share and implement your vision. If you can develop solid strategies that help accomplish your vision, and devise tactics for carrying out your strategies, you will be able to create a Web site that appeals to users, builds a customer base, and helps your business to flourish.
NOTE:
The vision statement gives focus to all the efforts that follow it because all efforts (strategy) need to support the vision.
This focus can help streamline all tasks that follow.
OBJECTIVE 1.1.6: Site strategy and tactics
NOTE:
You can analyze a competitor's strategy for attracting and retaining customers, and tactics for supporting site strategy in Optional Lab 4-1: Analyzing the competition's strategy and tactics.
Lab 4-2: Developing tactics to support a Web site strategy
In this lab, you will develop some guiding principles to support your Web site's vision statement and associated strategy. Write your answers in the spaces provided.
1. Consider the vision statement you created in the previous lab. Develop two strategies to support your vision.
2. Consider the strategies you specified in Step 1. Develop two tactics for each strategy to support your vision.
3. Browser: Visit the Web sites of some of your favorite online businesses. Can you identify some of the strategies these sites are using to support their visions? What tactics do you see employed to promote these strategies? Which tactics do you think are most effective? Which tactics are least effective? Why?
Web Site Specifications
After you have determined the audience for the site, and you have created a strategy for your Web business and tactics to achieve that strategy, it is time to create specifications.
Specifications define the features, content, functionality and structure (or architecture) that the site requires in order to meet the customer's needs and achieve the site's goals.
Specifications can be divided into four types:
• Functionality specifications
• Content specifications
• Architecture specifications
• Design specifications
Functionality specifications
Functionality specifications indicate the functions or activities that the site should be able to perform. For example, the functionality specifications for an e-commerce site will usually include search features, a shopping cart, credit card processing and so forth.
Content specifications
Content specifications indicate the general types and topics of content that the site will include, such as text describing the company, product descriptions and images, shipping information, and frequently asked questions.
OBJECTIVE 1.1.10: Site design and architecture specifications
Architecture specifications
Architecture specifications indicate the way that the site will be structured and ways that users will navigate it. For example, an online shoe store might organize the shoes into a group for men and a group for women, with additional subgroups of dress shoes, casual shoes and athletic shoes. The shoes might also be separately grouped by price range, brand, color and so forth. The site architecture specifications help you to determine ways to organize and relate these types of information for navigation and searching.
Design specifications
Design specifications are used to plan the general look and feel of the site, including the fonts, colors and images that will be used. For example, many companies have standards for the sizes in which their logos can appear for designated uses, as well as the colors and fonts that should be used for specified purposes and areas on the site. These design requirements are discovered and recorded during the requirements gathering phase of the project. When the design specifications are created, the Web designer determines how to satisfy these requirements. Generally, site design templates (which will be discussed shortly) are most useful for this purpose.
Creating site specifications
Web site specifications do not need to be complicated. Often, they can be created on a white board or developed through a series of e-mail messages. The important point is that the final document — whatever its form — should answer this question: What are we going to create?
The customer and any other stakeholders should review and approve all specifications before the project moves forward to the design phase.
In the following lab, you will determine the functions that your Web site will offer.
Suppose you have created a vision for your own Web-based business, and you have identified the strategies and tactics that will help you realize your vision. The next step is to create the functionality, architecture, content and design specifications for the site.
Begin by considering the functions that your Web site must offer in order to accomplish your goals. Functions include site capabilities such as animation, interactivity, catalogs, downloadable files, streaming audio or video, site and database searching, user-input forms, e-commerce capabilities, and so forth. The best plans will not be successful if they are implemented poorly or incompletely.
Lab 4-3: Developing the specifications for a Web site
Now that you have a vision, a strategy and tactics, you can continue the planning process by defining your Web site's specifications. Write your answers in the spaces provided.
1. What products will your Web site offer?
2. What services will your Web site offer?
3. What information will your Web site offer?
4. Consider some of the functions that your Web site must offer, based on your answers in Steps 1, 2 and 3. What functions are crucial for the success of your site? What functions might be helpful but are not required? What functions are unnecessary?
Use this information to create functionality specifications for your site.
5. Browser: Visit the Web sites of some of your favorite online businesses. What functions do these sites commonly offer? Do any of the sites offer an unusual function? Do the unusual functions seem useful, intriguing or unnecessary? What functions do you see on other sites that might be useful on your site?
6. Consider the functionality specifications you determined in Step 4. What types of content will your site need to provide the desired functionality? What content might be helpful but is not required? What content is unnecessary? Use this information to create content specifications for your site.
7. Consider the functionality and content specifications you determined in Steps 4 and 6. How will you structure and organize the content on your site to provide the desired functionality? How will users navigate this information to maximize the desired functionality? Use this information to create architecture specifications for your site.
8. Consider the functionality, content and architecture specifications you determined in Steps 4, 6 and 7. With these requirements in mind, consider the general look and feel you want the site to have. Think about logos, images, colors, fonts and so forth, which you will use consistently throughout the site. What choices do you prefer?
What choices seem necessary to enable your other specifications? What choices might inhibit your other specifications? Use this information to create design specifications for your site.
9. Browser: Visit the Web sites of some of your favorite online businesses. What types of content do these sites typically offer to provide their functionality? What types of architecture do these sites employ to organize their content? What design features are common or unusual? How does design complement or distract from the functionality, content and architecture of these sites?
Site design templates
You will implement the design specifications that you create for your site during the design phase of the Web project. Generally, this phase begins with the designer creating a design "mock-up" or sample, which is often a simple example image of the site's proposed appearance. Typically, you will revise the mock-up until the customer is satisfied that it fulfills his or her requirements as stated in the specifications, and all stakeholders agree on the look and feel for the site.
You will generally create your design mock-up at the same time that the functionality of the site is programmed or acquired and the site's content is being finalized.
After your design mock-up has been approved, you can begin creating Web pages based on the mock-up design. Design professionals prefer to use templates when creating their Web pages. Using a Web page template will help you apply your design consistently and quickly to each page in your site, ensuring that the site has a unified look and feel that does not vary from page to page.
A Web page template is an X/HTML page structure (and sometimes an associated style sheet) that acts as the foundation for each page you create. Your page template must always fulfill design specifications, so it is critical to ensure that all stakeholders reviewed and approved the template design (i.e., mock-up).
Most major Web-development applications, such as Expression Web and Dreamweaver, allow you to create your own Web page design templates. You can also find examples of ready-made page templates at the following sites, some of which you can use free of charge:
• Free Website Templates from Virtual Promote (http://freesitetemplates.com)
• TemplateMonster.com (www.templatemonster.com)
• Hoover Web Templates (www.hooverwebdesign.com/templates)
Ready-made templates can provide you with some good ideas for your site's look and feel.
However, these pre-designed templates are unlikely to fulfill all your design
specifications, so be sure to modify any ready-made templates you use according to your site's needs.
Later in this course, you will create and apply design templates to your Web pages so you can see how they ensure consistency and speed development.
Designing for PDA-based vs. traditional browsers
When you are designing the layout of your site, it is important to consider the growing number of people who surf the Web on mobile devices, also known as PDAs (personal digital assistants). It is often well worth the time to create separate pages or at least separate style sheets for PDA-based browsers, as the individuals who use them often have disposable income they can spend on your site.
Keep in mind that PDA browsers are not as powerful as traditional browsers, and do not handle client-side scripting (e.g., Jscript) very well. Stick to basic XHTML and style sheets, and avoid interactive elements.
Also keep in mind that size matters. PDA screens are small. Avoid using static page widths, and keep in mind that users are paying for the time they are using their devices, so use few words and small images so that your pages load quickly.
OBJECTIVE 1.2.8: Web page and site templates
OBJECTIVE 1.2.9: Designing for PDA-based vs.
traditional browsers
Remember to validate your code. The W3C provides a validation site that will check your code for mobile friendliness: http://validator.w3.org/mobile/.
As with pages that you create for traditional browsers, test, test, test. For mobile pages, you may want to test your site on a BlackBerry, an iPhone, and an Android (Google) phone, for example.
The Metaphor
A metaphor suggests a likeness or pre-existing identification with other things or experiences. The most common representations used by Web sites are brochures, prospectuses and catalogs — all metaphors of the print medium. Some sites use the familiar metaphor of television. As often pointed out, the Internet offers different opportunities for user interaction. The Web site visitor is more like a visitor to a store or an art gallery who is interested in the total experience of the visit, and not just a product purchase or a look at a work of art. Even when it is appropriate to use print medium as the metaphor, it should be done intentionally, using the best principles from that medium.
Consider the concept of metaphor you may recall from language classes. A metaphor suggests analogy between two ideas or objects without using the words "like" or "as." In site design, a site can be presented as a particular object or experience to emphasize or stylize the site's purpose.
Metaphor guidelines
Metaphors can be valuable to Web site design. Consider the following guidelines when developing a metaphor for your site.
• Consider whether a metaphor is needed to express the desired idea.
• Select a metaphor that is familiar to the chosen audience.
• Use the familiar to explain the unfamiliar.
• Keep metaphors light and effective.
• Be sure that the comparison shares characteristics with your theme.
• Use the metaphor consistently in the design.
• Do not overuse the metaphor.
• Do not use a metaphor that may have any negative connotation.
• Choose a metaphor that is easy to remember.
• Do not mix metaphors.
Metaphor examples
One design metaphor that has become very widespread in Web design is the tabbed folder metaphor. Resembling a stack of tabbed folders in which a tab can be clicked to "open"
each folder, the tabbed folder format has long been a standard in software design — most notably in the design of software preferences dialog boxes. Tabs are used for navigation on many of the biggest sites, including Amazon.com, Expedia and PayPal.
Study the following screenshots of sites using example metaphors and see whether you can identify with them. Note that many of the screenshots show older versions of these sites. Today, ease of use and functionality have taken on primary importance in Web
OBJECTIVE 1.1.9: Site metaphor
NOTE:
Can you think of any sites you have visited that effectively used metaphor in the design? Can you think of any metaphors you have not seen used that might be effective on the Web?
NOTE:
If time permits, visit these sites and compare the current sites to the screenshots shown here. Which version of each site do you like better? Do you think these sites use metaphor effectively?
design, and site design metaphors have become less common and more subtle than some of the samples shown here. However, these samples provide clear examples of the use of metaphor in Web design.
Figure 4-1 shows a previous version of the Handyman Connection home page at www.handymanconnection.com.
Figure 4-1: Handyman Connection home page
Figure 4-2 shows a previous version of the Eco Mulch & Fulton Grass home page at www.ecomulch.com.
Figure 4-2: Eco Mulch & Fulton Grass home page
Figure 4-3 shows a previous version of the Hershey's Happiness home page at www.hersheyshappiness.com.
Figure 4-3: Hershey's Happiness home page
Figure 4-4 shows a previous version of the MedBoard USA PhysicianBoard employment service home page at www.physicianboard.com.
Figure 4-4: PhysicianBoard home page
Figure 4-5 shows a previous version of the Hux Records home page at www.huxrecords.com.
Figure 4-5: Hux Records home page
Figure 4-6 shows the Donkey Konga microsite posted by Nintendo Europe
(http://194.192.82.242/donkeykonga/flash/player.asp?language=uk) for the launch of the Donkey Konga game.
Figure 4-6: Donkey Konga microsite home page
Figure 4-7 shows a previous version of the World Cup page of the Nokia Snowboarding World Cup site at www.nokia.com/snowboard/.
Figure 4-7: Nokia Snowboard World Cup home page
How do these and other Web sites you have browsed use metaphors to their advantage?
Benefits and drawbacks of using site metaphors
It is not always necessary to choose a site metaphor. In fact, strictly adhering to a metaphor might hinder creativity, resulting in a boring site.
However, creating a site metaphor can be beneficial because it helps you focus on a strong, controlling visual theme for the site. Beginning designers find site metaphors especially helpful because the metaphor helps create a consistent look for the site.
Using a site metaphor can, in many cases, help a designer think through potential problems and then solve or avoid them. Having a strong visual theme for a site can actually help you anticipate various issues, including accessibility. As Robert Frost once said, "Poetry without rhyme is like tennis without a net." The same could be said for some Web sites and the importance of creating a strong site metaphor.
Mystery Meat Navigation
The term "mystery meat navigation" was coined by Vincent Flanders to describe a Web page or graphical user interface (GUI) in which it is difficult for the user to determine the destination of hyperlinks, or in more extreme cases, to locate the hyperlinks on the page.
As a result, the user has great difficulty determining the site's navigation structure. A site that suffers from mystery meat navigation is less accessible and less useful than sites that feature clear and simple navigation. Mystery meat navigation can also cause accessibility issues because screen readers may not be able to interpret the navigation.
You could argue that Figures 4-1 and 4-3 could lead to mystery meat navigation, if done improperly.
The way to correct the problem is to clearly show users the hyperlinks of a site. You can do this by using standard hyperlinks, or by making sure that any animated images and Flash files you use readily show hyperlinks when a mouse passes over the link. Even
then, it is best to always make navigation quite plain. Having an alternative form of navigation such as text-based navigation links is another way to avoid some of the confusion caused by mystery meat navigation.
Flanders' original example of mystery meat navigation is in a Flash video at the following URL:
http://www.webpagesthatsuck.tv/saturn/saturn.html
You can read more information about mystery meat navigation at the following URL:
http://www.webpagesthatsuck.com/mysterymeatnavigation.html
The Mindmapping Process
Mindmapping is a process that allows you to structure ideas on paper in the order your brain follows, rather than the linear process normally used when documenting ideas.
Imagine creating an entire Web site or report page-by-page, and writing down all your ideas. If you were to write these thoughts on a piece of paper, describing each page and its content, you would have a list. This list might be incomplete, however, because forcing the linear process stifles your thinking and limits your ideas. In the end, could you correlate all these thoughts easily, and would they flow together?
Now consider mindmapping. Instead of beginning in the upper-left corner of the paper and proceeding down line-by-line, place your subject in the middle of the page and circle it. From there, draw branches, which are ideas about your topic. If any topics are related in a more definitive way, create another branch off the current idea branch. Within minutes, you will see your mindmap develop into a dynamic sketch. You might find that a standard sheet of paper is not enough to contain all your thoughts. Use more paper, create more branches, and keep the ideas flowing.
Mindmapping is a process of moving ideas from thought to document. Do not judge whether ideas are good or bad; just write them down and move on to the next thought.
After you complete your mindmapping process, you can go back and refine or eliminate ideas.
Some techniques for mindmapping include using a large chalkboard or whiteboard. You can also use different colors to designate specific categories or items, or use thick markers and thin markers — whatever you can find to help stimulate the process.
Remember that mindmapping is a very different paradigm for transferring your ideas to paper, and you might be unaccustomed to it. However, in a short time, mindmapping will feel as natural as reading or writing.
Mindmapping a Web site
Figure 4-8 illustrates the way you can use mindmapping to develop a Web site. This example is simplistic. Your mindmap might have dozens more branches, which will help you develop a better Web site.
OBJECTIVE 1.1.7: Mindmapping site structure
NOTE:
Have you ever heard of or used the mindmapping process before?
What type of project did you use it in?
NOTE:
Compare mindmapping to a brainstorming session. Have you ever used the mindmapping technique during a group brainstorming session? Do you think it could be useful in this setting?
Figure 4-8: Web site mindmap
In the following lab, you will try mindmapping a Web site of your own. Suppose you are leading a Web site development project, and you are ready to get your team started on the development tasks. After you have determined the customer's needs, you could gather your development team together for a mindmapping session. Using a large whiteboard, you can record all the ideas from all team members in a brainstorming session, then later you can refine the details to help determine the specific pages and functions your site will need to provide. This process allows everyone to think creatively and focus on any part of the site at any time.
Lab 4-4: Mindmapping a Web site
In this lab, use the space provided to mindmap the Web site you described in this lesson's previous labs. Use additional sheets of paper if you need more space.
NOTE:
You can use this lab to begin planning your own Web sites or for simple practice in mindmapping.
Creating a Web Site Wireframe
A Web site wireframe is a sketch of the skeletal view of a site's architecture. Creating a wireframe is the next step you would usually take after creating a mindmap. Whereas a mindmap is the result of brainstorming, a Web site wireframe is a finalized representation of the site. A Web site wireframe does not focus on the contents of a page. Rather, it focuses on how pages on the site work together to create a complete solution. A Web site wireframe also allows you to confirm that your mindmap is being applied properly.
When you are developing a new site or restructuring an existing site, you should first make sure that the site's navigation is as coherent as possible, then focus on page content.
Figure 4-9 provides an example of a Web site wireframe. Notice how the hierarchical format helps describe the relationships between the pages.
Landing Page
Newsfeed Blog feed
User profile Search
News About us
Product Product Product Product Product Product
User info Backup
Database
Figure 4-9: Sample Web site wireframe Elements of a Web site wireframe include:
• A description of each page on the site.
• A listing of all elements necessary for the site to fulfill its business purpose. This includes discussion of database connections, scripts, Web applications and other programming required to make the site fully functional.
You can use a Web site wireframe to:
• Help set customer expectations for the final site.
• Describe the need for specific programming to additional members of the team. For example, a properly created Web site wireframe may help explain the need for a single-sign-on scheme.
Vector graphics applications are usually used to create simple Web site wireframes. Some applications, such as the drawing function in most office suites, are quite simple. Others are more advanced. Specific tools you can use to create Web site wireframes include:
OBJECTIVE 1.1.16: Flowcharts and Web wireframes
• Microsoft Visio
• Adobe Illustrator
• OmniGraffle
• Inkscape
• Graffletopia
• Microsoft Office or OpenOffice.org
• Axure
The concept of a Web site wireframe is derived from the more traditional concept of a wireframe, which is a way to outline the look and feel of the user interface on an application.
Creating a Web Page Wireframe
A Web page wireframe allows you to focus on the flow of content on an individual Web page, as opposed to an entire site. See Figure 4-10.
Global Site Navigation
Create A Login
Site Login Banner
Ad
Search
Blog Feed Featured
content for the entire page
News User
Profile About
Us RSS
Feed
Footer
Figure 4-10: Sample Web page wireframe
Creating wireframes for your site and pages can help you think through each element to make sure you are making the proper high-level decisions. Once you have a complete overall picture of your site and each page, you can then focus on creating the code and designing the site's pages.
Case Study
Double Vision
Janice is the Web designer for a large computer-manufacturing company. She works on projects for several departments within the company.
While creating the design for a new Web microsite about the company's latest computer offering, Janice is given conflicting messages about the audience for the site. The
corporate sales department wants to appeal to corporate users, and the educational sales department wants to appeal to schools, teachers and students.
The audience that Janice's site targets will determine the page's look and feel, as well as the tone and style of the text, the photos used for demonstration, the graphics used in the design, and much more.
* * * Consider this scenario and answer the following questions.
• How would a Web site vision statement help Janice in this situation?
• How would Janice's Web site strategies and tactics differ for the two different audiences described in this scenario? How might they be the same?
• How can Janice use a knowledge of her site's audience to develop an appropriate metaphor for this Web site? What metaphors might she use to appeal to these audiences? Should they be different?
• Janice is mindmapping this Web site. Would the intended target audience for her site affect the mindmapping process? How might changing the target audience change the mindmap?
Lesson Summary Application project
Developing a good Web site or a Web business requires that you start with a specific vision for the site or business. The vision can then be translated into a strategy and implemented using specific tactics.
Web site visitors can often determine the vision of the site's creators by examining the site's tactics. Visit several Web sites, and try to guess the vision that the Web site owners intended for the site or business. If the site posts its vision or mission statement, find the statement after you try guessing the vision, and compare your ideas to those described on the site.
Skills review
In this lesson, you learned about the Web development process and the steps for forming a Web site's concept. To form the concept, you focused on creating a vision for your Web- based business, and strategies and tactics to fulfill your vision. You also learned about the role that a metaphor can play in the look, feel and overall understanding of a site.
Finally, you learned how the mindmapping process can help you design a site structure that fulfills the site's goals.
Now that you have completed this lesson, you should be able to:
1.1.4: Determine the audience for the site.
1.1.5: Develop a Web site vision statement.
1.1.6: Develop a site strategy and identify strategy implementation tactics.
1.1.7: Use the mindmapping process to structure a Web site.
1.1.8: Set design goals appropriate for the business/organization represented by the site and the site's intended audience.
1.1.9: Create a site metaphor.
1.1.10: Develop site design and architecture specifications.
1.1.16: Use flowcharts and Web wireframes to determine page layout.
1.2.8: Create Web page and site templates that fulfill design specifications.
1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers.
Lesson 4 Review
1. What is the bottom-up approach in Web design?
2. What is a tactic?
3. What is the basic business premise followed by successful online businesses?
4. Name at least one tactic you could use to implement a Web strategy in which your goal is to create a mailing list of customers.
5. Briefly describe an example of an effective metaphor you could use when designing a Web site for a travel company, a zoo, or a candy seller (or some other business of your choice).
