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.
4-2 Web Design Specialist

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?

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 Lesson 4: Web Site Development Process 4-3

Bottom-Up Approach to Web Development

OBJECTIVE As you saw in the previous lesson, it is important for Web designers to learn the
1.1.4: Determining
customer's needs and the site's audience before forming ideas about the design and
site audience
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.
NOTE:
You should consider It is tempting to approach the design process from the top down: Define and design the
the goal of look and feel of the site, then conform user interaction to that particular design. However,
establishing desired the scenario-development process is centered on identifying desired system behaviors in
user behaviors:
What do you want response to user behaviors. Thus, the Web site design process is reversed. The look, feel
users to do at your and functionality of a Web site emerge as the various user scenarios are developed from
Web site?
the user's point of view — a bottom-up approach.

Understanding the Business Process

OBJECTIVE The role of the Web designer is becoming more complex. In the past, Web designers could
1.1.8: Design goals
for customer and
suffice with the skills to create a Web presence for the customer organization. Today,
audience 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.

NOTE: The concepts for these successful electronic businesses are varied. Generally, they can be
Again, keep in mind
placed into two categories: sites that deliver products intrinsically dependent on the
that the Web
designer's job does Internet (such as interactive games or tools for searching the Internet), and sites that
not necessarily end deliver existing products and services to a global market via the Internet. What the
when the
completed site is known successful Web sites have in common is that they focused on the goal of fulfilling
posted to the Web. 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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 4-4 Web Design Specialist

The Amazon.com success story still provides a strong and useful example for
electronic business models.

Defining a Web Site Vision

OBJECTIVE As mentioned in the previous lesson, defining a Web site vision statement is a key activity
1.1.5: Web site vision
that takes place during the conceptualization phase of a Web development project. The
statement
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
NOTE: Amazon.com:
A vision statement
provides a solid goal
toward which to We will become the world's pre-eminent Internet book retailer, selling
work. Vision $1 million in books per day by the end of next year.
statements are just
as useful for small Inherent in this statement is a value ("pre-eminent Internet book retailer") and a
sites as they are for
large e-commerce measurable goal ("$1 million per day by the end of next year").
businesses because
they help all Many companies post some version of their vision statements (also often called mission
developers focus on
achieving goals of statements) on their Web sites. These statements may include other details to appeal to
any size. 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.

NOTE:
Vision statements
are as useful for
personal goals as Lab 4-1: Creating a vision statement for a Web site
they are for business
goals. Have you
ever written your
personal goals in this
In this lab, you will create a vision statement for your Web site. Write your answers in the
type of format? Was spaces provided.
it helpful? You can
try applying vision 1. What are some values that can be stated for your Web-based business?
statements to
personal goals in
Activity 4-1:
Creating a vision
statement for a 2. What are some measurable goals that can be stated for your Web-based business?
personal goal.

3. Combine these values and goals, and write a concise vision statement.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 Lesson 4: Web Site Development Process 4-5

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.

OBJECTIVE
1.1.6: Site strategy
Defining the Web site strategy
and tactics 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
NOTE: business — is to attract and keep customers. To accomplish this goal, you can use the
The vision statement unique features of the Internet to your advantage.
gives focus to all the
efforts that follow it
because all efforts
As stated earlier in this course, the Internet can address individual needs. It is more
(strategy) need to similar to the local grocery store than to the media of television or publishing. You enter a
support the vision. grocery store when you please. Inside, you decide whether to just browse or to buy, and
This focus can help
streamline all tasks you choose how you move around the store.
that follow.
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
NOTE:
implementing a Web strategy make the task complex.
You can analyze a
competitor's
strategy for Defining the Web site tactics
attracting and
retaining customers, A tactic is a method used to implement your strategy. For example, if you want to gather
and tactics for personal information from your users, you need a tactic. A widely used tactic is to offer
supporting site
something in exchange for that information. A business might offer a screen saver,
strategy in Optional
Lab 4-1: Analyzing software, discounts or a free product in return for the requested information.
the competition's
strategy and tactics. 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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 4-6 Web Design Specialist

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

OBJECTIVE After you have determined the audience for the site, and you have created a strategy for
1.1.10: Site design
your Web business and tactics to achieve that strategy, it is time to create specifications.
and architecture
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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

Lesson 4: Web Site Development Process 4-7

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?

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

4-8 Web Design Specialist

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?

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 Lesson 4: Web Site Development Process 4-9

Site design templates

OBJECTIVE You will implement the design specifications that you create for your site during the
1.2.8: Web page
design phase of the Web project. Generally, this phase begins with the designer creating a
and site templates
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

OBJECTIVE When you are designing the layout of your site, it is important to consider the growing
1.2.9: Designing for
number of people who surf the Web on mobile devices, also known as PDAs (personal
PDA-based vs.
traditional browsers 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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 4-10 Web Design Specialist

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.

OBJECTIVE
The Metaphor
1.1.9: Site 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.

NOTE: • Consider whether a metaphor is needed to express the desired idea.

Can you think of
any sites you have • Select a metaphor that is familiar to the chosen audience.
visited that
effectively used • Use the familiar to explain the unfamiliar.
metaphor in the
design? Can you
• Keep metaphors light and effective.
think of any
metaphors you
have not seen used
• Be sure that the comparison shares characteristics with your theme.
that might be
effective on the • Use the metaphor consistently in the design.
Web?
• 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
NOTE:
If time permits, visit One design metaphor that has become very widespread in Web design is the tabbed folder
these sites and metaphor. Resembling a stack of tabbed folders in which a tab can be clicked to "open"
compare the
each folder, the tabbed folder format has long been a standard in software design — most
current sites to the
screenshots shown notably in the design of software preferences dialog boxes. Tabs are used for navigation
here. Which version on many of the biggest sites, including Amazon.com, Expedia and PayPal.
of each site do you
like better? Do you
think these sites use Study the following screenshots of sites using example metaphors and see whether you
metaphor can identify with them. Note that many of the screenshots show older versions of these
effectively?
sites. Today, ease of use and functionality have taken on primary importance in Web

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

Lesson 4: Web Site Development Process 4-11

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

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

4-12 Web Design Specialist

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

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

Lesson 4: Web Site Development Process 4-13

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

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

4-14 Web Design Specialist

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

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 Lesson 4: Web Site Development Process 4-15

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

OBJECTIVE Mindmapping is a process that allows you to structure ideas on paper in the order your
1.1.7: Mindmapping
brain follows, rather than the linear process normally used when documenting ideas.
site structure

Imagine creating an entire Web site or report page-by-page, and writing down all your
NOTE: ideas. If you were to write these thoughts on a piece of paper, describing each page and
Have you ever its content, you would have a list. This list might be incomplete, however, because forcing
heard of or used the
mindmapping
the linear process stifles your thinking and limits your ideas. In the end, could you
process before? correlate all these thoughts easily, and would they flow together?
What type of
project did you use Now consider mindmapping. Instead of beginning in the upper-left corner of the paper
it in?
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.

NOTE: Some techniques for mindmapping include using a large chalkboard or whiteboard. You
Compare
mindmapping to a
can also use different colors to designate specific categories or items, or use thick
brainstorming markers and thin markers — whatever you can find to help stimulate the process.
session. Have you
ever used the
Remember that mindmapping is a very different paradigm for transferring your ideas to
mindmapping
technique during a paper, and you might be unaccustomed to it. However, in a short time, mindmapping will
group brainstorming feel as natural as reading or writing.
session? Do you
think it could be
useful in this setting? 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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

4-16 Web Design Specialist

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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 Lesson 4: Web Site Development Process 4-17

Lab 4-4: Mindmapping a Web site

NOTE:
You can use this lab In this lab, use the space provided to mindmap the Web site you described in this
to begin planning lesson's previous labs. Use additional sheets of paper if you need more space.
your own Web sites
or for simple
practice in
mindmapping.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

 4-18 Web Design Specialist

Creating a Web Site Wireframe

OBJECTIVE A Web site wireframe is a sketch of the skeletal view of a site's architecture. Creating a
1.1.16: Flowcharts
wireframe is the next step you would usually take after creating a mindmap. Whereas a
and Web
wireframes 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.

Newsfeed Landing Page Blog feed

About us News Search User profile

Product Product Product Product Product Product

Database

User info Backup

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:

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

Lesson 4: Web Site Development Process 4-19

• 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.

Banner Site
Ad
Global Site Navigation Login

Create
A
Login
Featured
content
for the Blog
entire page Feed
Search

User
About News RSS
Profile
Us 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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

4-20 Web Design Specialist

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?

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

Lesson 4: Web Site Development Process 4-21

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.

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

4-22 Web Design Specialist

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).

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1