CIW – User Interface Designer

What Is User Interface Design?

Welcome to user interface design! May you enjoy this 9-lesson journey, learn a
great deal along the way and be able to use this knowledge to advance your
career.

Let us begin by defining some essential terms.

What is a user interface?

At its broadest, a user interface is that which enables a human to interact with a
machine. In this sense, a steering wheel is a user interface, because it enables a
human to steer a car. The human acts by turning the wheel and the car responds
by moving in that direction.

Just like a steering wheel is the user interface for a car, in computing, a user
interface — or UI — is the set of hardware and software controls that enables a
user to interact with a computer device. The user taps a button on a touchscreen,
and the tablet sends a document to the printer.

What is design?
"To create, fashion, execute, or construct according to plan." — Merriam Webster

Putting these two definitions together, user interface design is:

The planning and creation of a set of controls that enables a user to interact with
a computer device.

These devices include desktop computers, laptops, tablets, smart phones,

wearables like smart watches and wristbands, home appliances, car dashboards,
and so on.

What is the goal of user interface design?

To make the interaction between human user and computer device simple,
efficient, effective and enjoyable.

The world of computing is increasingly focused on satisfying the user. In the

early days of computing, humans had to learn how to speak the computer's
language. Now, computer programs need to learn how to speak our human

1
 CIW – User Interface Designer

language. Making computer devices that are optimized for human usage is
called user-centered design. UI designers need to be steeped in this practice.

Why bother to learn the essentials of UI design?

It is an exciting and lucrative career! To get your foot in the door, you need to
master the basics. Having a solid, intuitive feel for UI design is a good thing, but,
if you intend to make a career of it, you need to know the trends, understand the
principles and best practices and speak the UI designer's language.

In our heavily digitized world, we spend a lot of time interacting with computer
devices. So much so, that this interaction has become a big part of our day-to-
day experience of life. As a UI designer, you have the opportunity to improve the
quality and enjoyment of this interaction for your fellow human beings. This is no
small achievement!

In this course, you will focus on one particular type of UI design: the design of
user interfaces for Web pages. You will also learn some of the theory and
practice of designing UIs for mobile applications (smart phones and tablets).

Evolution of Web User Interfaces

OBJECTIVE1.1: Web user interface evolution

Instructor Note: The main goals of this lesson are to introduce students to the
practice of designing web sites (UI evolution, trends, design principles), and to
introduce them to the process (design team, project management, portfolio
creation).
Development of what would eventually become the Internet began in the 1960s
with MIT professor J.C.R. Licklider whose research into a "Galactic Network"
would foster social interaction among users. In the early 1960s, collaboration
between UCLA and a few other universities fostered the creation of ARPAnet, the
Advanced Research Project Agency (ARPA) network. ARPAnet, in turn, fostered
the creation of the Internet, which was born officially in 1982 with the
standardization of the Transmission Control Protocol/Internet Protocol (TCP/IP),
a suite of protocols for sending and receiving messages over the Internet.

2
 CIW – User Interface Designer

In 1989, Tim Berners-Lee, a British computer scientist and employee of the

European Organization for Nuclear Research (CERN, http://home.cern/about),
wrote a proposal for a more effective communication system for CERN. He soon
realized his concept could be implemented globally. In 1990, Berners-Lee and
Belgian computer scientist Robert Cailliau proposed the use of hypertext "to link
and access information of various kinds as a Web of nodes in which the user can
browse at will."

Thus was born the World Wide Web: a system of interlinked hypertext documents
that reside on the Internet and can be accessed via Web browsers.

Tech Note
Do not confuse the terms Internet and World Wide Web. The Internet is a massive network
of networks that connects millions of computers across the globe. The World Wide Web is a
vast library of hypertext documents (Web pages) that are stored on the Internet and viewed
in Web browsers.

User interaction with these early documents was limited to reading, scrolling and
linking to other pages.

Introduction to User Interface Design

Video transcript
Download

The first Web site

In August 1991, Tim Berners-Lee published the first site for the World Wide Web.
Figure 1-1 shows what it looked like.

3
 CIW – User Interface Designer

Figure 1-1: The first Web site, published in 1991 by Tim Berners-Lee, as discussed
in Scarsonmsm (2013)

As you can see, the first Web page is very simple: one column, text-only, one font
face with two sizes/weights (heading and body), blue-underlined inline hyperlinks
and a few indented paragraphs.

As a user interface, this design enabled the user to interact with the page content
through the browser by scrolling and clicking links.
Early HTML elements

The earliest versions of Hypertext Markup Language (HTML) supported only a

few basic Web site elements: headings (<h1>, <h2>, etc.), paragraphs (<p>) and
links (<a>). The pages it created were all quite similar to Berners-Lee's first Web
4
 CIW – User Interface Designer

site: single-column, text-only, standard fonts, underlined links. Subsequent HTML

versions also supported images (<img>), enabling designers to make Web pages
with more visual information and interest.
Table-based layouts

The HTML <table> element was created to display tabular, spreadsheet-like data.
Designers quickly realized, however, they could use tables to lay out their page
content by treating table cells as rectangular containers to place text and
images. Suddenly, Web site layouts increased dramatically in power and
flexibility. Multi-column pages became more and more common, such as the very
early New York Times home page shown in Figure 1-2.

5
 CIW – User Interface Designer

Figure 1-2: New York Times home page from 1996, its first year on the Web

Tech Note
Necessity often drives invention. Using tables for layout made sense in the early days of the
Web. Now designers rarely use tables for page layout; instead they use Cascading Style
Sheets (CSS) to format pages and entire sites.

6
 CIW – User Interface Designer

Within a few years, tables became overused and extremely complicated, with
dozens or even hundreds of cells: boxes within boxes within boxes, like an
endless set of nested Russian dolls. The HTML table code became very difficult
to manage, and worse, presentation (form) began to override structure
(function).

Tech Note
One of the hallmarks of good Web development is keeping a page's presentation
(appearance) separate from its structure (the hierarchical organization of its content). CSS
is the proper technology to use for presentation, whereas HTML is for structure. You will
learn more about CSS later in the course.

Despite this form-versus-function problem, HTML tables transitioned Web

designers into thinking in terms of more complex, fluid layouts, as discussed by
Chapman (2009) and illustrated in sites such as the AltaVista page from the early
2000s shown in Figure 1-3.

7
 CIW – User Interface Designer

Figure 1-3: Early AltaVista home page that used HTML tables for complex layout
Flash

Instructor Note: Students would enjoy seeing some examples of Flash and
DHTML in action.
Early Web sites were sorely limited in design options. Although tables enabled
designers to create sophisticated layouts, they also resulted in bulky,
complicated, hard-to-modify HTML code.

Then something happened that changed Web design dramatically: Macromedia,

Inc. introduced Flash technology.

Flash was first released in 1996 as a drawing and animation application. It began

8
 CIW – User Interface Designer

with a modest set of tools for producing simple animated Web site graphics, and
evolved quickly into a robust platform for developing entire Flash-driven sites.

The beauty of Flash was that it enabled designers to overcome some of the most
severe limitations of HTML. For the first time in Web design history, it was
possible to create sophisticated sites with interactive animations — and to do it
properly, without having to resort to "kludgey" table code.

Tech Note
"Kludgey" or "kludge" is a slang term commonly used among Web designers and developers
to describe an awkward, inelegant or clumsy workaround.

Gabocorp (1997) was one of the first Web sites to use Flash. On its 1997 home
page, simple animated shapes resolved into spherical buttons. You can see an
archived version of Gabo's Flash-driven UI in action
at https://www.youtube.com/watch?v=9Y-ESJS911c.

9
 CIW – User Interface Designer

Figure 1-4: An early Flash animated Web site from Gabocorp.com

Flash had a profound effect on Web design. The animation and functionality it
added to Web UIs made for a dramatically richer, more interactive and more
entertaining user experience. There were also a couple of downsides, however:

 Because browsers required a plug-in to run Flash, designers had to

consider whether their site visitors were likely to have already installed this
plug-in, or be willing to download and install it on the spot to view the page.
Without an up-to-date Flash plug-in on their browser, visitors might only
see part of the site, or access only part of the UI functionality.
 Many designers fell in love with the multimedia splendor Flash could
deliver and created gorgeous introductory Flash animations and navigation
systems for their sites. At first this impressed users. It was like being at
the movies! Soon, however, most grew tired waiting for Flash-heavy pages

10
 CIW – User Interface Designer

to load and trying to figure out how to use the often complex and
unconventional navigational controls Flash sites offered.
 Flash is a closed system, controlled by one company (now Adobe), versus
standard Web languages, which are open-source technologies. Project
development was hampered by slow responses to improving the software.
 Over the years Flash amassed a weak security history, as well as a
proclivity for crashing Macs, which resulted in Apple's discontinued
support of Flash on Apple products in 2010.
Dynamic HTML (DHTML)

Around the same time that Flash was emerging, Web designers were beginning
to use Dynamic HTML (DHTML) as well. DHTML is an umbrella term for a set of
technologies used to create interactive Web sites, typically HTML, JavaScript and
CSS.

The rising popularity of Flash and DHTML (late 1990s/early 2000s) introduced
the notion of interactive Web pages, which enabled users not only to read static
content, but also to interact with content dynamically. Figure 1-5 shows an
example of an early DHTML Web site, the NickJr.com Radio home page, which
spoke aloud to children in response to mouse clicks and invited them to play
games.

Instructor Note: The NickJr.com Radio Web page has since been taken down and
is shown here only as an example.

11
 CIW – User Interface Designer

Figure 1-5: Early DHTML-driven page from nickjr.com

Although Flash has since declined in popularity, DHTML continues to flourish

because the technologies on which it is based are standard open-source
technologies that do not require any special software or plug-ins to develop or
use.

HTML5
HTML5 (the current version of HTML) is the most powerful and sophisticated
HTML version ever. In fact, HTML5 was partially responsible for the decline of
Flash. Most everything that Flash can do, DHTML using HTML5, CSS and
JavaScript can do equally well or better, without the need for users to have any
external browser plug-ins.

Tech Note
Apple's declaration that its products would no longer provide support for Flash files was a
big blow to industry usage. The moral of this tale: Make sure to maintain positive
relationships with industry leaders who have the power to impact your company!

12
 CIW – User Interface Designer

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) technology specifies the presentation, or
appearance, of HTML documents (Web pages). CSS is very flexible and powerful,
enabling designers to lay out and format a single page or an entire site. The
current standard is CSS version 3 (CSS3).

JavaScript
JavaScript is a scripting (programming) language that enables users to interact
with Web page objects, such as text, images, menus, forms, slideshows,
calendars and so forth. The JavaScript language has grown from a modest tool
for creating simple single-task scripts to a full-fledged programming language for
creating sophisticated Web applications. The latest version of JavaScript
(February 2016) is 1.8.5.

Instructor Note: You can display this page for the class by accessing www.ag-
event.com on a smartboard with your browser. Point out that the page takes a
little time to load.
Figure 1-6 shows an example of a Web page (http://www.ag-event.com/) that
uses a lot of DHTML. It plays background music, has an auto-running news
carousel (bottom center), and includes several animations that change when
users mouse over them (e.g., the boy fishing).

13
 CIW – User Interface Designer

Figure 1-6: AG-Event's home page currently uses DHTML heavily

In the following lab, you will explore the evolution of user interface design by
viewing a variety of older sites. Suppose you were recently hired by a company to
design the user interface for a new customer service site that the company plans
to launch. Your project manager says that the previous Web designer's vision
was "stuck in the past," and that the company wants a UI that looks more modern
but is still efficient and intuitive for users. She suggests you do some research
about older UI designs before offering ideas for this project so that you do not
repeat the mistakes of your predecessor.

Lab 1-1: Exploring the UI design evolution of several Web sites

14
 CIW – User Interface Designer
In this lab, you will use Internet Archive's site called the Wayback Machine to explore the UI
design evolution of several Web sites that were established in the early 1990s. Write notes
as directed by your instructor.

1. Browser: Open your browser and access the Internet Archive Wayback
Machine page at http://archive.org/web, shown in Figure 1-7.

Figure 1-7: Internet Archive Wayback Machine page

2. On the WayBack Machine home page enter www.altavista.com and click

the Browse History button. You should see a calendar page similar to the
one shown in Figure 1-8.

15
 CIW – User Interface Designer

Figure 1-8: Wayback Machine calendar page for www.altavista.com

3. Select the year 1996 by clicking on it.

4. Select the date October 22, 1996, by clicking on it, as shown in Figure 1-9.
Note that according to the calendar, this is the first saved version of the
Alta Vista site.

16
 CIW – User Interface Designer

Figure 1-9: Selecting the www.altavista.com date, October 22, 1996

5. Study this early version of the Alta Vista site. What user interface elements
do you see? (Write on a piece of paper)
6. Click your browser's Back button to return to the Wayback Machine's
calendar page. Select the year 1998, and choose the December 12 version
of the site. How had the user interface changed over those two years?
(Write on a piece of paper)
7. Return to the Wayback Machine's calendar page. Select the year 2005 and
choose a date. How had the user interface changed over seven more
years? Did the interface evolve as much as you had expected over this
amount of time? (Write on a piece of paper)
8. Return to the Wayback Machine's calendar page, and select some various
years and dates to visit. Can you find a time period of rapid evolution for
the user interface? What happened on July 8, 2013? (Write on a piece of
paper)
9. Return to the Wayback Machine home page. Enter the Web addresses
listed below to explore UI versions of other popular sites over time. Your
goal is to study how each site's design evolved over 20+ years of

17
 CIW – User Interface Designer

existence. Watch for changes in layout, formatting, typography, images

and multimedia, and widgets (e.g., icons). Can you find the evolutionary
changes that are common to all five Web sites? Write notes to record the
changes you find.

www.hotwired.com

www.mtv.com

www.nytimes.com

www.whitehouse.gov

www.yahoo.com

In this lab, you used the Wayback Machine site to explore the UI design evolution of several
sites with long histories on the Web.

Current Trends in Web Design

OBJECTIVE 1.2: User interface design trends

Keeping up with current trends in Web design is an important part of a designer's

job. Knowing where the design industry is headed can enable you to find better
and more cost-effective solutions for your customers. In turn, this can help you
keep existing customers as well as get new ones. It can also help you innovate,
which is crucial to the success of Web design companies.

Instructor Note: Consider showing students an example of each of these trends

in real-world Web sites. They are all easy to find with Google or Bing.

Tech Note
Design is always subject to the whims of trends and fashion. Innovation and originality are
appreciated, but if your designs venture too far beyond the current UI conventions and
trends, then your Web sites may suffer in terms of user popularity.

The following sections describe 10 trends in Web design.

18
 CIW – User Interface Designer

Mobile is the rule, not the exception

The long-term trend of increasing mobile device usage continues. According to

Bosomworth's (2015) article on Smart Insights.com, as of January 2015, 80
percent of all online users had smartphones and nearly 50 percent had tablets.
Less than 10 percent had wearables (smart watches, wristbands, etc.), but that
percentage is sure to rise with the advent of Apple's and Samsung's smart watch
products.

Designing for mobile Web devices is now the rule, not the exception.

It is no longer sufficient to design Web sites for desktop/laptop browsers and

then tweak them afterwards to fit on smaller mobile screens. You need to think
mobile from the beginning. To this end, many designers have adopted a mobile-
first design approach, in which they create the mobile version of a Web site first,
then modify it as necessary to fit on larger desktop screens.

For examples of mobile design, visit the Design 100's (2014) US Mobile and App
Design Awards page at http://appdesignawards.com/USAPPS14/, and click a
few of the sites in the Winners Showcase at the top of the page.
Responsive design is required

Responsive Web design seeks to provide an optimal experience for users across
a wide range of devices: desktops, laptops, tablets, smartphones, smart watches,
wristbands and so forth (see Figure 1-10 www.atcm.org/). Developers typically
accomplish this by using fluid page grids, flexible images and CSS3 media
queries.

19
 CIW – User Interface Designer

Figure 1-
10: Responsive Web design provides optimal viewing experience for multiple
devices

If designing for mobile Web devices is the rule, then responsive design is
required.

For examples of responsive design, visit the Awwwards Responsive Design Web
sites page at www.awwwards.com/websites/responsive-design/.
Less is more

Flat UI objects, simple navigation and plenty of white space are all desirable in
current user interfaces. Non-essential and overly complex design elements are
out of style. Web pages should look clear, clean and inviting.

For examples of flat UI design, browse Creative Bloq's page and review Clum's
(2014), "The beginner's guide to flat design" at www.creativebloq.com/graphic-
design/what-flat-design-3132112.
Think BIG!

20
 CIW – User Interface Designer

Large, bold images and fonts are currently in style for Web UIs.

Designing with large images is not new. The "hero image" — the most dramatic
and eye-catching image on a page — has a long and illustrious history in graphic
design. Page backgrounds — both static image and video — have also become
larger.

Large typography is eye-catching and useful for emphasizing the visual hierarchy
of a page by ensuring that visitors are drawn to the largest headings first. See
Figure 1-11 (www.eshbeata.com) for an example.

Figure 1-
11: Large, bold Web site fonts and images are trending

For examples of designing big visit Rocheleau's (2013) article on SpeckyBoy's

"Advantages of Designing Big Oversized Web Site Layouts" page
at http://speckyboy.com/2013/05/27/advantages-of-designing-big-oversized-
website-layouts/.

21
 CIW – User Interface Designer

Data visualization

The field of data visualization — depicting complex data in simple visual form —
has matured a great deal over the past decade, and data visualizations have
found their way onto the Web. This trend will continue. You will see more graphs,
charts and interactive data visualizations on Web sites in the coming years. This
trend can be a boon to Web designers, because good data visualizations can be
both beautiful and engaging for your users.

For examples of data visualizations, visit the Kantar Information is Beautiful

Awards page at www.informationisbeautifulawards.com/.
Parallax scrolling

Parallax scrolling is a computer-graphic technique in which background layers of

an image scroll slower than foreground layers, creating an illusion of 3D depth
and movement. Tasteful use of parallax scrolling can lend interest and vitality to
a page, and keep users engaged.

For examples of parallax scrolling, visit Creative Bloq's (2015), "50 great parallax
scrolling Web sites" page at www.creativebloq.com/web-design/parallax-
scrolling-1131762.
One-color dominance

As an extension of the flat UI design trend, more Web sites are using single-color
page backgrounds, fonts, buttons and other page elements. When applied
properly, this approach can add visual emphasis to Web site pages and objects,
and make them more memorable to users. One-color dominance is exemplified
most purely in Windows 8 tiles, as shown in Figure 1-12.

22
 CIW – User Interface Designer

Figure 1-
12: One-color dominance as exemplified by Windows 8 tiles

For examples of one-color dominant design, visit Line25's "30 Web Designs with
Bright Flat Color Backgrounds" page at http://line25.com/articles/30-web-
designs-with-bright-flat-color-backgrounds.
Long-scrolling pages

Traditionally, Web designers have taken great care to keep as much as possible
of a page's main content "above the fold" — that is, visible on the screen without
scrolling down. That practice has been changing, however, over the past few
years. Now it is quite common for Web pages to be longer and require users to
scroll down repeatedly to see all of the content.

This trend is due largely to the fact that scrolling by swiping is so common on the
small screens of mobile devices. Users have become accustomed to this swiping
gesture, so longer pages are more acceptable. And of course, it is rather fun: A
casual flick of the wrist, and all the images and text go streaming by.

For an example of a long-scrolling page, visit Apple's iPhone 6 page

at www.apple.com/iphone-6/.
Human look-and-feel

23
 CIW – User Interface Designer

The tendency for Web pages to look somewhat cold and clinical is slowly giving
way to Web sites with more of a human look-and-feel. Hand-drawn images and
fonts can help to humanize a page that would otherwise look mechanical or
unoriginal. Another effective human element is to "think outside the box" by
laying out pages and framing images in non-rectangular shapes.

For an example of a Web site with a strong human look-and-feel,

visit Adventure.com at http://adventure.com/.
Storytelling

People love stories. We are utterly hooked on movies, TV shows and novels. We
create personal stories all the time, often unconsciously: the stories of our
careers, relationships, struggles, accomplishments and so forth. Using this love
of stories can be an extremely powerful tool for Web designers and it is
happening more often now. Increasingly, Web sites present more than just
content — they weave a storyline around the content to make it more engaging to
users.

In the following lab, you will find Web sites that demonstrate current trends in
Web UI design. Suppose that the project manager for your UI job asks you about
current trends in user interface design. You begin to list trends such as
responsive design and parallax scrolling, but the project manager looks
confused. You can find examples on the Web to show your project manager,
making it easier to explain the trends and easier for him to understand your
design ideas.

Lab 1-2: Demonstrating current Web UI trends

In this lab, you will find Web sites that demonstrate the current user interface trends
discussed in this section.

Instructor Note: Answers will vary.

1. Browser: Use the search engine of your choice to find a Web site that
demonstrates the UI design trend of responsive design. In a piece of paper,

24
 CIW – User Interface Designer

write the site's name and URL, and describe briefly how it demonstrates
responsive design. (Write on a piece of paper)
2. Mobile is everywhere: View two or more sites that offer a regular version
and a mobile version of their site. Major news Web sites provide excellent
examples. You can take this one step further by downloading their mobile
app (if available) to compare all three versions. Identify which sites you
chose, their URLs, and briefly describe the similarities and differences
between the different versions. (Write on a piece of paper)
3. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of "less is more." Specify the site's name and URL, and
describe briefly how it demonstrates this trend in a piece of paper. (Write
on a piece of paper)
4. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of "think BIG." Specify the site's name, URL, and how it
demonstrates this trend. (Write on a piece of paper)
5. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of data visualization. Specify the site's name, URL, and
how it demonstrates this trend. (Write on a piece of paper)
6. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of parallax scrolling. Specify the site's name, URL, and
how it demonstrates this trend. (Write on a piece of paper)
7. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of one-color dominance. Specify the site's name, URL,
and how it demonstrates this trend. (Write on a piece of paper)
8. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of long-scrolling pages. Specify the site's name, URL,
and how it demonstrates this trend. (Write on a piece of paper)
9. Browser: Use a search engine to find at least one site that demonstrates
the UI design trend of human look-and-feel. Specify the site's name, URL,
and how it demonstrates this trend. (Write on a piece of paper)
10. Browser: Use a search engine to find at least one site that
demonstrates the UI design trend of storytelling. Specify the site's name,
URL, and how it demonstrates this trend. (Write on a piece of paper)
In this lab, you explored Web sites that exemplify current Web UI trends.

25
 CIW – User Interface Designer

Exercise 1-1: Components of Interface Design

Web Design Team Roles and Responsibilities

OBJECTIVE 1.3: Web design teams and tasks

Instructor Note: Emphasize that working in the Web design business means
working in teams. To drive this point home, consider including some group
activities in your classes.
Web design is a team project. The scope and budget of the project determine the
makeup of the team. Building a modest Web site might call for three to five team
members; building a more complex site might call for a dozen or more. No
matter how big or small the project, the same set of core roles must be
represented in every Web design team:

 Project manager

26
 CIW – User Interface Designer

 Strategist
 Content specialist
 Usability expert
 Designer
 Developer
 Marketer
The following sections discuss each of these roles.
Project Manager

Think of the project manager as the team leader. He or she is responsible for:

 Setting realistic expectations and deadlines.

 Facilitating communication among team members.
 Resolving disputes and maintaining morale.
 Solving problems.
 Ensuring that the work and budget stay on track.
Project management is a tough, high-stress job — and a crucial one. Without a
good project manager, the project is likely to fail.
Strategist

The team strategist is responsible for formulating the Web site development
strategy. His or her tasks include:

 Drafting a mission statement for the Web site.

 Researching the needs and expectations of intended site users.
 Setting short-term and long-term project goals.
In smaller projects, the project manager often doubles as strategist.

27
 CIW – User Interface Designer

Content Specialist

Although content is the most important part of a Web site, it does not always get
the attention it deserves. Content production often gets assigned to non-
professionals, under the assumption that anyone with an interest in words can
write good Web copy. This results in mediocre content at best and embarrassing
amateurism at worst.

Any good Web design team will include a content specialist whose
responsibilities for site content include:

 Research.
 Analysis.
 Organization.
 Writing and editing.
 Choosing the most appropriate text, images and multimedia to achieve the
site's goals.
Usability Expert

In this golden age of user-centered design, it is crucial for a Web site to provide
its visitors with satisfying experiences. In a design team, the usability expert is
responsible for making this happen. His or her responsibilities include:

 Testing the Web site throughout the development process with intended
users.
 Evaluating the site's usability against other, similar sites.
 Ensuring that the site is culturally appropriate and accessible to those with
special needs.
Designer

28
 CIW – User Interface Designer

Web designers and developers are like the two hemispheres of a single Web site-
creation brain. The designer is the right hemisphere: creative, imaginative and
intuitive. The developer is the left hemisphere: logical, linear and analytical.

Just as with brain hemispheres, some overlap exists between design and
development. Designers should be comfortable with programming concepts and
practice, and developers should have a keen eye for page design.

The designer is responsible for the appearance of the Web site: page layout,
color scheme, typography, images, etc. His or her responsibilities include:

 Creating UI sketches (often hand-drawn).

 Converting these sketches to wireframes (simple blueprint-like line
drawings).
 Elaborating the wireframes into page mockups (graphics that are like
screenshots of actual Web pages).
 Creating the site's graphic images, which can be extremely time-
consuming.
Developer

Once the strategy, content, usability and design are all in place, someone has to
actually write the code for the Web site. That person is the developer, whose
responsibilities include:

 Programming the front-end UI (using client-side code such as HTML, CSS,

JavaScript, etc.).
 Programming the back-end application (using server-side code such as
PHP, MySQL, etc.).
 Testing, revising and re-testing multiple times, using multiple browsers,
including mobile devices until everything on the site looks and behaves
exactly as the project design dictates.

29
 CIW – User Interface Designer

Marketer

Your team may create a brilliant Web site. But without establishing a solid
presence in the online world, the Web site project is ultimately doomed to failure.
Establishing this presence is the marketer's job.

The marketer's goals are to:

 Locate potential customers.

 Reach out to them.
 Bring them to the site.
 Convert them into leads and sales.
He or she does this by strategically communicating through:

 Blogging.
 Sending out group mailings.
 Creating special offers.
 Posting to social networking sites like Facebook, Twitter, YouTube, etc.
To do this effectively, the marketer must be able to create site-specific content,
understand the latest Internet trends, and — above all — grab the interest of users
in the intended audience.

30
 CIW – User Interface Designer

Exercise 1-2: User Interface Design Job Roles

Web Design Project Management

OBJECTIVE 1.4: Web design project management

An orchestra without a conductor would eventually succumb to disorder and

slide into musical chaos. Likewise, a project team without a manager would
eventually lose its focus and fall apart. This is especially true for a large project
team. But even small, intimate teams often rely heavily on the leadership of their
project manager.

A project manager needs to understand the project as a whole: the grand plan,
goals, budget, deliverables, design, development — the entire process that leads
from the initial idea to the final delivery. And s/he needs to make it all happen, as

31
 CIW – User Interface Designer

smoothly as possible.

The mantra of a project manager is: "On time and on budget."

The project manager's main tasks are to:

 Understand the "big picture" of the project.

 Coordinate activities and tasks.
 Keep tasks aimed at the goal.
 Keep project components on schedule and within budget guidelines.
 Maintain project documentation.
 Facilitate communication among all project team members.
In larger projects, the project manager is rarely part of the hands-on production
team, but in smaller projects, s/he might double as designer or developer.

Tech Note
A great project manager has a clear and accurate overview of the whole project, from its
inception to its completion. She knows (or learns) enough about each team member's job to
be able to speak with them as a peer. She keeps things flowing smoothly and maintains
scrupulous up-to-date documentation, and she has the necessary interpersonal skills to
communicate effectively and inspire respect from the members of her team.

The project manager ensures that each step of the project is executed to
satisfaction so the project can progress smoothly. Every project includes some
basic phases that take it from beginning to end.
Project phases

Different Web design teams use different models to capture their process for
executing a project. Most models share these essential phases (in chronological
order):

32
 CIW – User Interface Designer

 Information gathering — Before you can begin a project, you need answers
to some basic questions. What does the customer want/need? What do
the intended site users want/need? Who are the main competitors? What
can your Web site offer that theirs do not?

Tech Note

Do not confuse wanting and needing. Sometimes customers actually need what they
want. Other times, they want something they have heard about but do not actually
need. Part of the art of good Web design is discovering what your customers
actually need to be satisfied. That is the job that must be accomplished in the
information-gathering phase.

 Planning — Several components of the project must be determined before

the work can begin, including the site map, navigation system, Web
technologies, work schedule and so forth.
 Design — This phase determines the look and feel of the site, including
color scheme, typography, layout, UI sketches and wireframes, mockups,
and graphics creation.
 Development — This phase entails building the site from a technological
standpoint, including front-end and back-end coding (HTML, CSS,
JavaScript, PHP, MySQL, etc.) and content entry (words, images, videos
and other multimedia).
 Testing — Sites should always be tested thoroughly to ensure that they will
function as expected under as many variable conditions as possible.
Consider the iterative TAR process: test, assess, redesign - test, assess,
redesign, etc.
 Delivery and maintenance — Along with delivering a finished site, you must
provide additional support components and services, including customer
support, site backups, adding/changing content, installing updated widgets
and plug-ins, fixing broken links, and so forth.

33
 CIW – User Interface Designer

Knowledge Check

Project documentation

Instructor Note: Explain to students that although documentation may not seem
as appealing as hands-on design and development, it is a crucial part of the
process and should not be underestimated.
As with project phases, project documentation differs somewhat from team to
team. The following documents are common to most Web design projects:

 Budget and billing spreadsheets — The details involving money will dictate
a project's scope, so it is essential for them to be organized and
documented.
 Work schedules — These include deliverables and deadlines for all tasks
and team members.
 Meeting notes — These documents keep everyone informed of the same
details and working together.
 Design document — This compendium of all the design-centered
documentation generally includes goal statements, competitor analyses,
customer interviews, functional specs, sketches, wireframes, mockups and
so forth.
 Web site style guide — A collection of the stylistic conventions for a Web
site, including page layouts, color schemes, typography, graphics, tone,
content, page widgets and so forth (see Figure 1-15). A style guide
promotes consistency in content and formatting. It is crucial for a large
site that is expected to exist for a number of years and continue to be
developed, perhaps by new design team members.

34
 CIW – User Interface Designer

Figure 1-15: A page from Streamline's Web site style guide

Collaborative Web Design

OBJECTIVE 1.5: Web project collaboration

Working collaboratively is required for Web projects. It is very rare to find a single
person who has the skills and experience to do professional-grade work in
disciplines as diverse as strategy, budgeting, design, development, graphics
production and so forth.

Depending on project scope, collaboration may be needed even within one

component of a team. For example, a large Web site might require three
designers, five developers and two marketers. A massive Web site might require
a team of 20 designers and developers.

35
 CIW – User Interface Designer

So if you want to work in Web development, then you must be prepared to work
with others, and you should welcome that opportunity — at times it may be
exasperating, but usually you will benefit and learn much from working with
various people who have diverse skill sets and personalities.

Consider three of the main benefits of collaborative Web design.

Two (or more) heads are better than one

Each collaborator brings a unique set of skills to the team. This creates a
synergistic situation in which different modes of thinking and working can arise.
Combining two personal design visions can inspire a third (fourth, fifth, etc.)
vision that shares parts of the original two, but includes something new and
innovative.

For example, in a group of three developers, one might be an expert in CSS, one
in HTML and one in JavaScript. Put them together and you have a collective
expert in all three languages. Synergy comes when various fields of expertise
interact. The group mind of three might discover that using JavaScript together
with CSS in a certain specific way could simplify the development process and
speed up the page loading.

Faster production

Like most development projects, Web projects are ruled by time, and time is
money. If your team takes longer to complete something, then your organization
brings it to the market later, and your customers will have time to be tempted to
hire another, quicker vendor.

Consider that two people will probably not get the job done twice as fast as one
person (one-and-a-half times as fast is closer to reality). They will, however,
definitely get it done faster than just one person. So, when it comes to meeting
your team's deadlines, the more (workers), the better.

Employee satisfaction

Humans are social animals. Most of us seek groups of like-minded people to

share with and learn from throughout our daily lives. Our work lives are no

36
 CIW – User Interface Designer

different. Participating in a cohesive team, surrounded by intelligent and skilled

people who genuinely care for each other, is good for us. People in a good,
positive work environment are more likely to invest time and energy into the team
and remain loyal to the company.

Creating a Web Design Portfolio

OBJECTIVE 1.6: Web design portfolios

A personal portfolio is a demonstration of a person's skills, talents and work. A

painter needs a physical portfolio: a big case he lugs around from gallery to
gallery. A Web designer needs an online portfolio: a Web site published to the
Internet waiting for interested parties to visit.

Several situations call for the creation of a personal Web project portfolio:

 A student wants to establish a reputation in her chosen field.

 A freelancer wants customers to see his work and contact him.
 A full-time employee of a company wants to keep her résumé up to date.

Instructor Note: If there is any practical advice that students should glean
from this lesson, it is this: In most cases, your personal portfolio is the
single most important determinant of whether or not a potential customer
hires you.
The most compelling reason is your personal portfolio is the single most
important determinant of whether or not a potential customer hires you.

Benefits of creating a personal portfolio

Here are some key benefits of creating a personal portfolio to showcase your
work on Web and user interface projects.

37
 CIW – User Interface Designer

 It introduces you to the world — Your portfolio shows the world who you
are. Part of this "you" is your work. Another part is your personality, and for
some customers this is just as important as your work. The right
personality can greatly enhance workflow; the wrong one can bring it to a
standstill.
 It promotes your brand — You need to think of yourself as a brand. No one
is going to find out about your brand unless you get it out onto the Web.
This means building a professional portfolio and making it available to the
Web design world.
 It showcases your skills and work — You are not going to get hired for any
job unless your skills and projects are known to potential customers. It is a
simple fact: Employers look for people with certain skills, and they can only
know about your specific skills if they can view them in a portfolio.
 It reveals your potential — To a savvy employer, your portfolio reveals not
only what you are capable of right now, but what you are likely to be
capable of in the future.
 It appeals to visual learners — According to the Visual Teach Alliance,
approximately 65 percent of people are visual learners. Because your
portfolio will be packed with so much visual information, it will cater to a
large percentage of potential customers.
 It inspires trust — It is one thing to tell someone what a great designer you
are, what great work you have done and how many prestigious customers
you have had. It is an entirely different thing to provide evidence of these
accomplishments. If you want to inspire trust in potential employers — the
kind of trust that might convince them to take a chance hiring you instead
of someone else they already know — then you need to provide them with
evidence of your abilities.

Portfolio creation tips

Following are 10 tips for creating a good personal portfolio.

38
 CIW – User Interface Designer

1. Make it your top priority — If you are serious about entering the Web design
world, then you need to be equally serious about creating a personal
portfolio. A portfolio is more than a calling card; it is proof of your
competence. Without it, most Web design companies will not even
consider hiring you. Not just any portfolio will do. You need one that is fully
professional, down to the last detail.
2. Be patient — Portfolios can take a long time to build, particularly if you are
new to Web design. Putting one together too quickly can do more harm
than good. If you are starting from scratch, expect to get your first portfolio
draft together in one to three months, and your final version in one to two
years.

Tech Note

Considering that it is going to take some time to assemble your personal portfolio,
why not start working on it now? Scour the Web for inspirational portfolio examples,
decide where you are headed, draft a plan, and start creating/collecting work to
showcase. Carpe diem!

3. Go for substance, not pizzazz — Remember a while back when elaborate,

ornamental Flash-driven Web sites were so popular? That lasted for only a
little while, until users got over the novelty, and yearned for the clarity and
simplicity of a solid functional site. The same is true for portfolios. People
who look at your portfolio want to see your best professional work
presented, with no unnecessary frills.
4. Make sure it looks great — As mentioned, 65 percent of people are visual
learners. Given that the field of Web design is a visual discipline, the vast
majority of your potential customers are likely to care a great deal about
how your portfolio looks. This applies not only to the examples of your
work, but to the portfolio itself: layout, colors, typography, spacing and so
forth. Treat your portfolio — the entire thing — as a work of art, and strive to
create a masterpiece.

39
 CIW – User Interface Designer

Instructor Note: Creative types are often self-deprecating. Make it

completely clear to students that without the ability to effectively self-
promote, they stand much less of a chance of succeeding in Web design.

5. Establish the brand of YOU — Infuse your portfolio with strong branding
elements: a compelling logo, tagline, color scheme, typography, etc. If you
have trouble promoting yourself, if you are shy about discussing your
strengths, then you will need to get over it. Separate your business self
from your private self. Your survival as a Web designer depends on your
ability to self-promote.
6. Include a bio — Make sure to include your biography in the portfolio. Its
presence will help establish your brand and give potential customers a
sense of who you are. However, choose the personal information that you
share carefully. Do not dwell on trivial or private matters. Stay positive and
upbeat. Be modest; you do not want to seem vain or arrogant, even when
citing your accomplishments.
7. Resist the urge for excess — Showcase five to 10 major projects that
demonstrate the range of your skills. Assume that your portfolio viewers
are busy and only have a few minutes to decide whether or not your work
is satisfactory. Show them a handful of your best projects, not a large
collection of efforts of varying quality. If you include everything you have
done, then your finest work is likely to get lost in the pile.
8. Point to the future — It is important to showcase your past achievements,
but it is equally important to share your latest work, the pieces that point to
your future areas of interest and expertise. Web design is dynamic; it
changes constantly. For design companies to survive, they cannot just
keep up with the future, they must co-create it. Prospective customers will
be looking for your future potential in your portfolio.
9. Contextualize — No project exists by itself in a vacuum. Every project has a
context — a set of causes and conditions in which it arises. Do not assume
that your portfolio viewers will understand the context of your projects.
Instead, be proactive and set the context. It does not need to be detailed.
Simply include a brief context-setting commentary for each piece of work.
Stating the "five W's" is a good starting point: who, what, where, when and
why.

40
 CIW – User Interface Designer

10. Socialize — Share your portfolio work on social media. Facebook and
Twitter are essential. LinkedIn, YouTube and Google+ are also important.
Pinterest and Tumblr are worth considering. A blog can work wonders,
helping you to establish a niche in the Web design world. If you decide to
create a blog, you need to populate it with high-quality content and commit
to updating this content on a regular basis.

Creating a Plan for a Web-Based Business Project

OBJECTIVE 1.7: Web-based business project

Instructor Note: If you think that allowing your students to create a site for
different businesses of their choice is more effective than assigning them a Web
design company, then you can modify the project labs to accommodate other
business types.
Throughout the remaining lessons in this course, you will design, create, test,
revise and fine-tune a site for your own Web design company. Your finished
project will be a well-crafted site that you can use as a model for a real business,
if you choose to start one.

In the following lab, you will begin creating a plan for your Web design company.
Suppose you want to embark on an entrepreneurial career in user interface
design and development. The first step is to create a business plan for your
company Web site.

Lab 1-3: Creating a plan for a Web design business

In this lab, you will create a plan for a Web design company's site. This plan should include
the following: the company name, mission statement, services, intended clients, and design
team roles and responsibilities. Capture your information in a table, or in a similar table in a
word-processing document, to make it easy to read. See the example below.

41
 CIW – User Interface Designer

1. Company Name

2. Mission Statement

3. Services

4. Intended Clients

5. Design Team Roles/Responsibilities

1. Name your company. Choose a name that sounds good (perhaps catchy),
that invites customers in, and that describes (perhaps indirectly) what your
company does. Avoid trying to be too cute, clever or edgy; you do not want
to risk scaring off potential customers. Do some research online to ensure
that the name is not already in use by another business.
2. Write a mission statement for the company. The mission statement should
be a single sentence that states the main goal of the company, its mission
in the world. A good mission statement is clear, memorable and concise
(hence a single sentence). It communicates a strong sense of the
company's direction and its reason for being. Too much complexity or too
many words can undermine a mission statement and dilute its power.
Keep it simple and direct. Limit it to a maximum of 20 words.
3. List the services your company will offer and the intended customers for
each service. Services can include new Web site design, existing Web site
revision, graphics production, JavaScript coding, and so forth. Think about
everything you want your company to be able to do, then simplify it into a
list. Consider carefully who your ideal customers would be for each service
and what distinguishes them. Be as specific as possible in your
descriptions: art organizations, political candidates, independent
musicians or assisted-living seniors, for example.
4. List the roles and responsibilities of the members of the design team. How
will the company assign responsibilities in order to provide all of the
services? Use the information presented in this lesson as a guide for
completing this part of the plan.
In this lab, you created a plan for a Web design company whose Web site you will build as a
continuing project throughout this course.

42
 CIW – User Interface Designer

Case Study: Pablo's Portfolio

Pablo is a recent graduate of a Web design program, and he is looking to start his
professional design career. He has created an online portfolio showcasing his Web design
work. However, the portfolio has not attracted any customers yet. The few responses he
has gotten from potential employers have not been promising.

Following is a description of Pablo's online portfolio site:

 When the site loads, a Home page appears that is empty except for Pablo's
name, contact information, and a set of three navigation buttons: Home,
Academia and Real World. There is no biography, no mission statement,
and no personal information beyond Pablo's name and e-mail address.
 Pablo's work is presented on the Academia page. It consists of 20 Web
design assignments he completed during his college coursework. These
assignments range from very simple to somewhat advanced, and they are
all presented without any context-setting explanatory comments.
 The sites that Pablo created for his two paying customers are presented
on the Real World page. One is for his college printing office, and the other
is for a small skateboarding company. The link to this company points to a
page that says: "We're out snowboarding. See you next spring!"
 To demonstrate his programming skills, Pablo filled the site with a dozen
custom JavaScript widgets, most of which are clearly gratuitous, and
some of which will only run correctly in certain browsers.
 To demonstrate his graphics skills, Pablo designed his own 3D icons and
ornamental fonts, which he uses liberally on his portfolio site.
Consider this scenario and discuss the following questions:

 What are the specific problems with Pablo's portfolio site?

 What elements display poor practice, and how could he fix these
elements?
 What elements are simply weak, and how could he improve these
elements?
Exercise 1-3: Introduction to User Interface Design
Question :Fill in the blanks by typing the appropriate terms.

43
 CIW – User Interface Designer
Here, this type of question contains the select box, text box, and drag and drop boxes. The
shortcut keys to perform this task are. Press the Alt+down arrow key to activate the target. Press
the arrow key to navigate through all the items. If the selected item is a text box or a select box,
it will automatically get focused. If you want to drop the item in the droppable field, navigate to
any of the draggable using the Tab key, and press the Enter key to copy the draggable, Now,
navigate to any of the droppable field and press the Enter key to drop the copied item. If you
want to remove the item from the droppable field, navigate to the droppable field and press the
Delete key for Windows and the Fn+Delete key to remove the item.

1. Web sites are starting to have a more

look-and-feel.

2. Your site should be clearly understandable for the

3. DHTML is an umbrella term for a set of technologies used to create

web sites.

4. Web projects require working

5. Parallax

is a technique in which the background scrolls slower than the foreground.

6.

44
 CIW – User Interface Designer

is the principle that states design should be flexible and forgiving.

7. Depicting complex data in simple visual form is called

visualization.

8. The project

is the team leader.

9. "Above the

" means what is visible on the screen without scrolling.

10. Creating a brand helps you to self-

11. A personal

is a demonstration of a person's skills, talents and works.

12. Large, bold images and

are currently in style for web UIs.

13. The current trend in UI design is

45
 CIW – User Interface Designer

, clean pages.

14.

is the rule, not the exception.

15.

is the acronym for "Keep It Simple".

16.

Mark Up Language (HTML).

*Matching is not case sensitive.

Lesson Summary

Application project

Did you complete Lab 1-2: Demonstrating Current Web UI Trends? If so, you
understand how to identify trends and find examples being used in Web design.
Trends will continue to change and grow, as new trends will be created. For this
application project, search for and identify a current trend in Web design not
listed in this lesson. Take a screenshot (or a series of screenshots) of an
example and prepare a presentation describing its:

 basic functionality,
 degree of inventiveness,
 degree of engagement,
 usefulness, and

46
 CIW – User Interface Designer

 your impression of its chances for longevity.

Being mindful of current trends in UID ensures that you are up to date. This is
important, as any employer will want the newest capabilities of a Web site.
Identifying the current trends in Web design should become a common practice
for a UID.
Skills review

In this lesson, you observed the evolution of Web user interfaces from their
inception in the early 1990s. You examined current UI design trends. You learned
the roles and responsibilities of the members of a typical Web design team, the
basics of project management, and the benefits that come from working
collaboratively on Web projects. You learned about the necessity of creating a
personal portfolio. Finally, you began creating a plan for your very own Web
design business.

Now that you have completed this lesson, you should be able to:

 1.1: Describe how Web user interfaces have evolved as more devices
access the Internet.
 1.2: Explain current trends in user interface design, such as mobile devices
and responsive design techniques.
 1.3: Explain the responsibilities and tasks of Web design team members.
 1.4: Describe the basic tasks of Web design project management,
including project management phases, project documentation and
communication.
 1.5: Describe the advantages of Web design project collaboration.
 1.6: List the benefits of creating a personal Web design project portfolio.
 1.7: Start planning a fictitious Web-based business, including drafting a
goal statement (types of customers, feel of work, mission statement) and
creating a design team.

47
 CIW – User Interface Designer

Activity 1-1: Reviewing Web design terms

Glossary

ARPAnet

The Advanced Research Project Agency (ARPA) network, a government network

that evolved into the Internet in 1982.
back-end

48
 CIW – User Interface Designer

The back-end of a Web site is the code and functionality that resides on the Web
server, and is invisible to end-users.
Cascading Style Sheets (CSS)

A W3C technology for laying out and formatting HTML documents. (W3C — the
World Wide Web Consortium is an international community that develops open
standards to ensure the long-term growth of the Web.)
data visualization

Complex data depicted in a simple, graphic format.

design document

A compendium of design-centered documentation: goal statements, competitor

analyses, customer interviews, functional specs, sketches, wireframes, mockups,
etc.
Dynamic HTML (DHTML)

A set of technologies used to create interactive Web sites, typically HTML,

JavaScript and CSS.
Flash

A proprietary technology for developing Web animations; sometimes used as a

platform for entire sites. Requires a browser plug-in to view and run.
flat UI design

A minimalist approach to UI design that uses simple 2D visual elements,

typography and colors.
front-end

49
 CIW – User Interface Designer

The front-end of a Web site is the visible interface that end-users interact with.
Hypertext Markup Language (HTML)

The basic language for structuring documents to display in Web browsers.

media query

A CSS3 feature that enables content presentation to adapt to variable conditions

such as screen size and resolution across a variety of devices (smartphone,
tablet, laptop, desktop).
parallax scrolling

A computer-graphic technique in which background layers of an image scroll

slower than foreground layers.
user interface (UI) design

The planning and creation of a set of controls that enables a user to interact with
a computer device.
white space

Blank space (empty of content) used to separate objects in a design. It can be

any color, not just white. Also called empty, blank, or negative space.
wireframes

A blueprint-like diagram of a user interface.

Lesson 2

50
 CIW – User Interface Designer

User Interface Design Process

Objectives
By the end of this lesson, you will be able to:

➥ 2.1 List steps in a basic Web design project's development process, including bottom-up
approach, Agile approach, vision, strategy, specifications, mind mapping, site map,
wireframe.
➥ 2.2 Describe the Agile Web development approach, including streamlining project
workflow, eliminating bottlenecks, focusing on value, facilitating changes in requirements.
➥ 2.3 Define a project vision for a Web site or mobile app interface.
➥ 2.4 Explain the user interface design process, from vision to strategy.
➥ 2.5 Define the specifications for designing a Web site.
➥ 2.6 Discuss considerations for site publishing, including FTP uploads, mobile apps,
publishing tools.
➥ 2.7 Describe various choices and challenges of site hosting, including security, costs.
➥ 2.8 Describe the security maintenance required for Web sites.
➥ 2.9 List guidelines for ethical Web design, including comparing unethical vs. illegal.
➥ 2.10 Apply the mind mapping process to user interface design projects.
➥ 2.11 Determine metaphors for a user interface design.
➥ 2.12 Define the purpose of creating word lists and mood boards in relation to the Web
design process. Create a word list for your Web site using the two-step process and mood
board using the eight-step process.
➥ 2.13 Create a site map for a fictitious business.

Choosing a Web Design Methodology

51
 CIW – User Interface Designer

OBJECTIVE 2.1: Web project development process

User Interface Design Process

Video transcript
Download

Every Web design team has its own particular approach to designing Web sites,
its own multi-phase process for getting the job done. Despite their differences,
most design approaches share some key characteristics. These can be summed
up in the five Ds of Web site production, presented here in their order of
execution:

 Discover — Draft the initial idea of the site, meet with clients to clarify what
they want, research site audience needs and expectations, do competitor
analysis, planning, scheduling, budgeting, etc.
 Define — Specify the content (page elements), structure (relationships
between pages), functionality (user tasks), and form (appearance) of the
site.
 Design — Create sketches, wireframes, and mockups of the site pages.
 Develop — Code the site using HTML, CSS, JavaScript, etc.
 Deliver — Publish the site to the Web.
In this section, you will learn about two popular site building methodologies:
bottom-up design and agile design.
Bottom-up design

Instructor Note: Tell students that bottom-up and agile design, though popular,
are not the only methodologies that can be used for Web design.
In bottom-up design, you begin "at the bottom" with parts and work your way up
to the top, e.g. the whole. If you open your refrigerator, see what is in there and
create a meal from these items, you are engaging in bottom-up design. The

52
 CIW – User Interface Designer

product is dinner.

In top-down design, you begin "at the top" with the whole and work down to the
parts. If you decide to make a cheese and mushroom omelet, then search the
refrigerator for eggs, milk, butter, cheese, and mushrooms, you are engaging in
top-down design.

It can be tempting to use a top-down approach for designing a Web site. You
define the look and feel of the site as a whole, then create and arrange its parts
(content, menus, navigation controls, etc.) to fit this whole. The problem with
such an approach is that it places theory, the idea of the Web site, over practice,
the real-world needs of its users. This can result in a site that looks excellent, but
is mediocre (or worse) in actuality.

For this reason, a bottom-up approach is generally considered better for Web
design. You begin by identifying essential user needs, desires and behaviors.
Then, using this information as a guideline, you build the actual site. The bottom
(user needs) generates the top (site). The main advantage of this approach is
that it places user satisfaction (usability) right where it should be: at the head of
the designer's list of priorities.

Ten steps of bottom-up Web design

Instructor Note: Remind students that this is one man's approach to bottom-up
Web design, not a universally accepted process.
Peter Pappas of edteck Press (http://www.peterpappas.com/files/design-
website-bottom-up.pdf) is a strong advocate of bottom-up Web design. Here are
his 10 steps of bottom-up Web site design, moving from the lowest level up to
the highest:

1. Brainstorm. List all the content you want the Web site to include.
2. Categorize the content. Organize the content into a maximum of six
categories.
3. Critique the categories. Decide whether your categories are appropriate for
the content and site audience.

53
 CIW – User Interface Designer

4. Revise the categories. Based on step 3, make any category changes you
feel are necessary.
5. Create a site map. Formulate the site's structure by creating a site map of
its pages.
6. Design the navigation system. Design a clear and easy-to-use navigation
system for the site.
7. Lay out the main pages. Sketch and/or wireframe the layout of each of the
main pages of the site.
8. Keep Your Design Simple! Ideally, you should apply this simplicity concept
to every phase of the Web design process. That way you will ensure that
the site ends up understandable and usable by site visitors.
9. Design and develop the site pages, and test them with users. Designing,
developing, and testing constitute a three-part cycle that is repeated
(iterated) over and over during the site building process. The designers
create a visual mockup of a page, the developers code it, and the testers
evaluate the effectiveness of the page by having a group of real-world
users interact with it. This evaluation restarts the cycle: re-design, re-
develop, re-test. And so on, until the site is done.
With this step, you have worked your way up from the bottom to the top of
the Web site design.
10. Publish the site. Upload your site and go live!
In Table 2-1, you can see how these 10 steps map to the five Ds of Web site
production from the previous section:

Five Ds of Web Site Production Pappas's Ten Steps of Bottom-Up Design

Discover 1. Brainstorm.

Define 2. Categorize the content.

3. Critique the content.
4. Revise the content.

Design 5. Create a site map.

6. Design the navigation system.

54
 CIW – User Interface Designer

7. Lay out the main pages.

8. KISS!

Develop 9. Design and develop the site pages.

Deliver 10. Publish the site.

Table 2-1: Mapping bottom-up design to the five Ds of Web site production
Agile design

Agile is a design methodology for Web and other software projects in

which cross-functional teams collaborate to create a product. It stands in stark
contrast to older methodologies, such as the waterfall model, in which single-
function teams (designers, for example) work alone, then pass off their part of
the project to the next single-function team (programmers), without much, if any,
collaboration. The Agile methodology places emphasis on collaboration between
teams, fosters design flexibility, rapid development of prototypes, continuous
improvement and early delivery of the final product.

Agile Web development is a flexible process for developing a site, not a recipe
with a set of steps that must be followed exactly. It is a customizable approach
to getting the job done in a timely, efficient and cost-saving manner.

Agile design streamlines the process of developing a Web site by:

 Spotting and removing (or minimizing) bottlenecks in the workflow.

 Performing frequent checks in which the viability of the current design is
analyzed and optimized.
 Ensuring that excessive time is not spent working on things that add little
or no value to the site.
In a nutshell: The agile methodology ensures that design team members devote
their time to activities that produce a high-quality Web site as rapidly as possible,
and avoid activities that waste time and money.

55
 CIW – User Interface Designer

Instructor Note: Let students know that agile is so popular these days, due
primarily to its speed and flexibility, that it has become a design buzzword.
Agile Web development manifesto and principles
OBJECTIVE 2.2: Agile development approach
This excerpt from 352inc.com's Agile Web Development Manifesto and
Principles gives you an insider's view of how a successful digital agency (352)
incorporates the agile development philosophy into its Web design process.

As agile Web developers, we value:

 Cross-functional teams over individuals in silos. Cross-functional teams

produce the strongest Web development result.
 Collective responsibility over individual accountability. Each team should
remain together throughout the entire Web development project.
Each team member shares full responsibility for the success of every
aspect of the Web development project.
 Solutions over features. A functional Web site, delivered quickly, is more
important than a flashy Web site.
 Constant, transparent communication over intermittent progress reports. It
is especially important to stay in constant contact with clients and
stakeholders.

Plan for change.

The Agile Web design process
Agile Web design is built around a four-phase iterative process discussed by Alex
Cowan:

Discover → Design → Develop → Test

 In the discover phase, you learn about the real-world users for whom you
are designing the site, by observing them using similar sites in their
workplace.

56
 CIW – User Interface Designer

 In the design phase, you apply your knowledge of user needs and behaviors
to the visual and functional design of the site.
 In the develop phase, you code the site by using HTML, CSS, JavaScript,
etc.
 In the test phase, you test the latest version of the site with real users.
Depending on the size and complexity of the Web site, this iterative process is
repeated from a few times to a dozen or more times during the course of
development.

In the following lab, you will get a feel for using bottom-up and agile
methodologies for designing a Web site. Suppose you are on a design team that
has been tasked with building a new Web site for a client. The project manager
asks you to recommend a bottom-up or agile approach to building the site. You
can do this by drafting a plan for each approach and comparing their relative
advantages and disadvantages.

Lab 2-1: Comparing bottom-up and agile design methodologies

Instructor Note: Answers to these questions will vary. Students should have a separate
notebook to document this plan sufficiently. They will refer back to this plan throughout the
remainder of the course.

In this lab you will compare bottom-up and agile Web site design methodologies. Write out
your answers in a notebook to provide sufficient space for your plan.

1. Using the 10 steps of bottom-up Web design in the previous section as a

guide, draft a work plan for the company site you began in Lesson 1 and
will continue building over the remaining lessons of this course. Use broad
concepts, do not go into detail.
2. Draft a work plan for a top-down approach to building your site.
3. Compare your bottom-up and top-down plans. Which makes more sense to
you? Which do you think would be more cost-effective, take less time to
finish, provide more opportunity for creative excellence, etc.?
4. Using the agile design four-phase iterative process in the previous section
as a guide, draft a work plan (with a minimum of three iterations) for
building your site.

57
 CIW – User Interface Designer

5. Compare your bottom-up and agile plans. Which do you think will work
better? Why?
In this lab, you drafted and compared work plans for building your company Web site using
bottom-up and agile methodologies.

Creating a Web Site Vision Statement

OBJECTIVE 2.3: Web project vision

In Lesson 1, you learned about company mission statements. A Web site vision
statement is similar. It is a concise statement of the Web site's main goals, the
vision it has of its presence in the online world.

A vision statement needs to be clear and specific enough to enable everyone on

the design team to understand it in the same way. If not, you could end up with
each team member having a slightly different feeling for where the design is
headed.

To ensure mutual understanding, the vision statement should contain an explicit

value and a measurable goal.

Instructor Note: A vision statement provides the design team with a clear overall
goal toward which to work. It is an indispensable tool for all sites, from the
simplest to the most complex.

Tech Note
Web site vision is the fundamental framework that defines the scope and intent of a site.
For this reason, you need to express it clearly and accurately. Be prepared to edit it multiple
times to get it just right in content, tone, and clarity.

Here is an example of a weak vision statement for an online record label site:

Our site will be a successful online record label.

It is not specific enough to ensure that it is understood unambiguously by all

design team members. What exactly does "successful" mean? How can this be

58
 CIW – User Interface Designer

measured?

Here is the same vision statement in a somewhat more solid form:

Our site will have a loyal base of satisfied visitors and will make a profit.

This is a step in the right direction, but still vague. How loyal, how satisfied, how
much of a profit, and within what time frame?

This final version is much stronger:

Our site will be America's most popular online record label, and will earn a
minimum of $3,000,000 in music downloads in its first three years.

Note that an explicit value ("America's most popular online record label") and
measurable goal ("will earn a minimum of $3,000,000 in music downloads in its
first three years") are built into this final vision statement.

In the following lab, you will create a vision statement for a Web site. Suppose
you are the head designer of a Web team that has been tasked with redesigning
their company site. The VP of the company asks you to write a single sentence
describing your main goal for the redesign to ensure that you are moving in the
right direction. You can do this by creating a site vision statement.

Tech Note
Refer to your Lesson 1 mission statement when working on this lab. Remember, the
mission statement is to a company what the vision statement is to a Web site: a declaration
of overall goals and intent.

Lab 2-2: Creating a vision statement for your company site

Instructor Note: Answers to these questions will vary. Students may want to include these
answers in their notebook started in Lab 2-1.
In this lab, you will create a vision statement for your company Web site. Use your company,
defined in Lesson 1.

59
 CIW – User Interface Designer

1. What are the values you want your company site to have? (Brainstorm
several values, expressed as simple words or phrases. Go for quantity over
quality at this point. You will get a chance to pick and choose later in the
process.)
2. What are some measurable goals of your site? (Again, brainstorm, think
broadly.)
3. Based on your answers to 1 and 2, write a clear and concise one-sentence
vision statement for your site that includes one main value and one
measurable goal. This illustration may help to prompt your writing process:
Imagine a triangle. One angle is "who we are," one is "what we do," one is
"who we do it for." Use this simple process and the values/goals questions
above to write a brief vision statement.
4. Compare your vision statement to the statement from the above example:

Our site will be America's most popular online record label, and will earn a
minimum of $3,000,000 in music downloads in its first three years.

Your vision statement should not be a clone of this example, but it should
be equally strong, specific, and decisive.

Remember: It is crucial that you get your vision statement right so that you
can launch into the design with a clear and inspiring vision to guide the
process.
In this lab, you created a vision statement for your company Web site.

Creating and Implementing a Web Site Strategy

OBJECTIVE 2.4: Design process from vision to strategy

Creating a Web site vision is just the first step in bringing a new site into the
world. To make your vision a reality, you need to develop an effective strategy
and a set of tactics to implement this strategy. The triad of vision, strategy and
tactics will help you create a Web site that draws users in, holds their attention
and keeps them coming back.

60
 CIW – User Interface Designer

Instructor Note: Point out that the Web site vision statement guides the site
strategy and implementation tactics, which in turn guide the actual site design
and development. For this reason it is crucial to get the site vision right!
The main goal of any business is to attract and retain customers. To achieve this
goal, your Web site strategy needs to focus on persuading users to spend time
on the site, enjoy their experience and return to it in the future. Fortunately, the
Web is well-suited for making this happen.

Unlike mass media like television or publishing, the Web can address individual
customer needs. In this sense, it is more like a small neighborhood store than a
corporate behemoth. Customers can visit whenever they want, move around
freely, browse as long as they please and decide on their own whether or not to
make a purchase without pressure from pushy salespeople.

The main goal of any business site is to attract and retain customers.

With this in mind, you can create a stunningly beautiful site or a purely functional
one. You can incorporate all the latest design trends or go purely traditional. You
can build innovative widgets that win design prizes or stay with the old classics.
All of this is fine, as long as you keep the main goal in mind: attracting and
retaining customers.
How to create a site strategy

Focus on these four tasks when creating a Web site strategy:

1. Determine the goal. What is the purpose and desired outcome(s) of the
site? The answer to this should already be summed up nicely in your Web
site vision statement. Remember to keep the main goal of attracting and
retaining customers in mind.
2. Define the brand. What message and unique values should the site
establish for the company brand?
3. Define the audience. Who is the target audience, e.g. what kinds of users
will be visiting the site? How should the site be perceived by its audience?

61
 CIW – User Interface Designer

4. Analyze the competition. What are the major competitor sites? How will
your site distinguish itself from them?
Developing tactics to implement the strategy

Once you have your Web site strategy in place, you need to develop tactics to
implement it. Even the most brilliant strategy is useless unless it is successfully
put into practice.

Instructor Note: Consider asking the class to brainstorm additional tactics (and
anti-tactics) for attracting and retaining site visitors.
The tactics you use to implement your strategy need to emerge from the
specifics of that strategy. To get you moving in the right direction, here are some
tactics for implementing the general strategy of attracting and retaining site
visitors:

 Personalize the user's experience by displaying their name, visual

preferences (colors, layout, text size, etc.), products suited to their profile,
and so on.
 Make the site so easy to navigate, and the content so easy to locate that
even the least Web-savvy users will be able to use it quickly and efficiently.
 Reward first-time buyers with a special offer like: "If you place an order
now, you will receive an additional discount of 10%".
 Help persuade customers to share their personal information by rewarding
them with a gift of discount when they fill out an information form.
 Provide some useful free items that users can download right away for
immediate gratification: documents, images, audio files, podcasts, etc.
 Create (and regularly update) a blog that provides tutorials, tips and
techniques which site visitors will find useful. If you have a blog, make sure
to update it at least once a week. A neglected blog with few or no new
entries does more harm than good.

62
 CIW – User Interface Designer

Here are some anti-tactics, things to avoid if you want to attract/retain

customers:

 Litter your site with annoying advertising banners, or even worse, pop-ups!
 Force users to register with the site to get to their desired content.
 Automatically play an audio file (at high volume) when a site page loads.
 Build sites that only work correctly on certain browsers or devices.
 Make users have to think too hard to navigate the site and find
information.
 Create a home page that contains multimedia which takes a long time to
load.
In the following lab, you will develop a strategy and tactics for realizing the Web
site vision you created in the previous lab. Suppose you are the strategist of a
design team. The team manager hands you the Web site vision statement for a
new site the team has been tasked to build. It is your job to devise a strategy to
realize this vision, and tactics to implement the strategy. You do this by following
the guidelines presented above.

Tech Note
Before beginning this lab, visit a few successful online business sites. What strategies do
they use to support their vision? What tactics do they use to implement this strategy? Which
strategies and tactics do you think are most effective? Which are least effective? Why?

Lab 2-3: Defining a Web site strategy and tactics to implement the
strategy
In this lab, you will develop a strategy to realize your Web site vision and a set of tactics to
implement this strategy.

Instructor Note: Students may want to include these answers in their notebook started in
Lab 2-1.

63
 CIW – User Interface Designer

1. Using the "How to Create a Site Strategy" section above as a guide, define
a strategy to realize your Web site vision. Make sure that your strategy
supports both your vision statement and the main goal of attracting and
retaining customers.
2. Using the "Developing Tactics" section above, describe four tactics for
implementing your strategy and two anti-tactics to avoid. Be specific in
your descriptions. Do not just say: Create a blog. Say instead: Create a blog
that provides weekly HTML5 page-design tutorials.
In this lab, you developed a strategy to realize your Web site vision and a set of tactics to
implement this strategy.

Creating a Web Site Specification

OBJECTIVE 2.5: Web site specification

After you have developed a strong Web site vision statement and a strategy and
tactics to implement it, you need to create a site specification: a detailed
description of the key considerations and components that go into the making of
the site.

Tech Note
Think of a Web site specification as an annotated blueprint of the site. It contains, in clear
and concise form, everything designers and developers need to know to fulfill their roles in
creating the site.

Instructor Note: Impress upon students that these four parts are specific to this
Web site specification, but that other specifications might have different parts.
There are four parts to a Web site specification:

1. Functionality— The functionality part of a site specification defines all the

functions (tasks) the site will be able to perform. For example, the

64
 CIW – User Interface Designer

functionality specification for our online record label might include search,
song preview, a shopping cart, credit card processing, etc.
2. Content— The content element of the site specification defines the content
that the site will include: text describing the record label company,
song/album descriptions and images, shipping information, frequently
asked questions, etc.
3. Architecture — The architecture part of the specification defines the
structure of the site. The record label site might be divided into four main
sections: news, artists, events, and store. The artists might be grouped into
genres: rock, folk, jazz, dub, etc. A good architecture specification helps
you determine the best way to organize site pages for easy user
navigation, and site content for easy access.
4. Design — The design component of the specification defines the look and
feel of the site: layout, colors, typography, images, spacing, page widgets,
etc. The record label site might have a three-column layout, with plenty of
white (empty) space, a custom sans-serif font, and a logo that can appear
in three different sizes, depending on the context.
Creating the site specification

Web site specifications vary considerably in content and style. They run the
gamut from long formal documents to collaborative white board sketches. Their
main requirement is to answer this question clearly and precisely:

What kind of site are we going to create?

The client (individual or company who hired you to design the Web site),
customers (site users), and all other primary stakeholders should review and
approve the specification before the project moves forward to the design phase.
This step can be time-consuming when many people are involved, but, if you skip
it, you risk building a site that the client and/or customers find unusable or just
plain do not like.

In the following lab, you will create a specification for a site. Suppose you are the
65
 CIW – User Interface Designer

newest member on a Web design team, and the team manager asks you to write
a document that provides an overview of what will go into the making of the new
site the team has been asked to create. You wander back to your work area,
brainstorm the features, content, structure, and design of the site, and then
capture your conclusions in a provisional site specification. Your boss is very
pleased, and uses your work as a starting point for the formal site specification.

Tech Note
Use your mission statement, Web site vision, strategy and tactics for guidance. Do not rely
on your (imperfect) memory of the contents of these documents. Have the actual
documents available, readily viewable, and make sure everything in the site specification
you write supports them.

Lab 2-4: Creating a specification for your company site

In this lab, you will create a four-part specification for your company site: functionality,
content, architecture and design. Write your answers in the spaces provided.

Instructor Note: Students may want to include these answers in their notebook started in
Lab 2-1.

1. What products and/or services will your site offer?

Note: To help with steps 2-5, visit a few sites from established
companies similar to yours. What primary and secondary functions
do they provide? What content? How are the sites structured? How
do they look and feel? Feel free to borrow design ideas from these
sites, but do not borrow content (text, images, etc.).
2. Based on your answer to step 1, list the functions your site will
provide.

Include all the primary functions that are required for users to
perform critical site tasks (e.g., finding and purchasing products),
along with a few secondary functions that might make the site more
satisfying or enjoyable (e.g., showing products similar to a chosen

66
 CIW – User Interface Designer

product).

Put yourself in your users' situation: When someone visits the site,
what kinds of things will they want to do? Make sure the site enables
them to do all these things.
3. Given its products, services, and functionality, what content will your
site provide?

Include all primary (required) content, and some secondary

(optional) content to enhance user enjoyment and satisfaction.
4. Given its functionality and content, describe the architecture (page
structure) your site will provide to enable users to easily navigate
and find what they are looking for.

To do this, create an indented list like the one below showing which
pages are associated with other pages. If the site is small, 10 pages
or less, include all of its pages in the list. If it is larger, include only its
main pages.

Home

Resume
Contacts
Portfolio

Current Projects
Completed Projects

2011
2012
2013
2014

67
 CIW – User Interface Designer

Instructor Note: Let students know that they will learn how to
represent site structure in a flowchart-like site map at the end of the
lesson.

5. Given its functionality, content and structure, describe the look and
feel you envision for your site.

Include these in your description: page layout, typography, color

scheme, images, logos, and interactive page widgets (expanding
menus, navigation bars, search tools, forms for user data entry, etc.).
Make sure to choose visual elements that support — rather than
work against — the site's functionality, content, and structure.
6. Create a Web Site Specification document that contains the work
you completed in steps 1-5.

To do this: Open a new word/text document, enter (or copy) your

answers to steps 1-5 into this document, and edit them as necessary
to get everything just right. Give the document an appropriate
heading, something like "Site Name: Web Site Specification" with
your name underneath. Lay out and format the content to optimize
its clarity, consistency and readability.

Tech Tip
Pretend that you will be submitting this Web site specification document to
your very demanding boss, who expects professional-strength excellence in
both function (text content) and form (layout and formatting) from all her
employees.
In this lab, you created a four-part specification for your company site.

Publishing a Web Site

OBJECTIVE 2.6: Site publishing considerations

The final step in site development is publishing your site to the Web. To do this,

68
 CIW – User Interface Designer

you need to upload all of the site files (HTML, CSS, images, media, etc.) to your
Web host server. There are two main ways to accomplish this:

 You can use a dedicated FTP (File Transfer Protocol) client application
such as WS_FTP to upload the files to the server.
 You can use the FTP client built into the Web CMS (Content Management
System) you are using.
File Transfer Protocol is a network protocol used to transfer files between two
computers connected to the Internet. To perform the transfer, there needs to be
an FTP client application and an FTP server application. The FTP client runs on
the user's computer and the FTP server runs on the Web server.

Tech Note
This configuration, in which a client application communicates with a server application, is
called the client-server model. Both the Web and e-mail use the client-server model
extensively.

An FTP client enable files to be transferred to and from an FTP server in one of
two data-transfer modes: binary or ASCII. The mode that is used depends on the
type of data being transferred. Text-based files, such as X/HTML, CSS and XML,
are transferred in ASCII mode. Non-text files, such as music and images, are
transferred in binary mode.
Choosing the right Web publishing tool

Instructor Note: Let students know that there are some excellent free and open
source FTP clients and Web-development IDEs.
The choice of whether to use a dedicated FTP client or an FTP client built into a
Web IDE depends on your working method:

 If you are using a text editor to manually code your Web pages, you should
use a dedicated FTP client for publishing.

69
 CIW – User Interface Designer

Popular FTP clients include: WS_FTP, FileZilla, FireFTP for Firefox, and
sFTP for Google Chrome.
 If you are using a Web development IDE to create your pages, you should
use the FTP client built into the IDE for publishing.
Popular Web IDEs include: Dreamweaver, Expression Web, and Aptana.

Choosing a Web Site Host

OBJECTIVE 2.7: Site hosting

To make your site available to Internet users, it must reside on a Web server. This
server is called the host server or Web site host, because it hosts (stores) the site
files. It must have a dedicated connection to the Internet to provide users with
continuous 24/7 access to the site.

Instructor Note: Let students know pricing is approximate, and they will need to
research local pricing and availability.
For most situations, getting a Web site hosting account with a reliable Internet
service provider (ISP) is the best choice. Prices have dropped significantly over
the last decade. You can acquire a perfectly adequate Web hosting account for a
mid-sized business site for $250 a year. A smaller business site might cost $100
a year, and a large business site $500-$1,000.

In addition to hosting your site, most ISPs offer a generous selection of Web
applications at no extra charge: blogs, forums, shopping carts, etc. Do your
research, see which ISPs are currently doing the best job, shop wisely and you
should be able to get a good deal.

Alternately, you can choose to host your own Web site. But beware: It is usually
not a good idea to do so, for these reasons:

 You will need a reliable and fast Internet connection to keep up with your
server requests during peak site traffic. To do this, you will probably need
to get a dedicated T1 (or equivalent) line from your ISP; cable and DSL only

70
 CIW – User Interface Designer

suffice for light traffic. T1 lines do not come cheap! Typical prices range
from $200 to $500 per month.
 Some ISPs charge you an extra fee to host your own site. Others don't
allow it at all. So, if you are thinking about hosting your own site, make sure
you know your ISP's policy.
 When an ISP-hosted server goes down, the ISP usually has a redundant
server that picks up the traffic, so you end up losing minimal online
presence. When your own dedicated server goes down, you are in trouble:
Your site will remain offline until you get the server hardware or software
problem fixed.

Securing a Web Site

OBJECTIVE 2.8: Site security maintenance

Internet security is a major source of concern in our online world. You may not
think your site has anything to interest hackers, but you would be wrong. Web
sites of all sizes and types are exploited at an alarmingly high rate, and it is only
getting worse.

Instructor Note: Impress upon students the need to take Web security seriously.
Compare it to the need to back up data.
Ruald Gerber and Toby Compton offer some common Web security threats you
should be aware of:

 Social engineering — Social engineering is a set of techniques hackers use

to trick people into revealing confidential information about themselves or
their company. For example, a hacker might pose as someone authorized
to get sensitive information or he might ask seemingly benign questions
that are, in fact, designed to reveal security weaknesses.

Social engineering takes advantage of the fact that most people want to be

71
 CIW – User Interface Designer

helpful. To prevent these malicious attacks, companies need to train their

employees to recognize the common signs of social engineering, and not
to reveal anything that could be used to exploit weaknesses in the network.

 Denial-of-service attacks — Denial Of Service (DOS) attacks cripple servers

by consuming all of their network bandwidth, forcing them to deny service
to their users. DOS attacks usually target high-profile sites. But smaller
Web sites can become indirect victims: If there is a DOS attack on your ISP,
your site will also be deprived of bandwidth (or go down completely)
because it is hosted by the impacted ISP.

To prevent a DOS attack from a single source, traffic from this source can
be blocked. The problem is, DOS attacks are often distributed, in that they
come from multiple sources, making them much harder to block. Smaller
site owners cannot do much to fight a DOS attack besides letting their ISP
know what is going on and asking them to do whatever it takes to end the
attack.

 Brute-force attacks — A brute-force attack occurs when someone hacks

straight into a server without any specific insider knowledge about the
server. It is the least sophisticated, but most common attack made on
servers. For example, in the "dictionary attack," the hacker uses a program
that repeatedly enters passwords from a long list of commonly used
passwords, hoping that one will work and provide access to the server.

Dictionary attacks can be thwarted by requiring all network users to

choose strong passwords and to change their passwords every few
months. The likelihood of brute-force attacks succeeding can be
minimized by keeping the server and operating system up-to-date with
security patches and by using a reliable firewall.

72
 CIW – User Interface Designer

Good Web security practices

Web security is a very complex topic and though detailed coverage of it is beyond
the scope of this course, here are some basic practices that will help prevent
your Web site and server from being hacked:

 Use strong passwords. Avoid using common words or names, include a

mix of uppercase and lowercase letters and at least one number or
symbol. If you have a lot of passwords to manage, consider using a
password manager instead of having to memorize and type in passwords
manually. Dashlane, LastPass, and Sticky Password are all highly rated.
 Disable any service you do not need. For example, if you do not need your
server to support FTP, use a firewall to disable that function. The fewer
points of access a server has, and the fewer services it exposes to the
Internet, the more secure it will be.
 Apply security patches as soon as they are released. Vendors regularly
release security patches to fix server vulnerabilities. You need to apply
them as soon as they come out! Subscribe to the vendor mailing list to be
automatically notified of new patches.
 Restrict user access. Give users access only to those server files and
applications they need to do their jobs. If a user does not need to modify
server files, give them read-only access. If a user does not need to view or
modify anything in specific server partition, block their access to that
partition.

Creating Ethical and Legal Web Sites

OBJECTIVE 2.9: Ethics and law in Web design

As a professional Web designer, you need to be familiar with the ethical issues
and laws that pertain to running a business on the Web. Currently, many laws
related to Web businesses and practices are not completely clear; others are

73
 CIW – User Interface Designer

evolving daily as court cases and legislation are addressed and settled. However,
the law is only a baseline for the conduct you should observe; some practices are
technically legal, but ethically unacceptable. Legal issues and the Web will be
discussed in detail in Lesson 4; ethics will be our focus in this lesson.
Ethical issues and the Web

Instructor Note: Ask students to recall any news stories they have heard involving
illegal or unethical Web practices.
Ethics are a set of standards guiding the conduct of the members of a
community, such as the global community of the World Wide Web. They
establish basic values for responsible actions and practices within that
community.

The generally agreed-upon ethical standards for Web professionals have

developed from years of experience, and many have been inherited from other
professions. Here are some of the key ethical practices for Web professionals:

 Adhere to copyright laws. Using copyrighted materials (text, images, music,

films, etc.) without permission is a violation of both ethics and copyright
law. As tempting (and easy) as it might be to grab copyrighted items from
the Web, as a Web professional you need to say: No!
 Do not knowingly spread malicious code such as viruses, worms or Trojan
horses. These malwares, once installed in a computer, can be from mildly
annoying to extremely harmful. The violation of user rights is obvious.
Scan regularly for the presence of viruses and malware on your system.
 Do not send spam. Spam is unsolicited bulk e-mail: messages sent to
users who did not request them, thereby harassing the users and violating
their privacy.
 Respect the privacy of your users. Your responsibility as an ethical Web
designer is to tell your site users how the information the site gathers
about them will (or will not) be used. The best way to do this is to post a
clear and complete privacy statement on the site.

74
 CIW – User Interface Designer

 Be honest with your customers and do not overcharge for technical services
that they may not be aware of or understand. There is a contract of trust
between vendor and customer, a major component of which is honesty. To
break that trust is an act of betrayal.
 Communicate clearly and respectfully to your site users. The content and
tone of your site should convey respect for your users, treat them as
intelligent individuals, rather than faceless consumers. If you have a multi-
cultural audience, you should globalize the site to ensure that all visitors
have an equally effective and enjoyable experience.
Ethics vs. legality

Instructor Note: Be sure students understand the differences between illegal and
unethical practices.
Ethics are standards of behavior based on common attitudes about right vs.
wrong. Laws are rules of behavior based on governmental decisions about right
vs. wrong.

Tech Note
Laws do not necessarily reflect ethics. Hence, the controversy around court decisions on
abortion, slavery, child labor, etc. Likewise, ethics do not necessarily reflect laws. An ethical
view might be deeply embedded in a culture for decades before it is made into law.

You can commit an ethical violation and no authority has the government-
sanctioned right to punish you for it. But if you commit a legal violation, you can
be punished. This results in a "gray area" where people can behave unethically,
but not break any laws in the process. Dark UI patterns — user interfaces
designed to trick users into doing harmful things, such as unwittingly signing up
for a recurring monthly credit card payment — are a good example of this gray
area in Web design.

Ethical views are an integral part of the self-identity of a community (company,

organization, country, culture, etc.), and as such tend to evolve slowly. Laws tend
to evolve faster. Consider, for example, how long it took (centuries!) for the

75
 CIW – User Interface Designer

disabled to be regarded as equal to the abled, and how quickly the laws are now
changing to protect the rights of the disabled.

As a Web professional, it is your responsibility to stay abreast of important

ethical and legal issues that affect your business, clients and customers. Do your
research, stay informed and hold yourself to the highest ethical and legal
standards at all times.
Exercise 2-1: User Interface Design Methodologies

Question :Select the appropriate terms from the lists.

Here, this type of question contains the select box, text box, and drag and drop boxes. The
shortcut keys to perform this task are. Press the Alt+down arrow key to activate the target. Press
the arrow key to navigate through all the items. If the selected item is a text box or a select box,
it will automatically get focused. If you want to drop the item in the droppable field, navigate to
any of the draggable using the Tab key, and press the Enter key to copy the draggable, Now,
navigate to any of the droppable field and press the Enter key to drop the copied item. If you
want to remove the item from the droppable field, navigate to the droppable field and press the
Delete key for Windows and the Fn+Delete key to remove the item.

1. In

design, you begin with parts and work your way up to the top.
2.

is a design methodology for Web and other software projects in which cross-
functional teams collaborate to create a product.
3. A Web site vision statement is a concise statement of the Web site's main

, the vision it has of its presence in the online world.

4. Your Web site

needs to focus on persuading users to spend time on the site, enjoy their
experience and return to it in the future.
5. The site

answers the question, "What kind of site are we going to create?"

6. The Web site host must have a dedicated connection to the

76
 CIW – User Interface Designer

to provide users with continuous 24/7 access to the site.

7. A basic practice that will help prevent your Web site and server from being
hacked is having a strong

.
8. Spam is unsolicited bulk

and is unethical.

Creating a Mind Map

OBJECTIVE 2.10: Mind mapping design projects

Mind mapping is a technique for capturing and arranging ideas in the way your
brain conceives of them: as a Web of interconnected items rather than a linear
list.

Imagine your boss asked you to brainstorm ideas for how to make the current
company Web site more appealing to users. The traditional approach would be to
write a heading in the upper-left corner of a page describing the brainstorming
topic — Ways to Improve Site Appeal — and then to arrange your ideas in a linear
list below the heading: idea 1, idea 2, idea 3, etc., each idea on its own line. The
downside to this method is that the human brain rarely thinks linearly, especially
when brainstorming. Instead, it thinks in an associative stream that feeds back
into itself: idea 1 gives rise to idea 2, which in turn gives rise to two similar ideas
3a and 3b, one of which relate back to idea 1, etc.

Instructor Note: Ask students if they have heard of or used mind mapping before.
Ask what type of project they used it in.
Now consider the mind mapping approach to this brainstorming task. Instead of
beginning in the upper-left corner of the page, you write Ways to Improve Site
Appeal in the middle of the page. From this hub, you draw branches radiating
outward to ideas related to the main topic. Similarly, you draw branches from
ideas to related sub-ideas, and so on. Gradually, your mind map will develop into
a Web of interconnected ideas and sub-ideas, all radiating out from the main

77
 CIW – User Interface Designer

topic at the hub.

Mind mapping is a type of freeform brainstorming. As with all brainstorming

activities, you should let your thoughts flow freely when doing it. Do not second
guess yourself. Trust your intuition to take you where you need to go. Later on,
after the initial brainstorm, you can go back and edit the mind map, refine it, add
or remove items, etc.
How to create a mind map

Instructor Note: Ask students to compare mind mapping to a traditional

brainstorming session. Has anyone used the mind mapping technique during a
group brainstorming session? Do students think it could be useful in this setting?
You can create a mind map by hand drawing it on a sheet of paper or by using a
software tool to draw it on a computer screen.

The benefit of drawing a mind map by hand is that fosters an immediate and
visceral connection between hand, brain and map contents. This connection can
inspire you to think more freely about the topics explored in the map. A
secondary benefit is that hand drawing tends to trigger the creative impulse, and
a good mind map is as much an act of creation as organization.

There are many software tools for creating mind maps. Some of the best are:
MindMeister, MindManager, XMind and iMindMap by Tony Buzan. The user
interfaces for these tools are typically very simple so you can focus on
brainstorming the mind map ideas and connections.

This four-step procedure, introduced by Tony Buzan

(www.tonybuzan.com/gallery/mind-maps/), applies to both hand-drawn and
software-based mind maps:

1. In the middle of a blank page (or screen), write a word or short phrase that
describes the main topic you will explore in the mind map. If you are a
visual thinker, add an image to the text.

In this example, the main topic is Travel:

78
 CIW – User Interface Designer

Figure 2-1: a mind map about travel

2. Think of an idea that relates directly to the main topic, formulate it as a

single word or short phrase (and optionally an image), write it near the
main topic, then draw a branch to connect the idea and main topic.

Here, the idea Research is connected to Travel:

Figure 2-2: a mind map

about travel with an additional, related idea

3. Think of a sub-idea that relates to one of the ideas, write it near the idea,
and draw a line to connect them. Here, the sub-idea, Architecture, relates to
the idea Research:

79
 CIW – User Interface Designer

Figure 2-3: a mind map

about travel with an additional idea and a related sub-idea

4. Repeat steps 2 and 3 until you have captured a full and rich set of ideas
and sub-ideas inspired by the main topic. In brainstorming, go for quantity
of ideas over quality. Quality control comes later, during editing.

You should continue with a radial structure of interconnected ideas that

begins to look something like this:

80
 CIW – User Interface Designer

Figure 2-4: a comprehensive mind map about travel

If necessary, refine your mind map: Remove irrelevant or redundant items,

add items to improve the map contents, use color to differentiate idea/sub-
ideas, rearrange items for optimum visual clarity and impact, etc.
In the following lab, you will create a mind map of a Web site. Suppose your
design team is asked by the project manager to brainstorm the structure and
content of a Web site revision for an important, long-term client. You could take
the conventional approach and structure the results of your brainstorming as a
linear list of ideas, with indentations, but you know, from experience that the
project manager is a visual learner. You can perform the task and please your
boss by brainstorming a mind map of the site.

Lab 2-5: Hand drawing a mind map of your company site

In this lab, you will hand draw a mind map of your company Web site. Use the company you
defined for yourself in Lesson for this exercise, and throughout the course.

Instructor Note: Students may want to include these answers in their notebook started in
Lab 2-1.
Use a pencil (with eraser) to hand draw a mind map that describes the form (structure, look,
feel) and contents of your company site.

81
 CIW – User Interface Designer
Follow the four-step mind mapping procedure presented above: main topic (hub), to
branching ideas, to branching sub-ideas, to whole map.

If your mind map looks sloppy, chaotic, incomplete, or unclear, make sure to refine it before
finalizing. (Use the illustration above as inspiration.) That is what the eraser is for!

In this lab, you drew a mind map of your company Web site.

Using Metaphors

OBJECTIVE 2.11: User interface metaphors

A metaphor is something that represents or symbolizes something else. For

example, the desktop on your computer is a metaphor for an actual physical
desktop. Both hold objects you frequently access: documents, tools, etc.

The human brain uses metaphors to make sense of the world. They are shortcuts
for understanding complex things in simple terms. For this reason, designers
often use metaphors to increase the usability of their products, the degree to
which the products can be easily and efficiently used by people.

Instructor Note: Tell students that, though metaphors are still used in Web design,
the current popularity of flat UI design has caused Web site metaphors to be less
common and more subtle.
Web design makes extensive use of metaphors, including:

 Print — online magazines, newspapers, brochures, catalogs and tabbed

folders
 Television — videos, channels and series
 Store — objects arranged in departments, browsing and shopping cart
 Gallery — virtual walls of images that users can wander through

82
 CIW – User Interface Designer

Metaphor usage guidelines

Skillful use of metaphors can optimize the usability of a Web site. Here are some
useful guidelines for developing Web site metaphors:

Instructor Note: Ask students if they can think of any sites they have visited that
effectively used metaphor in the design.

 Ask yourself whether a metaphor is truly needed in the situation, e.g.

whether it simplifies something complex or otherwise adds value to the
page. If so, devise an appropriate metaphor and use it. If not, have the self-
discipline to resist using one.
 Take care to select a metaphor that is familiar to the Web site audience. If
a metaphor is not easily and universally understood, it can do more harm
than good by confusing users rather than enlightening them.
 Use the familiar to explain the unfamiliar. Again, make sure that the
metaphors you choose are familiar to your site audience.
 Keep your metaphors light and simple. It does not make sense to attempt
to clarify something complex with another, equally complex thing.
 Choose metaphors that go along with the visual design of your site. All
elements of a well-designed site — text, images, media, layout, typography
— work together to create a site-wide sense of unity.
 If you use a metaphor once, use it consistently. Never use two different
metaphors to represent the same thing!
 Maintain a light touch when using a metaphor. Do not draw excess
attention to it, no matter how clever it might be. Do not overuse it, less is
more. Metaphors serve a purpose: To clarify. They are supporting actors,
not the stars of the show!
 Do not use a metaphor that may have a negative connotation. You need to
make sure that the metaphors you use are not offensive to your site
visitors. This can be challenging, especially if you have a broad global
audience.

83
 CIW – User Interface Designer

 Choose a metaphor that is easy to remember. By lightening users'

cognitive load, you simplify the tasks they need to perform. This, in turn,
helps create a positive emotional connection between users and site, and
satisfied users are more likely to be frequent and loyal site visitors.
 Do not mix metaphors. Mixing text metaphors is considered bad writing,
for example: Step up to the plate and strike while the iron is hot! The same
is true for mixing Web site metaphors. For example, if your site uses flat UI
design, inserting photo-realistic visual metaphors would not look or feel
right to users.
Web Design Metaphor Examples

Instructor Note: If time permits, have students visit these sites and compare the
current sites to the screenshots shown here.
Following are a few examples of good Web design metaphors used in Web sites.
Figure 2-5 shows a navigation page for Airbnb (https://www.airbnb.com/map). A
spinning globe, with circles for cities offering Airbnb deals and airplanes to
convey travel, is used as a metaphor for navigating to a desired Airbnb location.

84
 CIW – User Interface Designer

DescribeListen

Figure 2-5: A navigation page for Airbnb

Instructor Note: The CandyLand site has since been taken down and is shown
here only as an example.
Figure 2-6 shows the home page for CandyLand, a game-based Web site by the
company Tangerine. It uses the metaphor of a 3D map of the CandyLand island
to enable users to navigate the site. To jump to a location — Sour Swamp,
Refreshers Reef, etc. — you drag and drop the Jelly Baby (yellow figure below the
CandyLand logo) onto that part of the island.

85
 CIW – User Interface Designer

Figure 2-
6: The home page for CandyLand

Creating Word Lists and Mood Boards

OBJECTIVE 2.12: Word lists and mood boards

Word lists and mood boards are excellent tools for helping you get a sense of the
look and feel of the Web site you are designing, and both have the added benefit
of being easy and fun to create!
Word lists

Instructor Note: Compare making a word list to painting an image with words.
(Ask them if that is a metaphor.)
A word list is a set of words and short phrases that describe the intended look
and feel of a design. Here is a word list for a Web site advocating political
equality:

86
 CIW – User Interface Designer

 Fair, righteous, empowered, bold, large, strong, All people are created
equal.
These items from the word list describe the intended look of the site:

 Bold, large, strong.

It is quite easy to translate these into visual elements: bold letters, large
fonts and images, strong colors and layout, etc.
These illustrate more of the feel of the site:

 Fair, righteous, empowered, All people are created equal.

It is more challenging to translate feel-oriented items into the way a site is

designed. This is where the experience and skill of the graphics designers
comes into play. A good design team will be able to create a compelling
vision of what fair and empowered looks like.
How to create a word list
Creating a word list is a two-step process. The first is divergent; it expands the
material being created. The second is convergent; it shrinks the material to a
tight focus.

1. Brainstorm a large set of words (Diverge)

 Generate a set of words or short phrases describing, directly or

indirectly, the look and feel of your project. Do not make all your
words/phrases feel-oriented; make sure to include some items that
point to the look you are going for.
 Choose words/phrases that evoke strong emotions and images.
This is not a technical specification, it is a "word painting" that
depicts the feel of a Web site.
 Don't edit or second guess yourself or any other member of the
team; keep brainstorming until you have 20-40 words/phrases.

87
 CIW – User Interface Designer

 If you need help getting started, think about where your Web site
design theme falls within these pairs of opposites:

Simple/complex ... organic/digital ... minimal/ornate ...

retro/futuristic naive/sophisticated ... rough/elegant ...
mechanical/handmade.
2.

 Here is an example from a few years ago of a brainstormed list of

words and phrases. Note that common phrases come in and out of
fashion and it is the responsibility of the designer to create a site
that remains relevant for the client and its users for as long as
possible.
 Connected, groups, relationships, friends, family, community,
sharing, compassion, buddies, close, clean, simple, legible, light
colors, Reach out, Stay in touch, People who need people, It takes a
village.

Note that several of these terms point to the desired site look: clean,
simple, legible, light colors.

3. Select a small set of key words (Converge)

 Go through your brainstormed word list with a critical eye.

 Select the single word or phrase that best describes your intended
site design and make it the theme, or, if you can think of a better
theme word/phrase than any on the list, use that instead.
 Select 5-10 other words for the word list.

88
 CIW – User Interface Designer

 Staying with the above example, using "community" as the theme:

Community: Connected, sharing, clean, simple, Stay in touch.

Mood boards

A mood board is an assemblage of images, colors, textures, words, typography —

and sometimes even physical objects — that provides designers with a visual and
tactile sense of the design they want to create. If a word list paints a design in
text, a mood board paints it in pictures.

Here are some of the key advantages of using mood boards for design:

 They are easy and enjoyable to create, and mood boards can be powerful
guidelines for design. It is the "picture is worth a thousand words"
approach.
 Mood boards help create a unified design vision for everyone in the team
to follow. If the design direction should ever get ambiguous or confused at
some point in the site-creation process, a mood board can quickly clarify it.
 They let the designer get feedback on the proposed design from the client
quickly, which minimizes wastes of time and money.
 A well-crafted mood board is a thing of beauty, an artistic collage in its
own right. Having an aesthetically strong mood board can inspire a design
team to make the Web site equally beautiful.
Let's have a look at some real-world mood boards created by design students at
various schools in recent years.

Instructor Note: If time permits, have students visit these pages so they can see
the mood boards in full detail.
The mood board in Figure 2-7 is from Ivan Tamez,
at: http://canm6432009.wikispaces.com/Ivan+Tamez. It contains a set of

89
 CIW – User Interface Designer

images over a gradient background that clearly depict its red, white, and black
color scheme. A bit of text hints at its typographical direction, and a few widgets
at its interaction style.

Figure 2-
7: A mood board from Ivan Tamez

The mood board in figure 2-8 is from Dawnie Ngo,

at: http://spr2010canm643.wikispaces.com/Dawnie+Ngo. It uses the metaphor
of a cork bulletin board very effectively to present a vivid sense of where the
design is headed. Pinned to the board are photos of exotic travel locations and
objects, two complementary fonts on yellow sticky notes, a color scheme cleverly
arranged on a fan of paint swatches and a set of four screenshots of computer
user interfaces.

90
 CIW – User Interface Designer

Figure 2-
8: A mood board from Dawnie Ngo

The mood board in figure 2-9 is from Womo-emi Iyegh,

at: http://spr2010canm643.wikispaces.com/womo-emi+iyegha. It presents a
striking background color scheme of dark blues, grays and blacks, and
foreground swatch of lighter oranges, browns and blues. It shows a grillwork
texture, the company logo, and icons and fonts that will be used in the design.
Finally, it includes two photos of powerful men and two classy looking iPhone
app screens.

91
 CIW – User Interface Designer

Figure 2-
9: A mood board from Womo-emi Iyegh

Though more of a visual mind map, figure 2-10 from Miranda Reilly,
at http://daintystain.deviantart.com, could serve as an effective mood board for
a project. It has everything a good mood board needs: stylistic consistency, text,
typography (handwriting), a coherent sense of color scheme and a sense of
overall design direction. Noteworthy is that it is drawn and written by hand.
Though most mood boards use digital images and fonts, there is nothing
preventing you from hand-crafting your boards if you enjoy working that way.

92
 CIW – User Interface Designer

Figure 2-
10: A mood board from Miranda Reilly

How to create a mood board

Instructor Note: Impress upon students that most of the "How to" procedures in
this course are customizable, not etched in stone.
Here is an eight-step process for making a mood board. Follow it closely for your
first couple of mood boards. When you get familiar with the concept, use these
steps more as a guideline than a recipe.

1. Open a new document in Photoshop, Word, or any other program that

supports text and images. This document will serve as your mood board
canvas.

93
 CIW – User Interface Designer

2. Close your eyes and take a few minutes to envision the design you are
creating. (If you have a word list for the design, use it for inspiration.) Go
for broad strokes: color scheme, layout, typography, overall look and feel.

3. When you have a good vision of the design direction in which you are
headed, gather mood board elements that illustrate this direction, directly
or indirectly.

Go hunting! Browse through image galleries, Web sites, books and

magazines for images, colors, textures, UI widgets, and anything else that
expresses the look and feel of your design.

When you find something you like, copy/paste it to your canvas. Include
too much, rather than too little content. Think of it as "boardstorming." In
the next step, you will get a chance to whittle your mood board objects
down.

4. When you are done "boardstorming," go through the objects on your

canvas with a critical eye, and keep the best dozen or so.

Only keep those objects that serve the main goal of the mood board: To
depict the look and feel of your desired design direction. Take a "less is
more" approach. (Unless, of course, you are going for a very dense and
busy design.)

5. Add some text to the mood board. Keep it simple: the theme and a few of
the main words from your word list, the company name, etc.

Use font faces, sizes, and styles that illustrate the design. You need to be
sure that the typography harmonizes well with the other visual elements.

94
 CIW – User Interface Designer

6. If your mood board images and text do not clearly depict the color scheme
of the design, consider adding a color palette to the board.

If you have the skills, create the color palette in Photoshop or a similar
graphics program. If not, use the excellent online color-scheme creation
tool that the pros use: Adobe ColorCC at color.adobe.com/create/color-
wheel/.

7. When you have all the elements of a good mood board on your canvas —
images, color scheme, text, and typography — lay them all out.

Take care to make the layout illustrate your intended design: dense or
spacious, mechanical or handmade, tabular or freeform, etc.

8. Assess your work.

Show your mood board to some friends or colleagues and ask them to
describe the design direction it illustrates. Compare this with your intended
direction. If there is a consistent significant difference, consider reworking
your board to make it communicate the design more clearly.

Use a search engine to find a mood board you consider to be of

professional quality. Compare your mood board and the professional
board. If yours seems inferior, continue to work on it. To achieve
excellence you need to hold yourself and your work to high standards.
Mood board creation tips
Here are four useful tips for creating good mood boards:

95
 CIW – User Interface Designer

 Depict the mood clearly. A mood board should clearly convey the intended
mood for its audience: design team, clients and other stakeholders. Do not
assume that if you understand it, your audience will also. Work at
communicating your intentions clearly. Overstate rather than understate.
 Add the right text. Tap into the power of words. Used in moderation, and
with the right fonts (faces, sizes, styles), text can add a sense of drama,
tone, and meaning to a mood board.
 Spark an emotional response. Mood boards should express moods and
moods are built on emotions, so make sure your mood board appeals to
your audience's emotions, not just their intellect.
 Have fun and be creative! Making mood boards should be fun, a refreshing
break from the sometimes tedious everyday tasks of professional
designer. Mood boards can be beautiful and expressive, like works of art. If
creative challenges inspire you, try to create something worthy of being
posted in an online gallery.
In the following lab you will create a word list and a mood board; together these
will depict the intended look and feel of the site. Suppose you are the project
manager of a Web team tasked with redesigning the site of a nearby community
college. Your client, the president of the college, wants to get a sense of the
design direction you are headed in. But, she tells you, engineering specs do
nothing for her; she needs something more direct and visceral. No problem, you
say. Your team creates a word list consisting of a theme and 10 short phrases
describing the feel of your design direction, and a mood board that shows the
layout, imagery, typography, and color scheme.

Lab 2-6: Creating a word list and mood board for your company site
In this lab, you will create a word list and a mood board for the community college Web site
client described in the scenario above.

Instructor Note: Students may want to include these answers in their notebook started in
Lab 2-1.

1. Create a word list that reflects the look and feel of your site.

Using the word-list creation procedure presented in this lesson, brainstorm

96
 CIW – User Interface Designer

20 words (or short phrases) that describe, directly or indirectly, your

intended look/feel for the site. From these 20, choose the single best word
as the theme, then choose five other words to further develop this theme.

Instructor Note: Students need to do step 2 on a computer.

2. Create a mood board that depicts the visual direction of the site.

Use the mood-board creation procedure and include 10 images in your

board, a background color or gradient, the theme and five words from your
refined word list in typography (font faces, sizes, etc.) appropriate for the
site design. If the background color and images do not clearly show the
site color scheme, use Adobe ColorCC to make a five-color scheme and
paste a swatch into a corner of the board.

In this lab, you created a word list and mood board for your company Web
site.

Creating a Site Map

OBJECTIVE 2.13: Site map

A site map is a graphical representation of the structure of a Web site, how its
various pages are interconnected. The connection scheme is typically
hierarchical, with different levels of pages arranged in a tree-like structure.

The top-level site page, Home in this example (Figure 2-11), is connected to three
level-2 pages: Portfolio, Resume, and Contact.

97
 CIW – User Interface Designer

Figure 2-11: site map example

The level-2 page, Portfolio (Figure 2-12), is connected to two level-3 pages:
Current Projects and Completed Projects.

Figure 2-12: site map example

The level-3 page, Completed Projects (Figure 2-13), is connected to four level-4
pages: 2011, 2012, 2013, 2014.

98
 CIW – User Interface Designer

Figure 2-13: Level 4 site map example

And so on, for however many page levels exist. Simple sites usually have two to
five levels. Complex sites might go as high as five to ten levels. Single-page sites
have, by definition, just one level.

In the following lab you will create a site map to illustrate the hierarchical page
structure of a Web site. Suppose user testing of your client's Web site reveals
that people are having trouble locating information on the site. After a thorough
analysis, you conclude that the problem lies in the site structure; there are too
many levels of pages in the hierarchy. Key site content is often nested down six
or more clicks. You reorganize the site content to reduce the number of page
levels to four, thereby making all the site content much more easily accessible to
users.

Lab 2-7: Creating a site map for your company site

In this lab, you will create a site map that shows the hierarchical page structure of your
company site.

Instructor Note: Tell students that an effective site map is an organizational structure that
can be intuitively grasped by users, and which enables them to navigate the site easily.

99
 CIW – User Interface Designer

1. Organize your entire site content into a set of main categories.

Do not include more than six categories in your set. The more categories,
the more potentially confusing navigation will be for users. KISS!

There are three main content categories in the site map example above:
Portfolio, Resume and Contact.

2. List the individual pages to be included in each category.

First brainstorm, and then refine your page list. This allows you to have
more accuracy in identifying all the pages your completed site contain.

In the above example, the Portfolio category contains a total of six pages:
Current Projects, Completed Projects, 2011, 2012, 2013, and 2014.

3. Organize the pages into hierarchical levels within their respective

categories.

Instructor Note: Tell students that if they feel they need more than four
page levels, they should ask you for help limiting the levels to four. It really
is poor Web design to go above four levels, unless it is absolutely
unavoidable.

Limit the number of page levels to four, as in the example above. Any more
and users will have to drill down too many levels to get to the most deeply
nested information on the site. In general, the fewer clicks users need to
make to reach their target page, the better.

4. Hand draw a sketch of the site map. (Use a pencil with eraser!) Then use
the software tool of your choice to translate your sketch into a digital
version of the map.

100
 CIW – User Interface Designer

Note: You can make a site map using any program that lets you arrange
rectangles, text, and lines on a page: Microsoft Word, Photoshop,
Illustrator, even PowerPoint. Or you can use one of several tools that are
designed specifically for creating flow charts and similar block diagrams
(like site maps), such as: Visio, Inkscape, and Gliffy.

Place each page name in a rectangular box, as in the example above, and
use straight lines to indicate connections between pages.

Unless it is a key component of the navigation scheme of your site, do not

bother to draw lines between every page and every other page it connects
to. The site map would look like a lopsided spider Web if you did this! Only
show the major connections, from "parent to child" pages: Home to
Portfolio, Portfolio to Completed Projects, Completed Projects to 2011,
and so on.

5. Use the software tool of your choice to translate your sketch into a digital
map. Strive to create a visually clean and clear map. Make all the boxes the
same size, the text the same font face and size, draw nice straight lines
that connect to the middle of the boxes, arrange the boxes logically to
facilitate understanding of the page hierarchy at a glance, use a consistent
amount of spacing between elements, etc.
In this lab, you created a site map for your company site.

101
 CIW – User Interface Designer

Exercise 2-2: Web Design Tools and Techniques

Case Study: To Copy, or Not To Copy

Jasmine, a student at an art school, wants to have a portfolio site to showcase her
drawings online. Not to sell them, just to share them with the world, perhaps pick up some
fans in the process. Rather than try to build the site herself with her meager Web skills, or
pay a lot of money to have a professional developer build it, she finds an online

102
 CIW – User Interface Designer
photography portfolio she loves, downloads its code (HTML, CSS, and JavaScript), replaces
the photos with her drawings, changes a few things (layout, color scheme, typography) to
hide that she copied it, then publishes it to the Web as her portfolio.

Discuss this scenario and answer the following questions.

 Since Jasmine is a student and is not using the portfolio site for
commercial purposes, is it ethical for her to have copied and modified the
site and then presented it as her own
 Would citing the creator of the original site in fine print at the bottom of the
Home page make her actions more ethical? What if the citation were more
visible?
 Are Jasmine's actions harmful to the original site creator? Are her actions
illegal?
 If, two years later, Jasmine decided to go commercial and sell her
drawings from the site, would she be ethically bound to redesign it? Legally
bound? Would a partial redesign be enough, or would she have to redesign
the entire site from scratch?

Lesson Summary

Application project

The ethics of the World Wide Web is a complex subject. Though there exists no
definitive Handbook of Web Ethics, there are several documents that are held in
high esteem by Web professionals. Here are four of the most influential:

 RFC 1087 (https://tools.ietf.org/html/rfc1087)

 The Code of Fair Information Practices
(https://epic.org/privacy/consumer/code_fair_info.html)
 The Ten Commandments of Computer Ethics
(http://cpsr.org/issues/ethics/cei/)

103
 CIW – User Interface Designer

 The W3C Code of Ethics and Professional Conduct

(www.w3.org/Consortium/cepc/)
Study the ethical guidelines presented in each document. (Though some
guidelines do not address the Web directly, they can all be applied to Web
ethics.) Compile a list of what you consider to be the 10 strongest guidelines
from the four documents. Do not copy the guidelines verbatim; paraphrase them
in your own words. When you are done, give your list the title: My Web Ethics
Code.

Extra credit: For each of your 10 guidelines, provide real-world examples of the
guideline being followed and being violated. Look for dramatic violations; it is
more fun that way!
Skills review

In this lesson, you began by comparing two popular Web design methodologies:
bottom-up and agile design. You then learned how to create a Web site vision
statement and devise a strategy and tactics to realize this vision. You learned
how to create a site specification, publish a site, choose a site host, and secure a
site. You compared ethical and legal Web practices, and learned how to apply
mind mapping, metaphors, word lists, and mood boards to Web design. Finally,
you learned how to create a site map.

Now that you have completed this lesson, you should be able to:

 2.1 List steps in a basic Web design project's development process,

including bottom-up approach, Agile approach, vision, strategy,
specifications, mindmapping, site map, wireframe.
 2.2 Describe the Agile Web development approach, including streamlining
project workflow, eliminating bottlenecks, focusing on value, facilitating
changes in requirements.
 2.3 Define a project vision for a Web site or mobile app interface.
 2.4 Explain the user interface design process, from vision to strategy.
 2.5 Define the specifications for designing a Web site.

104
 CIW – User Interface Designer

 2.6 Discuss considerations for site publishing, including FTP uploads,

mobile apps, publishing tools.
 2.7 Describe various choices and challenges of site hosting, including
security, costs.
 2.8 Describe the security maintenance required for Web sites.
 2.9 List guidelines for ethical Web design, including comparing unethical
vs. illegal.
 2.10 Apply the mindmapping process to user interface design projects.
 2.11 Determine metaphors for a user interface design.
 2.12 Define the purpose of creating word lists and mood boards in relation
to the Web design process. Create a word list for your Web site using the
two-step process and mood board using the eight-step process.
 2.13 Create a site map for a fictitious business.

105
 CIW – User Interface Designer

Activity 2-1: Matching UI Topics

Optional Lab

Optional Lab 2-1: Using metaphors to make a site more usable

In this optional lab, you will use metaphors to increase the usability of the front page of the
New York Times.

106
 CIW – User Interface Designer

1. Browser: Go to the New York Times at www.nytimes.com. Study the front

page with a critical eye. Write down four changes that could be made to
increase the usability of the page, e.g., make it easier for users to get what
they need.

Answers will vary.

2. Now that you are in critiquing mode, a very important mode for designers
to cultivate, you will add metaphorical thinking to the process. Using the
Web design metaphor examples from earlier in this lesson, come up with
four metaphors that you could apply to the Times front page to make it
easier to use.

Answers will vary.

In this optional lab, you used metaphors to make the New York Times front page more
usable.
Glossary

cross-functional teams

Work teams composed of members with different skill sets, such as usability
experts, graphic designers, and programmers.
iterative process

A process that is repeated as many times as it takes to achieve a desired goal.

mind mapping

A diagram used to visually organize information.

107
 CIW – User Interface Designer

publishing a site

Publishing a Web site means uploading all of the site files to a Web server and
making these files accessible to the public on the Internet.
Web site architecture

The organization of the content of a Web site.

Lesson 3

User-Centered Web Design

Objectives
By the end of this lesson, you will be able to:

➥ 3.1 Explain the optimal relationship between Web users and site design, including
customers vs. contributors, attracting and retaining users, needs-driven design, and
scenario-based design.
➥ 3.2 Identify Participatory Design and its involvement with all stakeholders.
➥ 3.3 Explain Scenario-based design and when it is used.
➥ 3.4 Describe the importance of Cognitive Psychology in relation to Web Design.
➥ 3.5 Identify the terms "personas" and "usability" to understand your audience.
➥ 3.6 Explain use case and use case scenarios.
➥ 3.7 Describe the purpose and importance of site usability testing.
➥ 3.8 Given a scenario, determine how to improve site accessibility.
➥ 3.9 Explain how to improve site accessibility for mobile devices.

User-Centered Web Design

108
 CIW – User Interface Designer

OBJECTIVE 3.1: Web user-to-site relationship

User-Centered Web Design

Video transcript
Download

The Web Accessibility Initiative defines user-centered design (UCD) as an

approach to the design of an interactive system (Web site, app, game, etc.) that
has as its main goal the satisfaction of the users of that system. A satisfied Web
site user finds the site pleasing to the eye, benefits from its information or
services and can navigate it and find what he is looking for quickly and easily. In
short, he enjoys spending time at the site.

The UCD process focuses on user needs and behaviors, the environment in
which the system runs, the tasks that the system can accomplish and the user
workflow. It follows a set of explicit methods and techniques for analysis, design
and evaluation of mainstream hardware, software and user interfaces.

The two main benefits of using UCD to design a product are:

1. Reduced development time — Focusing on user needs throughout the

process, from the beginning, helps avoid missteps, detours and dead ends
that waste time and money.
2. Increased user satisfaction — Working closely with real-world users
increases the product's usability, the ease and effectiveness with which
the product can be used. This, in turn, increases user satisfaction and
sales.
UCD principles

Here are the three key UCD principles:

109
 CIW – User Interface Designer

1. User focus — UCD focuses on user satisfaction from the earliest stages of
the process all the way through to the end (product delivery). This means
understanding what users want, what they need (which is not necessarily
the same as what they want), and what tasks they will perform with the
product. Feedback from users is applied to refine requirements, design and
development.
2. Testing — Prototypes of the in-progress product are tested with users at
regular intervals: monthly, weekly, or even daily in some cases.
3. Iteration — UCD is an iterative process, meaning that its core cycle of three
activities is repeated over and over until the job is done: design →
prototype → test, design → prototype → test, design → prototype → test,
etc.
The UCD process

Because the UCD process is used to make such a large variety of products, there
are many variations. These three phases are common to virtually all UCD
variants:

1. Analysis

 Determine who will use the product and create personas.

 Determine the financial viability of the project and create a budget.
 Determine realistic time constraints and create a schedule.
2. Design

 Design the system architecture.

 Create wireframes and mockups.
 Create working prototypes.
3. Testing

110
 CIW – User Interface Designer

 Test prototypes with users.

 Iterate: design → prototype → test, design → prototype → test, etc.
Here is how these phases might be applied to a Web site design project:

1. Analysis

 Get a clear and accurate picture of the site audience and what they
will want from the site (information, services, pleasure, etc.), and
create one or more personas (representative users of your site).
 Create the Web site vision and a strategy for implementing it.
 Create a budget and a schedule of deliverables.
2. Design

 Determine the content of the site and the optimal organizational

structure.
 Create word lists and/or mood boards.
 Create wireframes of the site pages.
 Create mockups of the site pages. The mockup contains Web page
elements that are missing from the wireframe: color scheme, text,
images, widgets, etc. A high-fidelity mockup looks exactly like the
Web page it depicts, down to the last detail, as if it were a
screenshot of the actual page.
 Create prototypes that demonstrate how users will interact with the
site.
3. Testing

 Test real users by assigning them a set of tasks to perform on a

prototype.
 Evaluate the results: Look for trends, patterns, problem areas.

111
 CIW – User Interface Designer

 Based on these results, jump back to step 2 and repeat this iterative
process until the product is finished: design → prototype → test,
design → prototype → test, etc.
Attracting and retaining users

The ultimate goal of any design methodology is to create a product that attracts
and retains users. Attraction gets users to purchase the product. Retention gets
them to buy the next version and to expand the customer base by talking
positively to their friends and colleagues about both the product and the
company that created it.

Attracting users
Here are some tips from Brandon Line (2013) for attracting and retaining Web
site users:

 Provide valuable content. The best way to attract and retain users is to give
them things that are truly valuable to them. For information sites this is
knowledge. For music sites it is songs. For portfolio sites it is examples of
work. For social networking sites it is interpersonal connection. For blogs it
is regularly updated entries on topics of interest. For shopping sites it is a
catalog of goods and an easy way to buy them.
 Optimize the site. To build a large user base, you need to optimize your site
in three ways:

1. For search engines — Search engine optimization (SEO) enables

Google, Bing, and other search engines to find your site, index it and
display it as early as possible in the list of search results; this
encourages users to visit your site.
2. For social networking services — so that it is easy for users to share
your Web pages on Facebook, Twitter, etc., and to ensure that the
shared content is well presented: an appropriate title, summary,
image thumbnail, etc.

112
 CIW – User Interface Designer

3. For compatibility with all categories of browsers (desktops/laptops,

mobile devices, smart bands/watches, etc.), responsive design is the
best way to ensure this.
 Hand out freebies! People love getting free stuff on the Web. Not only can
these freebies be useful (work-related tools, free services), they also
satisfy our cravings for good deals and instant gratification.

Web users have grown quite savvy, however. Twenty years ago you could
entice a user into becoming a member of your site by letting them
download a primitive stick-figure game. You need to offer today's user
something much more substantial to grab their attention: a sophisticated
game, useful service, etc.
 Make social blogs. Blogs are good user attractors/retainers if they offer
regularly updated topics of value to the audience. A poorly tended blog, or
one that indulges in issues only of interest to the blogger, can do more
harm than good for a site.

Blogs can be even more of a user draw if they encourage social

interaction. Two ways to do this include:

1. Enable users to comment on blog entries, and, importantly, read user

comments regularly and respond to the ones that call for responses.
2. Allow guest bloggers to contribute articles. Remember, each guest
has his own circle of friends and colleagues, so by allowing a guest
to blog, you in effect open the door to many new site visitors.

Instructor Note: Make sure students understand that a brand needs

to be unique and not infringe on an existing brand, copyright, or
trademark. Ask them for examples of a unique brand, and one that is
too similar to another brand.

 Promote your brand. Branding is a key component of a successful

business strategy. Your first step is to establish a strong and unique brand.
Once you have done this, you need to promote your brand, get it out into

113
 CIW – User Interface Designer

the world. Here are a few ways you can make this happen:

Design a strong and catchy logo and include it on every Web page. Beware
of overstating your case with a large and obtrusive logo. Consider
displaying a large version of the logo on the home page and smaller
versions on other pages.

Use e-mail footers for branding by displaying your company name and URL
there.

Use your company car as a mobile branding billboard.

Tech Note
This is just the tip of the branding iceberg. For more on branding, see Lesson 4: User
Interface Design Principles.

Participatory design and scenario-based design

Let us take a look at two popular methodologies that take a user-centered

approach to design: participatory design and scenario-based design.

Participatory design
OBJECTIVE 3.2: Participatory Design
Participatory design is an approach to design in which users and other
stakeholders participate actively in the design process in order to ensure the
product's usability. Tatiana Nikolova-Houston
(2005, http://www.infotoday.com/cilmag/oct05/nikolova-houston.shtml )
suggests this participation can be limited to one or two phases of the design
process, or it can permeate the entire process by being present in every phase,
from inception to completion.

Tech Note

114
 CIW – User Interface Designer
Though participatory design focuses strongly on users — in that they play an active role in
the design process — it is not the same as user-centered design. Participatory design is
design by users; user-centered design is design for users.

The participatory design methodology was first used in Scandinavia in the 1970s
as a way to empower workers by involving them actively in the design of the
products they were developing. It gave the workers a sense of ownership in the
product design by drawing on their "tacit knowledge" — the implicit and often
unarticulated skills and knowledge they acquired through on-the-job training and
experience.

These days participatory design is used in a variety of fields, including software

design, graphic design, urban planning, architecture and sustainability. Its
popularity derives from its success in creating products and environments that
are tailored to practical and emotional needs of the audience (users, customers,
inhabitants of a city or building).

Participatory design is especially useful for projects in which designers lack

insider knowledge about how the product they are designing is used in real-world
situations. The participants act, in effect, as masters and the designers as
apprentices. When the designers have an intimate understanding of the product
from the users' perspective, they have a better chance of designing a usable
product.

How participatory design works

In terms of practice, participatory design employs a large repertoire of
techniques such as user interviews and scenarios, sketches and mockups,
collaborative prototyping, and focus groups. Typically the participatory design
process is divided into three phases (Figure 3-1):

Figure 3-1: A typical participatory design process

115
 CIW – User Interface Designer

 Discovery — During this first phase, the designer gets to know the
participants through user interviews and scenarios, and to learn what their
goals, values, and needs are, how they accomplish their work tasks, and
what materials they use to do so. It is only by knowing your participants
that you can properly interpret the contributions they make to the design
effort.
 Evaluation — In this stage, the participants explore and evaluate competitor
products (e.g. Web sites) and early sketches (wireframes, mockups) of the
product being designed. You should encourage them to be open and
honest in pointing out what they find to be the strengths and weaknesses
of the products they are evaluating.
 Prototyping — The third stage involves collaborative prototyping with
designers and participants. This is usually accomplished through
brainstorming sessions in which the participants suggest ideas, sketch
features, and envision future use and developments in the field.
Scenario-based design
OBJECTIVE 3.3: Scenario-based design
Scenario-based design is an approach to design that seeks to ensure a product's
usability by creating stories (scenarios) about how users will interact with the
product.

Tech Note
The power of scenario-based design comes largely from its tapping into the human love —
and need — for stories. We are storytellers and listeners by nature, it is how we make sense
of the world and impart meaning to it, both consciously (myths, folktales, movies) and
unconsciously (dreams, symbols, archetypes).

By leveraging the human tendency to think in stories, scenario-based design

tends to feel natural and right. This lowers resistance to the design process and
enables it to flow unimpeded. Scenario-based design is also compatible with
participatory design, in that scenarios (stories) can speak equally well to all
stakeholder groups.

Good scenarios are vivid and evocative, but unlike program code or formal
technical specs, stories tend to feel open-ended, like works in progress, subject

116
 CIW – User Interface Designer

to further development. Rather than being a weakness, this is a strength of

scenario-based design, in that it discourages designers from committing to
provisional solutions too quickly.

Scenarios make design ideas dynamic, set them in motion. They emphasize the
use of the design by real people, rather than its static form or appearance. This is
especially important for designing interactive products, such as Web sites or
mobile apps. It also keeps the design focused on users, which makes sense,
since scenario-based design is a user-centered methodology.

How scenario-based design works

Scenario-based design generally follows a three-phase process (Figure 3-2):

117
 CIW – User Interface Designer

Figure 3-
2: A typical scenario-based design process

 Analysis — In this first phase, problem scenarios are used to reveal aspects
of the users and their activities that will affect the design.

Tech Note

A problem scenario is a story about how a product is used. It is called "problem

scenario" because it describes activities in the problem domain: the area that needs
to be examined to solve a problem.

118
 CIW – User Interface Designer

Here is an example of a problem scenario:

Joseph, a sales representative who travels his region by car, is on his way to
Megalopolis City for a meeting with a new prospective client. Frugal by nature,
Joseph does not want to pay the exorbitant hourly rates commercial parking lots
charge, so he drives into town, threads up and down local streets looking for an
empty parking space, with no success. Finally he finds a cheap parking lot in a
rough neighborhood about a mile from his destination. He half walks, half runs to
his meeting, arrives late, sweaty and flustered, and ends up making an
unfavorable first impression on his prospective client.

 Design — Three types of scenarios are used in the design phase: activity
scenarios, information design scenarios, and interaction design scenarios.

Activity scenarios focus on the tasks users perform and the product
functionality required to allow the tasks to be performed. Here is an
example of an activity scenario:

When Joseph is 10 miles outside of Megalopolis City, he says aloud

"Launch Parking Space Finder app." The digital console launches the app
and says "Hello, Joseph. How can I help you?" Joseph says "Find me a
parking space for 2358 Kropotkin." The app says "One moment please."
The app plays a pleasant ticking sound for 20 seconds, then says "There is
a free space at 2211 Kropotkin Avenue. Should I reserve it for you?"
Joseph says "Yes." A moment later, the app says "Done. Would you like
directions to your space?" Joseph, who knows a shortcut that is not in the
app's mapping system says "No." Ten minutes later, he is parked, feeling
calm and fresh for his meeting just down the block.

Information design scenarios focus on the objects and actions needed to

complete user tasks.

119
 CIW – User Interface Designer

Objects for the Parking Space Finder activity scenario above would include:
the PSF app, voice-recognition hardware and software, digital car console.
Actions include: Joseph's voice commands launching the PSF app, stating
the goal (find a parking place) and location, responding (Yes) to the PSF
prompt "Should I reserve it for you?" and then responding (No) to the
prompt "Would you like directions?"

Interaction design scenarios focus on the UI functionality needed to

complete tasks.

For the PSF activity scenario, this would include: high-quality voice-
recognition (capable of interpreting voice commands correctly in a noisy
car in traffic) and the network infrastructure that enables PSF to access
information about the current parking situation and reserve an empty
space, etc.

 Prototyping and evaluation - The final phases, prototyping and evaluation,

are both driven by the usability specification. In Lesson 2, you learned
about a Web site specification: a detailed description of the key
considerations and components that go into the making of the site. A
usability specification is the same thing applied to usability: a
compendium of the key factors that determine a product's usability.

The components of a usability specification include:

 Usability goal
 Usability attribute
 Criteria to measure attainment
120
 CIW – User Interface Designer

 Users targeted by the specification

 Preconditions

Instructor Note: You will learn more about usability later in this lesson.

Here is an example of a usability specification:

 Usability goal: remotely find and reserve a parking space in a

specified location.
 Usability attribute: number and complexity of voice commands
required.
 Criteria to measure attainment: four or fewer voice commands, each
consisting of 10 or fewer commonly used English terms.
 Users the specification targets: people in cars with consoles who are
running the Parking Space Finder app.
 Preconditions: User is in a car with a digital console (or similar
device) running Parking Space Finder, user can successfully send
voice commands to PSF, location-based reservation system is
online.
In the following lab, you will create a few scenarios to guide the design of a Web
site. Suppose you are a member of a design team, and your project manager
decides that a scenario-based design approach will be used to build the new Web
site you are working to produce. You have been put in charge of creating the
design-driving scenarios. You can use the guidelines above to do so.

Lab 3-1: Creating scenarios for your company Web site

Instructor Note: Students may want to include these answers in their notebook started in
Lab 2-1.
In this lab, you will write four scenarios to guide the design of your company Web site. Base
your scenarios on the "How Scenario-Based Design Works" section above. Make sure to

121
 CIW – User Interface Designer
create vivid and evocative scenarios. (Less so for the interaction design scenario, which is
basically a statement of UI needs.).

1. Write a problem scenario for your Web site.

2. Write an activity scenario for your site.
3. Write an information design scenario for your site.
4. Write an interaction design scenario for your site.
5. Read through your four scenarios, in order. When taken as a whole, do the
scenarios provide a strong and consistent guideline for the analysis phase
(problem scenario) and design phase (activity, information design, and
interaction design scenarios) of the project? If not, fine-tune them.
In this lab, you created four scenarios to guide the design of your company Web site.

The Cognitive Psychology of Web Design

OBJECTIVE 3.4: Cognitive psychology of Web design

Cognitive psychology is the study of how humans acquire, process and store
information. It seeks to understand how we think, perceive, remember, learn,
solve problems, make decisions, etc. It is related to many other disciplines that
can be loosely grouped under the umbrella field of cognitive science, including
neuroscience, philosophy and linguistics.

There are many real-world applications for cognitive psychology according to

Kendra Cherry, such as improving memory, enhancing learning, and optimizing
problem solving and decision making. One of the areas in which cognitive
research has proven to be very valuable is user-interface design. Any self-
respecting UI professional needs to have a solid understanding of the psychology
of design to know what makes their users tick.
Key cognitive processes

Cognitive psychology focuses on four key processes: attention, memory,

perception and learning. Let us take a brief look at each of these processes.

122
 CIW – User Interface Designer

Attention
Attention is the process of noticing (attending to) something.

As you are reading this, there are many things going on: the sight of these letters,
the imagined sound of these words as you narrate them silently to yourself, the
actual sound of traffic outside, the feeling of your body pressing up against a
chair.

Which of these things do you attend to? Why? When you attend to one, do you
stop attending to the others, or can you attend to several things at once? These
are the kinds of questions cognitive research on attention explores.

Some key cognitive psychology findings about attention include:

 Attention is limited — we can only attend to so much information at one

time.
 Attention is selective — we can focus our attention on one specific thing.
 Attention is fundamental — it is not a learned skill, it is with us from birth.
Memory
Memory is the process of storing and recalling information.

Do you remember what you had for lunch yesterday? How about three days ago?
Are you good at memorizing passwords? Do you need to look up your own cell
phone number when someone asks you for it? Do you sometimes feel that a
memory is right there in your head, but you cannot access it?

Cognitive psychology favors the three-stage model of human memory:

1. Sensory memory — memory of information received by the senses, lasts

from a few milliseconds to a few seconds.

When you scan a page of text, you are using sensory memory to make
sense of what you see. Each item of text that you scan is retained in

123
 CIW – User Interface Designer

memory for a short time (~50-500 milliseconds, depending on how fast

you scan) and is then replaced with the next item.

2. Short-term memory — active memory of a small amount of information,

lasts up to about 30 seconds.

A good example of short-term memory usage is remembering a phone

number from the moment a friend says it aloud to the moment you dial it.

3. Long-term memory — archived memory of a small to large amount of

information, can last minutes, to years, to a lifetime.

Long-term memory is what enables you to remember your name for your
entire life. It also allows an actor to remember a Shakespeare monologue
word-for-word 20 years after she last performed the scene.

Tech Note

Short-term memory is often likened to computer RAM in that the information stored
in both is readily available and relatively short lasting. Long-term memory is likened
to a hard disk, because the information takes longer to access and is retained for a
longer time. These analogies can be useful for getting a feel for short- and long-term
memory, but should not be taken too literally. Human memory is much more
complex than computer memory.
Perception
Perception is the process of becoming aware of something through the five
senses: sight, sound, smell, touch and taste.

Becoming aware of something through the sense of sight is called visual

perception. Becoming aware through hearing is called auditory perception.
Through touching is haptic perception, smelling is olfactory perception, tasting is

124
 CIW – User Interface Designer

gustatory perception.

Three main cognitive features of perception are:

 Constancy — the ability to recognize the same object from different

viewpoints.
 Grouping — the tendency of humans to perceive organized patterns and
objects.
 Contrast effects — the experience of an object being affected by objects
around it.
Learning
Learning is the acquisition of knowledge and skills through experience or study.

There are many theories about how learning works. None is universally accepted
by the field of cognitive psychology, though most psychologists share the view
that learning is a dynamic process that unfolds gradually over time, and is driven
by the learner making connections between things that previously seemed
disconnected.

Here are a few commonly held cognitive principles of learning:

 Well-organized materials are easier to learn and remember.

 The way a topic is presented influences how easily people can learn it.
 Prior knowledge is key; to learn a new thing it must fit with what is already
known.
 Different individuals have different styles of learning: visual, auditory,
tactile, etc.
Why designers need to care about cognitive psychology

UI-design professional needs to have a solid understanding of the basic findings

of cognitive psychology.

Why?

125
 CIW – User Interface Designer

Because users are not machines or software applications, they are human
beings, and psychology is devoted to the study of the human mind. It is the field
best equipped to reveal what goes on in our brains (and bodies) to cause us to
think what we think, feel what we feel and do what we do.

The importance of designers having a good grasp of cognitive psychology might

seem self-evident. Unfortunately, that is not the case. More often than you might
think, designers forget that they are building things for real, live, imperfect,
unpredictable, emotionally complex human beings. Instead, they imagine that
they are designing for ideal beings, perfect users who will perform all tasks on
the designed device correctly, effortlessly, and enjoy themselves while doing so.

This is sometimes called Designer's Disease: the tendency for a designer to

assume (often unconsciously) that his users possess the same attitudes, style
and expertise that he does, resulting in a product that is simple to operate for the
designer, but difficult or even impossible to operate for the user. The cure for
Designer's Disease is to master the art of putting yourself in your user's shoes.
That is the focus of user-centered design.
Cognitive psychology principles for Web design

Here are 10 Web design principles that emerged from cognitive psychology
research of Susan Weinschenk (2010):

1. Users dislike having to think and work hard to get tasks done. The obvious
designer response to this is by keeping things simple and clear, you
minimize the thought and work needed to perform tasks.

Show only the most important information by default; enable users to see
more detail if they choose. Rather than just describing things, show real-
world examples. Use images and data visualizations frequently.

Make interactive page elements easy to spot. If an object is clickable,

make it look clickable. Only provide features that users really need. Let

126
 CIW – User Interface Designer

"less is more" be your guide. Provide usable defaults so users can get right
in and get stuff done.

2. Users have limitations. The human brain is not a computer; it can only
handle a modest level of complexity. Again, less is more.

Make text easy to scan, both visually and cognitively. Divide text into
blocks of related material to make it easier for users to process. Keep
headers short and interesting. Avoid long lines and long rambling
paragraphs. Use bulleted lists liberally.

3. Users make mistakes. Assume your site visitors will make mistakes, click
on the wrong buttons, and be unable to find something that you feel is
staring them right in the face. Anticipate common mistakes and include
functionality that enables users to recover gracefully. Make it easy to undo
actions.

If a task is long, complex and error-prone, divide it up into simpler sub-

tasks.

4. Memory is fragile. Memory degrades easily and quickly, resulting in lots of

inaccuracies and errors. It is also very limited: People can only typically
remember about 3-4 items at a time, which is not very much to work with.

For these reasons, you should regard your user's memory as a precious
commodity. Minimize the amount of information users need to remember
from one page or task to the next. Even better: enable users to get the job
done without having to remember anything at all.

127
 CIW – User Interface Designer

5. Users are social animals. An argument can be made that every

technological invention since the dawn of humankind has ultimately served
the goal of bringing people together. We are social animals, through and
through. As a designer, you need to understand this.

People look to other people for guidance on what they should think and do.
That is, they look for social validation. This explains why ratings and
reviews can have so much power in determining whether people accept or
reject something.

6. Users have selective attention. Understanding why users pay attention to

one thing and not to another is one of the keys to designing an engaging
user interface. You need to be able to grab and hold a user's attention as
long as it is necessary, and then to shift it seamlessly to the next point of
focus. You also need to avoid distracting the user with unimportant stimuli.

People are programmed to pay attention to anything that is different or

novel. To make something stand out, make it different: bright colors, big
fonts, bold images. Beware, however, users are easily distracted. To
discourage this from happening, use more pale colors, smaller fonts, less
flashy images.

7. Users crave information. Our craving for information is built right into the
name of our species: homo sapiens, the man who knows. Acquiring
information and knowledge — e.g. learning — is basically an addiction;
doing it releases pleasure-inducing neurochemicals in the brain. In effect,
we as a species are hooked from birth, driven to acquire knowledge.

People need feedback. The computer doesn't need to tell the human that it
is loading the file. The human needs to know what is going on.

128
 CIW – User Interface Designer

8. Users are driven by their unconscious mind. Most mental processing

occurs unconsciously. Understanding how this works can help you develop
techniques for attracting, satisfying and retaining users.

For example, if you can entice a user to make a modest commitment, e.g.
download a free version of your product, you will have a better chance of
getting them to make a larger commitment, for example upgrading to a
commercial version.
The unconscious mind is drawn to stories and images, especially of
people. This hunger for storytelling and imagery has a strong effect on
what people think and do.

9. Users rely on mental models. People create mental models of what things
mean and how they work. As a designer, you need to help your users
create accurate mental models. Otherwise, they will become confused and
get lost or make mistakes.

To do this, you can either conform your site to the user's default mental
model (discovered through user research), or you can get users to adopt a
different model. The former is usually easier to accomplish. If you choose
the latter, good metaphors can help users adopt a new mental model.

10. Users have imperfect vision. User interfaces rely to a huge extent on
the ability of their users to process visual information quickly and
accurately. We are, by nature, expert visualizers, able to detect an
astonishing amount of detail in visual objects.

Vision is also fallible and can quite easily fooled or confused, as anyone
who has seen an optical illusion can attest. It is subject to many types of
impairment, such as: cataracts, glaucoma, sight loss that cannot be
corrected with glasses, color blindness, and full blindness.

129
 CIW – User Interface Designer

To make a Web page more accessible to visually impaired readers, some

of whom might be using a screen reader: keep page layouts clear and
simple, use heading tags consistently (<h1>, <h2>, etc.), use proper
punctuation, include alternate text for all images (<img> tag alt attribute),
and run your pages through a good color blindness simulator like
Spectrum or SEE.
In the following lab, you will describe how several cognitive psychology principles
can be applied to the design of a Web site. Suppose you are asked by your design
team leader to present a document of design suggestions based on the cognitive
psychological needs and limitations of your target audience. You can use the 10
principles presented in the section above as a guide for getting this done.

Lab 3-2: Applying cognitive principles to your Web site design

In this lab, you will apply 10 cognitive psychology principles to the design of your Web site.
Refer to the "Cognitive psychology principles for Web Sites" section above for guidance.
Respond to each cognitive psychology principle below by addressing these three questions:

1. What does it mean in the context of your site?

2. How relevant is it to your site content and audience?
3. What techniques can you use to implement your response?
Instructor Note: Student answers will vary.
Write out your answers in a piece of paper

 Users dislike having to think and work hard to get tasks done.
 Users have limitations.
 Users make mistakes.
 Users have imperfect memories.
 Users are social animals.
 Users have selective attention.
 Users crave information.
 Users are driven by their unconscious mind.
 Users rely on mental models.

130
 CIW – User Interface Designer

 Users have imperfect vision.

In this lab, you applied 10 cognitive psychology principles to your Web site design.
Exercise 3-1: User-Centered Design

Personas and Usability

OBJECTIVE 3.5: Personas and usability

Usability is a measurement of how easily and effectively people can use a

product. In this course, that product is a user interface.

According to Jakob Nielsen (2012), a major figure in user-centered design

research, these six attributes can be used to measure a product's usability:

 Learnability: How easy (or hard) is it for users to perform basic tasks the
first time they use the product?

131
 CIW – User Interface Designer

 Efficiency: Once users have become proficient using the product, how
quickly can they perform tasks?
 Memorability: When users spend time away from the product and then
return to it, how easily can they regain proficiency using it?
 Errors: How often do users make errors interacting with the product, how
severe are these errors, and how easily can users recover from them?
 Satisfaction: How much do users enjoy the product?
 Utility: How well does the product do what users need it to do?
Usability is an extremely important issue for user-centered designers. A product
can be innovative, beautiful, powerful, etc., but if it has low usability, it will fail in
the marketplace, perhaps quickly, perhaps slowly ... but inevitably. This makes
sense, because sales are driven by giving people what they want: products that
enable them to perform certain tasks easily and effectively. Low-usability
products fail on both counts.

Tech Note
If you intend to be a Web designer, usability needs to be at the core of your design thinking.
It needs to be actively present at the earliest stages of the design process all the way
through to the very end. You need to make users the benefactors of your user-centered
design.

132
 CIW – User Interface Designer

Knowledge Check

Designing for your audience

Anytime you present something to an audience - an app, Web site or game - it is

crucial that you know what your audience wants. If you do not do the front-end
research to discover what your audience wants, you risk failing to satisfy that
audience. An unsatisfied audience means an unsatisfactory product, one that
fizzles and dies an early and potentially expensive death.

For this reason, one of the major requirements of user-centered design is to

identify your audience and what that audience wants. This can be challenging. To
do it effectively, you need to be one part researcher, one part analyst, and one

133
 CIW – User Interface Designer

part psychologist.

Tech Note
You need to identify your user audience early on in the design process. If you wait, you run
the risk of designing for imaginary users who do not actually exist. Ideally you should have a
good feeling for the needs of your audience right from the first brainstorming sessions.

Here are some useful tools and techniques, from Ken McArthur for identifying
your Web site audience:

 Start by asking the right questions. For example:

What are the demographics of your target audience: age, career, location,
income level, marital status, political leaning, etc.?
What are their personality traits, interests, passions, frustrations?
What do they want? What do they need? (These can be quite different.)
What do they like, what do they dislike?
What are their expectations? Their fears?
What experience do they have using similar products?
Who, in one concise sentence, is your ideal Web site user?
 Interview users. Use all available avenues of communication to get a sense
of what users want and need from your site. Interview users, colleagues,
friends, family members. Scour Facebook, Twitter and other social media
platforms to get a sense of what people are thinking, doing, and buying.
Ask your current Web site visitors to fill out a survey; offer them something
in return for their efforts, a discount or freebie. If you host a blog, solicit
comments and suggestions from readers.
 Research competitor sites. Identify your top 3-5 competitor Web sites and
find out as much as you can about their users.
 Use Web analytics tools. Web analytics tools collect, measure and analyze
Web site data for the purpose of optimizing Web usage. Google Analytics,
one of the most popular analytics services, provides a set of tools for
search engine optimization (SEO) and marketing analysis. It is available for

134
 CIW – User Interface Designer

free to anyone with a Google account. Many similar Web analytics tools
exist, including: Rankwatch, KISSmetrics, and ClickTale.
User personas

Once you have identified the Web site audience, you can use this knowledge to
create a powerful tool for satisfying your audience: a user persona.

Persona is generally defined as: a fictional, perceived personality; personal or

public representation of a role. It comes from the Latin, persona, meaning mask
or character.

The designer's definition of user persona is closely related: a single fictitious user
that represents the group of real-world users you are designing for. For example,
you might create a persona named Bob whose attributes mirror those of your
primary Web site visitors: early 20s, male, avid interest in first-person shooter
games, etc.

This mirroring can never be exact, since it maps one fictitious user (persona) to a
group of multiple real users (Web site visitors). But it can be close, enabling you
to design for a single user (Bob) while at the same time designing for a group of
users (early-20s male first-person shooter enthusiasts).

Tech Note
As we move forward through the lessons, user personas will be simply called personas, as
is often the practice in the design industry.

User personas
Video transcript
Download

Personas: how do they work?

135
 CIW – User Interface Designer

Most Web sites have multiple user populations. The largest is called the primary
user group, the next largest the secondary user group, followed by the tertiary
group.

For example, say you are designing a travel Web site to draw in a mix of young
professionals, middle agers with discretionary income, and retirees. To ensure
that each population is included in the design, you would create three personas,
one for each population. If the middle agers were the largest group, followed by
the retirees and then the young professionals, you would have these three
personas:

 Primary persona — middle agers with discretionary income

 Secondary persona — retirees
 Tertiary persona — young professionals

Tech Note

Expert user, intermediate user, and beginning user are often created as personas.
For example, the primary persona of your site might be intermediate users, the
secondary persona expert users, and the tertiary persona beginning users.

Here is an example of a written (text) persona:

Joseph is a 34-year-old salesman of wearable devices for athletes: smart bands,

shoes, shirts, etc. A big fan of digital technology since childhood, he has become
even more steeped in tech gadgets since he started this job four years ago. Since
his assigned sales region is reasonably close to his home, he works from his car,
equipped with voice recognition so he can talk on the phone and issue
commands to the in-car digital tablet without having to use his hands. Several of
his cities are overrun with parked cars during work hours, making it difficult to
find a parking space. This is an ongoing problem and source of great frustration
for Joseph. His current solution, which he finds unsatisfactory, is to drive up and
down streets looking for public or commercial parking spaces. Once in a while,

136
 CIW – User Interface Designer

he finds one quickly, but most of the time it can take from 10 minutes to a half
hour. Because he does not like being late for client meetings, he makes it a point
to arrive in a city a full hour early. This adds stress to his already busy work
schedule, especially for early morning meetings.

What does Joseph's persona teach us?

 He is an aficionado of digital technology, probably an early adopter of new

software and hardware devices.
 He is very frustrated with the difficulty he often has finding a parking space
in his sales cities.
 He is unsatisfied with his current solution of searching for an available
parking space near his meeting site.
 As a fan of digital technology, he would probably feel comfortable using an
app to find a parking space.
There is a lot of useful information in the written Joseph persona, but it is
presented in a form that is difficult to process: a single long paragraph. One way
to make it easier to process is to break it up into two or three shorter paragraphs:

Joseph is a 34-year-old salesman of wearable devices for athletes: smart bands,

shoes, shirts, etc. A big fan of digital technology since childhood, he has become
even more steeped in tech gadgets since he started this job four years ago.

Since his assigned sales region is reasonably close to his home, he works from
his car, equipped with voice recognition so he can talk on the phone and issue
commands to the in-car digital tablet without having to use his hands. Several of
his cities are overrun with parked cars during work hours, making it difficult to
find a parking space. This is an ongoing problem and source of great frustration
for Joseph.

His current solution, which he finds unsatisfactory, is to drive up and down

streets looking for public or commercial parking spaces. Once in a while he finds
one quickly, but most of the time it can take from 10 minutes to a half hour.
Because he does not like being late for client meetings, he makes it a point to

137
 CIW – User Interface Designer

arrive in a city a full hour early. This adds stress to his already busy work
schedule, especially for early morning meetings

Another way is to reformat it as a bulleted list:

 Joseph
 34-year-old salesman of wearable devices for athletes
 A big fan of digital technology since childhood
 Works assigned sales region from his car
 Finding a parking space in a city is a source of frustration
 His current (unsatisfactory) solution is to drive around looking for parking
spaces
 Does not like being late for client meetings
 Finds getting to appointments an hour early is time consuming and
stressful
An even better solution is something like this (Figure 3-3):

138
 CIW – User Interface Designer

Figure 3-3: A simple primary persona

There are several advantages to presenting a persona in a form like the one
above. Fitting it on a single compact page makes it easy to process visually and
available in its entirety at a glance. Displaying the attributes in big, bold type and
arranging them in bulleted lists makes them easy to process cognitively.
Including a picture of Joseph makes the persona feel more real. This, in turn,
encourages designers to care more about making a great product for Joseph,
and by association, for all the users the Joseph persona represents.

Benefits of personas
Here are a few of the key benefits of designing with personas:

 You can design for one or a few personas to meet the needs of many
actual users.

139
 CIW – User Interface Designer

 A vivid persona can inspire designers to care more about product usability.
 Researching and creating personas helps heal Designer's Disease by
getting you to see things from the perspective of your users.
 Personas help designers avoid the trap of building what users ask for
rather than what they actually need.
 Disagreements among team members over design decisions can be
resolved by referring back to the personas.
 Design efforts can be prioritized based on persona levels: primary,
secondary, tertiary.

Lab 3-3: Creating a persona for your Web site design

In this lab, you will create personas for your Web site. Refer to the "User Personas" section
above for guidance. Write out your response to each step of the lab exercise Follow these
steps to create a set of personas

1. Based on the information you gathered when researching your target

audience, identify a primary persona to guide the design process.
2. If there is sizeable user population that is not covered by the primary
persona, assign it to a secondary persona.
3. If there is a sizeable user population not covered by the primary and
secondary personas, assign it to a tertiary persona.
To keep the design process from becoming overly complex, do not create
more than three personas, unless it is absolutely necessary for the project.
4. Create the personas. Include, on a single (clearly formatted) page:
Persona name, tagline, and photo
Relevant demographic information: age, income, education, etc.
Relevant work environment: jobs, skills, experience, etc.
Relevant personal information: career/life goals, attitudes, likes/dislikes,
etc.
In this lab, you created set of personas for your Web site. You will get a chance to create
some additional personas in upcoming labs in this lesson.
Use cases and use case scenarios

140
 CIW – User Interface Designer

OBJECTIVE 3.6: Use cases and use case scenarios

In order to design an interactive product with high usability, you need to

understand how its users perform the various tasks that the product affords. In
the case of a Web site UI, you need to understand how visitors navigate the site,
use its widgets, interact with its menus, etc.

In this section you will learn about two related tools that can help you accomplish
this: use cases and use case scenarios.

Use cases
A use case is a representation of how one or more "actors" use a system to
accomplish a goal. The actor is usually a human, but it can also be a software
program, server, etc. The goal is the desired end-state of a task. The system is
the application or service that enables the actor to achieve that goal.

Here are some examples of use cases:

 An employee arranges a meeting.

 The goal is to arrange a meeting, the actor is an employee, and the system
is a meeting-arrangement application or service.
 A technical writer reformats a document.
 The goal is to reformat a document, the actor is a tech writer, and the
system is the word-processing application he is using.
 Two gamers battle for possession of a castle.
 The goal is to possess the castle, the actors are two gamers, and the
system is the video game they are playing.

Use case documents and diagrams

A use case can be presented in two ways: as a text document and as a diagram.
Let us take a look at each of these.

Use case documents

A use case document provides a clear and succinct textual description of a use
case. There is no one correct way to write a use case document. Each design

141
 CIW – User Interface Designer

team has its own unique take on what it should contain. Here are some common
elements of most use case documents:

 Name — presented as Actor-verb-goal: Student registers for courses

 Goal — task to be accomplished (job to be performed)
 Description — brief description of use case
 Actor(s) — primary (and, optionally, secondary) actor(s)
 Preconditions — state of the system before the use case
 Main Success Scenario — what the actor needs to do to meet the goal
 Extensions — use cases that extend the base use case
 Post conditions — state of the system after the goal is met
Table 3-1 is an example of a use case document in which a student registers for
courses:

Use Case Name Student Registers for Courses

Goal Register for courses.

Description Student accesses the registration system, views the available courses, selects the
desired courses, and registers for them.

Actors Student, Course registration system

Preconditions Student is logged into registration system.

Main Success 1. Student selects "Register New Courses" from the menu.
Scenario 2. System displays list of courses available for registering.
3. Student selects one or more courses he/she wants to register for.
4. Student clicks "Submit" button.
5. System registers student for the selected courses and displays a confirmation
message.

Extensions 2a. No courses are available for this student.

System displays error message saying no courses are available and provides the
reason and how to rectify, if possible.

142
 CIW – User Interface Designer

5a. Some courses could not be registered.

System displays message showing which courses were registered, and which courses
were not registered, along with a reason for each failure.

Post conditions Student is registered for the selected courses.

Table 3-1: Use case document for student registering for courses

Use case diagrams

A use case diagram provides an at-a-glance visual overview of a use case. It is
usually meant to supplement the use case document. You can think of the
document as the detailed specification of the use case and the diagram as a
map of the document.

Figure 3-4 shows a use case diagram for the student registration use case
document above:

143
 CIW – User Interface Designer

Figure 3-4: Use case

diagram for student course registration

The actors (student and course registration software) are displayed as sketches
or stick figures. Non-human actors are sometimes also displayed as figures, (as
in this example), and sometimes as icons depicting the actor (the course
registration software program).

The system (course registration) is displayed as a dashed box with its system
name on top.

The actions, all of which are contained within the system box, are displayed as
short command statements — Do this. This does that. — enclosed in an ellipses

144
 CIW – User Interface Designer

shape.

Agency is displayed as solid lines from actors to their actions.

Extensions are displayed as dashed lines with arrowheads pointing to the base
case being extended. The text <<Extend>> or <<extend>> should appear next to
the extension line.
Use case scenarios

As you know from the scenario-based design material earlier in this lesson, a
scenario is a story that illustrates some aspect of the design. A use case is an
abstract representation of how an actor can use a system to accomplish a goal.
A use case scenario is a concrete version of a use case: a story of how one
specific actor uses a system to accomplish (or fail to accomplish) the goal. In
other words, it is a unique path through the use case.

Tech Note
The scenario included in a text use case document (see above) is called the main success
scenario because it is one unique (successful) path through the use case. There are many
other paths through the use case, both successful and unsuccessful.

A scenario can be like a recipe, a set of steps to be performed exactly as written,

or it can be developed out into a compelling fictitious story. In the student
registration use case document example, the main success scenario is recipe-
like: a set of five steps, with no frills, no developed story.

1. Student selects "Register New Courses" from the menu.

2. System displays list of courses available for registering.
3. Student selects one or more courses he/she wants to register for.
4. Student clicks "Submit" button.

145
 CIW – User Interface Designer

5. System registers student for the selected courses and displays a

confirmation message.
This scenario supplies the facts, but none of the compelling real-world details of
a specific (fictitious) student actually going through the process of registering,
perhaps smoothly, perhaps stumbling along the way.

To write a compelling scenario for this case, use the 5 Ws (who, what, why,
where, when) and add an H (how):

 Who is the user (persona)?

Bartholomew, a second-year graphics design student at City College.
 What is the task the user is performing?
Register for the courses he wants to take next semester.
 Why is the user performing this task?
To advance his progress towards a BA degree.
 Where is the user performing this task?
In his dorm room.
 When is the user performing this task?
6 am on May 1st.
 How does the user perform the task?
He goes to the online registration page, selects "Register New Courses,"
and so on.
Here is a more developed and compelling rewrite of the main success scenario
that tells the who, what, why, when, where, and how:

Bartholomew, a second-year graphics design student at City College, wakes up in

his dorm room at 6 a.m. on May 1 to register for the courses he wants to take
next semester. He flips open his laptop, goes to the online Registration page, and
selects "Register New Courses" from the menu. Up pops a long list of available
courses. Bart scrolls down through the list, selects his top four courses then
clicks on the "Submit" button. After a long suspenseful minute - during which an
animated "In Progress" bar indicates that the registration system is processing
his course requests - a confirmation popup appears telling Bart that he is

146
 CIW – User Interface Designer

successfully registered for all four courses. Deeply satisfied, Bart climbs back
under the covers and sleeps through his first two classes of the day.

Tech Note
If you write a story-like scenario like the one above, keep it light and engaging. Humor can
help, as long as it is tasteful and unforced. Include specific details — actor name (or
nickname), situation, (fictitious) product names, etc. — to make the scenario feel real, rather
than abstract.

Here are some of the key benefits of use case scenarios:

 Enables designers to learn how different users accomplish the same goal.
 Helps designers optimize the usability of a product across its entire user
base.
 Can be mapped to product features and functions.
This is particularly true for recipe-like use case scenarios, such as the main
success scenario. You can create a table and map each scenario step to a
product feature as in Table 3-2:

Scenario step Product feature

Student selects one or more courses to register for. Multiple selection widget

Student clicks "Submit" button. Submit button

 Table 3-2: Mapping scenario steps to product features

147
 CIW – User Interface Designer

 Helps non-expert stakeholders (managers, prospective users) get a sense

of how a product works.
This is particularly true for story-like use case scenarios, with realistic (but
fictitious) users applying the product to do realistic tasks.
Usability testing

OBJECTIVE 3.7: Site usability testing

Usability testing is a set of techniques for evaluating the usability of a Web site
design from the perspective of real-world users. It seeks to answer questions
such as:

 What things do users feel work well on the site and what works not so
well?
 How do users actually interact with the site?
 Remember: To build a usable product, designers need to be able to step
into their users' shoes, see things from their perspective.
Do users have any confusion about the content of the site, or any trouble
interacting with it?

 Do users like the site, dislike it, feel neutral about it?
 Do not underestimate the power of emotion in determining a product's
usability. Liking a product (its look, feel, the status associated with it) helps
increase its usability, because people are more forgiving of the flaws of
something they like than something they dislike.
Why bother to usability test a design? It is a valid question, because testing
interrupts the design flow, and can be an expensive and somewhat tedious
activity.

The answer: Because if you don't test, you run the risk of building a product that
contains major usability flaws. In other words, you produce a product users hate,
or even worse, one that prevents users from doing the tasks they need to get
done.

148
 CIW – User Interface Designer

The cost of correcting major design miscalculations like this after the fact can be
huge, up to 100 times more than if you caught the mistakes early on in the
process!

Tech Note
Due to Designer's Disease, designers should not be trusted to "intuit" with 100% accuracy
what users want and need. They might hit the mark, they might miss it by a mile. You
cannot base a project design on such ambiguity! Instead, you need to do a healthy amount
of usability testing with real-world users, analyze the results and draw design-guiding
conclusions from those results.

Usability testing procedure

Every design team has its own unique style of usability testing. These seven
steps are common to most usability testing procedures:

1. Plan and prepare.

a. Decide what you want to learn from the test and recruit the right test
subjects to enable this to happen.
b. Design and assemble the testing materials: scripts, equipment,
cameras, etc.
c. Run a pilot test, and based on the results, fix whatever needs fixing.
2. Run the test.
a. Welcome the subject and get pre-test information: name, age,
occupation, etc.
b. Talk the subject through the test, provide a context, goals, etc.
c. Tell the subject, verbally or in written form, the tasks she should
perform.
d. Stay nearby while the subject does the tasks in case she has
questions or comments.

149
 CIW – User Interface Designer

Very important: Resist helping the test subject, unless she is clearly
lost and needs guidance. Think of yourself as an anthropologist
observing the behavior of a subject without intruding. Be invisible
unless your presence is needed.
3. Collect the data.
There are two types of data that need to be collected during a usability
test: quantitative and qualitative.

Quantitative data includes measurable things like the time (seconds or

minutes) it takes to complete a task, the number of clicks, pages, menus,
levels, the error count, and so on. Qualitative data consists of what the
subject says, how she behaves, her emotional affect, body language, facial
expressions, etc.
Be on the lookout for critical incidents, both positive (Aha! moments of
understanding) and negative (confusion, freezes, crashes). Critical
incidents often provide solid insight into the usability (or lack) of a product.
4. Analyze the data.
There are many ways to analyze the data generated by a usability test.
Quantitative data calls for mathematical calculation: sums, averages,
deviations, statistical models. Qualitative data is usually analyzed more
from a cognitive psychology angle.

In both cases, the analyst should look for patterns: numeric for quantitative
data, behavioral or emotional for qualitative. Patterns indicate general
tendencies and apply to an individual subject (a pattern of not knowing
where to click, for example) and to a group of subjects (not understanding
the overall structure of a site).
5. Draw conclusions.
Assess the scope and severity of the problems revealed in testing.

The problem scope can be local or global. A local problem is limited to a

relatively small area: one page, one screen, one form, etc. A global problem
affects a larger area or multiple areas: several pages, all videos, the entire
site.

150
 CIW – User Interface Designer

The problem severity can be from minor to critical. Minor problems might
annoy subjects or confuse them for a moment, but they do not prevent
subjects from performing the tested tasks. Major problems are more
extreme, and will sometimes cause subjects to give up. Critical problems
are so severe that they cause the entire test to crash.

Once all problems revealed in the test are known, you need to prioritize
them. Critical problems need to be fixed first, major problems next, minor
problems last.
6. Document the results.
The results of a usability test are presented in a usability test report. There
are many different formats used for this report. A search in Bing or Google
will identify dozens of usability test report templates, each with its own
spin on how best to capture the outcomes of testing. Typical usability test
reports include the following components:

 Test goals
 Test subjects' demographics (name, age, job, etc.)
 Test methodology
 Test scenarios and tasks
 Test results
 Conclusions drawn from these results

Whatever format you decide to use for your usability test reports, make
sure it serves the main goal of such a report: To present in a clear and
concise way the results of the test. Treat the report like any other designed
product: Maximize its usability for its audience, which is in this case, the
members of the project team and any other stakeholders involved in the
production process.

7. Redesign, based on the results.

Without this final step, usability testing would be a waste of time and
money.

151
 CIW – User Interface Designer

When to do usability testing

You now understand why usability testing is such an indispensable requirement
for good design. The question is: When should you do it? The answer: From the
beginning of the design process all the way through to the end. In other words:
It is always the right time to do usability testing.
Usability testing is used from the earliest brainstormed ideas, through the rough
specs and sketches, to the refined mockups and prototypes that simulate the
actual user interface very accurately.

This does not mean that you should usability test the Web site you are designing
every day. That would be a huge and time-consuming effort, and one that risks
derailing the forward momentum of the design process. A better approach is to
test every time you add a major new feature to the site or change an existing one:
an improved navigation system, different way of managing user accounts, etc. As
a failsafe, make it a rule to usability test at least once every 1-2 weeks, whether
or not you have added or changed features during that period of time.

Testing that is done during product development is called formative testing. It is

used to assess the usability of the in-progress product and the effectiveness of
the current design direction.

Testing that is done after the product is finished is called summative testing. It is
used to assess the usability of the final product and see how well it compares to
similar competitor products.

In the following lab, you will create personas, use cases, and use case scenarios
for a Web site. Suppose your design team needs to get a clear picture of the
target audience of an e-commerce site you have been tasked to build. After
extensive research and several user interviews, you decide to create three user
personas, six use cases (written documents and diagrams), and two scenarios
for each use case. You can use the material above as a guide for this exercise.

Lab 3-4: Creating personas, use cases, and use case scenarios
Instructor Note: Students need to use computers to do this lab. Plan on them taking at least
an hour to finish. To reduce the time, have them do one, instead of two, of each item, but
beware: Designing for just one persona is risky; two is safer.

In this lab, you will create two personas, two use case documents, two use case diagrams,
and two use case scenarios for your Web site. Refer to the "User Personas" and "Use Cases
and Use Case Scenarios" sections above for guidance. Write out your answers to each step

152
 CIW – User Interface Designer
of the exercise.

1. Create two user personas for your Web site: a primary and a secondary
persona. For each, include on a nicely laid-out and formatted single page:

 Persona name, tagline, and photo

 Relevant demographic information: age, income, education, etc.
 Relevant work environment: jobs, skills, experience, etc.
 Relevant personal information: career/life goals, attitudes,
likes/dislikes, etc.

2. Choose two critical tasks from your Web site: tasks that users need to
perform frequently and that must work as stated. For example, registering
to become a member of the site, or navigating to the free download page.

Create a use case document for each task. Include in each: the use case
name, goal, description, actor(s), preconditions, main success scenario,
extensions, and post conditions.

3. Create a use case diagram for each use case. Include in each: actor(s),
system, actions, agency, and extensions. (Tip: Think of the diagrams as
maps for the use case documents.)

4. Create a use case scenario for each use case. Include in each: who, what,
why, where, when, and how. (Tip: Develop out the main success scenarios
from your use case documents.)
In this lab, you created two personas, use case documents and diagrams, and use case
scenarios for your Web site.

153
 CIW – User Interface Designer

Accessibility

OBJECTIVE 3.8: Site accessibility improvement

Web accessibility is the degree to which both abled and disabled people can
successfully interact with a site.

The more accessible a site, the more effectively users with physical or cognitive
disabilities can access its content and functionality. A universally accessible Web
site is one that offers equal — or equivalent — usability for all users. (See below
for a discussion of universal design.) The "or equivalent" stipulation is important,
because some functions cannot be translated directly from abled to disabled
users.
Why Web designers should care about accessibility

Most Web designers understand the benefits of optimizing their sites for
accessibility, some still think of it as a waste of time and money. As an emerging
Web professional of the 21st century, Laura Kalbag (2013) says you should be in
the first group, a champion of accessible design. If not, you will likely face
criticism from the consumer community, which could reduce your sales and
harm your reputation. Designing for accessibility is an act of social conscience,
and our contemporary world needs as much social consciences as it can get!

Here are some common misconceptions about accessibility and explanations of

what makes them wrong:

 Misconception: Disabled people do not use the Web.

Reality: The majority of disabled people do use the Web.

According to the Office for National Statistics as cited by Rust (2015), 73%
of disabled adults in the UK have used the Internet. This, according to the
English Federation of Disability Sport, translates to nearly seven million

154
 CIW – User Interface Designer

people. Clearly the myth of disabled people not using the Web is just that:
a myth.

 Misconception: Making a Web site accessible for disabled users degrades

the experience for abled users.
Reality: Accessibility can improve a site for all users.

When done correctly, optimizing a site for the disabled can also optimize it
for the abled. For example, optimizing a site for the visually impaired can
improve its visual accessibility for both disabled and abled users. Likewise,
optimizing it for the cognitively impaired can make it more cognitively
accessible for all users.

 Misconception: Making accessible Web sites costs companies substantial

money.
Reality: Accessible sites make money.

As mentioned above, close to seven million disabled people in the UK have

used the Web. By ignoring accessibility, you are effectively shutting out this
sizeable portion of your potential market. So, yes, making accessible Web
sites can cost a bit more money, but the increase in customers can offset
the extra development costs and result in boosting overall profit.

 Misconception: Accessible Web sites are ugly.

Reality: Accessibility sites can be beautiful.

Yes, some accessible sites prioritize functionality so much over

appearance that they end up looking plain and dull. The same can be said
for some inaccessible sites. Accessibility is not synonymous with ugliness!
For example, Apple's site (www.apple.com) is highly accessible, yet most

155
 CIW – User Interface Designer

would agree that it is elegant and quite beautiful (Figure 3-5).

Figure 3-5: The iPad page from the Apple Web site (www.apple.com/ipad)
Universal design

Universal design is a design philosophy with the goal of creating products and
environments that can be "accessed, understood, and used to the greatest extent
possible by all people regardless of their age, size, ability or disability." Its Web
site, which is well worth a visit, is at http://universaldesign.ie.

In the late 1990s, a group of designers, architects, researchers, and engineers

created a compendium of best practices they named The Seven Principles of
Universal Design. Intended as a framework for all types of projects, these seven
principles can serve as an excellent guideline for helping you optimize the
accessibility of your Web sites.

Here are the seven principles, with suggestions for how to apply them to Web
design, provided by the National Disability Authority:

156
 CIW – User Interface Designer

Principle 1: Equitable use

The design is useful and marketable to people with diverse abilities.
Provide the same, or equivalent, methods for all users to interact with the site.
Make all users feel equally welcome on the site.
Provide equal security and privacy for all users.
Make the site design appealing to all users.

Principle 2: Flexibility in use

The design accommodates a wide range of individual preferences and abilities.
Give users choices for how to perform site tasks.
If precise physical actions are required, help users achieve them.
Accommodate users with different reading and visual processing speeds.

Principle 3: Simple and intuitive use

Use of the design is easy to understand, regardless of the user's experience,
knowledge, language skills, or current concentration level.
Keep it simple!
Be consistent across all aspects of the site: content, design, interaction, etc.
Support users with varying degrees of literacy and cognitive ability.
Give users clear and prompt feedback during and after task completion.

Principle 4: Perceptible information

The design communicates necessary information effectively to the user,
regardless of ambient conditions or the user's sensory abilities.
Present key content in redundant media: images and text and sound, for
example.
Ensure that every text item on the site is clearly legible.
Use contrast to visually differentiate dissimilar page elements.
Support techniques and devices used by people with sensory limitations.

Principle 5: Tolerance for error

The design minimizes hazards and the adverse consequences of accidental or
unintended actions.
Remove or shield site elements that could cause harm to users and computers.
Give clear and timely warnings of possible hazards.
Provide fail-safe features that eliminate the possibility of harm from user errors.
Help users stay alert for tasks that require concentration.

157
 CIW – User Interface Designer

Principle 6: Low physical effort

The design can be used efficiently and comfortably and with a minimum of
fatigue.
Enable users to perform tasks from a comfortable body position.
Minimize the neuromuscular stress required to perform tasks, such as mouse
drags.
Minimize the need for users to perform repetitive actions, such as mouse clicks.

Principle 7: Size and space for approach and use

Appropriate size and space is provided for approach, reach, manipulation, and
use regardless of user's body size, posture, or mobility.
Give users with postural limitations a clear line of sight to all page elements.
Minimize the distance users need to move the mouse to reach target elements.
Minimize the mouse drags and clicks required to perform tasks.
Optimizing accessibility for mobile devices

OBJECTIVE 3.9: Mobile device accessibility

Using mobile devices can be especially challenging for disabled people. Smaller
screens means smaller text, images, controls, etc. Smaller physical size means
smaller cases, buttons, and keyboards. Because of the huge (and ever growing)
mobile user population, designers cannot afford to make accessible sites for full-
sized browsers and ignore accessibility on mobile devices.

Here are the World Wide Web Consortium's (W3C) guidelines, grouped into three
categories — visibility, operability, and understandability — for optimizing site
accessibility for mobile devices:

 Visibility

 Minimize the amount of displayed information by providing a

dedicated mobile version or a responsive design of the site that is
optimized for a small screen. Make text large enough to be legible
without having to zoom in to enlarge the screen.

158
 CIW – User Interface Designer

 Provide a virtual magnifying glass that enlarges the selected screen

area.
 Provide adequate contrast to make onscreen content visible in
bright environments.
 Operability

 Support the use of external physical keyboards or alternative on-

screen keyboards.
 Ensure that touch targets are of adequate size (at least 9x9 mm) and
that there is a small amount of inactive space (at least 2 mm)
between targets.
 Provide workarounds that enable users to execute gestures (swipes,
pinches, etc.) with commands from an onscreen menu.
 Provide workarounds for actions triggered by physically
manipulating the device (shaking or tilting).
 Place buttons where they are easy to access from different
positions.
 Understandability

 Support both portrait and landscape screen orientation to provide for

people who cannot change the position of their device.
 Present site components consistently: layout, typography, color
scheme, etc.
 Keep critical information above the fold to minimize the need for
scrolling.
 Group similar page elements together to help lighten the user's
cognitive load.
 Clearly indicate which page elements users can interact with.
Techniques for doing this include: using conventional actionable
objects (buttons, checkboxes, burger icons, back arrows, etc.), using

159
 CIW – User Interface Designer

color to distinguish actionable elements from the page background,

using underlining for linked text, and so on.

In the following lab, you will brainstorm ideas for how to optimize the
accessibility of a Web site viewed on different mobile devices. Suppose a
client hires you to redesign their smart phone app to make it equally (or
equivalently) accessible to both their disabled and abled users. You can
use the information presented above to get the job done.

Lab 3-5: Optimizing the accessibility of the mobile version of

your site

In this lab, you will provide ideas for how to optimize the accessibility of your Web
site as viewed on different mobile devices.

6. Using the material in "Optimizing Accessibility for Mobile Devices"

(above) as a guide, write three things you could do to optimize the visibility
of the smart phone version of your site.
7. Write three things you could do to optimize the operability of the
smart watch version of your site. (If you are not familiar with the look
and feel of a smart watch, do not guess; spend a few minutes
researching it.)
8. Write three things you could do to optimize the understandability of
the tablet version of your site.

In this lab, you presented some ideas for how to optimize the accessibility of
different mobile versions of your site.
Exercise 3-2: Usability and Testing

Fill in the blanks by typing the appropriate terms.

Here, this type of question contains the select box, text box, and drag and drop boxes. The
shortcut keys to perform this task are. Press the Alt+down arrow key to activate the target. Press
the arrow key to navigate through all the items. If the selected item is a text box or a select box,
it will automatically get focused. If you want to drop the item in the droppable field, navigate to
any of the draggable using the Tab key, and press the Enter key to copy the draggable, Now,

160
 CIW – User Interface Designer
navigate to any of the droppable field and press the Enter key to drop the copied item. If you
want to remove the item from the droppable field, navigate to the droppable field and press the
Delete key for Windows and the Fn+Delete key to remove the item.

1. A

is a fictional, perceived personality; personal or public representation of a role.

2. Most Web sites have

user populations.
3. You need to understand how visitors navigate the site, use its widgets, and

with its menus.

4. A use case diagram provides an at-a-glance

overview of a use case.

5. A use case

is a concrete version of a use case: a story of how one specific actor uses a
system to accomplish (or fail to accomplish) the goal.
6.

testing is a set of techniques for evaluating the usability of a Web site design
from the perspective of real-world users.
7. You should be a champion of

design. If not, you will likely face criticism from the consumer community, which
could reduce your sales and harm your reputation.
8.

Design is a design philosophy with the goal of creating products and

environments that can be "accessed, understood, and used to the greatest extent
possible by all people regardless of their age, size, ability or disability."
*Matching is not case sensitive.

161
 CIW – User Interface Designer

Case Study: Yummm!

Yummm!, a company that sells gourmet foods from around the world, hired a professional
Web designer to build their site when they first opened, five years ago. Online business took
off and remained steadily high. A year ago, Yummm! was sold and the new owner, an ex-
chef who felt she had an intuitive knack for Web design, did a complete redesign of the site
on her own, with no professional help. Since then, Yummm!'s online sales have steadily
declined and they have received several angry letters from customers who feel the site
discriminates against the disabled.

Here are the most common user complaints:

 The food images are so small that it is impossible to get a good sense of
how they actually look without zooming into the page.
 Far too many clicks are needed to purchase a single item from the store.
 Often, the same button (Next Cheese, for example) changes its location
slightly from page to page, making it difficult to move seamlessly through
a set of pages.
 The fine print providing detailed information about the food items is so
small that it is borderline illegible.
 Most pages need to be scrolled vertically, some also horizontally.
 The Complete Purchase and Cancel Purchase buttons are so close
together that is easy to click the wrong one. If you click Complete
Purchase by mistake, there is no way to undo the purchase.
Consider this scenario and discuss how each of the seven principles of universal design (as
discussed in this lesson) could be applied to the poorly redesigned Yummm! site to fix its
accessibility problems and convert disgruntled customers to happy and loyal customers:

 Equitable Use
 Flexibility in Use
 Simple and Intuitive
 Perceptible Information
 Tolerance for Error
 Low Physical Effort
 Size and Space for Approach and Use

162
 CIW – User Interface Designer

Lesson Summary

Application project

At this point in the course, you have created several components for the design
of your company Web site: a project plan (Lesson 1), a Web site vision statement
and strategy, word list and mood board (Lesson 2), user personas, use cases,
and use case scenarios (this lesson), and so on. As mentioned above, it is always
the right time to do usability testing. In this application project you will do just
that.

Guided by the concepts and techniques presented in the "Usability Testing"

section above, test the usability of your in-progress site.

You will have to get creative in your testing approach, since you do not (yet) have
much concrete material to share with your test subjects. Think of the test as an
interview: Show the subject the various design components you have created and
then ask them questions about what works well in the design, what works poorly
and how they think you could fix it, and what works moderately well and how they
think you could improve it.

Test 3-5 subjects: friends, colleagues, family members, professionals if you can
find them. Follow the usability testing procedure as laid out above:

1. Plan and prepare.

2. Run the test.
3. Collect the data.
4. Analyze the data.
5. Draw conclusions.
6. Document the results in a usability test report.
7. Redesign, based on the results.

163
 CIW – User Interface Designer

Skills review

In this lesson, you began by learning the principles of user-centered Web design
and how you could use them to attract and retain site users. Next you took a
whirlwind tour of cognitive psychology as it applies to Web design. Then you
spent some time exploring usability and learning how to make user personas,
use cases and use scenarios, and how to usability test your sites. Finally, you
found out why accessibility is such an important issue in Web design and learned
techniques for optimizing site accessibility for the full range of devices, from
desktops, to laptops, to tablets, to cell phones, to smart bands/watches.

Now that you have completed this lesson, you should be able to:

 3.1 Explain the optimal relationship between Web users and site design,
including customers vs. contributors, attracting and retaining users, needs-
driven design, and scenario-based design.
 3.2 Identify Participatory Design and its involvement with all stakeholders.
 3.3 Explain Scenario-based design and when it is used.
 3.4 Describe the importance of Cognitive Psychology in relation to Web
Design.
 3.5 Identify the terms "personas" and "usability" to understand your
audience.
 3.6 Explain use case and use case scenarios.
 3.7 Describe the purpose and importance of site usability testing.
 3.8 Given a scenario, determine how to improve site accessibility.
 3.9 Explain how to improve site accessibility for mobile devices.

164
 CIW – User Interface Designer

Activity 3-1: Matching Personas, Use Cases, and Use Case Scenarios

Optional Lab

Optional Lab 3-1: Create Personas From Persona Templates

In this optional lab, you will create two personas based on persona templates.

165
 CIW – User Interface Designer

1. Use Google or Bing to search for "free user persona template" and spend
some time browsing through the results. Choose two templates that you
like: a conservative one and a more innovative one. Download each
template.
2. Use the conservative template to re-create one of the two personas you
made earlier in this lesson. Keep the content from your original persona.
3. Use the innovative template to re-create the same persona.
4. Compare these three versions of the persona: original, conservative, and
innovative. From the perspective of a member of the design team building
this site, which persona works best? Which works worst? Why?

Answers will vary.

In this optional lab, you created two personas, one conservative and one innovative, based
on persona templates.

Glossary

above the fold

Located above the virtual fold of the device, the bottom of the display screen.
This term comes from the printed newspaper practice of keeping top stories
above the place where the newspaper folds in half.
affordance

The affordances of a product are the things you can do with it. For example, a
computer mouse affords moving the mouse pointer around the screen, clicking
on buttons, dragging objects, etc.
agency

The ability of a person or entity to act, do something.

166
 CIW – User Interface Designer

cognitive psychology

The study of how humans acquire, process and store information.

mental model

A conceptual model of how something works: a Web site, app, game, device, etc.
mockup

A high-fidelity graphic image of a user interface.

persona

A fictitious user that represents the real-world users being designed for.
screen reader

A software application that communicates what is displayed on the screen as

spoken text or braille.
social validation

The phenomenon of a person attributing "rightness" (validity) to the perceived

attitudes and actions of others.
user-centered design (UCD)

An approach to the design of an interactive system (Web site, app, game, etc.)
that has as its main goal the satisfaction of the users of that system.

Lesson 4

167
 CIW – User Interface Designer

User Interface Design Principles and Legal Guidelines

Objectives
By the end of this lesson, you will be able to:

➥ 4.1 Apply user interface design principles to Web site design.

➥ 4.2 Describe CARP (contrast, alignment, repetition, proximity) and how it is important to
UI design principles.
➥ 4.3 Describe ERBU (emphasis, rhythm, balance, unity) and how it is important to UI
design principles.
➥ 4.4 Explain branding considerations in user interface design.
➥ 4.5 Given a scenario, describe and resolve legal issues in Web design.

Web UI Design Principles

OBJECTIVE: 4.1 User interface design principles

User Interface Design Principles

Video transcript
Download

Just as with any other creative pursuit, some commonly accepted principles exist
for designing a user interface. These principles change somewhat over time due
to emerging technologies that provide new design possibilities and constraints.

Current UI trends and fashion can also affect the principles. For
example, skeuomorphic design, which uses the iconography of real world objects
— clocks, calendars, pens, papers, clouds, etc. — occasionally falls out of style.

There are dozens of sets of excellent UI design principles. Those most popular
168
 CIW – User Interface Designer

with professional designers include:

 Dieter Rams' Principles for Good Design — 10 principles for assessing the
overall quality of a design, including: the degree to which it is useful,
understandable, long-lasting and aesthetically pleasing.
 Jakob Nielsen's Usability Heuristics — Nielsen's 10 principles are called
heuristics because they are broad guidelines rather than specific usability
rules and include: feedback, flexibility, consistency and error prevention.
 Apple's Human Interface Guidelines — Design themes used for iOS devices,
including: deferring to content, providing clarity and using depth to
communicate.

Instructor Note: Be sure your students understand that UI design trends

and UI design principles are not the same thing. Trends are subject to
fashion, principles are more universally applicable.

 Android's Design Principles — The Android User Experience Team

developed these guidelines to help them "keep the user's best interest in
mind: Enchant me, simplify my life and make me amazing."
 Microsoft User Interface Principles — A compact set of principles to
optimize user interface design in Windows applications: spacing,
positioning, size, grouping and intuitiveness.
 Larry Constantine and Lucy Lockwood — Principles (selected for use in this
course because of their mostly universal applicability to UI design):
structure, simplicity, visibility, feedback, tolerance, reuse.
The following sections describe each of these design principles, along with some
ways they apply specifically to Web site UI design.

Instructor Note: We recommend showing students examples (good and bad) of

each of these principles in existing sites.
Structure

169
 CIW – User Interface Designer

The Structure principle states that design should organize the user interface into
a form that is clearly understandable for the user.

Applying the Structure principle to Web design, consider the following points:

 Create a clear and straightforward site map that divides the Web site
content into a logical set of topics and subtopics (pages and subpages).
Consider making this map available to Web site visitors, in text or graphic
form.
 Ensure that your navigation system tells users, at all times, where they are
within the structure of the site, and how they can get to where they want to
go. Breadcrumb navigation is a good example of how to accomplish this
(although for smaller Web sites, breadcrumb trails are often excessive).
 Strive to make the structure of individual pages — as well as the entire site
— understandable at a glance. Users tend to be impatient and have little
tolerance for obscurity. Assume that if your site organization is confusing,
users will find themselves a better, more intuitively understandable site.
Simplicity

The Simplicity principle states that design should make common tasks easy to
perform and that it should communicate clearly in the user's native language.

Tech Note
Regarding simplicity, remember Einstein's famous quote: "Everything should be made as
simple as possible, but not simpler." The last three words are crucial. If you oversimplify
something, you can easily distort its meaning or undermine its power and clarity.

Applying the Simplicity principle to Web design, consider the following points:

 Do not require your site visitors to think hard or work hard to use your site.
The content and structure of a site should be self-explanatory, with no

170
 CIW – User Interface Designer

complex help screens needed. The less action you require of users, the
more likely they are to explore and try things independently.
 KISS (Keep it simple.) Users rarely visit a site to enjoy its creative design. In
most cases, they are looking for information that the site provides. So self-
indulgent, ornate design just gets in the way. Strive for simplicity instead of
complexity all through the site: layout, colors, typography, images, writing
and so forth.
 Use plenty of white space. White space helps to reduce cognitive load for
users, which is the amount of brain power they must expend to understand
the structure and content of a page. White space also serves to emphasize
page content by framing it in an uncluttered container.
Figure 4-1 shows a striking use of the simplicity
principle. http://www.ponder.co.za/minimalism-within-world-digital-marketing/.

Figure 4-1: Example of the simplicity

principle
Visibility

The Visibility principle states that design should make all the necessary tools and
options for a task clearly visible to the user, and should not burden the user with
superfluous information.

171
 CIW – User Interface Designer

Applying the Visibility principle to Web design, consider the following points:

 Make text legible and easy on the eyes. In general, sans-serif fonts such as
Arial or Verdana are easier to read online than serif fonts such as Times
Roman. The ideal font size for online reading is 16 pixels (12 points). Never
go below about 12 pixels (9 points), except for fine print you do not expect
your users to read word for word (e.g., copyright notices). Use a maximum
of three font faces and sizes per site.
 Each Web page should have a clear purpose and should fulfill a specific
user need as effectively — and pleasurably — as possible.

Tech Note

Yes, pleasure matters! Cognitive psychology studies have shown that when users
have a positive emotional relationship with a Web page (or device, app, etc.), then
they are more likely to be satisfied by it, forgiving of its flaws and loyal to its brand.

 Let users feel in control. When a Web site's appearance and behavior are
highly visible (straightforward and predictable), users tend to feel more in
control of their browsing experience. This reaction is good because it
promotes a positive emotional bond between user and site.
 Use clear metaphors. By making Web site objects and actions clear
metaphors for objects and actions in the real world, you can help users
quickly understand a site. Obscure metaphors only serve to confuse and
mislead users. If you use metaphors, test them on a number of users (at
least five) from different backgrounds, cultures, jobs, etc. to make sure the
metaphors are universally understandable.
 Enable users to directly manipulate Web site objects. Direct manipulation
— such as dragging and dropping a visual object — engages users in a
direct real-world way, and makes it easier for them to understand the
results of their actions.

172
 CIW – User Interface Designer

 A picture is worth a thousand words. The best cure for a Web site
overloaded with text is to break up the text blocks with well-chosen visual
objects such as photographs, illustrations or videos. Establishing and
following a style guide that defines a variety of color choices, font sizes
and paragraph treatments is highly recommended.
Feedback

The Feedback principle states that design should keep the user informed of
errors and changes of state through textual, visual or audio communication.

Applying the Feedback principle to Web design, consider the following points:

 Strive to deliver clear, timely and appropriate feedback to your Web site
users.
 Clear feedback is unambiguous. For example, when you point to a link, the
cursor changes to a hand.
 Timely feedback is communicated immediately, without potentially
confusing lags. For example, a user might feel lost if a slow-loading Web
site does not display a "Loading ..." progress bar (see Figure 4-2).
 Appropriate feedback is the right amount of feedback for the right actions.
For example, users want to get a simple "Registration Complete" message
when a registration script has completed its job as illustrated in Figure 4-2
at: https://dribbble.com/shots/604705-Progress-Bar-Runner. They do not
want a machine-code readout of every action that the script takes.

173
 CIW – User Interface Designer

Figure 4-2: A simple, effective, text-free progress bar

Tolerance

The Tolerance principle states that design should be flexible and forgiving. It
should minimize the occurrence of user errors. And it should reduce the
consequence of the errors that do manage to slip through by enabling users to
easily undo and redo their actions.

Applying the Tolerance principle to Web design, consider the following points:

 Strive to make a user-friendly Web site. "User-friendly" is a term that has

become somewhat dated — which is unfortunate, because it is an excellent
way to describe devices and applications that show tolerance, even
kindness for their users.
 A user-friendly site invites visitors in, helps them accomplish their goals,
and makes their visit pleasant along the way.
Reuse

174
 CIW – User Interface Designer

The Reuse principle states that design should reuse objects and behaviors to
maintain consistency, and to minimize the need for users to rely on thought and
memory. Reducing the thought/memory requirements for a Web site generally
increases its usability and user satisfaction.

Applying the Reuse principle to Web design, consider the following points:

 Strive for internal and external consistency in your Web sites. Internal
consistency is consistency within a Web site, both form (appearance, style)
and functionality (behavior, feel). External consistency is consistency
within the field of similar Web sites: use of familiar layouts, formatting,
organization, widgets, etc. A consistent Web site is not a mindless clone of
other Web sites. It is a site that builds on the models and standards to
which users have grown accustomed.
 Conventions are good. Conventional design does not mean boring design;
it means design that reduces the learning curve, which is the time and
energy needed for users to figure out how the site works. For example,
imagine the chaos that would result if every Web site invented its own
utterly unique set of objects (non-standard icons, hyperlinks, navigation
systems, etc.) and behaviors (non-standard actions for scrolling, jumping
to different pages, entering data in forms). Users would revolt!
In the following lab, you will find Web sites that follow — and violate — the six UI
design principles discussed in this section. Suppose you were training an intern
for your Web design team. To be a valued team member, the intern needs to have
an excellent critical eye for what works and what does not work in a Web site
design. To help him sharpen his critiquing, you ask him to study each of the six
Constantine/Lockwood design principles and to find examples of sites that
follow and that violate each principle.

Lab 4-1: Demonstrating UI design principles

In this lab, you will find sites that follow and violate the six user interface design principles
discussed in this section.

175
 CIW – User Interface Designer

1. Browser: For each of the Web UI design principles, use a search engine to
find a Web site that follows the principle. Write the name and URL of each
site and describe in one concise sentence how it follows the principle.

To do this, search for keywords that get at the essence of each principle.
For example, to find a Web site that illustrates the tolerance principle,
search for flexible Web design, or forgiving Web design, or user-friendly
Web design, etc. Adding "examples" to the search string, as in: flexible Web
design examples can help you locate specific site examples. Find sites
that illustrate: structure, simplicity, visibility, feedback, tolerance and reuse.

2. Browser: For each of the Web UI design principles, use a search engine to
find at least one Web site that violates each principle. Write down the
name and URL of each site and describe in one concise sentence how it
violates the principles of: structure, simplicity, visibility, feedback, tolerance
and reuse.
In this lab, you found Web sites that follow and violate the six UI design principles
discussed in this section.

176
 CIW – User Interface Designer

Knowledge Check

177
 CIW – User Interface Designer

Visual Design Principles

OBJECTIVE 4.2: CARP

As a professional Web designer, you need to have a solid foundation in visual

design. Without it, you would be like a pianist trying to play a difficult Beethoven
sonata without having mastered your scales and arpeggios. You might be able to
fumble through it, but the results would not be very pleasing.

In this section, you will learn two sets of visual design principles:

1. CARP — contrast, alignment, repetition and proximity

2. ERBU — emphasis, rhythm, balance and unity

178
 CIW – User Interface Designer

Getting a strong understanding and intuitive feel for these principles will provide
you with the analytical know-how to create clear and compelling visual designs:
images, user interfaces, Web pages, etc.
CARP: Contrast, Alignment, Repetition, Proximity

The CARP principles are a time-honored way to introduce the practice of good
visual design. Here are the four CARP principles with brief descriptions of each:

 Contrast — To separate objects, vary their appearance strongly.

 Alignment — Align objects with other objects.
 Repetition — Repeat elements of the design.
 Proximity — To associate objects, place them near each other.
Though the CARP principles are quite basic, following them is an excellent way to
learn how to design visually compelling Web pages. This is especially true if you
are new (or close to new) at Web design.

Let us take a closer look at each of the CARP principles.

Contrast
The contrast principle says: "To separate objects, vary their appearance strongly."

Doing this excites the eye and wakes up the visual processing system. This, in
turn, makes users more likely to view images and read text. There are many ways
you can create contrast between visual objects. For example:

 Use different font faces, sizes and styles (italics, bold, etc.)
 Use different line thicknesses
 Use different colors, shapes and sizes
 Use empty space to isolate objects
Here are some things to avoid when applying the contrast principle to a design:

179
 CIW – User Interface Designer

 Underkill — too little contrast between objects prevents them from being
clearly differentiated and differentiation is the main goal of contrast. Be
bold when you apply contrast to a design!
 Overkill — on the other hand, too much contrast can be fatiguing for
viewers, both visually (eye-straining) and cognitively (confusing). With
contrast, it is sometimes a fine line between boldness and overkill. In
general, err on the side of too much rather than too little contrast, but make
sure you do not cross the line into excess.

Tech Note

When working with contrast, think of the stage makeup effect. If a stage actor wears
too little makeup, it will be invisible to people in the back of the theater. If she wears
too much, she will look like a clown to people in the front. A balance is needed,
somewhere in the middle with a leaning towards too much.

 Viewer-unfriendly color combinations — some high-contrast color

combinations can reduce legibility: green text against a red background,
red against black, etc. Some low-contrast combinations can do the same
thing: dark brown on black, for example. Running a page through a color-
blindness checker like Spectrum or SEE can help you spot problematic
color combinations.
 Too little or too much empty space — too little empty space can make a
layout feel cramped, too much can make it feel bloated. Shoot for the
middle: just enough.
OMM at ommexperience.com makes striking use of contrast on its home page.
The contrast principle works on many levels here: color, layout, use of empty
space, etc. It is a simple, elegant and masterful design.

180
 CIW – User Interface Designer

Figure 4-
3: The OMM home page is an excellent example of the contrast principle in action

The darkelephant home page (www.darkelephant.com) in Figure 4-4 has a visual

charm. It is whimsical and looks interesting, but it does not use contrast
effectively. Instead of its unique visual details popping out to accentuate their
charm, they fade into a dark green and brown background. Portions of its clever
text are illegible due to the tiny point size and low-contrast colors.

181
 CIW – User Interface Designer

Figure 4-
4: The darkelephant Web site is charming, but would be improved with better use
of contrast

Alignment
The alignment principle says:

Do not place objects arbitrarily on a page; align them with other objects.

Doing this organizes the objects into a meaningful structure, unifies the design
and makes the design look and feel right.

Tech Note
Rightness is difficult to define. It is like the taste of a perfectly ripe mango; you know it
when you experience it. It is important for you, as a visual designer, to cultivate a taste for
rightness in your designs. This will come in part from learning the basics, like you are doing
now, and in part from trusting your intuition.

Here are some guidelines for aligning objects on a Web page (screen, canvas,

182
 CIW – User Interface Designer

etc.):

 Position objects intentionally, not arbitrarily. Whenever you add an object

to the page, choose a good location for it, one that is right both visually and
cognitively.
 Align objects with other objects: bottoms, tops, sides, centers.
 Use a grid. All graphics applications have customizable grids you can turn
on while you are working and off when you are finished. It is much easier
to align with a grid.
Here are two things to avoid using the Alignment principle:

 Beware of mixing different alignments. In the hands of an experienced

designer, mixing alignments can work: left, right, center, even justified. In
the hands of a relative "newbie," it can (and often does) end up looking
cheap and sloppy. A good rule is to limit a design to one or two alignments
per page.
 Resist using too much center alignment. It tends to look amateurish and
affected, as if you wanted the text to look like profound poetry.
This version of the Web site for tens at www.tenslife.com (2015) uses alignment
very effectively. The three main types of alignment are all present: left (logo, text
+ large glasses image + Buy Now button), center (Store + Lookbook + Brand
links, row of miniature glasses, white text on the hero image), and right (My Cart
in the upper-right corner). Though using all three types on one page is risky, it
works due to the skill of the designer and the fact that the center and especially
right alignment are nicely understated, see Figure 4-5.

183
 CIW – User Interface Designer

Figure 4-
5: The tens home page uses alignment very effectively

At first glance, the alignment of objects in the Red Stream home page
at www.redstream.org (2015) (Figure 4-6) shows objects scattered somewhat
randomly across the page. On closer inspection, alignments reveal themselves.
The text in both sidebars is left aligned. The Red Stream logo and the content
towards the bottom of the page are center aligned, and so on. The individual
page objects, particularly in the main body of the page, however, look somewhat
arbitrarily placed with respect to both each other and the page as a whole.

184
 CIW – User Interface Designer

Figure 4-
6: The alignment of objects on the Red Stream home page looks arbitrary

Repetition
The repetition principle says: "Repeat elements throughout the design."

Doing this unifies the design, adds visual interest to the design and creates a
strong visual flow through the design.

To apply the repetition principle to a design:

 Be consistent. Repetition comes automatically with consistency, since

consistent design reuses the same (or similar) elements.
 Strengthen existing repetition by spotting visual patterns and enhancing
them.
 Add new repetition by creating new patterns in the design.
Here are two things to avoid when applying the repetition principle:

 Repeating a pattern so much it becomes annoying or overwhelming.

185
 CIW – User Interface Designer

 Using so much repetition that it undermines the contrast of the design.

ETQ, at www.etq-amsterdam.com/collection puts a delightfully minimalist spin
on repetition in their Web page (2015) shown below in Figure 4-7. Nothing really
needs to be said about the use of repetition on this page; the design says it all on
its own. That is a goal you should keep in mind when you apply a design principle
to a Web page or other user interface: Let the design do the talking.

Figure 4-
7: The ETQ. shoe page is a delightful example of repetition in design

This Critical Path Web page www.criticalpathproject.com (2015) shown in Figure

4-8 below is in some ways very similar to the ETQ. page. Both consist of a grid of
similar objects against a minimal background. The Critical Path page, however,
took a good idea and went a bit too far. There are so many tiny photos crowded
into its grid that looking at it strains the eyes. Also, the grid looks like a
spreadsheet, which dehumanizes the human beings in the image.

186
 CIW – User Interface Designer

Figure 4-
8: The Critical Path page is an example of repetition overkill

Proximity
The proximity principle says: "To associate objects, place them near each other."

Doing this organizes the objects on the page. This is particularly important for a
page that contains a large number of objects. It also makes the page more
understandable, thus increasing its usability.

Here are two guidelines for applying proximity to a design:

 Squint and group: Squint at the design and count the number of visual
objects you see. If there are more than seven, use proximity to group some
together.
 To keep objects separate, make sure there is enough space between them.
The Nua Bikes Web site www.nuabikes.com (2015) in Figure 4-9 uses proximity
skillfully to associate similar objects: the two-word company logo at the top left,
the 11-link navigation bar below it, the six-button slideshow transport on the right,
and the two-part Order with arrow link above it. The large expanse of white space

187
 CIW – User Interface Designer

and relatively small chunks of proximate groups makes the page calm, spacious,
and easy to use.

Figure 4-
9: The Nua Bikes home page uses proximity to achieve calm clarity
ERBU: Emphasis, Rhythm, Balance, Unity

OBJECTIVE 4.3: ERBU

Having attained a feel for the CARP principles, you can now move on to the
somewhat more subtle ERBU principles:

 Emphasis — Make some objects stand out more than others.

 Rhythm — Move the viewer's eyes through the design.
 Balance — Maintain visual equilibrium in the design.
 Unity — Infuse the whole image with a sense of oneness.

188
 CIW – User Interface Designer

Emphasis
Emphasis enables you to direct user attention to specific objects in a design by
creating a visual hierarchy that divides it into foreground and background layers.
Foreground objects are warm, dynamic, attention grabbing. Background areas
are cooler, more reserved, places of visual rest. Skillful use of emphasis
increases the clarity of a design by helping users know where to look.

There are many ways to apply emphasis to a Web page, including:

 Contrast: hue, size, weight, shape, etc.

 Placement: good "hot spots" for emphasis include the top left corner, top
right corner, and center of the page.
 Isolation: placing an object by itself against a non-intrusive background
makes it a focal point.
Instructor Note: The CandyLand site has since been taken down and is shown
here only as an example.
The Candyland Web site (2013) in Figure 4-10 used emphasis effectively to direct
the user's attention to the currently moused-over part of the Candyland
navigation image map. Mousing over Fizzington Falls lighted it from above in
bright orange and yellow, and dimmed the rest of the map. This divided the map
into foreground and background, resulting in Fizzington Falls being strongly
emphasized.

189
 CIW – User Interface Designer

Figure 4-10: The Candyland home page used emphasis to direct user attention to
Fizzington Falls

The DreamTeam home page www.dreamteam.pl (2015) in Figure 4-11 makes

little use of emphasis. The colors are more muted, producing a general sense of
grayness. The DREAMTEAM title stands out to an extent by virtue of its size, but
not as dramatically as it would with additional focus on the emphasis principle.

Tech Note
The muted and sleepy feel of the page might have been exactly what the designer wanted
to create a "dream mood." The lesson here is that you do not need to apply every visual
design principle to every design. As is often true in design: Less is more.

190
 CIW – User Interface Designer

Figure 4-11: The DreamTeam home page makes less use of the emphasis
principle

Rhythm
Rhythm creates a sense of movement within an image, a path for the viewer's
eye to follow. Emphasis directs attention to focal points on a page; rhythm
moves this attention between points, like following a visual storyline. These
movements - which often occur very quickly - are perceived by viewers as visual
rhythms, like animations.

To add rhythm to a Web page, you can use these techniques, alone or in
combination:

 Repetition — repeat one or more visual objects in a regular, perceptible

pattern.
 Alternation — repeat two or more objects in an alternating pattern: AB, AB,
AB, etc.

191
 CIW – User Interface Designer

 Progression — repeat a series of objects, changing them slightly with each

iteration.
 Undulation — a smooth progression of rising, falling, or weaving objects.
In Figure 4-12 the Bose home page http://special.bose.eu/en (2015) uses
repetition and progression to achieve a strong sense of rhythmic movement. The
page flow is from left to right, drawing the viewer's attention through three
headphones to a pair of ear buds. Note how the diagonal lines and background
colors contribute to the sideways rhythmic motion.

Figure 4-12: The Bose home page rhythm carries the viewer's eyes left to right
through the image
Balance
Balance creates a sense of equilibrium in a design based on how each object's
visual weight is distributed. Visual weight is a measure of the force of attraction
of an object; the more an object attracts the eye, the "heavier" it is. Red tends to
be heavier than blue, blue heavier than off-white. Larger objects are generally
heavier than smaller ones. It is the sum of these qualities that determines an
object's weight: A large scarlet-red rectangle is heavier than a small sky-blue one.

192
 CIW – User Interface Designer

Symmetry and grids can help you balance your Web page UI:

 Symmetry — visual symmetry creates a pattern that feels balanced to both

the conscious and unconscious mind. Use it sparingly! Too much
symmetry can weaken the dynamic motion of an image, halt its rhythm.
Being compellingly off-balance tends to keep viewers more engaged than
perfectly symmetrical.
 Grids — you should always work with grids when laying out your Web
pages. They help a great deal with alignment and proportion, both key for
achieving balance, as illustrated in Figure 4-13. Grids will be discussed in
more detail in the next lesson.

Figure 4-13: The NY Times layout grid

The Quay page at Web www.quay.com.au achieves visual balance through the
skillful use of symmetry. All objects are centered horizontally between the page
edges. Both the image and navigation links are centered vertically, but
imperfectly; the image is slightly low, the links slightly high. The logo text is
symmetric (around the page center), but the brush-stroke underline beneath has
an asymmetrical flourish to the left. The design is both symmetric (with respect
to the page edges) and subtly asymmetric, lending off-balance dynamic

193
 CIW – User Interface Designer

movement to the page.

;Figure 4-14: The Quay home page uses symmetry to achieve visual balance

Compare the page in Figure 4-15 from Polar Alert www.polaralert.com (2015)
with the Quay page above. Their layouts are similar: large hero image centered
against a cool background in the main section of the page, navigation links
below. But the Polar Alert page comes off feeling much less balanced than Quay.
The collage image feels "un-right" with little space above it and too much below.
Likewise, aligning the navigation links against the left edge undermines rather
than supports the centering of the image.

194
 CIW – User Interface Designer

Figure 4-15: The Polar Alert home page feels visual imbalanced, un-right

Unity
Unity is a sense of wholeness in an image, a feeling that nothing is missing,
nothing is superfluous, and everything is in its right place. An image with strong
unity seems to be organic and alive, more an act of nature than of human
invention.

Of all the ERBU principles, unity is the most difficult to define specifically. It is
closer to inspired art than visual science. That said, here are some techniques
you can use to invest your images with unity:

 Emphasis, balance, and rhythm (the ERB of ERBU) — when used

harmoniously (working with, rather than against each other), the ERB
principles are powerful tools for unifying an image.
 Consistency (visual and conceptual) — consistent appearance and
placement of objects can help unify an image visually. Consistent object
functionality helps unify it conceptually.

195
 CIW – User Interface Designer

 Simplicity, restraint, minimalism — the "less is more" approach to design

can be very effective for achieving unity. The same goes for "keeping it
simple." Unless you have a compelling reason to do otherwise, choose the
simplest viable solution to a design challenge.
 Intuition — because achieving unity in an image is more art than science,
intuition can play a key role in the process. Trust your designer's instincts!
Give yourself the liberty to "break the rules" in order to unify your design.
The AWWWards (www.awwwards.com) page of well-known designer Karim
Rashid (www.karimrashid.com) (2015) is an excellent example of unity in design
(Figure 4-16). Everything feels right, from the slightly off-center hero image, to the
official-looking heavy block lettering in the lower-left corner, to the flowing light
script in the upper left. The "About Karim" arrow and Karim himself are both
moving the viewer's eyes to the right, revealing a tall thin teaser slice — a bit like
an exclamation point! — of what is to come on other site pages. The designer
took a chance with this teaser, since it looks a bit like a mistake. Even though it
breaks the rules, it works, so the risk paid off.

Figure 4-16: The Karim Rashid page at awwwards.com is an excellent example of

unity in design

196
 CIW – User Interface Designer

As illustrated in Figure 4-17, the Yale School Of Art (www.art.yale.edu) home

page offers less sense of unity. The page lacks wholeness due to improperly
placed address on the top and different fonts and background colors used
throughout. The page is not as balanced, weighted to the left. The Karim Rashid
page has a similar imbalance to the right, but it fits into the left-to-right dynamic
movement of the page, which makes the design work.

197
 CIW – User Interface Designer

Figure 4-17: The Yale School of Art homepage lacks unity

In the following lab, you will critically assess the visual design of two Web pages.
Suppose you are hired by a client to evaluate their Web site design. They are not
interested in your subjective feelings about the site. What they want is an
objective assessment of the design that is based on universally accepted visual
design criteria. You can provide them with this objective evaluation by drawing

198
 CIW – User Interface Designer

upon the visual design principles discussed above: CARP and ERBU.

Lab 4-2: Using CARP and ERBU to assess Web page design
In this lab, you will use the CARP and ERBU principles to critically assess the visual design
of two Web pages.

1. Find a Web page that you feel is nicely designed. Describe how well (or
poorly) the four principles of CARP apply: contrast, alignment, repetition,
and proximity. Discuss each principle individually, not all four together.
2. Describe how well the ERBU principles apply to the page design: emphasis,
rhythm, balance and unity.
3. Based on your answers to questions 1 and 2, what is your conclusion
about the overall quality of the page's visual design? When you subjected
the page to rigorous CARP- and ERBU-principle evaluation, did it live up to
your initial feeling about it being well designed? If not, what did you miss
with your first impression?
4. Repeat steps 1-3 for a site you feel is poorly designed.
In this lab, you used CARP and ERBU to evaluate the design of two Web pages.
Exercise 4-2: Visual Design Principles
Question :Fill in the blanks by typing the appropriate terms.
Here, this type of question contains the select box, text box, and drag and drop boxes. The
shortcut keys to perform this task are. Press the Alt+down arrow key to activate the target. Press
the arrow key to navigate through all the items. If the selected item is a text box or a select box,
it will automatically get focused. If you want to drop the item in the droppable field, navigate to
any of the draggable using the Tab key, and press the Enter key to copy the draggable, Now,
navigate to any of the droppable field and press the Enter key to drop the copied item. If you
want to remove the item from the droppable field, navigate to the droppable field and press the
Delete key for Windows and the Fn+Delete key to remove the item.

1. Using

will excite the eye and wake up the visual processing system which will make
users more likely to view images and read text.
2.

199
 CIW – User Interface Designer

creates a strong visual flow through the design of the Web site by unifying the
design and adding visual interest to it.
3. Placing an object by itself against a non-intrusive background, making it a
focal point, is an example of

.
4. Visual

is a measure of the force of attraction of an object; the more an object attracts

the eye, the "heavier" it is.
5. An image with strong

seems to be organic and alive, more an act of nature than of human invention.

*Matching is not case sensitive.

Branding

OBJECTIVE 4.4: Branding considerations

Branding is the practice by which a company creates a public image of itself to

attract and retain customers to purchase its products or services. Promoting the
brand is an important element in your Web design.

One of the key objects of a company's brand is its logo. Think of well-known
companies such as McDonald's, Apple, or Nike. Chances are their logos appear
in your mind's eye. McDonald's is the golden arches, Apple is the apple with a bite
in it, Nike is the swoosh. The names and reputations are inseparable from the
images. This is the very definition of a good logo: a deep connection between
company name, reputation, and image. Take a look at the Web sites for
McDonalds, Apple and Nike and see how their logo is enhanced in the Web
design.

It is not enough these days for a Web site to present clear information, sell fine
products, provide useful services. It must also promote its client, get the word
out. It must spread its brand. In this sense, a brand is like a meme: an image or
idea that spreads from person to person within a culture.

200
 CIW – User Interface Designer

A Web site that does not enhance its company's brand can negatively impact the
company's image. Conversely, a site that successfully promotes the brand can
be an important component of a company's marketing strategy.

The Web is an ideal place for establishing a new brand and enhancing an existing
one. What previously cost a great deal of money in the pre-Web days now costs
nothing beyond the logo/brand creation and Web hosting fees.

To be successful, a brand should be unique, attractive, and above all —

memorable. If a Web site looks just like a thousand similar run-of-the-mill sites, it
will be easily forgotten. And nothing weakens a brand more than being
forgettable.

Tech Note
Just like companies, individuals can have brands. By establishing yourself as a unique
designer and acquiring a reputation for doing excellent work in your field, you are in effect
building and nurturing your personal brand. Some people, like Tiger Woods, even have their
own logo!

According to the Forbes.com Web site (2015) the guidelines should be

emphasized when building a successful brand:

 Know your audience. Trying to appeal to everyone dilutes a company's

brand, robs it of the focus it needs to grow strong. Successful brands know
their audience very well — their needs, expectations, interests, etc. — and
target this audience in their branding efforts.
 Be unique. A successful brand says "I am unique. You will not find anything
quite like me anywhere else." Have you identified your unique product or
service? If not, start there when building your branding strategy.
 Be consistent. When consumers return to a company for repeat purchases,
they expect to receive the same quality as they did the first time.
Inconsistent product or service quality is one of the main reasons people
take their business to a competitor.
 Promote, promote, promote! For a brand to become successful, it needs to
spread like a meme through the consumer population. This requires self-

201
 CIW – User Interface Designer

promotion through advertising, social media, word of mouth, etc. The

Internet is a boon to companies with modest promotion budgets, as it can
spread the word to a global market for very little money.
 Create a brand style guide: a document that defines and presents
examples of what your brand looks like and how it should come off feeling
to customers.
Here are some techniques for using a Web site to promote a brand:

 Display the company logo on every page, generally in the upper-left corner.
If the logo is quite large, consider using the large size for the home page
and a smaller version for the other site pages.
If the company does not have a logo, or if the logo is weak, it should spend
the money to hire a good professional logo designer to create one. Going
with a cheap or amateurish logo will do (much) more harm than good. It is
not a place to cut corners.
 Consistently use colors associated with the brand. This is a form of
subliminal advertising, in that it establishes a company-brand-colors
connection in the subconscious mind.
In the following lab, you will draft a branding plan for a company. Suppose you
and two friends have cofounded a new residential solar panel company. At the
next meeting, the three of you are going to brainstorm ideas for how to brand the
company, get its name and unique product offerings out into the marketplace.
You can prepare for the meeting by creating notes based on the guidelines above
for building and promoting a brand.

Lab 4-3: Creating a branding plan for your Web design company
In this lab, you will devise and document a branding plan for your company. (You can
enhance your branding plan by doing the optional lab at the end of the lesson.)

1. Based on the above guidelines for building a successful brand, briefly

describe your company audience (current and future), what makes your
company/products (Web design) unique in your marketplace niche, what
kinds of consistency customers will need to remain loyal to the company

202
 CIW – User Interface Designer

and how you intend to promote your brand. (Do not dwell on Web site
promotion; you will focus on that in the next step.)
2. Based on the above techniques for using a Web site to promote your
brand, describe the current state of your company logo (rough, refined,
weak, strong), where it makes most sense to place it on your site pages,
how the logo colors will be reflected in the site color scheme, and what you
plan to include in your brand style guide.
In this lab, you wrote a branding plan for your company.

Legal Issues Impacting Web Design

OBJECTIVE 4.5: Legal issues

As a Web professional, it is your responsibility to keep abreast of the current

legal issues that could affect your business and customers. This can be
challenging, since Web laws evolve rapidly, and vary significantly by country. You
will need to do your research, stay informed, and seek professional legal advice
when necessary. Do not simply ignore Web legality, or it might prove to be very
costly and damaging to your company brand.

Warning
This section describes how some key Web-related legal issues are handled in the United
States. It offers general information, not specific legal advice.

A complete list of laws related to Web design is well beyond the scope of this
course. But you should be aware of three key legal issues that could affect your
Web design practices:

 Anti-spamming laws
 Intellectual property laws
 International legal issues

203
 CIW – User Interface Designer

Anti-spamming laws

Spam is Internet junk mail, unrequested and unwelcomed by users. Often it is

merely annoying, but sometimes its content is offensive: ads for prescription
drugs, pornography, etc. Depending on the country and age of the recipient, this
content might even be illegal. Generally speaking, however, sending spam
remains more of an ethical violation than a legal one.

The CAN-SPAM Act

In 2004 the CAN-SPAM Act (Controlling the Assault of Non-Solicited Pornography
and Marketing Act of 2003) was established as law in the United States. CAN-
SPAM, which takes a fairly lenient attitude towards spammers, grants U.S.
citizens the right to demand that they be removed from a commercial email list.
This is a good thing, a step in the right direction of ending spam, but it leaves
several other key problems unsolved, including:

 It fails to address the fact that most spam recipients never requested to be
placed on the mailing list to begin with.
 It provides no protection against malicious practices such as using
requests to be removed from an e-mail list to create lists for further
spamming.
 It does not prevent a legitimate business from sending unsolicited bulk e-
mail.
 It prohibits recipients of spam from suing spammers.
To learn more about the CAN-SPAM Act, visit the U.S. Federal Communication
Commission's CAN-SPAM page at www.fcc.gov/encyclopedia/can-spam.
Intellectual property laws

Intellectual property laws protect works of the mind from unauthorized usage.
Every Web designer needs to be familiar with at least two intellectual property
laws: copyright and trademark. Knowing how these work in your home country
will both help you protect the intellectual property on your Web sites, and prevent
you from infringing on the property of others, an action that can be punishable by

204
 CIW – User Interface Designer

law.

Copyright
Instructor Note: Ask students to discuss any news stories they have heard
involving Web-related copyright infringement.
In the United States, the 1976 Copyright Act prohibits unauthorized use of
original content: the printing, publishing, performing, filming or recording of
original literary, artistic, photographic, musical or audiovisual content.

Original content does not need to be formally registered for copyright to be

protected by copyright law. Copyright is secured automatically from the moment
the content exists in a tangible format, not just as an abstract idea in the mind of
its creator. At that point, the content becomes the property of the author, and
only this author can share or transfer the ownership rights. Though content does
not need to be formally registered to be protected by copyright law, registration is
beneficial in that it makes it more likely that the copyright be honored in court,
should litigation be necessary

Tech Note
Though content does not need to be formally registered to be protected by copyright law,
registration is beneficial in that it makes it more likely that the copyright be honored in
court, should litigation be necessary.

As a Web designer, this means that you cannot simply grab copyrighted text,
images, music, multimedia, program code, etc. from any source, on or off the
Web, and use it in your Web site. At least not if you want to practice legal Web
design. You can, however, use non copyrighted (public domain) material, or
acquire the rights to use copyrighted material. For more on this, see the section
below: Licensing Content for your Site.

If your Web site allows users to post information — blog comments, forum
messages — you need to include a Terms of Use license that users must agree to
before they can post any content. This license should clearly state that users are
not permitted to post copyrighted material, that it is their responsibility to ensure
this, and that they are responsible for any actions resulting from what they post.

205
 CIW – User Interface Designer

If a user violates a copyright on your site, the fact that they agreed to your Terms
of Use will help protect you in a court of law.

Fair use
Copyright prohibits original works from being used without the owner's
permission. In general this is a good thing, in that it protects the intellectual
property of creators, but, if taken to the extreme, it would result in a society
closed to creative cooperation, a highly undesirable situation.

To prevent this from happening, the 1976 Copyright Act included the Fair Use
doctrine. Fair use permits the use of copyrighted works without the owner's
permission in certain situations, such as for teaching, journalism and criticism.
This use is limited. You can, for example, quote from a copyrighted poem
covered by fair use, but not copy the entire poem or present it as your own.

It can be difficult to determine, with certainty, whether or not a specific use of

content counts as fair use or copyright infringement. If you are unsure, err on the
safe side and ask a lawyer. You can also turn to the U.S. Copyright Office for help
at www.copyright.gov/fair-use/more-info.html.

Trademarks
A trademark is a word, phrase, sound, or image that a company uses to
distinguish itself or one of its products from the competition. Common
trademarks include a company or product name, logo, and slogan or
catchphrase. For example, though these are used freely without consideration of
legality, they are in fact all active trademarks:

 Coca-Cola — owned by The Coca-Cola Company

 Sony — owned by Sony
 Band-Aid — owned by Johnson and Johnson
 Popsicle — owned by Good Humor-Breyers
 Scotch Tape — owned by 3M
 Super Heroes — (as two words) owned by DC Comics, Marvel Comics
 That's hot. — owned by Paris Hilton

206
 CIW – User Interface Designer

 Just Do It — owned by Nike

 Let's Get Ready to Rumble! — owned by Michael Buffer
Once a trademark has been registered, no one but the owner can legally use it.

Tech Note
You might be able to legally use a parody of a trademarked name, logo or catchphrase on a
Web site under the Fair Use doctrine. But before you do this, consult with a lawyer. Better
safe than sorry!

Trademark law is also the basis for domain name disputes, which are primarily
resolved by the World Intellectual Property Organization (WIPO) Domain Name
Dispute Resolution Service.

Copyrights vs. trademarks

Copyrights and trademarks are, in some ways, quite similar. It can be confusing
to keep track of the differences between them. Table 4-1, from LegalZoom
(2015, www.legalzoom.com), which applies to U.S. copyright/trademark law, can
help:

Copyright Trademark

Used to protect: An original creative work A word, name, phrase, sound or image

Issuer: U.S. Copyright Office U.S. Patent and Trademark Office

Length of Lifetime of last surviving creator, plus 70 Unlimited, as long as the owner renews the
protection: years trademark every 10 years and continues to
use it

Place of Within the United States Within the United States

protection:

Renewability: Non-renewable Renewable every 10 years

Legal rights: With an unregistered copyright, the With an unregistered trademark, a person
creator still owns all rights to the creative can gain rights to a mark simply by using it.

207
 CIW – User Interface Designer

work.
With a registered trademark, federal
With a registered copyright, federal trademark protection can be enforced in
copyright protection can be enforced in court.
court.

Typical users: Writers, artists, choreographers, and Business or product owners

other creative professionals

Table 4-1: Copyrights vs. trademarks in the United States

Tech Note
For more information about U.S. copyright law and associated topics such as fair use,
licensing and trademarks, visit the home page for the United States Copyright Office
at www.copyright.gov. This site offers overviews, legal documents, links, registration forms
and more.

Licensing content for your site

Because Web site content is protected by copyright and trademark law, you must
ensure that any content you use on your site (text, images, multimedia, etc.) is
either original or that you borrow it legally. To do the latter, you need to license
the copyrighted or trademarked content from the owner for your use.

A license establishes an agreement between you and the content owner: writer,
artist, programmer, magazine, corporation, Web site, etc. The content owner
establishes the terms of the license: how and where the content can and cannot
be used, and what the owner will receive for granting use of the content, such as
fees, credit attribution, etc.

Some content owners prohibit all use of their content. Others permit free use of
their content for personal, non-commercial purposes. A very few permit free use
for any purpose, commercial included. Most owners who permit their content to
be used require attribution — that their name be cited when the content is used.

It is crucial that you find out the terms of usage for content to determine whether
you can legally use it on your site. Some sites specify these terms in page
footers. Others include them on their legal, permissions or copyright pages. For
example, CBS Interactive grants permission to download, reformat and print a

208
 CIW – User Interface Designer

limited amount of its content for personal, non-commercial use. To see details
about CBS Interactive permissions, visit their Web site
at www.cbsinteractive.com.

Creative commons
Another avenue for licensing content and art is Creative Commons, a nonprofit
organization that provides several different licenses granting permission to share
and use creative works. These licenses range from strict (no modification or
commercial usage permitted, attribution required) to loose (attribution required)
to completely free (unlimited usage for whatever purpose).

You can learn more about Creative Commons at https://creativecommons.org.

To find content you can legally use and modify for your UI design work, use the
Creative Commons search engine.

In addition to the Creative Commons search, Google and Bing both provide
options for finding images based on their usage licenses. To see these options in
Google, click on Images, Search Tools, Usage Rights. In Bing, click on Images,
License.

Tech Note
Warning: Never blindly trust the results of any license search. Doing so could result in legal
disaster! The search engine might have its facts wrong, or the content owner might have
recently changed the license. Always double-check at the source Web page.

Public domain
Content that is not copyrighted or trademarked, or for which the copyright has
expired, is said to be in the public domain. (Note: Even if a trademark has expired,
it is still not in the public domain as long as the original owner continues to use
it.) Any content that is in the public domain may be used freely by anyone for any
purpose: personal, corporate, non-commercial, commercial, etc.

Public domain laws differ by country. In the United States, the following types of
content are considered to be in the public domain:

209
 CIW – User Interface Designer

 Content that was first created and published prior to January 1, 1923.
 Content whose copyright has expired. (Generally, works created on or after
January 1, 1978, are protected by U.S. copyright for the life of the last
surviving author plus 70 years.)
 Content for which no copyright extension has been filed.
To find public domain content of all types (text, image, multimedia), you can use
Appropedia's public domain search engine available in 2015
at: https://cse.google.com/cse/home?cx=010475139252798918668:p04xreki1j4
.

The Appropedia search engine is currently under construction (2015), hence the
provisional URL.

To find public domain images, you can enter a search term in Bing and click on
Images, License, Public Domain.
International legal issues

The Internet is a global medium. People from all over the world (with a few
exceptions) can visit your Web sites. For this reason, you need to be aware of
some key international legal issues when designing a site, particularly if you have
a multinational audience.

Sales
If the products your Web site sells are illegal in some countries, you might be
responsible for providing ways to regulate sales and customers. By far, the best
action in this circumstance is to consult a lawyer who specializes in international
trade. That way you can rest assured you will be on solid legal ground. If, instead,
you choose not to do this, make sure to follow these two common rules:

 Do not ship products to a country where they are illegal or where their
legality is ambiguous.
 Post a clearly visible statement on your Web site notifying users what
countries are prohibited from purchasing these products.

210
 CIW – User Interface Designer

Contracts
The Web enables people from anywhere in the world to do business with each
other. As with all business arrangements, it is important to establish ground rules
before committing to a contractual agreement.

Contracts between parties that reside in different geographic locations should

include a clause stating the country or region (state, province, city, etc.) whose
laws apply to the agreement. For example, a contract signed between a Web
hosting company in California and a business in Japan will likely state that the
agreement will be governed by the laws of California.

You should consult with a lawyer before signing any agreement, particularly one
with a company in a different country.

Intellectual property
Intellectual property laws in a company's home country might not apply in other
countries. For example, U.S. copyright laws are very specific in what is and is not
protected, but no universally binding international copyright law exists.

The World Intellectual Property Organization (WIPO) at www.wipo.int is an

international organization that fosters cooperation among more than 180
countries on intellectual property issues. However, WIPO cannot guarantee that
all member countries will observe or enforce others' intellectual property laws.

For this reason, you should err on the side of caution when it comes to
intellectual property rights for a global audience. As much as possible, use your
own original content. If you need to borrow content, make sure it is
unambiguously legal for you to use.

Fair use is a good case in point. A handful of countries support fair use (or fair
dealing), including: Canada, Israel, Poland, South Korea, the UK, and the United
States. But each country has a slightly different take on what fair use means. Fair
use practices in one country might be considered copyright infringement in other
countries. The best way to avoid violating international intellectual property law is
to comply with the rules of fair use established in your country of residence.

International fair use

As discussed above, fair use is an exception to U.S. copyright law that allows the
reproduction or quoting of copyrighted works for certain purposes, such as
criticism or education. A handful of countries support fair use (also called fair
dealing), including: Canada, Israel, Poland, South Korea, the UK, and the United

211
 CIW – User Interface Designer

States. But each country puts a slightly different spin on what constitutes fair
use. Thus fair use practices in the United States might be considered copyright
infringement in other countries.

To avoid violating international intellectual property agreements, you should

closely comply with the concept of "fair use" established in your country of
residence when designing Web sites.
In conclusion ...

The best advice anyone could give you about Web legality is this:

When in doubt, consult a lawyer.

It is just not worth the risk to try to figure out an ambiguous legal situation by
yourself, and, since international laws are complex and ever-changing, make sure
to get a lawyer who specializes in the field.
Exercise 4-3: Intellectual Property Laws

212
 CIW – User Interface Designer

Case Study: Fair Use ... or Copyright Violation?

Rachmiel Szgut, a professor of Russian literature at a prestigious college in South Korea,
wants to share with his class a 20-page article from a highly regarded online academic
journal named Samizdat. Though the contents of Samizdat are copyrighted, Professor
Szgut feels that his sharing of the material is covered by fair use. He uploads a PDF file of
the article to his Web site and creates a download link for his students on the home page.

Consider the above scenario and discuss these questions about Professor Szgut's actions:

213
 CIW – User Interface Designer

 Is distributing the article to the class covered by fair use, thus legal?
 Is making the article available on a Web page covered by fair use?
 How would Professor Szgut establish, with certainty, the answers to these
questions?
 If he found out that the actions were not covered by fair use, what legal
alternatives could he use to share the article with his students?
 If the online journal were obscure with a tiny audience rather than highly
regarded in the field, would it be more likely to be considered fair use to
distribute it?
 If the college were obscure or unaccredited, would it affect the fair use
verdict?
 If Professor Szgut had put the article link on a page only accessible with a
password that he shared with his students, would fair use apply?

Lesson Summary

Application project

In addition to the user interface design principles of Constantine and Lockwood

presented in this lesson, there are many excellent sets of principles that
professional UI designers turn to for guidance. Among the best are:

 Dieter Rams — Principles for Good

Design (http://www.archdaily.com/tag/dieter-rams)
 Jakob Nielsen — Usability Heuristics for User Interface
Design (https://www.nngroup.com/articles/ten-usability-heuristics/)
 Apple — Human Interface Guidelines (https://developer.apple.com)
 Android — Design Principles (http://developer.android.com)
 Microsoft — User Interface Principles (https://msdn.microsoft.com)

214
 CIW – User Interface Designer

Read carefully through each of these sets, and pare down the entire collection of
50 or so principles into what you judge to be the top 10 principles for Web UI
design. Be sure to consider repeated principles or overlaps of similar principles
with different names — principles that are commonly cited by multiple experts
are more likely to be the best or most important practices.
Skills review

You began this lesson by learning how to apply some essential user interface
design principles to the design of a Web site. Next you learned how to apply
visual principles (CARP, ERBU, and Gestalt) to Web site design. Then you saw
how you could use branding to increase your site audience. Finally, you learned
the basics of how to remain legal in your Web design activities.

Now that you have completed this lesson, you should be able to:

 4.1 Apply user interface design principles to Web site design.

 4.2 Describe CARP (contrast, alignment, repetition, proximity) and how it is
important to UI design principles.
 4.3 Describe ERBU (emphasis, rhythm, balance, unity) and how it is
important to UI design principles.
 4.4 Explain branding considerations in user interface design.
 4.5 Given a scenario, describe and resolve legal issues in Web design.

215
 CIW – User Interface Designer

Activity 4-1: Identifying UI design and legal terms

Optional Lab

Optional Lab 4-1: How company sites promote their brand

In this optional lab, you will investigate how successful companies use their Web sites to
promote their brand. You will then use this knowledge to enhance the branding plan you
created earlier in this lesson.

1. Investigate how each of these sites promotes its company brand:

216
 CIW – User Interface Designer

 Airbnb (www.airbnb.com)
 Microsoft Stories (news.microsoft.com/stories)
 Apple (www.apple.com)
 Vogue (www.vogue.com)

Dig deep! Do not just glance at the home page of the site.

Take notes! Do not trust your memory to retain important details.

Pay special attention to: logos, typography (font face, size, etc.), content
(text and images), target audience, uniqueness, consistency, and the
overall mood generated by the look and feel of the site. If you were writing
a word list to describe the site (as you did in Lesson 2), what five main
words and theme would you come up with?

2. Using your findings from Step 1 as a guide, enhance the branding plan you
created for your site earlier in the lesson.

Be as specific as possible. Do not say "Make the logo better." Say, for
example, "Make the logo about 20% larger, simplify its design, and make its
colors brighter."
In this optional lab, you discovered how companies use their Web sites to promote their
brand, then used this knowledge to guide how your site promotes your brand.
Glossary

brand style guide

A document that defines and presents examples of what your brand looks like.
branding

The practice by which a company creates a public image of itself to attract and
retain customers to purchase its products or services.

217
 CIW – User Interface Designer

breadcrumb trail

A Web site navigation technique that shows a hierarchical trail of pages leading
to the current page. For example: Home > About > Projects > Current.
heuristic

A guideline or rule of thumb for problem solving, learning, or discovery.

KISS

Keep it simple.
meme

An image or idea that spreads from person to person within a culture.

skeuomorphism

A design style in which pattern or ornamentation is made to resemble a real-

world counterpart, such as a lined notebook-paper look for a touchscreen or
keyboard note-taking tool.

Lesson 5

Color, Typography, Layout and Wireframing

Objectives
By the end of this lesson, you will be able to:
➥ 5.1 Describe the importance of color usage in user interface design.
➥ 5.2 Consider font choices and challenges in user interface design.
➥ 5.3 Identify elements of effective Web page layout (e.g., content, navigation, space), and
discuss variables that may apply to specific situations or site types. Given a scenario,
determine an effective Web page layout.
➥ 5.4 Create a Web page wireframe for a fictitious business.
➥ 5.5 Explain page layout techniques when creating user interfaces for mobile devices.

218
 CIW – User Interface Designer

Color

OBJECTIVE 5.1: Colors in user interface design

Color, Typography and Layout

Video transcript
Download

Color plays a vital role in Web site design. The right use of colors can effectively
convey a company's style, culture and mood. Likewise, poor color choices can
portray the company in an inaccurate, unflattering and possibly even damaging
light.

Tech Note
People are extremely sensitive to color. The color scheme of a Web page (or other user
interface) determines, to a significant extent, how users feel about the page, both
consciously and unconsciously. As a Web designer, you need to have a strong sense of
color theory and practice as it pertains to the Web.

The color scheme of a company's Web site is perceived as representing its

internal culture and the external industry in which is participates. A site with bold,
bright colors such as red, yellow and green might give the impression of a flashy,
artistic type of culture and industry, perhaps a high-tech software design or
graphic art firm. A site with more subdued colors such as soft whites, blues or
grays might be perceived as a more conservative or traditional organization.

Instructor Note: Ask students to think of examples of color schemes that are
strongly associated with companies. For example: Google, Coca-Cola, Best Buy,
Android. What do these color schemes say about their companies?
219
 CIW – User Interface Designer

As a Web designer, you need to answer the following kinds of questions when
creating a color scheme to ensure that the colors enhance, rather than detract
from, the image (brand) that the company wants to portray to the world through
its Web site:

 How many colors should be in the color scheme?

 How much contrast should there be between colors? How much blending?
 Should the colors be warm and bright, or cool and pale?
 What emotions should the colors evoke in visitors to the site, what mood?
Colors and emotions

There is a scientifically proven connection between color and emotion, according

to the founders of UXPin (2015). Certain colors tend to evoke certain emotions in
viewers. This reaction is partly innate and partly determined by cultural
background. (See below, "Color Associations in Different Cultures.") But you do
not need to see the results of a cognitive psychology study to know that certain
colors make you feel differently than others. The ability of colors to evoke
emotions is a key consideration in designing an effective color scheme for a Web
site.

Colors are generally divided into these three broad categories:

 Warm (stimulating, foreground) colors — reds, oranges, yellows

 Cool (calming, background) colors — greens, blues, purples
 Neutral colors — black, white, grays
Let us take a brief look at each of these colors and the emotions they tend to
evoke.

Tech Note
The following color associations represent general tendencies of how people react to
different colors. They are guidelines, not rules. Ten people looking at the same ruby-red logo

220
 CIW – User Interface Designer
might have 10 different emotional responses, all of which shared the defining quality of
warmth.

 Red — The warmest of the warm colors, red tends to be very stimulating. It
commands viewer attention, hence its use as an alarm to signal danger,
and to signal "stop," literally. Generally, you should use red sparingly to
emphasize one or a few focal-point elements of a page.
 Orange — Orange has enough of red's vitality to make it energetic, but it is
not as arousing as red. It is commonly used to show cheerfulness and
playfulness.
 Yellow — Yellow is a chameleon, changing its affect quite dramatically
depending on its shade. Bright yellow is extremely stimulating (so much so
that you need to exercise caution when using it), dark yellow (such as gold)
lends an air of elegance and antiquity to a design, and mid-yellow shades
tend to be warm and welcoming.
 Green — A bridge between the warm and cool colors, green is both
stimulating and relaxing. Think of lying in a cool field on a warm sunny day.
It generally conveys growth, both natural (the environment) and financial
(money). At a basic level it is also used to signal "go."
 Blue — The coolest of the cool colors, light blue is inviting and safe.
Facebook and Twitter both take advantage of the socially disarming
quality of light blue. Darker shades of blue tend to come off as more
serious and professional than lighter shades. Banks and financial
companies often use medium to dark blues.
 Purple — Purple is a complex color that evokes a sense of royalty, luxury,
sometimes even decadence. Lighter shades of purple are associated with
romantic love, while darker ones suggest mystery and hidden depths.
 Black — Black is a visual magnet, commanding viewer attention. It should
be used sparingly, so as to not completely dominate the design. Black is
associated with power, elegance and formality. It is also associated with
evil and death, another reason why you should exercise caution when
using it.
 White — White tends to gently repel viewer attention. This makes it the
perfect contrast to other colors in a design. When used as foreground,

221
 CIW – User Interface Designer

white lends purity and virtue to the whole. In the background, it diverts
attention to more stimulating elements.
 Gray — A bridge between black and white, gray is the most neutral of all
colors. Brightening or darkening its shade can give it varying degrees of
black's attention-drawing and white's attention-repelling qualities, making it
a uniquely powerful tool in the hands of a skilled designer.
Because people can be so strongly affected by colors, you need to optimize your
site's color scheme for its intended audience. This means you need to
understand your audience: its background, culture, demographics, wants, needs,
etc. Fortunately, you learned how to do this in Lesson 3: Designing for your
Audience.

Color associations in different cultures

Colors conjure up different emotional associations in different parts of the world,
as shown in Figure 5-1. Some associations differ dramatically across cultures,
such as red which is associated with danger and anger in the USA and Western
Europe, prosperity and good luck in China, purity in India, and sin in some parts of
the Middle East. Other associations differ more subtly, such as green which,
depending on the region, evokes slightly different flavors of hope, luck, harvest,
fertility and new life.

Tech Note
Again, these associations are general tendencies, not rules. For example, not every instance
of blue means trust in the West, immortality in Asia, or protectiveness in the Middle East.

If you are designing a Web site (or any user interface) for a specific country or
culture, you should pay attention to the color associations of that culture. If the
site will have a multicultural audience, you might need to either pick a neutral
color scheme or have multiple versions of the site with color schemes that fit
their target cultures.

222
 CIW – User Interface Designer

Figure 5-1: Color associations in different cultures

When you are gathering information about the audience(s) of a site you are
designing, make sure to identify the following:

 Color schemes that are likely to be neutral to the audience

 Color schemes that are likely to be attractive to the audience
 Color schemes that are likely to be unattractive or offensive to the
audience
If you are sure that a color scheme will be perceived as attractive by your site
audience, use it. If you are unsure, use a more neutral color scheme instead.
Never use color combinations that are likely to be unattractive or offensive to you
audience, even if you really like the colors.

Tech Note
Remember, one of the major goals of this course is to heal your Designer's Disease! To do
this, you need to master the art of seeing and experiencing things through your users' eyes
and mind. When building a UI, your personal aesthetic taste is only relevant in so far as it
enhances the users' experience.

223
 CIW – User Interface Designer

Color models
A digital display (desktop/laptop monitor, mobile screen, etc.) consists of a vast
number of tiny, densely packed visual objects called pixels. (As of 2015 most
smart phones have at least one million pixels. 4K devices have about nine
million.) Each pixel can display only one color at a time. So, when you view an
image on a digital device, you are actually seeing a multitude of single-colored
pixels arranged in a seamless grid. Due to how your brain processes visual data,
you perceive a single smooth image rather than a grid of separate dots, as
illustrated by Zach Rattner (2012) on the xstitch Web site (2015), as shown in
Figure 5-2.

Figure 5-2:
You see a single smooth image rather than a grid of separate dots

There are two main color models used to define a pixel's color: RGB and CMYK.

 RGB (Red, Green, Blue) - The RGB model is used to specify colors for a
digital display device (screen, monitor). It builds colors by combining
certain amounts of the primary colors red, green and blue. Maximum
values (full intensities) of all three colors yields white; zero values (total
absence) of all three yields black.
 CMYK (Cyan, Magenta, Yellow, Black) - The CMYK model is used to specify
colors for a printed item (magazine page, brochure, poster, etc.). It builds

224
 CIW – User Interface Designer

colors by combining certain amounts of the base colors cyan, magenta,

yellow and black. Maximum values of all four colors yields black; zero
values of all four yields white.

RGB CMYK

Used for digital displays Used for printed items

Base colors: red, green, blue Base colors: cyan, magenta, yellow, black

Black = zero values for all three colors Black = maximum values for all four colors
White = maximum values for all colors White = zero values for all colors

Table 5-1: Comparison of RGB and CMYK color models

Tech Note
RGB and CMYK are the most common, but not the only color models designers use. Others
models include: HSB (hue, saturation, brightness), indexed color, and Lab (lightness, A, B).
For more information, go to the Photoshop Help / About Color page that you can find by
Googling "Photoshop help about color."

Web sites commonly employ the RGB color model and those colors can be
indicated in a number of different ways. If an element needs to be red, it can be
styled with the common English name "red," or it might be specified with the RGB
triplet "RGB (255, 0, 0)," or using the hexadecimal format "#FF0000" (a hex
triplet). The hexadecimal numeral system uses three sets of two "bytes," making
6 digits altogether, where the bytes represent the red, green and blue
components of the RGB model. The value combinations range from 0-9 and A-F.

Name Hex RGB

Red #FF0000 255, 0 0

Yellow #FFFF00 255, 255, 0

225
 CIW – User Interface Designer

Green #00FF00 0, 255, 0

Blue #0000FF 0, 0, 255

White #FFFFFF 255, 255, 255

Black #000000 0, 0, 0

Table 5-2: HTML color names and hex values

Creating a color scheme

Now that you know a bit of color theory, it is time to learn how to create a color
scheme for a Web site (or other UI). In order to do this, and do it well, you need to
have a solid understanding of the art of combining colors.

As your eyes (and brain) clearly tell you, some colors combine well with each
other, and others do not. Choosing a good color combination might seem beyond
your ability, a talent possessed only by trained artists, but this is not the case. If it
were, many successful designers would be out of a job! There are effective
guidelines for choosing a set of colors that work well together. They begin with
a color wheel, illustrated in Figure 5-3 below:

226
 CIW – User Interface Designer

Figure 5-3: Color wheel

Tech Note
A color wheel is a circle divided into 12 equal sections, each a different color. Proceeding
clockwise from the top, the colors move through the entire visible spectrum of colors:
greens, blues, indigo, violet, red, oranges, and yellow.

A color scheme is like a musical chord, only with different colors instead of
notes. There are four main chords designers use to make their color schemes:
complementary, analogous, monochromatic and triad. Let us take a look at each
of these.

Complementary color scheme

A complementary color scheme uses colors that are opposite each other on the
color wheel, e.g. complementary colors. For example: red and green, blue and
orange, yellow and violet.

227
 CIW – User Interface Designer

The strong contrast of complementary colors creates high visual energy,

especially when the colors are saturated. For this reason, you need to manage
complementary color schemes carefully to prevent them from being visually
jarring.

The color circle in Figure 5-4 shows an example of a simple two-color (red and
green) complementary color scheme. The box to the right shows how the two
colors look together, and against a white and black background. A more complex
version of this complementary color scheme might include two shades of red
and three of green.

Figure
5-4: A simple two-color (red and green) complementary color scheme

Analogous color scheme

An analogous color scheme use colors that are adjacent to each other on the
color wheel. The resulting color combinations tend to blend well and look good.
Analogous color schemes are often found in nature, which lends them a sense of
harmony.

228
 CIW – User Interface Designer

A good approach for creating an analogous color scheme is to choose a

dominant color, a secondary support color and an accent color. (You can also
choose multiple dominant, secondary, or accent colors.) In the analogous color
scheme shown in Figure 5-5, blue is the dominant color, dark green the support
color, and light green the accent color.

Figure 5-5:
A three-color analogous color scheme

Monochromatic color scheme

Monochromatic is the simplest of all color schemes, in that it only uses a single
color. To maintain visual interest, a few shades of this color are generally
included in the scheme.

Monochromatic color schemes tend to be tasteful and harmonious. Limiting your

color palette to different shades of the same color gives the page a visual
consistency and sense of unifying rightness. Minimal design and monochromatic
colors generally go well together, creating a simple, clear and elegant interface.

A note of caution: If the colors of a monochromatic scheme are too similar, it can
be difficult for users to tell them apart. For your monochromatic scheme to work,

229
 CIW – User Interface Designer

you need to find a middle ground between monotony and diversity.

Figure 5-6 shows a set of 12 monochrome color schemes, each containing five
variations of a color: red, orange, yellow, green, and so on.

Figure 5-6: A
set of monochromatic color schemes

Triadic color scheme

A triadic color scheme uses three colors that are evenly spaced around the color
wheel. Triadic color combinations tend to be quite vibrant, even with pale or
unsaturated colors.

To create a successful triadic scheme, you should pick the colors carefully to
optimize their balance. A good approach is to choose one dominant color and
two accent colors. In the triadic color scheme in Figure 5-7, green is the dominant
color, and violet and orange the two accents.

230
 CIW – User Interface Designer

Figure 5-
7: A three-color triangular color scheme

Using Adobe Color CC to create color schemes

You can use a graphics application like Photoshop to create a color scheme by
manually picking colors and adding them to a blank white or black canvas to see
how they blend with each other, but that requires a fair amount of skill in color
combination and can be very time consuming.

Another option is to use the excellent online tool, Adobe Color CC (formerly
Adobe Kuler), which you can get to by going to the Adobe Web
site (https://color.adobe.com/) and clicking on the Colors link (Figure 5-8).

231
 CIW – User Interface Designer

Figure 5-
8: Adobe Color CC (formerly Adobe Kuler)

As you can see in the Color Rule menu, Color CC enables you to create all four of
the color scheme types discussed above: analogous, monochromatic, triad, and
complementary. It also lets you create compound, shades, and custom schemes,
change a scheme's base colors, fine-tune the color rule application, and more.
And it shows the RGB and hexadecimal values for each color in the scheme.

Color CC is an equally effective way to create color schemes as doing so

manually in a graphics program. In fact, many professional designers prefer
Color CC to manual color scheme creation, because the results are so fast and
impressive.

Color CC is easy to use. Just dive in and learn as you go, or watch the Get Started
with Adobe Color CC video, which you can find by searching the Internet for
"adobe tv color cc". In just a few minutes, you will be ready to get started making
your own color schemes.

Tech Note

232
 CIW – User Interface Designer
Another excellent color-scheme creation tool is Paletton at http://www.paletton.com. It is
easy to use, offers several different base schemes (monochromatic, adjacent, triadic, etc.),
and lets you preview your chosen colors on a Web page with text, images, and background
colors.

In the following lab, you will create a color scheme for a Web site. Suppose you
are the newest member on a design team tasked with creating a rough mockup
of the home page of a site for a new, big client. The team manager gives you the
job of creating four very different color schemes for the site. You can do this by
using Color CC or manually creating a complementary, analogous, monochrome
and triadic scheme.

Lab 5-1: Creating a color scheme for your company site

In this lab, you will create a color scheme for your company Web site.

Instructor Note: If time is an issue, consider asking students to create just one or two of
these schemes manually.

1. Based on the material in this section, use a graphics application to

manually create a complementary, analogous, monochrome and triadic
color scheme for your site. Write down the RGB values for each color in
each scheme.

Make your color schemes clearly different in look and feel. That way, you
will have a variety of schemes from which to choose a winner.

2. Use Color CC to create a complementary, analogous, monochrome and

triadic color scheme. In addition to these, use the camera icon in the
upper-right part of the Color CC page to create a color scheme from an
existing image. Write down the RGB values for all scheme colors.

Compare the experiences of creating schemes manually and with Color

CC. Which do you find easier? Which yielded the best results?

233
 CIW – User Interface Designer

3. From your eight schemes, choose the three or four you think are the best
for the site. Create a simple test Web page that shows how each scheme's
colors blend together.

Consider how the colors blend when next to each other, overlapping and
separated by empty white space. See how legible text is against all the
colors.

4. Based on your results, choose the single best scheme for your site. Think
of this now as your site color scheme. Keep the other schemes. You might
change your mind later in the process!
In this lab, you created a color scheme for your company Web site.

Typography

OBJECTIVE 5.2: Font choices and challenges

There are mixed feelings among Web designers about the importance
of typography. Some feel that it is more fashion than anything else, e.g. Web
page cosmetics. Others feel it is as important as color schemes and layout. As a
professional Web designer, you should cultivate the latter view. You need to
understand the power of typography, how much it can improve the aesthetics
and usability of a site when it is done right, and how much it can harm the site
when it is done wrong.

Tech Note
Typography expert Thomas Phinney contends that 90% of Web design is typography. Other
designers say 95%. The lesson to be learned is that the font faces, sizes and styles you
choose for the text in a site strongly affect the overall design and usability of the site.

Font typeface

234
 CIW – User Interface Designer

Typography, like color, affects viewers on an emotional level. This happens

consciously: I love that headline font! Or, sometimes: I hate that typeface, it's so
flowery I can hardly read it! More often, it happens unconsciously. A page will
look elegant and authoritative to a site visitor, largely due to its use of a time-
proven sans-serif typeface like Helvetica. If asked why the page looked so
authoritative, however, the user would most likely not be able to say.

Tech Note
The power of typefaces to affect emotion is well known to commercial artists. Browse
through the ads in a magazine. When you find one that evokes strong feelings — positive or
negative — focus in on its typefaces. Chances are they contributed quite a bit, probably
unconsciously, to your emotional reaction.

There are two main categories of typefaces used in Web design:

 Serif
 Sans-serif
And three secondary categories:

 Cursive
 Fantasy
 Monospace
Most of the typography on the Web is composed of serif and sans-serif
typefaces. Cursive, fantasy, and monospace typefaces are reserved for special
text items, such as announcements and invitations (cursive), logos and ads
(fantasy), and programming code (monospace).

Let us take a look at these five categories of typefaces.

Tech Note

235
 CIW – User Interface Designer
Though typeface and font are often used interchangeably, they are not the same thing. A
typeface is the design of a set of characters. For instance, Book Antiqua. A font is the
typeface, size and style of a character set; Book Antiqua, 20 pixels, Bold.

Serif and Sans-Serif typefaces

Serif typefaces (such as Book Antiqua) have small decorative strokes (serifs)
added to the end of a character's strokes as shown in Figure 5-9:

Figure 5-9: The Book

Antiqua serif typeface

Mid-sized (8-40 points) serif typefaces improve readability by leading the eye
along the line of type. Small (less than 8 points) and large (more than 40 points)
serif typefaces are generally more difficult to read than sans-serif typefaces (see
below). Traditionally, mid-sized serif typefaces are used for body text.

Popular serif typefaces for the Web include: Book Antiqua, Georgia, Palatino
Linotype and Times New Roman.

Sans-serif typefaces do not have serifs as shown in Figure 5-10:

Figure 5-10: The Tahoma sans-serif

typeface

236
 CIW – User Interface Designer

Instructor Note: Make sure students understand that readability should be a

designer's key consideration in font choice. Sans-serif characters are reduced to
essential strokes, with little to no decoration. Traditionally, sans-serif typefaces
are used for small (less than 8 points), like footnotes, and large (more than 40
points) text, such as headlines. However, sans-serif typefaces such as Verdana
and Georgia were designed specifically for optimal readability on digital displays,
and today are often used for body text as well.
Popular sans-serif typefaces for the Web include: Arial, Impact, Tahoma,
Trebuchet MS, and Verdana.

Tech Note
Though Web designers often use mid-sized serif typefaces for body text, there is a
consensus by some designers that sans-serif typefaces work better and are more legible
and easier on the eyes. You should take this into account when choosing typefaces for a
site.

Cursive, Fantasy, and Monospace typefaces

Cursive (or script) typefaces emulate the fluid, joined strokes of cursive
handwriting (see Figure 5-11):

Figure 5-11: The

Brush Script MT cursive typeface

Because cursive typefaces can be difficult to read, especially at small sizes, it is

best to use them sparingly. An example of the potential downside of using
cursive typefaces is illustrated nicely in Figure 5-11 above. If you had not seen
the caption, you probably would have thought the typeface name ended with M7
rather than MT, because a capital T is easily taken for a 7 in Brush Script MT.

Fantasy (or decorative) typefaces contain ornamental or decorative properties as

237
 CIW – User Interface Designer

shown in Figure 5-12:

Figure 5-12: The Papyrus fantasy typeface

The lure of fantasy typefaces can be strong, particularly for new typographers.
They often look imaginative and cool, real attention grabbers. But, even more
than with cursive typefaces, you need to exercise caution and restraint when
using them in a Web design.

The Papyrus typeface is quite conservative for a fantasy font; it is pleasant-

looking and legible. But some fantasy typefaces are so wildly ornamental that
they are borderline illegible or dominate the page so strongly that they eclipse the
other page elements and content, like an actor eclipsing her co-actors by hogging
the show.

Monospace typefaces contain equal-width characters, as shown in Figure 5-13:

Figure 5-13:
The Lucida Console monospace typeface

In a monospaced typeface, such as Lucida Console, every character (lowercase

and uppercase letters, numbers, punctuation marks, symbols, and spaces) is
exactly the same width. This enables characters in adjacent lines of text to be
aligned in precise vertical columns.

In a non-monospace (also called proportional) typeface, narrow characters take

up less horizontal space than wide characters. For example, a lowercase i takes
up much less space than a capital M.

238
 CIW – User Interface Designer

Web designers use monospace typefaces in just a few specific situations: to

display source code on a page (because programmers often use monospace
typefaces), to create ASCII art (which is built on monospace typefaces), or to give
a site a retro, early-computer-days look (which was dominated by monospace
typefaces).

Font style
The term font style is used to describe several variations of a typeface, including:

 Normal (also called roman) mdash; plain, un-styled font characters

 Bold — darker and heavier characters
 Italic (also called oblique) — right (and occasionally left) slanting
characters
 Underline — characters with a horizontal line beneath them
 Strike-through — characters with a horizontal line through them
 Subscript or superscript — characters positioned below or above the font
baseline
 All caps or small caps — characters capitalized at normal or small size
These styles can be used singly or in combination with each other: bold italic,
italic underline, bold italic superscript, etc.

Though there are no absolute rules governing font style usage, here are some
guidelines that can help you choose font styles that are appropriate for your UI
designs:

 Beware of combining styles. In general, less is more when it comes to font

styles. If you need to emphasize something, bold generally does fine on its
own. Bold italic or bold underline is usually overkill and eye-straining.
 Use the main emphasis styles (bold, italic, underline) frugally. Emphasized
items should be the exception, not the norm. If you emphasize everything,
you end up emphasizing nothing.

239
 CIW – User Interface Designer

 With a serif typeface, use italic for gentle emphasis and bold for stronger
emphasis. With a sans-serif typeface, use bold for emphasis, not italic — it
can be hard to tell the difference between italicized and non-italicized
sans-serif fonts.
 Italicize foreign words, unless they are in common parlance.
 All caps or small caps, in some situations, can be an effective method for
emphasis. Take care, however: Using all caps is generally considered to be
pushy and impolite.
 If a font has multiple weights of bold — semi-bold, bold, ultra — consider
using light bold for more subtle emphasis and smaller fonts, and heavy
bold for stronger emphasis and larger text.
Web-safe vs. custom fonts
When you are planning which fonts you want to use in a Web site, the first thing
you need to decide is whether to use Web-safe fonts, custom fonts, or a mix of
both.

Web-safe fonts
Web-safe fonts are fonts you can safely assume are installed on the majority of
your users' browsing devices.

If a font you specify in a Web page is not installed on a device, the browser will
automatically substitute a font for it. Theoretically this substitute will be very
similar in appearance to the original, but in practice this does not always happen.
Plus, if you care about displaying a specific font, any substitute — even a good
one — will be inferior. It is for these reasons that Web designers often restrict
their typography to Web-safe fonts.

Popular Web-safe fonts include:

 Serif — Book Antiqua, Georgia, Palatino Linotype, Times New Roman

 Sans-Serif — Arial, Impact, Tahoma, Trebuchet MS, Verdana
 Monospace — Lucida Console, Courier New
 Cursive — Brush Script MT
 Fantasy — Papyrus

240
 CIW – User Interface Designer

Never rely on any font you use on a Web page, even a Web-safe one, to be
present on a user's browser. Instead, exercise caution by always including three
items in the CSS font-family property: the desired font, an alternative font in case
the desired font is not present and a generic font family in case the desired and
alternative fonts are not present. For example:

font-family: Helvetica, Tahoma, sans-serif;

Custom Web fonts

Custom Web fonts are fonts which are stored on remote servers and linked to
Web pages using the CSS3 font-face rule. When the page loads in a browser, the
custom font loads along with it. The benefit of custom fonts is that they enable
you to choose the exact right font for a particular page design, rather than having
to compromise by choosing a generic Web-safe font. The disadvantage is that
downloading a custom font takes time, which can noticeably slow down page
load speed.

To find out more about custom Web fonts, search for relevant articles on sites
like Creative Bloq, Aeolidia, and Adobe Developer Connection.

Tech Note
Due to the possibility of slower page loads, you should limit your font usage to Web-safe
fonts, unless doing so will detract significantly from your site design. Always start by trying
to find a good design solution that uses Web-safe fonts. Only if you are convinced it will not
work should you consider using custom fonts.

Font size

All Web browsers have a default font size, typically 16 pixels (12 points).
Although users can increase or decrease this default size, most do not bother to
do so because it involves extra effort. This means that if you do not specify a
font size in your Web page code, you should count on the text being displayed at
the default size of 16 pixels.

The good news is that the rule of thumb is for Web page body text to be a
minimum of 16 pixels. So you should be fine if you go with the browser default
241
 CIW – User Interface Designer

font size. Beware of going any smaller, because it risks making text difficult, or
even impossible to read. This is particularly true if your audience includes people
over 40, which is the case for most site audiences.

In terms of maximum font size, major items like headlines and page titles can be
arbitrarily large, even take up the entire width of the browser window if the page
design calls for it. But you should keep the body text to a maximum of 24-27
pixels (18-20 points). Larger text tends to decrease readability by making it more
difficult for people to scan text lines quickly and fluently. Straining your users'
eyes is not a good way to attract them back to your site.

Tech Note
Though it can be tempting to display small text — it can look distinctive and quite elegant —
you need to resist that temptation! Keep the larger goal in mind: To optimize the usability of
the site. Or, in typographical terms: to optimize its legibility and readability. Choose an eye-
friendly look and feel for your fonts.

Font color

The readability of Web text is determined in large part by its color and the color
of the background against which it is displayed. Small changes in
text/background colors can produce large changes in readability. Unless you
have a great deal of experience, you should not rely 100% on your visual instincts
to determine if a text/background combination works or not. Combinations you
find highly readable might prove to be highly unreadable for a portion of your site
visitors. Instead, you need to gain an objective understanding of which color
combinations enhance Web text readability, and which weaken it.

The W3C color visibility algorithm is a good starting point for doing this. (Several
Web sites provide online "calculators" if you do not want to do this manually,
e.g. www.etre.com, www.jucystudio.com and www.456bereastreet.com.)
Walking through the process as outlined below, however, will improve your
understanding of the guidelines for color combinations. The W3C color visibility
algorithm states that two colors are considered to provide good color visibility if
their brightness difference and color difference are both greater than these

242
 CIW – User Interface Designer

values:

 Brightness difference: 125

 Color difference: 500
To calculate brightness, you use this formula:

((R × 299) + (G × 587) + (B × 114)) / 1000

Where R = red value (0-255) of the RGB color, G = green value, B = blue value.

And to calculate color difference, you use this formula:

(max (R1, R2) - min (R1, R2)) + (max (G1, G2) - min (G1, G2)) + (max (B1, B2) - min (
B1, B2))

Where max (R1, R2) = the maximum of the two values, R1 (red value of one color) and R
2 (red value of the other color).

So, if you used the classic combination of black text against a white background,
you would proceed as follows to find its color visibility.

To calculate the brightness difference, you need to calculate the brightness of

values of white and of black. Applying the above formula, the brightness of white
is:

((R × 299) + (G × 587) + (B × 114)) / 1000

= ((255 × 299) + (255 × 587) + (255 × 114)) / 1000
= (76245 + 149685 + 29070) / 1000
= 255000 / 1000
= 255

And the brightness of black is:

243
 CIW – User Interface Designer

((0 × 299) + (0 × 587) + (0 × 114)) / 1000

= 0 / 1000
=0

To get the difference between these two brightness values:

255 - 0
= 255

This more than satisfies the requirement that the brightness difference must be
greater than 125. So in terms of brightness, the algorithm considers the
black/white color combination to be very readable.

Now onto the color difference. Here is the calculation:

(max (R1, R2) - min (R1, R2)) + (max (G1, G2) - min (G1, G2)) + (max (B1, B2) - min
(B1, B2))
= (max (255, ) - min (255, )) + (max (255, ) - min (255, )) + (max (255, ) - min (255,
))
= (255 - 0) + (255 - 0) + (255 - 0)
= (255 + 255 + 255)
= 765

Again, this substantially exceeds the requirement that the color difference be
greater than 500. With both requirements generously met, the algorithm
pronounces the white/black color combination to be highly readable. Which
should come as no surprise, since black against white is well known to be one of
the most readable text/background color combinations.

Instructor Note: Consider showing the class a text/background combination with

lower readability, giving them the RGB values of both colors, and having them do
the calculations to see if the W3C algorithm finds the combination to be readable
or not.

But chances are you will want — or need, if a client requests it — to expand your
text/background palette beyond just black and white. As you might expect, the

244
 CIW – User Interface Designer

further your text/background color combinations get from simple schemes like
black/white, the more difficult it is to determine with certainty how readable a
combination is. That is where the W3C color visibility algorithm can be truly
useful.

Tech Note
As stated above, the W3C color visibility algorithm is a good starting point for determining
readability. It is not flawless! At best it can give you an objective estimation of readability.
To verify its findings, you need to test your text/background color combinations on real-
world users, especially those over 40 or with some degree of visual impairment.

Color blindness
Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in
the world. In Britain this means that there are approximately 3 million colour blind
people (about 4.5% of the entire population), most of whom are male. For this
reason, it is prudent and ethically responsible to design sites that are as equally
readable for users with and without color blindness.

This is, fortunately, not a very difficult task. You just need to be willing to follow a
few guidelines to accomplish this.

There are several different types of color blindness: total (all colors) and partial
(red-green and blue-yellow).

Here are some useful guidelines from an article by Jeanne Liu (2010) for
designing color-blind safe Web pages:

 High-contrast colors tend to work well for color blind users, white and
black being the best example. A good practice is to view the site
periodically in gray scale instead of color during the design process. If you
can clearly differentiate elements in gray scale, it is a good bet color blind
users can clearly differentiate them in color.
 Similarly, bright colors generally work better for the color blind than dark
colors. People who have color deficiencies can see all the colors but they

245
 CIW – User Interface Designer

have a problem differentiating between them so using bright, bold colors

helps.
 No visual element should rely wholly on color to communicate its function.
Buttons, links, navigation controls and other similar elements should be
enhanced with an image, shape, or text label. For example, a colored link
should also be underlined.
 Image maps can pose a problem for color blind users if borders between
clickable areas are drawn in color. A simple solution is to draw the borders
in black instead. Alternately, you could add text labels to the clickable
areas, assuming these labels did not adversely affect the efficacy or
aesthetics of the image map.
 Other issues to consider are the contrast between colors and the
background. People with color blindness are less sensitive to colors on
either end of the spectrum. For example, reds and blues often appear to be
darker to the color blind user.
There are several color blindness simulators you can use to see how a specific
color combination looks to people with different types of color blindness. Before
committing to a Web page color scheme, you should always run it through a
color blindness simulator to make sure the scheme is clear and legible to your
color blind site visitors.

Good color blindness simulator browser plugins include Spectrum and SEE, both
for Google Chrome. Sites include Coblis and Vischeck. The Paletton color
scheme designer has a Vision Simulation link that simulates different types of
color blindness.
Font spacing

Font spacing is the amount of space between characters. Fonts with a large
amount of space between characters are called open or loose, and those with
little space are called tight. The default spacing of a font is dependent on the
intended feel of the font and on its size. The smaller the font, the more space is
needed between letters to keep the text legible. Larger font sizes require tighter
spacing for legibility.

Kerning is the adjustment of space between characters. For the character

246
 CIW – User Interface Designer

spacing of a block of text to look consistent, the spacing between all of its
characters needs to look equal. But this is not always the case if you rely on the
default spacing of a font. For example, using the default spacing of the Georgia
font (top of Figure 5-14), the character pairs AV and VA are too loosely spaced,
and AI is too tight. Kerning AV and VA to be closer together and AI to be farther
apart results in more even and consistent spacing (bottom of Figure 5-14).

Figure 5-14: Kerning the

AV, VA, and AI character pairs makes the text look more consistent

CSS is very limited in its kerning abilities. You can use the letter-spacing property
to increase or reduce the character spacing of an entire block of text, but not to
kern individual character pairs. Your best option is to set the text-rendering
property to optimize Legibility. The text-rendering property is not in the CSS
standard, but is supported by many browsers.

To tap into the full power of kerning, you need to use a graphics application that
provides good kerning control. Fortunately, most do: Photoshop, Illustrator, GIMP,
Inkscape, etc. When you use such an application to create an image that includes
text, you can kern it to your heart's content.
Combining fonts

Combining fonts is more of an art than a science. The right mix of fonts can
make a page beautiful; the wrong mix can make it amateurish, ugly and difficult
to read. As with all art, there are no absolute rules for combining fonts, but here
are some useful guidelines from an article by Douglas Bonneville (2010) you can
follow:

247
 CIW – User Interface Designer

 Use a minimum of two fonts on a page (e.g. one for headings, one for body
text) and a maximum of about seven fonts (two or three for headings, two
for body, one for links, one for navigation and one for fine print like
copyright).
Remember, a font is not just a typeface (Verdana), it is a typeface, size, and
style (Verdana, 22 pixels, italic).
 Do not mix fonts with incompatible personalities. The personality of a font
is its look and feel, the mood (often subconscious) it evokes in the reader.
 Combine a larger, heavier sans-serif heading with a smaller, lighter serif
body font. This classic combination is virtually guaranteed to work well,
provided that the personalities of the sans-serif and serif fonts are
compatible.
 Use fonts to differentiate text, thus reinforce the visual hierarchy of the
page. Especially if there is a lot of text on a page, you need to help your
readers know, at a glance, where to direct their attention.
 Assign each font to a distinct role on the page: body headings, body text,
sidebar headings, sidebar text, links, image captions, etc. This consistency
boosts readability.
 Pair distinctive fonts with more neutral ones. If every font on the page
grabs the user's attention, the resulting visual chaos will make the page
difficult to read.
 Avoid font contrast overkill. The right amount of contrast increases a
page's readability; too much is disruptive and lowers readability.
Butterick's rules for Web typography

Matthew Butterick, a Los Angeles based typographer and lawyer, has written a
short pragmatic book on typography and made it available for free online. It is
called Butterick's Practical Typography (http://practicaltypography.com/).

In the section entitled Typography in Ten Minutes, he makes a bold claim: "If you
learn and follow these five typography rules, you will be a better typographer than
95% of professional writers and 70% of professional designers." He goes on to
say that, if you read the entire book, you will end up in the 99th percentile in both

248
 CIW – User Interface Designer

categories.

Though Butterick's book addresses both print and Web typography, and though
his claims are indeed bold, there is a lot that you can learn from his Ten Minute
rules. His overarching rationale is this:

Because there is typically more body text than anything else on a page, the
page's typographic quality is determined mainly by how the body text looks. For
this reason, you should begin the typographical design of a Web page by making
its body text look good: aesthetically pleasing, appropriate for the page feel and
content, and legible. Only when you have accomplished this should you move on
to the other page text.

The appearance of the body text on a Web page is determined primarily by these
four typographic rules:

 The font size should be 15-25 pixels (11-18 points). This is considered to
be the optimal font size range for readability. Since some fonts look
smaller or larger than others at the same point size, you might need to
adjust this range accordingly.
 The line spacing should be 120-145% of the point size. For example, for 12-
point text you should set the line spacing to 14.5 to 17.5 points, depending
on the context and your typographic taste. Using line spacing in this range
optimizes readability.
 The line length should be 45-90 characters per line (including punctuation
and spaces), roughly equal to just under two to about 3.5 lowercase
alphabets:

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrst
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmn
opqrstuvwxyzabcdefghijkl

249
 CIW – User Interface Designer

Again, the reason for limiting line length is readability. It is more difficult to
scan a long line and then jump down to the next long line than it is to
process shorter lines.
In the following lab, you will create a typography scheme for a Web site: a
combination of fonts that work well together on the page. Suppose you are a
freelance consultant with a reputation for excellence in Web typography. The art
designer of a large international company hires you to recommend a typography
scheme for the new version of the company site that is due to go live early next
year. You can do this by following the guidelines in this lesson for font selection
and combination.

Lab 5-2: Creating a typography scheme for your site

In this lab, you will create a typography scheme for your company Web site. Base your font
choices on the material in this section, particularly the tips for combining fonts.

1. Begin by creating a two-font typography scheme. Choose one font for

larger text (headings, titles, etc.) and one for smaller text (body, sidebars,
etc.). Make sure the two font personalities work well together: are
attractive and highly readable.

Note: Choosing a font means choosing a typeface, size, and style. For
example: Georgia, 12 points, normal (not bolded or italicized).

2. Test your two-font typography scheme by creating a simple Web page and
populating it with appropriate text for each font.
3. Create a second typography scheme by assigning a different font to each
of these text elements:

Main headings — for page titles, body headings, etc.

Secondary headings — for subtitles, sidebar headings, etc.
Small headings — for subheadings
Main body text — for main body text
Secondary body text — for secondary body/sidebar text
Fine print — for footer copyright information
250
 CIW – User Interface Designer

Inline links — for inline text links

Navigation links — for navigation-bar text links
Small links — for a condensed site map

4. Test your second typography scheme on a Web page.

5. You now have two very different typographic schemes to choose from: a
minimal two-font scheme, and a more complex multiple-font scheme. If
you find either of them satisfying as-is, make it your official site typography
scheme. If not, fine-tune the scheme you prefer until it meets your site's
typographical needs.
6. Once you have decided on a typography scheme, you need to choose font
colors that are legible against the background colors of the site color
scheme you created in the previous lab. You can test text/background
color combinations manually, or use an online color accessibility tool like
Contrast-A, which you can find by searching contrast-a.
In this lab, you created a typography scheme for your company Web site.

251
 CIW – User Interface Designer

Exercise 5-1: Color and Typography

Layout

OBJECTIVE 5.3: Effective page layout

A layout is the way in which the parts of something are arranged within the
whole.

In the case of a Web-based user interface design, the whole is the Web page, and
the layout is the way in which all the interface's visual elements are arranged
within this page: text (headings, paragraphs, lists, columns, etc.), images,
multimedia, widgets (buttons, tabs, menus, etc.), and so on.

252
 CIW – User Interface Designer

The main sections of a basic Web page layout (Figure 5-15) include:

 Header — at the top of the page, typically contains the company logo and
tagline, page title, hero image, search box, etc.
 Navigation — usually below the header or on the side (or both), contains
site navigation controls
 Content — main page content (text, images, and multimedia) in the body of
the page (between header and footer)
 Footer — at the bottom of the page, typically contains company and
copyright information, terms of use and privacy policies, a condensed site
map (list of links to main pages), etc.

Figure 5-15:
The main sections of a basic Web page layout

253
 CIW – User Interface Designer

For comparison, here (Figure 5-16) is a more complex page layout in which the
sections shown in Figure 5-15 are populated with additional elements: logo,
search box, tabbed content, sidebars, etc.

Figure 5-16: The same basic page layout populated with additional elements
White space

White space — empty space — separates elements on a Web page. It is also the
visual glue that holds all these elements together: sections (header, content,
etc.), objects within these sections (logo, tagline, etc.), words in a sentence,

254
 CIW – User Interface Designer

letters in a word, and so on.

You need to use the right amount of white space on your Web pages. Too little
and a page can look cramped and disorganized. Too much and it can come off
bloated. You should aim for a happy medium between these two, one in which
white space makes the page look clean and inviting.

Here are some guidelines for using white space in your Web pages:

 You can use white space to improve a page's readability and

understandability. White space between paragraphs and around text
blocks and images helps people understand what they are seeing and
reading, thus increasing the page's usability.
 Use white space to emphasize objects on a page. Surrounding an object
with white space can be just as effective a way to emphasize it as making
the object bigger or brighter in color.
 White space can make a page look more professional and elegant. The
proper use of white space — as mentioned above, not too little, not too
much — makes a Web page look clear, clean and correct. Poor white space
usage gives a page an amateurish look, which is a sure way to scare off
potential site visitors.
 You can use white space to differentiate objects on a page. Inserting white
space between objects separates them visually and cognitively. This
enables clearer communication of images and ideas, particularly on dense
pages.
Layout columns

Content boxes (HTML <div> elements) divide a page width-wise into layout
columns. For example, the page in Figure 5-16 above has a three-column layout.
Web pages can have anywhere from one to five or more columns. Let us take a
look.

One-column layout
Figure 5-17 shows a basic one-column Web page layout, a page with one content
255
 CIW – User Interface Designer

box that spans its entire width:

Figure 5-17:
Basic one-column layout

Figure 5-18 shows an example of a one-column layout used by the Story of the
Web site (www.storyoftheweb.org.uk) hosted by the UK domain registry service,
Nominet. Technically there are two columns present, but the date column on the
left is so narrow that it registers more as a navigation bar than a column.

256
 CIW – User Interface Designer

Figure 5-18: This page from the Nominet Story of the Web site has a one-column
layout

Two-column layout
Figure 5-19 is a basic two-column layout, a layout with two content boxes that
span the width of the page:

257
 CIW – User Interface Designer

Figure 5-19: Basic

two-column layout

Many "off-the-shelf" blog layouts like the speakFathom

blog (www.rachmiel.org/blog) below in Figure 5-20 use a two-column layout. As
is often the case with multiple columns, one column is significantly narrower
than the other. Narrower columns like this are typically called sidebars.

258
 CIW – User Interface Designer

Figure 5-20: The speakFathom blog uses a two-column layout

Three-column layout
Figure 5-21 is a basic three-column layout, with three content boxes that span the
page:

259
 CIW – User Interface Designer

Figure 5-21: Basic three-column layout

The Metacritic Movies in Theaters

page (www.metacritic.com/browse/movies/release-date/theaters/date) uses a
three-column layout as shown in Figure 5-22. In this case, all three columns are
the same width, though the one on the right still serves as a sidebar.

260
 CIW – User Interface Designer

Figure 5-22: This Metacritic page uses a three-column layout

Four-column layout
Figure 5-23 is a basic four-column layout with four content boxes spanning the
page:

261
 CIW – User Interface Designer

Figure 5-23: Basic four-column layout

The International New York Times online

version (international.nytimes.com) uses a four-column layout on its front page,
three of equal width and one twice as wide, as shown in Figure 5-24. Search this
site to see the layout. In the pre-web days, printed newspapers often had six or
more columns of densely packed text. To increase readability, most
contemporary online papers use two or three columns. The New York Times
strikes a compromise between the old and new by using four columns.

262
 CIW – User Interface Designer

Figure 5-24: The International New York Times home page uses a four-column
layout

Five columns and beyond

Figure 5-25 is a basic five-column layout with five content boxes spanning the
page:

263
 CIW – User Interface Designer

Figure 5-25: Basic five-column layout

The Tumblr Houses page — which you can access by going

to www.tumblr.com and searching for houses — uses a five-column layout
(Figure 5-26), and the Netflix (www.netflix.com) page uses a six-column layout,
as shown in Figure 5-27. Multiple-column layouts like these are often used for
displaying a large set of tiles or thumbnail images. They are rarely used for
displaying text, because dividing text into many narrow columns tends to reduce
readability.

264
 CIW – User Interface Designer

Figure 5-
26: This Tumblr Houses page has a five-column layout

Figure 5-
27: This Netflix page uses a six-column layout

265
 CIW – User Interface Designer

Craigslist (https://rochester.craigslist.org/) is one of the few popular text-heavy

web pages that uses more than four columns, as shown in Figure 5-28 uses a
five-column page. The reason the page design works reasonably well is because
the text consists of easy-to-read short links, not sentences or paragraphs which
would be far less readable.

Figure 5-28: This Craigslist page is one of the few all-text pages that uses a five-
column layout

266
 CIW – User Interface Designer

Exercise 5-2: Web Page Layout

Wireframes and Mockups

OBJECTIVE 5.4: Web page wireframe

Now that you have a solid foundation in color, typography, and layout, you can
move on to the next phase of the design process, in which you will create two
related items:

 Wireframes — blueprint-like diagrams of Web page layouts

 Mockups — high-fidelity graphic images of Web pages
For those of you who have patiently walked with us through the first few theory-
heavy lessons of this course and are itching to start putting your design ideas
into tangible visual form, congratulations: You are about to get your wish!

Creating Wireframes and Mockups

267
 CIW – User Interface Designer
Video transcript
Download

A note on graphics application competency

You will be doing a fair amount of graphics work in this section, especially when
you create mockups. To do a good job, you need to be competent at a graphics
application, such as Photoshop, Illustrator, Fireworks, GIMP, Axure, Balsamiq, etc.

Providing you with a foundation of graphics creation skills is beyond the scope of
this course. Fortunately, plenty of good tutorials are available online (Web pages
and videos) for all graphics programs. If you are using Photoshop, both Adobe
TV and Lynda.com offer excellent instruction. For other graphics applications,
use Google or Bing to find introductory tutorials.

Tech Note
The Adobe suite of graphics applications are, by far, the most commonly used graphics
creation tools by design professionals. The "big three" applications are: Photoshop,
Illustrator, and InDesign. If you plan on becoming a professional Web designer, you should
take the time to become competent on all three.

Wireframes

A wireframe is a diagram that shows the layout of a Web page (or other user
interface). You can think of a wireframe as an architectural blueprint for a Web
page. The key structural elements of the page are present in the wireframe, but
the actual content — text, images, widgets, multimedia — is not.

The fidelity (level of detail) of a wireframe determines which objects are included.
A low-fidelity wireframe typically shows only the main layout sections of the
page: header, navigation, content, footer, etc. A high-fidelity wireframe shows
these sections plus the objects residing in them: header — logo, page title,
tagline, hero image; navigation — link buttons or drop-down menus; etc.

268
 CIW – User Interface Designer

You can follow this three-step procedure to create a Web page wireframe:

1. Write a list of all the objects you want to include in the wireframe.
2. Sketch the wireframe by hand, making sure to include each object in the
list.
3. Use a computer to make your wireframe sketch into a wireframe graphic.
Let us take a closer look at each of these steps.

1. Write a list of all the objects to include in the wireframe.

The contents of this list depend on your desired wireframe fidelity. If you are
creating a low-fidelity wireframe, include only the main page sections in the list. If
you are creating a high-fidelity wireframe, include all the page objects.

2. Sketch the wireframe by hand, making sure to include all listed objects.
The goal of this sketch is to position every object in an appropriate, logical place
on the page. It is not to draw a masterpiece. If you are nervous about sketching
by hand, think of sketching as visual communication, not fine art. If you can draw
a stick figure, you can draw a wireframe.

Tech Note
Use a pencil and eraser, so that you can easily edit your sketch as you are working.
Arranging a set of different objects in optimal locations on a page can be a bit like solving a
jigsaw puzzle.

Figure 5-29 shows a low-fidelity and Figure 5-30 shows a high-fidelity layout
sketch of the same Web page. The low-fidelity sketch includes only main page
sections: header, navigation, content, sidebar, and footer. The high-fidelity sketch
includes these sections plus page content (text and images), the logo and hero
image, explanatory margin notes, and the page grid.

The level of detail should fall somewhere between these two examples. The low-
fidelity example has too little detail to use as a basis for creating a good
wireframe and the high-fidelity example, in this case, is too detailed; it could
practically serve as a wireframe itself.

269
 CIW – User Interface Designer

Figure 5-
29: A low-fidelity Web page layout sketch

270
 CIW – User Interface Designer

Figure 5-
30: A high-fidelity Web page layout sketch
3. Use a computer to make your wireframe sketch a wireframe graphic.
To do this, you can use a graphics application like Photoshop or Illustrator. Or
you can use one of the many GUI prototyping tools available online like Visual
Paradigm, Pencil Project, Gliffy, Axure, or Balsamiq.

Figure 5-31 shows a sketch of a Web page and a wireframe graphic made from
that sketch.

271
 CIW – User Interface Designer

Figure 5-
31: A low-fidelity (left) and high-fidelity (right) Web page layout sketch

The three examples in Figures 5-32, 5-33 and 5-34 are of Web page wireframe
graphics from www.mockupbuilder.com (n.d.) go from low to high fidelity:

272
 CIW – User Interface Designer

Figure 5-32: A low fidelity Web page wireframe graphic

273
 CIW – User Interface Designer

Figure 5-33: A mid-fidelity Web page wireframe graphic

274
 CIW – User Interface Designer

Figure 5-34: A high-fidelity Web page wireframe graphic

Working with a grid
Working with a snap-to grid is the best method for creating a wireframe graphic.
That way you can easily align page objects with each other and insert equal
amounts of white space between objects.

You can use the grid built into your graphics program. Or you can use one of the

275
 CIW – User Interface Designer

grid systems available for free online, such as:

 960 Grid
960 Grid, from designer Nathan Smith, provides 12, 16, and 24-column grid
templates for most graphics programs, including: Photoshop, Fireworks,
GIMP, Illustrator, InDesign, QuarkXPress, and more. In addition, it provides
PDF sketch sheets, HTML and CSS files, and Photoshop and Fireworks
plug-ins.

There is one problem to consider with 960 Grid. As its name suggests, it is
based on a page width of 960 pixels. Since most displays today support a
1280-pixel or higher width, limiting page width to 960 pixels is an
unnecessary constraint. Some Web designers still choose to do it, but
most have opted to use wider grids instead. Here is a popular one:
 1200px Grid System
Based on 960 Grid, 1200px Grid enables you to design pages that are 1200
pixels wide. It includes Photoshop and Illustrator grid page templates for
designers, and accompanying CSS code for developers.

Along with fixed-width grid systems such as 960 Grid and 1200px Grid,
there are several excellent variable-width grid systems available online.
These are often called responsive grid systems, since they facilitate the
creation of responsive Web pages. (For more on this, see "Responsive Web
Design" below.) Web designers are increasingly turning to responsive grid
systems to accommodate the vast array of different display screen sizes
and resolutions in use today.
 Unsemantic
Recognizing the limitations of his 960 Grid System, Nathan Smith created
Unsemantic to be its successor. Unsemantic is a fluid (variable) grid
system that works similarly to 960 Grid, but instead of presenting a set
number of fixed-width columns, it is entirely based on percentages.
In Figure 5-35, a responsive grid (vertical gray bars) is used to create three
different-sized wireframes of the same page content, for a desktop/laptop (left),
tablet, and phone.

276
 CIW – User Interface Designer

Figure 5-35: Using a responsive grid to make three different-sized wireframes of

the same page
Wireframing conventions
Here are some commonly used wireframing conventions. These are not absolute
rules, as you can see by looking at the wireframe examples above.

 Use short, clear labels to identify objects whose identity is not clear from
the context.

277
 CIW – User Interface Designer

 Write out short text blocks (titles, headlines, etc.), but use lorem ipsum text
(or equivalent) for longer text blocks.
 Get the fonts more or less right: size and family (serif, sans-serif, etc.).
 Format text links as blue and underlined. This makes them clearly visible at
a glance.
 Use an X to identify an image. Do not sketch the image. That is what page
mockups are for.
 Use actual images sparingly. Maybe logos and a few icons, not big images.
 If you add comments, put them in the margin. Keep the wireframe free of
extraneous text.
 Use color sparingly, if at all. Stick with black, white and grays. Color comes
in the next phase, mockups.
In the following lab, you will create a sketch and a wireframe of a Web page.
Suppose you are at lunch with a client discussing the site redesign they hired you
to do, and you describe an idea you have for a new home page layout. The client
shakes her head, unable to visualize what you are saying. You help her by
grabbing a napkin and drawing a quick sketch of your layout idea. Once
approved, you can then use a computer to make a wireframe graphic from your
sketch.

Lab 5-3: Creating a sketch and wireframe of a page from your site
In this lab, you will draw a sketch of the layout of a representative page from your company
site, and then use a computer to make the sketch into a wireframe graphic. Base your work
on the sketching and wireframing instructions in this section.

1. Pick a page from your site that is representative of the layout of the main
site pages. Use your home page, unless it is a decorative welcome page.

2. Write a list of all the objects you want to include in your page, organized by
sections. Do not leave anything out! For example:

278
 CIW – User Interface Designer

 Entire page — background image

 Header — logo, tagline, image carousel, page title, search box, social
icons
 Navigation — navigation link buttons
 Content — main content (headlines, body text, images)
 Sidebar — supplemental content (headlines, body text, ads)
 Footer — copyright information, condensed site map

3. Sketch the page layout by hand, making sure to include each object in your
list.
Assume that your page will be displayed on a full-sized desktop/laptop
monitor, rather than on a mobile screen. You will have a chance to
redesign the layout for a mobile device in the application project at the end
of this lesson.

Use a pencil (with eraser) to draw your sketch. You need to be able to
easily modify your drawing while working on it.

4. When you have managed to find an appropriate location for all the objects
in your list and are satisfied with the layout of the entire page, use a
computer to make your wireframe sketch into a mid-high fidelity wireframe
graphic, between the level of detail of the mid-fidelity and high-fidelity
wireframe examples shown above.

Use a grid to do this, and heed the wireframing conventions presented

above.
In this lab, you created a sketch of the layout of a page from your site and made this sketch
into a wireframe graphic.
Mockups

A mockup is a fleshed-out version of a wireframe that shows the Web page as it

would actually look when displayed in a browser. If a wireframe is like a blueprint
of a building, a mockup is like a realistic image of that building, as it would look in
279
 CIW – User Interface Designer

real life.

Tech Note
The term "mockup" is sometimes used to refer to layout sketches or wireframes. In this
course, it is used in its more correct sense to refer to a realistic representation of a Web
page as displayed in a browser.

Mockups, like wireframes, can range in fidelity. A low-fidelity mockup has all the
visual elements of the real Web page, but might be missing actual content (have
placeholder Lorem Ipsum text or images instead). A high-fidelity mockup has all
visual elements and all content, as if it were the actual Web page displayed in a
browser.

As a designer, you have two choices for how to create a mockup. You can use a
graphics application to draw it, or you can code it in HTML/CSS. The path you
choose to take depends on your skills. If you are more comfortable working in
Photoshop (or equivalent graphics program) than coding, the former path is right
for you. If you are a fluent HTML/CSS coder, the latter path is the way to go.

Tech Note
If you are creating a high-fidelity page mockup, one that looks exactly — down to the last
detail — like the actual Web page, coding it could be a big challenge. Just ask a developer
how difficult it can be to translate subtle design details into HTML and CSS code!

Figure 5-36 is an example of a high-fidelity mockup and its wireframe:

280
 CIW – User Interface Designer

Figure 5-36: A New York Times high-fidelity mockup (left) and wireframe (right).

In the following lab, you will create a mockup of a wireframe. To stay with the
previous scenario, suppose your client sees the wireframe that you made of the
new home page, but being more visually than technically minded, she is still not
sure what the actual home page will look like. You can show her by creating a
mockup of the home page.

Lab 5-4: Creating a mockup of a page from your site

In this lab, you will create a mockup of the page you wireframed in the previous lab.

1. Gather together all the materials you need to make the mockup: the color
scheme, typography scheme and wireframe. Familiarize yourself with
them, so that they are internalized and feel like second nature to you.
2. Choose either of these two methods to create your page mockup. (If you
have the time, use both methods; that way you can compare them.)
3. In a graphics application, draw the page as it would appear in a browser:
the actual layout, text, images, objects, colors, typography, etc.

281
 CIW – User Interface Designer

4. Or code the page in HTML/CSS. Because you are making a mockup

instead of a real page, you do not need to include functionality like working
links, navigation buttons, interactive widgets, etc.
In this lab, you created a mockup of a page from your site.

Responsive Web Design

OBJECTIVE 5.5: Page layout for mobile devices

It is not a viable option to design a Web site for a full-sized desktop browser, and
have it display with the same layout at a very small size on a mobile screen,
forcing users to pinch-zoom in and out to interact with a page. Instead, you need
to use responsive Web design to make sites that display equally well - are
equally usable - on all types and sizes of devices: desktops, tablets, cell phones,
smart watches, etc.

The term "responsive Web design" was coined by designer Ethan Marcotte (n.d.)
on the Web design site, A List Apart. He defined responsive Web design as:

... an approach aimed at crafting sites to provide an optimal viewing experience,

easy reading and navigation with a minimum of resizing, panning, and scrolling
across a wide range of devices (from mobile phones to desktop computer
monitors).

The layouts of sites that use responsive Web design adapt to various viewing
environments, such as different devices, browsers and screen sizes. For
example, page elements use relative size units such as percentages, instead of
fixed units such as pixels, enabling the elements to adapt to the screen size,
instead of falling outside the screen, forcing the user to scroll to view them.

In short, responsive Web pages adjust themselves gracefully to fit whatever

device they are displayed on. This is accomplished by using three main
techniques:

282
 CIW – User Interface Designer

 Grid-based layouts
 Resizable images
 CSS3 media queries
Grid-based layout
Responsive Web design uses fluid grid layouts such as the Unsemantic grid
presented above because they are the easiest types of layouts to accommodate
to a variety of screen sizes and resolutions. A fluid grid uses percentage-based
dimensions, which makes sure that even after changing the size of the screen,
the proportion of elements stay the same. However, in a responsive grid system,
the layout of an interface differs slightly or completely depending on the screen
size it’s viewed on, and the elements stretch or shrink accordingly.

Instructor Note: Point out that Figure 5-36 illustrates the functionality of grid-
based design in a live page on multiple devices. To see examples of actual grids,
have students perform an image search on any search engine for "responsive
Web design grids" to see the large variety of grids that can be used in responsive
page design.
Figure 5-37 illustrates a fluid grid adjusting to three device sizes. On a desktop
monitor, the header is full-sized and the content is arranged in three columns
beneath it. On a tablet screen (in portrait mode), the header is smaller, and the
content is in two columns with the text to the right instead of below the images.
And on a phone (in portrait mode), the header is smaller still, and the images are
absent from the page.

283
 CIW – User Interface Designer

Figure 5-37: Responsive Web design uses fluid grids to adapt pages to different
screens

Images
Similarly to fluid grids, responsive Web design uses fluid images to make images
resize themselves to fit different device displays. It is remarkably easy to
implement. Just use the CSS max-width property to set the maximum width for
images to 100%:

img {

max-width: 100%;

When you do this, your images will automatically shrink and expand to fit the
width of the HTML element in which they reside, a <div> container or the entire
page.

284
 CIW – User Interface Designer

You need not limit your responsive resizing to images. This CSS rule makes
images, embedded objects and videos fluid, so that they automatically resize to
avoid exceeding the page width:

img, embed, object, video {

max-width: 100%;

Warning
If the image is placed within a container that has a fixed pixel size, the image will match the
width of that container instead. If possible, try to avoid fixed widths altogether when
designing a responsive site.

Instructor Note: Discuss fluid images with the class. Have students used this
technique before? Do they think it would be beneficial for their company site?
Figures 5-38 and 5-39 demonstrate responsive fluid image design on the Visit
California site at www.visitcalifornia.com. The browser window in Figure 5-39 is
much wider than the window in Figure 5-38, but the surfer hero image does not
extend beyond the page edge on the smaller page, and the three images below it
all resize proportionally to fit on the page.

285
 CIW – User Interface Designer

Figure 5-38: The Visit California home page at full browser width

286
 CIW – User Interface Designer

Figure 5-39: Displaying the same page in a narrower window does not clip the hero
image

CSS3 Media Queries

A media query is a CSS3 technique you can use to find out key characteristics of
the display device that is viewing a Web page and, based on this information, tell
the page to adjust its appearance to best fit the device.

Media queries are typically used to determine things like a display's dimensions
(width, height), screen resolution, color depth and orientation (portrait or
landscape). This information enables the page to be optimized for viewing on

287
 CIW – User Interface Designer

different devices. Sometimes this is accomplished by directing the browser to

one of a set of style sheets, depending on the results of the media query, and
sometimes the site's main style sheet includes all the display size settings
required.

The elements shown in Figure 5-40, including the number of columns, might be
adjusted by media queries looking for the screen width of the display device
(minimum 1024 pixels wide for large displays and laptops, maximum 768 pixels
for tablets in portrait mode, and maximum 320 pixels for mobile phones in
portrait mode):

Figure 5-40: Media queries adjusting style blocks to screen sizes and orientation
Instructor Note: Interested students can read more of the W3C's
Recommendation for media queries by visiting https://www.w3.org/TR/css3-
mediaqueries/
Responsive Web Design vs. Mobile Web Design
Both responsive Web design and a mobile Web design can be used to:

 Optimize a site for viewing on mobile displays

288
 CIW – User Interface Designer

 Simplify site navigation

 Load pages faster
There are, however, some important differences between responsive Web design
and mobile Web design, as shown in Table 5-3:

Responsive Web Design Mobile Web Design

General Uses one page for all display devices, adjusts page Uses different pages for different
elements on-the-fly to accommodate these mobile display devices.
different devices.

Rendering The browser does most of the work of optimizing The server does most of the work of
the page for screen size, resolution and portrait optimizing the page for smaller
vs. landscape orientation. devices.

Maintenance Using one page for all devices makes responsive Using different pages for different
sites easier to maintain. devices makes mobile sites harder
to maintain.

Forward Using one page for all devices makes responsive Using different pages for different
compatibility sites more forward compatible. devices makes mobile sites less
forward compatible.

Table 5-3: Responsive Web design vs. mobile Web design

Responsive Web design frameworks

A framework is a set of customizable tools and techniques that facilitate the
development of a software application. A responsive Web design framework
consists of code (HTML, CSS, JavaScript, etc.) and templates that provide the
basic foundation, i.e. the framework for designing responsive Web pages.

There are many responsive Web design frameworks available online. One of the
most popular is Bootstrap, a collection of HTML- and CSS- based design
templates for typography, buttons, navigation, forms and other interface
components, plus optional JavaScript extensions. It has been used by major
organizations such as Twitter, MSNBC and NASA. Bootstrap is open-source and
free to download.

289
 CIW – User Interface Designer

Other popular responsive Web design frameworks include:

 Skeleton - www.getskeleton.com
 Montage - www.montagestudio.com
 Foundation - foundation.zurb.com
 HTML Kickstart - www.99lime.com
Exercise 5-3: Wireframing and Responsive Web Design

Fill in the blanks by typing the appropriate terms.

Here, this type of question contains the select box, text box, and drag and drop boxes. The
shortcut keys to perform this task are. Press the Alt+down arrow key to activate the target. Press
the arrow key to navigate through all the items. If the selected item is a text box or a select box,
it will automatically get focused. If you want to drop the item in the droppable field, navigate to
any of the draggable using the Tab key, and press the Enter key to copy the draggable, Now,
navigate to any of the droppable field and press the Enter key to drop the copied item. If you
want to remove the item from the droppable field, navigate to the droppable field and press the
Delete key for Windows and the Fn+Delete key to remove the item.

1. The layouts of sites that use

Web design adapt to various viewing environments, such as different devices,

browsers and screen sizes.
2. A

is a CSS3 technique you can use to find out key characteristics of the display
device that is viewing a Web page and, based on this information, tell the page to
adjust its appearance to best fit the device.
3. A

is a fleshed-out version of a wireframe that shows the Web page as it would

actually look when displayed in a browser.
4. A responsive Web design

consists of code and templates that provide the basic foundation for designing
responsive Web pages.
5. A fluid grid uses percentage-based dimensions, which makes sure that even
after changing the size of the screen, the

290
 CIW – User Interface Designer

of elements stay the same.

6. A

is a diagram that shows the layout of a Web page (or other user interface). You
can think of it as an architectural blueprint for a Web page.
*Matching is not case sensitive

Case Study: Kristian's Do-It-Yourself Wireframe

Kristian is building a Web site for Atlas, a classic (60s-80s) TV show distribution company
he founded. Being a DIY kind of guy, he watched a couple of online videos on Web page
layout and wireframing, and thought it looked so easy that he created the site wireframes
himself. He sent a set of four wireframes - one for each unique page on the site, to a
professional Web developer. Two hours later he got an email back saying that it would be
impossible to make actual Web pages based on these wireframes. Kristian scratched his
head and thought: What did I do wrong?

Figure 5-41 shows a wireframe Kristian made of the Action page:

291
 CIW – User Interface Designer

Figure 5-41: Kristian's Action page

wireframe

Consider this scenario and discuss the following questions:

 What did Kristian get right in this wireframe?

 What did he get wrong? What is missing? What about this wireframe would
make the developer say he could not use it to make a Web page?
 What could Kristian do to fix the wireframe so that the developer could use
it?

Lesson Summary

Application project

Throughout the course of this lesson, you sketched, wireframed, and mocked up
a full-sized (desktop/laptop) page from your company site. In this application
project, you will redesign your page for a mobile device — a tablet, phone, or both.
Follow the same three-part procedure that you used above to create the sketch,

292
 CIW – User Interface Designer

wireframe and mockup:

1. Choose a mobile device — tablet or phone — and write a list of all the
objects you want to include on the redesigned page for this device.
Depending on the size of the display you are designing for (as shown in
Table 5-4), you might need to modify the list of objects you created earlier
in this lesson.

2. Screen Size Screen Resolution

Tablet 9 x 5 inches 1920 × 1200 pixels

Phone 4.5 x 2.5 inches 1280 × 720 pixels

3.

4. Table 5-4: Tablet and phone size/resolution for the application project

5. Choose an orientation for the display (portrait or landscape), and sketch

the page layout by hand, making sure to include each object in the list.
Do not simply shrink the layout of the full-sized page to display on a tablet
or phone. This is terrible Web design. It drastically reduces page usability
by forcing mobile users to either squint or continually zoom in and out of
the page.
Instead, rethink the design to make it fit comfortably on the smaller
display. You might need to arrange images vertically instead of side by
side, reduce multiple columns of text to single columns, enlarge small
clickable controls (buttons, menus, etc.) to enable touchscreen users to be
able to use them, remove objects that take up a lot of space but add little
value to the page, and so on.
6. Use the computer tool of your choice to make the sketch into a wireframe
graphic.

293
 CIW – User Interface Designer

7. Use a graphics application or create an HTML/CSS Web page to make a

mockup of the wireframe graphic.
8. Compare your full-sized and mobile sketches, wireframes and mockups.
Do the mobile versions pass the redesign test by being as usable (easy to
use, attractive, readable) as the full-sized ones? If not, what needs
improvement or fixing?
9. Optional: Create a sketch, wireframe and mockup for the display
orientation you did not choose in step 2.
Optional: Create sketches, wireframes and mockups for both orientations of the
mobile device you did not choose in step 1.
Skills review

You began this lesson by learning how to use Adobe Color CC to create a color
scheme for a Web site. Next you got a crash course in Web typography and
explored Butterick's Typography rules. Then you learned how to lay out a Web
page for a full-sized (desktop/laptop) monitor and a mobile (tablet, phone)
screen. Next you sketched a Web page layout, made the sketch into a wireframe
graphic, and made the wireframe into a high-fidelity page mockup. You closed
out the lesson by learning three key techniques for creating responsive Web
pages.

Now that you have completed this lesson, you should be able to:

 5.1 Describe the importance of color usage in user interface design.

 5.2 Consider font choices and challenges in user interface design.
 5.3 Identify elements of effective Web page layout (e.g., content,
navigation, space), and discuss variables that may apply to specific
situations or site types. Given a scenario, determine an effective Web page
layout.
 5.4 Create a Web page wireframe for a fictitious business.
 5.5 Explain page layout techniques when creating user interfaces for
mobile devices.

294
 CIW – User Interface Designer

Activity 5-1: Identifying Color, Typography, Layout and Wireframing terms

Glossary

color blindness

The inability or decreased ability to perceive color differences under normal

lighting conditions.
color model

A method for representing a color with numeric values.

295
 CIW – User Interface Designer

color scheme

A set of colors that constitutes an integrated whole for a design.

color wheel

A circle divided into 12 equal sections, each a different color in the visible
spectrum: red, oranges, yellow, greens, blues, indigo, violet.
fluid image

A responsive Web design technique that adapts the size of an image to the
device's screen size.
framework

A set of customizable tools and techniques that facilitate the development of a

software application.
kerning

The manual adjustment of space between characters for a consistent look.

line spacing

The vertical distance between the baselines of two successive lines of text.
Sometimes called line leading or simply leading, because years ago in manual
typesetting, strips of lead were used to separate lines vertically.
lorem ipsum

Nonsensical Latin text that is used as a placeholder for real text in a document or
visual design.

296
 CIW – User Interface Designer

pixel

Short for "picture element," a pixel is the smallest visual object that can be
displayed and processed on a digital display. It is a single dot on your device
screen.
readability

The ease with which a reader can understand text, both visually (font size, color,
typeface, background color, etc.) and cognitively (vocabulary, syntax, meaning).
saturation

The intensity and pureness of a color. A fully saturated color is considered to be

the most intense and pure version of the color.
typeface

The design of a set of characters (font).

typography

The appearance of characters (letters, numbers, and punctuation marks) as

determined by their typeface, size and style.

Lesson 6

Designing a Basic Web Site

Objectives
By the end of this lesson, you will be able to:

➥6.1 Create a simple Web user interface using best practices.

➥6.2 Identify the basics of HTML, CSS and responsive design.
➥6.3 Apply a default page template to a Web site.

297
 CIW – User Interface Designer

➥6.4 Apply a set of custom page templates to a Web site.

➥6.5 Use spelling and grammar tools to review site text.

Creating a Web Site

OBJECTIVE 6.1: Simple Web interface

Instructor Note: In this lesson, students create (code) the company site they have
been planning and designing since Lesson 2. To do this, they need to work
through a number of lengthy hands-on labs. For this reason, you should consider
allotting more time to this lesson than most of the others.
In this lesson, you will get a chance to put the Web site UI design techniques you
have learned over the past five lessons to use by creating a first version of your
company site. Over the next three lessons, you will expand and revise this
version. When you complete the final lesson of the course, Lesson 9, your
company site will be ready for publishing.

Designing a Basic Web Site

Video transcript
Download

Here is the procedure you will follow in this lesson to create the first version of
your site:

Part 1: Creating one site page

You will begin by creating one representative page of your site, the same page
you wireframed and mocked up in the previous lesson. To do this, you will:

298
 CIW – User Interface Designer

 Revisit and revise the Web site vision statement, strategy and specification
you created in Lesson 2.
 Revisit and revise the word list and mood board you created in Lesson 2 to
establish the look and feel of your site.
 Revisit and revise the sketch, wireframe and mockup of the site page you
created in the previous lesson.
 Gather all the existing assets (text, images, audio, multimedia, etc.) and
create all the new assets you need to make the page.
 Build the actual Web page (HTML document). This page will serve as a
default page template for your site.
Part 2: Creating the remaining site pages
In part 2, you create the remaining pages of your site. To do this, you will:

 Revisit and revise the site map that you created in Lesson 2.
 Create custom templates for pages that are significantly different in
design from the default template.
 Gather and create all the assets you need to make the remaining site
pages.
 Build the Web pages.
Take a deep breath and roll up your sleeves — you have a lot of work ahead of
you!

Tech Note
Making a professional-quality Web site from scratch (planning, designing, gathering and
creating assets, coding HTML/CSS/JavaScript) is hard work and takes plenty of time.
According to Thorren Koopans (2014), for a small site, figure about 4-6 weeks from kickoff
to launch; for a mid-sized site, about 12-16 weeks; for a large site, 3-6 months.

299
 CIW – User Interface Designer

Exercise 6-1: Creating a Valid HTML5 Document

300
 CIW – User Interface Designer

Exercise 6-2: Coding Hyperlinks and Images

301
 CIW – User Interface Designer

HTML and CSS refresher

OBJECTIVE 6.2: Basics of HTML, CSS and responsive design

Before diving in to the Web site creation work, you should step back for a
moment to make sure your Web site development skills are in good shape. This
section provides a succinct refresher of the core HTML and CSS programming
techniques you will use in this lesson to develop (code) your company Web site.

Note: Assuming you have fulfilled the prerequisites of this course, you are
already competent at programming HTML and CSS. For this reason, the

302
 CIW – User Interface Designer

instructions here are kept to a minimum, designed to jog your memory rather
than to teach you how to code. For more information, turn to W3Schools, Mozilla
Developer Network (MDN), HTML Dog or another reputable online HTML/CSS
reference.

Basic HTML elements

Here are the four most basic elements of an HTML document:

 <html>...</html> — Defines the entire HTML document.

 <head>...</head> — Defines the head section of the HTML document, in
which the page title and other page metadata resides.
 <body>...</body> — Defines the body section of the HTML document, in
which the page content resides.
 <p>...</p> — Defines a paragraph in the page body.
HTML5 introduced a set of 13 "semantic" elements to define different sections of
a Web page within the <body> tag. (You use semantic HTML elements to impart
structural meaning to the various parts of a page.) Here are four of the most
commonly used of these new HTML5 elements:

 <header>...</header> — Defines a header section for the Web page.

 <nav>...</nav> — Defines a navigation section (set of hyperlinks) for the
Web page.
 <main>...</main> — Defines the main content section for the Web page.
 <footer>...</footer> — Defines a footer section for the Web page.
Adding text to a Web page
To add text to a simple Web page, you can use either of these methods:

You may choose to type the text directly into the HTML document. If you type
text into an HTML document, you typically enclose it in <p>...</p> tags and use
CSS to format the paragraph. Alternately, you can enclose text in other HTML
tags such as:

 <h1>...</h1> through <h6>...</h6> — Defines a level 1 to 6 heading.

303
 CIW – User Interface Designer

 <blockquote>...</blockquote> — Defines a blockquote.

 <li>...</li> — Defines an item in a list. You would need an <ol> ... </ol> or
<ul> ... </ul> around that <li> tag pair, too.
 <td>...</td> — Defines the content of a table cell. You would need a <table>
... </table> tag and then a <tr> ... </tr> tag around that <td> tag pair first.
Another method to add text to the Web page would be to type the text into a text
editor, then copy and paste it into the HTML document. This method is typically
used for longer text passages — articles, sections, etc. — or for projects with a
dedicated writing team that hands off written content to a development team
who then inserts this content in the HTML document.

Adding images to a Web page

To add an image to a Web page, you use the <img> tag. Here is its syntax:

Instructor Note: Inform students that adding hyperlinks to their Web pages will
increase their search engine optimization (SEO) rankings and increase site visits.

<img src="imageFile" width="numPixels" height="numPixels" alt="altText">

 src — Specifies the pathname (or URL) of the image file (imageFile).
 width — Specifies the width in pixels (numPixels) of the image file.
 height — Specifies the height in pixels (numPixels) of the image file.
 alt — Specifies alternate text (altText) for an image that cannot be viewed
due to a coding error, poor connection or if the site visitor is using a screen
reader.
Adding hyperlinks to a Web page
You will typically add hyperlinks around text and images.

To add a text link to a Web page, you enclose the text between <a>...</a>
(anchor) tags:

<a href="linkURL">linkText</a>

304
 CIW – User Interface Designer

 href — Specifies the URL (linkURL) of the linked Web page.

 linkText — Specifies the link text.
To link an image to a page, you enclose its <img> tag between <a>...</a> tags:

<a href="linkURL"><img src="imageFile" width="numPixels" height="numPixels" alt="altT

ext"></a>

Adding an image map to a Web page

The above technique links one image to one Web page. Clicking anywhere on the
image jumps to the linked page. You can also link different parts of an image to
different Web pages by using an image map: an image that contains one or
more hot spots — areas that, when clicked on, jump to different linked pages.

To add an image map to a Web page:

1. Find or create a suitable image for the map.

Images with clearly differentiated visual parts tend to make the best image
maps because they help users understand how these parts map to their
linked pages. For example, compare the two images in Figure 6-1.

Which one would make a better image map for linking to a set of Web
pages about individual US states? Obviously, the one on the left is better,
because its parts (the states) are clearly differentiated.

305
 CIW – User Interface Designer

Figure 6-1: The image on the left would make a better image map than the
image on the right

2. Define the hot spots in the image: the linked areas.

To do this, you need to specify the shape and coordinates of the hot spot
area. For instructions, see the passage on <area> tags below.
3. Add this HTML code to the body of the Web page:

<img src="imageFile" width="numPixels" height="numPixels" alt="altText" usemap

="#mapName">
<map name="mapName">

<area shape="shapeType" coords="shapeCoords" href="linkURL"

alt="altText">
<area shape="shapeType" coords="shapeCoords" href="linkURL"
alt="altText">
...
</map>

The <img> tag adds the image (imageFile) to the page, and the usemap
attribute tells the browser that this is an image map named mapName.
Note that you need to add a # character to the beginning of the image map
name string: #mapName.

306
 CIW – User Interface Designer

The <map>...</map> tag defines the image map. The name attribute
specifies the image map's name (mapName). For the image map to work
correctly, the <map> tag's name string and the <img> tag's usemap string
must be exactly the same (spelling and capitalization), except for one
thing: The usemap string needs to begin with a #.

The <area> tags define the image map's hot spots and targeted links
(linkURL). The shape attribute specifies the shape (shapeType) of the hot
spot area: rect, circle, or poly. The coords attribute specifies the x and y
coordinates (shapeCoords) — and, for a circle, the radius — of the hot spot
area, as shown in Table 6-1.

coords values
for <area> What the coords values specify <area> tag Example: code and image
shape

Rect The x and y coordinates of the left- <area shape="rect" coords="0,0,120,120"

x1,y1,x2,y2 top and right-bottom corners of href="page1.htm" alt="A 120x120 pixel
the rectangular hot spot area. rectangle with its upper left corner at
x=0,y=0">

307
 CIW – User Interface Designer

circle The x and y coordinates of the <area shape="circle" coords="120,120,60"

x,y,radius center and the radius of the href="page2.htm" alt="A 60-pixel radius circle
circular hot spot area. with its center at x=120,y=120">

poly The x and y coordinates of each <area shape="poly" coords="0,60,30,0,60,60"

x1,y1,x2,y2, vertex of the polygon hot spot href="page3.html" alt="A triangle with 60
..., area. pixel sides and its apex at x=30,y=0">
xn,yn,x1,y1

Table 6-1: Specifying the <area> tag's coords values for each hot spot shape

Tech Note
You can use a graphics application (Photoshop, Illustrator, etc.) to determine the coords
values of an image map's hot spot areas. Or you can simplify the process by using a
dedicated image-map editor. Among the more popular are: Imagination, Maschek, and the
Firefox and Chrome image map plugins.

Styling a Web page with CSS

One of the cardinal rules of professional Web development is to use HTML and
CSS to separate the site's structure (parts) from its presentation (appearance):

308
 CIW – User Interface Designer

 You use HTML to structure a Web page, assign semantic meaning to its
various parts: sections, headings, paragraphs, tables, etc.
 You use CSS to style the page, determine how it is presented (displayed) in
a browser: layout, colors, typography, etc.
Why is it so important to separate structure and presentation? Because doing so
greatly simplifies a task that can be exceedingly difficult: to create Web sites that
adapt to different display devices and browser window sizes. Remember, you
must keep responsive design in the forefront of your mind when creating a Web
site.

CSS is a rich and complex presentation language with hundreds of properties you
can use to style every aspect of your Web pages. Assuming you have taken the
prerequisite course(s) in Web programming, you should be familiar with a hefty
set of these properties. For more information, turn to any of the aforementioned
Web programming reference sites: W3Schools, Mozilla Developer Network
(MDN) or HTML Dog.

To jog your memory, here are a few commonly used CSS properties and values:

 Color — The CSS color property sets the color of the text that resides in
an HTML element box. You can use different values to specify a color,
including:

 Color name — An easy-to-remember text name that represents the

color. For example: black, white, gray, red, blue, purple, olive,
seagreen, etc.
 Hexadecimal code — A string of form #rrggbb that represents a
color, where rr, gg, and bb are two-digit hexadecimal numbers from
00 to ff. The rr number specifies how much red is in the color,
the gg number how much green, and the bb how much blue. For
example: #000000 (black), #ffffff (white), #808080 (gray), #ff0000
(red), #0000ff (blue), #800080 (purple), #808000 (olive), #2E8B57
(sea green), etc.
 RGB value — A string of the form rgb(rr,gg,bb),
where rr (red), gg (green), and bb (blue) are decimal numbers from 0

309
 CIW – User Interface Designer

to 255. For example: rgb(0,0,0) is black, rgb(255,255,255) is white,

rgb(128,128,128) is gray, rgb(255,0,0) is red, rgb(0,0,255) is blue,
rgb(128,0,128) is purple, rgb(128,128,0) is olive, rgb(46,139,87) is
sea green, etc.

Instructor Note: Inform students that even though colors can be set
by using the color name, hex code or RGB value, it is a good practice
to be consistent in your coding by using the same naming
convention throughout the CSS document.

 In this example, a color name is used to set a page's <body>...</body> text

color to blue, a hexadecimal code to set its <h1>...</h1> text color to red,
and an RGB value to set its <p>...</p> text color to white:

 body {
color: blue;
}h1 {
color: #ff0000;}
p {
color: rgb(255, 255, 255);
}

 Font — The font property specifies the font appearance of the text that
resides in an HTML element box. It is a CSS shorthand property, meaning
that you can use it to specify multiple font-related properties at the same
time. Here is its syntax:

font: font-style font-variant font-weight font-size/line-height font-family;

In this example, font is used to set the text in <p class="para1">...</p>

paragraphs to italic, bold, small-caps, 12 pixels, Georgia (or similar serif

310
 CIW – User Interface Designer

font if Georgia is not supported by the browser), with 30 pixels of blank

vertical space between text lines:

p.para1 {

font: italic small-caps bold 12px/30px Georgia, serif;

}

In this example, individual font-related properties are used to do the same

thing:

p.para1 {

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 30px;
font-family: Georgia, serif;
}

 Width, height — The width and height properties specify the width and
height of an HTML element box. You can use different units for width and
height, including:

 px — Number of pixels
 em — 1 em is equal to the current font size
 % — Percentage

In this example, width and height are used to set the size of <p
class="small">...</p> paragraph boxes to 200x120 pixels:

311
 CIW – User Interface Designer

p.small {

width: 200px;
height: 120px;
}

 Margin, padding — The margin and padding properties set the margin and
padding of an HTML element box. The margin property affects the area
outside the box border and the padding property affects the area inside the
border, as shown in the Figure 6-2 from W3Schools.com:

Figure 6-2:
Margin and padding of an HTML element box

Like font, margin and padding are shorthand properties. Here is the syntax
of the margin property when all four margins are equal (top, right, bottom
and left):

312
 CIW – User Interface Designer

margin: length;

And here is the syntax when they are not equal:

margin: margin-top, margin-right, margin-bottom, margin-left;

In this example, margin is used to set the margins of the box in which <img
class="equalMargins"> images reside to 67 pixels on all four sides:

img.equalMargins {

margin: 67px;
}

In this example, margin is used to set the top margin to 20px, right margin
to 30px, bottom margin to 40px, and left margin to 50px:

img.unequalMargins {

margin: 20px, 30px, 40px, 50px;

}

This does the same thing without using the shorthand margin property:

img.unequalMargins {

313
 CIW – User Interface Designer

margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
}

To set padding values for an HTML element box, proceed as above and
replace the keyword margin with padding. This sets the top/bottom and
left/right padding of <img class="unequalPaddings"> element boxes to 20
and 40 pixels respectively:

img.unequalPaddings {

padding: 20px, 40px, 20px, 40px;

}

 Border — The border property is a shorthand property that specifies the

appearance of the border of an HTML element box. Its syntax is:

border: border-width border-style border-color;

Instructor Note: Students may prefer to set a visible border around HTML
elements while formatting their template and remove them when the
optimal placement has been achieved.

In this example, border is used to set the border of

<blockquote>...</blockquote> boxes to two-pixel wide solid midnight-blue
lines:

blockquote {

314
 CIW – User Interface Designer

border: 2px solid midnightblue;

}

This does the same thing without using the shorthand border property:

blockquote {

border-width: 2px;
border-style: solid;
border-color: midnightblue;
}

To set individual borders, you can use border-top, border-right, border-

bottom, and border-left.

 Background — The background shorthand property specifies background

settings. Its syntax is:

background: color image repeat attachment;

In this example, the page background is set to black, and the image
bground1.gif is repeated (tiled) horizontally and fixed (so the image does
not scroll with the page):

body {

background: #000000 url("bground1.gif") repeat-x fixed;

}

315
 CIW – User Interface Designer

As with the other shorthand properties, you can set the various background
parts individually using the properties: background-color, background-
image, background-repeat and background-attachment.

 Float, clear — The float property specifies whether or not an HTML element
floats, i.e. whether or not nearby text will automatically wrap around the
element's box.

In this example, float is used to make <img class="floatLeft"> images float

on the left side of the page, with text wrapping around its right edge:

img.floatLeft {

float: left;
}

In this example, float is used to make <img class="floatNone"> images not

float:

img.floatNone {

float: none;
}

The clear property controls how an element floats — how text wraps
around it — or stops it from floating.

In this example, clear stops the text in <p class="clear">...</p> paragraphs

from wrapping around a floating element:

316
 CIW – User Interface Designer

p.clear {

clear: both;
}

Creating responsive sites

As explained in Lesson 5, as a Web professional you do not have the luxury
of designing sites for one "ideal" display device: a full-sized desktop
monitor, for example. Instead, you need to practice responsive design, in
which you optimize the Web site appearance (its "form") and interactivity
(or "functionality") for all major display devices: desktops, laptops, tablets
and mobile phones. Eventually, other even smaller devices might be added
to this list, such as smart bands and watches.

There are two main ways to approach responsive design in terms of

workflow:

 You can design for one display device at a time. For example, you
could go with a mobile-first design designing the entire site (each
page) for a phone screen and then revisit and revise these designs
for the other devices you need to support: desktops, tablets, etc.
 Or, you can design for all display devices at the same time. For
example, you could design the site home page for desktops, tablets
and phones, then design the portfolio page for all three devices, and
so on.

In this lesson, you will follow a variant of the first approach. You will begin
by designing each page of the site for one type of display device (desktop,
tablet or phone). Then, in the optional lab at the end of the lesson, you will
have a chance to practice responsive design by creating different versions
of your site pages for the remaining two display device types.

Part 1: Creating One Site Page

317
 CIW – User Interface Designer

OBJECTIVE 6.3: Default page template

Consistency is crucial for professional-quality Web sites. No matter how many

pages a site might have — from 1 to 1,000 — all of them should look and behave
in a consistent manner. Indeed, one of the hallmarks of an amateur site is lack of
consistency, a lack of cohesiveness in the design and across the different pages
of the site.

As an aspiring Web professional, you need to train yourself — starting right now!
— to steer clear of such inconsistencies. Instead, you must infuse every page of
your site with a sense of overarching consistency and purpose.

One of the easiest and most effective ways to make this happen is to design a
single representative page for the site, and then use this page as a template to
build the remaining pages of the site. Typically the home page is the best choice,
unless it functions as a Web site splash screen, in which case you should pick a
more representative page for the template.

In this section you will work through a set of labs to create a page template for
your site. Before you begin, you need to organize the design materials you have
created over the first five lessons so that they are easily accessible from one
central storage location. This might take a while, but it is crucial for setting the
proper foundation for the subsequent labs in the lesson.

Tech Note
In this lesson, you will revisit and revise most of your existing company Web site work. This
might seem redundant and unnecessary, but as Web professionals know, half of the battle
in creating a robust and well-designed Web site is optimizing your work materials and
having them close at hand.

Lab 6-1: Organizing your company site design materials

Instructor Note: Depending on the classroom set-up, students may be instructed to save
their digital folders to an external USB storage device or use cloud based storage.

318
 CIW – User Interface Designer
In this lab, you will organize the company site design materials you created in the first five
lessons by storing them in digital and physical Design folders.

1. Create a digital folder on your computer and name it MySite Design, where
MySite is the name of your company site.
Do the same with a physical file folder.
2. Store all the files listed below (from the Lesson 1-5 labs) in your digital
Design folder.
For each physical item (sketch, printout, note scribbled on a napkin, etc.):

 Use a scanner or camera to digitize it, then store it in your digital

Design folder.
 Store the physical item in the physical Design folder.

Note: Make sure to keep the original and revised versions of all your site
materials! First impressions are often powerful and accurate. There might
be some aspects of your original materials that you want to return to and
derive inspiration from later in the design process.

Lesson 2

Vision statement
Strategy and implementation tactics
Specification
Mind map
Word list
Mood board
Site map

Lesson 3

User personas
Use case documents, diagrams, and scenarios

319
 CIW – User Interface Designer

Lesson 4

Branding plan

Lesson 5

Color scheme
Typography scheme
Page sketch, wireframe, and mockup

3. Take some time to re-familiarize yourself with the above company Web
site design materials. (Do not dwell too long on anything. You will have
plenty of time to do that in the labs that follow.) Jot down notes as they
occur to you.
In this lab, you organized your site design materials by storing them in a Design folder.
Revisiting and revising your site vision, strategy and specification

Back in Lesson 2 you began work on your company site by creating three
preliminary design documents: a Web site vision statement, a strategy and a
specification. It is quite possible that your design direction for the site has
changed since then. For this reason, it is a good idea for you to revisit and, if
necessary, revise these three documents to reflect the most recent version of
your Web site design.

Lab 6-2: Revising your Web site vision, strategy, and specification
In this lab, you will revisit and revise your company Web site vision statement, strategy and
specification.

1. Take a few minutes to study the Web site vision statement you created in
Lesson 2.

320
 CIW – User Interface Designer

Does the statement express the current vision you have of the site? Does it
"nail," in one concise sentence, the site's main goals, the vision you have of
its presence in the online world? Is it clear and specific enough to enable
everyone on the design team to understand it clearly and in the same way?

If your answer to any of these questions is "No" take the time to improve
the existing vision statement or to write a better one. Store your revisions
in the digital and physical Design folders.

2. Next, study the Web site strategy you created in Lesson 2.

Does it adequately address the main goal of any Web site strategy: to
attract and retain customers by persuading users to spend time on the site,
enjoy their experience and return to it in the future? Are the tactics you
devised for implementing the strategy sufficiently effective to get the job
done?

If necessary, take the time to improve your existing Web site strategy and
tactics, or to write a better one. Store your revisions in the Design folders.

3. Study the Web site specification you created in Lesson 2.

Is it a detailed description of the key considerations and components that

go into the making of the site including: functionality (tasks users can
perform on the site), content (site text, image, and multimedia content),
architecture (site structure) and design (look and feel of the site)?

If necessary, take the time to improve your existing Web site specification
or to write a better one. Store your revisions.
In this lab, you revisited and revised your company Web site vision statement, strategy and
specification.
Revisiting and revising your mind map, word list and mood board

In Lesson 2 you created a mind map, word list and mood board to establish the
look and feel of your company site. To ensure that these reflect your current
321
 CIW – User Interface Designer

vision of the site, you should revisit and, if necessary, revise them.

Lab 6-3: Revising your mind map, word list and mood board
In this lab, you will revisit and revise your Lesson 2 mind map, word list and mood board to
reflect the current design of your site.

1. Take a few minutes to study the mind map you created for your company
site.
Are there any mind map branches that no longer apply? Are there any new
branches that should be added? Are any of the branch names unclear?
Would it make the map more effective to add a few hand-drawn images to
it?

2. Revise your mind map as necessary to accurately reflect your current site
design. Store your revisions in the Design folders.

3. Review the word list you created for your site.

Does the theme still seem right to you? Does it accurately point to the look
and feel you want your site to project? Is it potent, does it tie into deep
human values like community, freedom, justice, joy?

If your answer to any of these questions is "No" take the time to improve
the existing theme or to choose a better one and write it here.

Note: Coming up with a strong theme is very important to the successful

design of the site. It frames the site in deep human values, which, in turn,
increases its usability and value for human users.

322
 CIW – User Interface Designer

4. Now have a look at the five supplemental words you chose in Lesson 2. Do
they effectively develop the current site theme? Are there any different,
better words or short phrases that come to mind? If so, write them down.

5. Create a new Microsoft Word (or equivalent) document. In it, write: your
original 20 words, theme and five supplemental words from Lesson 2. Add
your revised theme and supplemental words from steps 2-3 above.
Emphasize the revised theme and words (via size, bolding, etc.) so they are
easy to spot when you glance at the page.

Save the document as Word List to your digital Design folder.

6. Revisit the mood board you created in Lesson 2. It should contain 10

images that reflect the site's color scheme, and the word list theme, as well
as five supplemental words in typography (font typefaces, sizes, and
styles) that blend well with these images, all laid out on the page in a
manner suggestive of the site's layout.

Looking at the mood board should be like looking at the visual essence of
the site, its style without its content. Is that still true, given the current
design direction of your site? If not, what is missing from this board, what
needs to be changed?

7. Revise your mood board as necessary to make it accurately reflect the look
and feel of your current vision of the site. If it does not already have a color
scheme swatch, use Kuler (or Paletton) to make one and add it to a corner
of the board.

8. Store your original and revised mood board files in the digital Design
folder.
In this lab, you revisited and revised your Lesson 2 mind map, word list and mood board to
reflect the current design of your site.

323
 CIW – User Interface Designer

Revisiting and revising your page sketch, wireframe, and mockup

In Lesson 5 you hand-drew a sketch of a page from your site, made the sketch
into a wireframe graphic, then make the wireframe into a high-fidelity mockup.
Because the page content or layout might have changed since then, you need to
revisit and possibly revise your sketch, wireframe, and mockup to reflect this
change.

Lab 6-4: Revising your page sketch, wireframe, and mockup

In this lab, you will revisit and, if necessary, revise your Lesson 5 page sketch, wireframe
and mockup to reflect the current page content and layout.

Note: To prepare yourself for creating a responsive version of the site (in the optional lab),
keep the following question in mind as you work through this lab: "How will I have to change
this page design to optimize it for all major display device sizes: desktop, laptop, tablet and
phone (portrait and landscape)?"

1. Have a critical look at your hand-drawn page sketch. Take your time, do not
rush. This will be your final major edit of the sketch, so you need to get it
right.

Make sure the sketch contains all the sections (header, content, footer,
etc.) and objects (logo, company name and tagline, page title, navigation
bar, search field, images, main and secondary content headings and
bodies, social networking icons, copyright notice, etc.) you want included
on the page. See Lesson 5 for a list of the objects typically included on a
Web page.

Note: Only include the sections and objects your page design calls for. Do
not add anything superfluous to the design! For example, in the portfolio
site that accompanies the labs in this lesson, pages have only three
sections (header, content and footer) and a handful of objects (artist
name, navigation links, social icons, main content, copyright and contact
notices).

324
 CIW – User Interface Designer

If you need to remove or add any objects, write them down.

2. Your goal is to lay out the sections and objects in a way that is both
pleasing to the eye and functionally clear. This can be a challenge,
especially for a complex page containing many different types of objects.
Which is all the more reason for you to have a good, long second look at
your original sketch layout.

Do you need to change anything in the layout?

Instructor Note: Explain to students that preserving their original sketches

not only allows them to see the progression of their site but also provides
a safety-net should future designs be rejected or difficult to develop.

3. If — based on your responses to steps 1 and 2 — you need to revise your

Lesson 5 page sketch, make sure to preserve the original. To do this: Either
redraw the sketch from scratch, or digitize the original sketch to preserve
it, and then use a pencil and eraser (or drawing tablet) to modify the
original sketch.

4. Now that you have a sketch of the layout of the most recent version of your
page, you can move on to the next step: making this sketch into a
wireframe graphic.

Take a look at the wireframe you created in Lesson 5. First, make sure that
it matches the current page layout as captured in your revised sketch. Are
all page sections and objects present? Are they positioned correctly on the
page? If not, edit the wireframe as necessary. Store the original and
revised wireframe files.

325
 CIW – User Interface Designer

5. Next, step back and have another go at improving the page template. Does
its layout make sense, both in form (appearance) and function (usability)?
Is it simple, efficient, elegant? Is there just the right amount of space
between sections and objects, not too much, not too little? Are the objects
aligned convincingly with respect to each other and to the entire page?
(See Lesson 5 for a set of layout guidelines.)

What about the color and typography schemes? Do they still look right to
you? Is the combination of colors attractive and easy on the eyes? Might
colorblind users have any trouble with it? Does the combination of fonts
promote clarity and readability? Is the text legible against its background
color?

6. Based on your responses to steps 4-5, revise your page wireframe as

needed.

7. When you are satisfied with the quality of the wireframe, you can finish this
part of the design process by making a high-fidelity mockup of the page.

As discussed in Lesson 5, there are two ways to do this. If you are

comfortable making digital graphics, you can use Photoshop (or
equivalent) to draw the mockup. If you are more fluent working with HTML
and CSS, you can create the mockup as a Web page (HTML document).

Revisit the page mockup you created in Lesson 5. If it accurately depicts

your current page template, keep it. If not, either revise it or create a new
mockup from scratch. Keep both the original and revised mockup files.

8. Create a new Word document, and add these graphics to it:

 A digitized image of your page template sketch.

 Your page template wireframe.
 Your page template mockup.

326
 CIW – User Interface Designer

Save the document as Page Template to your digital Design folder.

9. Store your physical sketch(es) in your physical Design folder.

In this lab, you revisited and revised your Lesson 5 page sketch, wireframe and mockup to
reflect the current page content and layout.
Gathering assets for the default page template

Now that you have a definitive wireframe and mockup of your page template, you
need to gather all the existing assets, and create all the new assets, you need to
build the actual page (HTML document). These assets include:

 Text — titles, taglines, headlines, body text, copyright notice, etc.

 Images — normal, hero, logos, icons, etc.
 Multimedia — audio files, video, animations, etc.
 Controls and widgets — buttons, faders, form elements, etc.
 Scripts — JavaScript, PHP, Python, etc.
 Miscellany — any page elements not in the above categories

Lab 6-5: Gathering and creating assets for the page template
In this lab, you will gather all the existing assets, and create all the new assets, you need to
build your page template.

1. Based on the current version of your page template wireframe and

mockup, write down a list of all the assets you need to build the actual
Web page. Be thorough, do not leave anything out even if it seems trivial to
you. Having a comprehensive list of page assets will make your job easier
when you dive into the page creation.

327
 CIW – User Interface Designer

2. Based on your step 1 list, write down the assets that already exist. If an
existing asset needs to be revised, make a note of it.

Instructor Note: If time is limited, instead of re-listing assets in steps 2 and

3, have students devise a way to (clearly) mark up their step 1 lists to
indicate existing and new assets.

3. Write down the new assets that you need to create.

4. Create a new Word document, and write two lists on it: one for the existing
assets from step 2 and one for the new assets from step 3. Add notes
where needed: instructions, explanations, etc. Save the document to your
Design folder.

Note: Even if you have an excellent memory, you should never rely 100% on
the accuracy of your recall. Insights fade over time, crystal clarity gets
blurry. Just like good programmers add comments where needed to their
code - for both themselves and others - good designers add notes to their
documentation.

5. Gather all the existing assets and store them in an Assets subfolder inside
your Design folder.

Note: For organizational clarity, you might want to create a simple folder
hierarchy scheme for your assets. For example: Assets (the top-level
folder) could contain an Images subfolder for all image-related assets, an
Audio subfolder for audio assets, a Scripts folder for all scripts, and so on.

6. Create all the new assets, and revise any existing ones, as needed. Store all
new and revised assets in your Assets folder.
In this lab, you gathered and created assets to make your page template.

328
 CIW – User Interface Designer

Building the default page template

You now have your page template wireframe, mockup and assets. All that is left
to do is build the actual Web page. There are many different ways to do this:

 You can code the Web page in HTML and CSS by hand using a code editor
such as Notepad ++ (Windows), BBEdit (OS X), or Sublime Text (Windows
and OS X).
 You can use a dedicated WYSIWYG HTML editor such as Dreamweaver or
CoffeeCup.
 You can first begin by installing a Web site-development framework like
Bootstrap or HTML5 Boilerplate and using a code editor to connect the
framework's files to your new ones.
 You can use a content management system such as WordPress, Drupal or
Joomla, choose the default template or choose a template from one of the
hundreds or thousands available, and edit that template to match your
wireframes and mockups.
You must know how to hand code, so start there. Keep in mind, most
professional developers use a combination of hand-coding and working within a
framework, or digging into a CMS. The last two options require knowledge of
more than just HTML and CSS however.

Lab 6-6: Building the default page template

In this lab, you will build your page template.

1. Begin by creating a valid HTML5 document, i.e. one that will validate when
run through the W3C HTML Validator, which you can find by Googling w3c
validator or at validator.w3.org. You should know how to do this from
previous courses, but just in case you forgot, here is the simplest form of a
valid HTML5 document:

329
 CIW – User Interface Designer

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>

<body>
content
</body>

</html>

Tech Note

Just like you made a page template to build pages for your company site, you should
make an HTML5 template document you can use to build valid HTML5 documents
of all varieties. Use the code above to do this.

2. Next, use HTML and CSS to create the sections of your page template, as
laid out on the wireframe. You can use either of these techniques alone or
in combination:

 Use the built-in HTML5 semantic elements — header, nav, main,

section, article, aside, footer, etc. and assign CSS properties to them
as needed.
 Create custom HTML div elements and assign CSS properties to
them.

Note: When you are developing a Web page, you might find it convenient to
add CSS code to the page itself. This is fine, as long as you eventually
move all the page's inline CSS to an external .css file. Storing CSS in
external files greatly simplifies the task of making global changes to the
site presentation.

Note: When you are laying out a Web page, use this CSS code to display a
1-pixel black border around the sections to make them visible: border: 1px
solid black; Later, when you no longer need to see the border, comment it
out by coding: /* border: 1px solid black; */
330
 CIW – User Interface Designer

3. Once the sections of your page template are properly defined, you can use
HTML and CSS to match your mockup as accurately as possible.
Positioning all the elements in a browser is a much more challenging
prospect than moving them around in a graphic-based program like
Photoshop. Accuracy requires well written CSS.

As we discussed above in "Styling a Web Page with CSS," CSS promotes a

concept of floating elements against each other, and telling one element
how to behave when it gets close to another element. Thus, the display,
float, clear, width, height, margin and padding properties are crucial to the
process.

For instance, how do you handle all that white space we advocated in
earlier lessons? The white space between elements should NOT be
handled with lots of line break <br> tags. Instead, you can develop a CSS
class that applies a standardized amount of margin or padding above and
below whatever element you add that class to. In this HTML example, a
horizontal line is given the class "spacing30."

<hr class="spacing30">

Your CSS class definition might look like:

.spacing30 {margin-top: 30px; margin-bottom: 30px;}

This also means your new class could be applied to any element, not just
the horizontal line, and be expected to behave the same way.

When attempting to match the positioning in your mockup, follow these

guidelines:

331
 CIW – User Interface Designer

1. Open your mockup in a program like Photoshop. Reduce the

contrast between elements by adding a layer filled with 50% white on top
of it.
2. Flatten the layers and then save the file in an image format that
works in a browser, like JPG or PNG. Make sure you save it to your
Images folder.
3. Use HTML or CSS to add the lighter version of your mockup to the
background of your page template. For instance, in CSS you could
write:

body {background: url("images/mockup_white.jpg") no-repeat top left;}

Now you have a lightened version of your mockup as a guide for further
positioning.

Note: Should you run into HTML or CSS coding trouble, w3schools.com is
an excellent place to get help. To find a specific piece of information on
the site, either use its table of contents (on the left) or search tool (upper
right).

4. Step 3 could take a few minutes or a few days. When you are finished, your
page template should look exactly like you want it to look. (And exactly like
your mockup page, provided that the mockup is pixel perfect.) If there is
something wrong with your page template, anything not to your liking, keep
working on it.

Do not compromise the quality of this page! It plays a crucial role in the
design process by serving as a template for the remaining site pages. If
the page template is off, every other site page will, by extension, also be
off.

So take your time, live with the page for a while, study it at different times
of the day, on different display devices, in different lighting. Get it right
before you declare it to be finished!

Note: You can revise your resources (wireframes, mockups, page

templates, etc.) later in the design process. The further along you are,

332
 CIW – User Interface Designer

however, the more likely it is that the revision will cause a ripple-through
effect. You can minimize Web site ripple-through effects by storing CSS
and JavaScript code in external .css and .js files.
5. When you are done, store the default template Web page in your Design
folder.
In this lab, you created your page template.

Part 2: Creating the Remaining Site Pages

OBJECTIVE 6.4: Custom page templates

After finalizing your page template, you are ready to build the remaining pages of
the site.

If the layout of a new page is identical to the default page template that you
created in Part 1, all you have to do is:

Instructor Note: Students should be careful to not only give their new pages
meaningful names but to follow their site map as a guide as well.

1. Load the default template in your code editor.

2. Save it as the new Web page you are creating.
3. Replace the template's content with the new page's content.
4. Repeat the above three steps for every remaining site page.
If the layout of the new page is somewhat, but not very different from the default
template, you can revise the page as needed.

If the layout of the new page is very different from the template, you might need
to create a custom page template. You will learn how to do this after the next lab.

Tech Note

333
 CIW – User Interface Designer
If all your site pages are based on one template, creating new pages can be quite simple
and painless. If, on the other hand, you need a dozen page templates, it can increase your
workload substantially. This is another argument for incorporating consistency into your
site design.

Revisiting and revising your site map

In Lesson 2 you created a site map that shows the hierarchical page structure of
your company site. Since this structure might have changed since then, you will
revisit this site map and, if necessary, revise it to reflect your current site vision.

Lab 6-7: Revising the site map

In this lab, you will revisit your Lesson 2 site map and, if necessary, revise it to reflect the
current structure of the site.

1. Have a look at your Lesson 2 site map in light of your current vision of the
site. Are there any pages you need to add to the original map? Are there
any pages you need to remove? Is the hierarchical organization still
correct, or does it need rethinking?

Don't rush this process! Getting a site's hierarchical page structure right is
a very important part of Web site design. A good site structure optimizes
the user experience for site visitors, enabling them to easily navigate the
site and find what they are looking for. A poor structure — illogical, sloppy,
unnecessarily complicated — will do just the opposite: leave your visitors
confused about where things are located and how to get there. This
confusion will most likely become irritation, conscious or unconscious, and
result in unsatisfied customers.

2. Revise your original site map as needed. Re-sketch it by hand, as you did in
Lesson 2, or work directly on the digital site map file, or both. As always,
make sure to save both the originals and the revisions.

334
 CIW – User Interface Designer

3. If you revised your original site map in a way that affects the navigation
links in your default page template, make the necessary changes to the
default template now. Do not put this off or you might forget!

4. Move all the site map files to your digital Design folder. Store your physical
site map sketch(es) in the physical Design folder.
In this lab, you updated your Lesson 2 site map to reflect the current site structure.
Creating custom page templates

In this section, you will create the custom templates you need to build the
remaining pages of your site. To do this, you will need to divide your site pages
into two groups:

 Default pages — pages that are similar enough in layout and appearance to
the default page template that they can be built using this template.
Depending on the consistency of page design across the site, you might be
able to use just one template to build all the pages. If you find you need
more than three or four, you should take a good hard look at your design.
Too much variation in page appearance tends to make a site look
inconsistent and amateurish. You might need to do some redesign work to
increase your site consistency before continuing.
 Custom pages — pages that are different enough in layout and appearance
from the default template that they cannot be built using this template.
To minimize your design work — and promote site-wide consistency — you
should divide your custom pages into sets, each with its own template. For
example:
 Blog pages — built with a custom Blog template
 E-commerce pages — built with a custom E-commerce template
 Form pages — built with a custom Form template
Tech Note

335
 CIW – User Interface Designer
Only make custom templates for pages that require them. If, for example, your blog pages
are identical (or very similar) in layout and appearance to your default pages, use the default
page template to build them.

Lab 6-8: Creating custom page templates

In this lab, you will divide your site into default and custom pages, then divide the custom
pages into page sets and create a custom page template for each set.

1. Create a new Word document.

Using your site map, divide the pages of your site into default and custom
pages and list them in the Word document. A default page is one that can
be built with the default page template; a custom page needs a different,
custom template.

2. Next, divide the custom pages into different page sets, where each set is
defined by a unique page appearance that requires its own custom
template, and list them on the Page Templates page. As mentioned above,
if you end up with more than three or four sets, you should consider
redesigning your site pages to be more consistent.

Save the Word document as Page Templates to your Design folder.

3. Now that you have identified your custom pages and divided them into a
small number of sets, you can get down to business:
Create a custom page template for each custom page set.

When you built the default page template in this lesson, you went through a
long and thorough procedure: You revisited and revised the original page
sketch, the wireframe and the mockup you made earlier in the course, then
you used these to build the default template Web page (HTML document).

When you build a custom template, you do not usually need to do so much
work. Often you can skip the sketch and mockup, and just make the

336
 CIW – User Interface Designer

wireframe and Web page. Sometimes you can even skip the wireframe and
build the Web page alone. It is this custom Web page that you will use as a
template to make your custom pages.

4. Save your custom graphics and HTML files to the appropriate subfolders in
your Design folder.
In this lab, you created custom templates for all the site's custom page sets.
Gathering assets for the remaining site pages

Now that you have all the page templates you need to create the remaining
pages of your site — default and custom — you need to gather and create the
assets for building these pages. Fortunately, you have a head start in this
process, because at least some of the assets you gathered for the default page
template will be used on other site pages.

You can work in single-page mode, batch-page mode or a combination of both:

 Single-page mode — gather/create the assets for one page, then continue
working on it until it is a finished Web page (HTML document).
 Batch-page mode — gather/create the assets for all site pages, then move
on to the next phase in the process: building the Web pages.
The choice is yours. Do whatever feels right, as long as it gets the job done.

Tech Note
The labs in this lesson direct you to use the single-page approach. You will gather assets
for one page, make a wireframe and mockup of the page (if necessary) and then build the
actual Web page. You will then repeat this procedure for all of the remaining pages.

Lab 6-9: Gathering and creating assets for a site page

337
 CIW – User Interface Designer
Instructor Note: If time is an issue, consider having students limit their work for this and the
next lab to 2-4 site pages. Tell them they can finish the rest of the pages outside of class.
In this lab, you will gather all the existing assets and create all the new assets you need to
build one (single-page mode) or more (batch-page mode) pages of your site.

1. From your Page Templates document, pick a page you have not yet
worked on. Write down all the assets you need to make the page. Do not
include assets that are already in your Assets folder.
2. Write down the step 1 assets that already exist. Add revision notes, if
necessary.
3. Write down the step 1 assets that you need to create.
4. Create a new Word document, and write two lists on it: one for the existing
assets (step 2) and one for the new assets you need to create (step 3).
Add notes if needed. Save the document to your Design folder.
5. Gather all the existing assets and store them in your Assets folder.
6. Create all the new assets, revise any existing assets that need it, and store
them all in your Assets folder.

Note: For organizational clarity, you might want to create a separate

Assets subfolder for each page's assets: Home, About, Contact, etc. That
way you will not end up with a huge pile of different asset files in one
Assets folder. Alternately, you might want to organize your assets into
category subfolders: Images, Videos, Text, etc.

7. If you are working in single-page mode, move on to the next part of the
procedure: Creating Site Pages (below).
If you are working in batch-page mode, repeat steps 1-6 of this lab for all
the remaining pages in your site.
In this lab, you gathered assets for one or more pages of your site.
Creating the remaining site pages

All the work you have done in the lesson to this point has been to create the
templates and gather the assets you need to build the pages of your company

338
 CIW – User Interface Designer

site. Now that your templates and assets are in place, you are like a well-oiled
Web-development machine ready to start churning out high-quality Web pages
quickly and painlessly!

Tech Note
Patience and foresight are huge virtues in Web development. Developers are often tempted
to start coding right away. This might work for a small solo project, but for anything more
ambitious, you need to spend a good amount of time planning and preparing before you
dive into the actual coding.

Lab 6-10: Creating the remaining site pages

In this lab, you will use your default and custom page templates to create the remaining
pages of your company site.

1. Either: Use your default page template to create a default Web page.

Or: Use one of your custom page templates to create a custom page.

2. If you are working in single-page mode, jump back to the Gathering Assets
for Pages lab in the previous section, and continue to repeat this two-lab
sequence until you have created all your site pages.

If you are working in batch-page mode, repeat step 1 of this lab until you
have created all the pages.

3. If there are any pages for which you are not using a template, create them.

339
 CIW – User Interface Designer

4. This first version of your site should now be complete. Congratulations!

Take a few minutes to test the site. Make sure the page-to-page navigation
works. If anything major is wrong with a page's appearance or
functionality, fix it. Do not worry about minor imperfections and glitches;
you will have a chance to work on these in the next two lessons.
In this lab, you used the default and custom page templates to create your site pages.

Spell- and Grammar-Check the Site

There is nothing on a Web site that screams "Amateur!" quite so loudly as a

blatant spelling or grammar error, and when users get the feeling that a site is
unprofessional, they tend to think that the site owner — company, organization, or
individual, — is also unprofessional. This can result in fewer site visits, less sales
and a general decline in the owner's brand.

To some extent, spelling and grammar errors are forgiven for sites whose
owners are not native speakers of the language in which the site is written. In
most cases, however, any obvious spelling or grammar mistake will adversely
affect the site's perceived quality and reliability for users, consciously or
unconsciously. For this reason, you should always spell- and grammar-check
your site written content before you publish it.

Tech Note
Never rely 100% on a translation tool (such as Google Translate) to translate Web site text
into a different language. Instead, hire a native speaker to translate the text. Or, if you do not
have the budget, use a good translation tool to create a rough draft, then hire a native
speaker to spell- and grammar-check the site.

Fortunately, there are a number of high-quality tools you can use to spell- and
grammar-check your Web site text content. Here are some of the most popular:

 Microsoft Word — Word is the most frequently used grammar- and spell-
checker. To use it, launch Word, open the file containing the textual

340
 CIW – User Interface Designer

content you want to check, select the Spelling and Grammar option from
the Review tab and follow the instructions in the Spelling and Grammar
dialog box as it works its way through the file.
 Grammarly— Grammarly is a very powerful proofreading application that
corrects contextual misspellings and over 250 grammatical errors. It also
checks for punctuation, style and word choice, and plagiarism. You can run
it as a plugin from within Firefox, Chrome and Microsoft Office. Many
professional writers consider Grammarly the best tool in its class, so you
should definitely check it out.

Here is an example of a Grammarly results screen (Figure 6-3):

Figure 6-3: A Grammarly results screen

341
 CIW – User Interface Designer

 Ginger — In addition to spell- and grammar-checkers, Ginger provides

some potentially useful extra features: It can suggest ways to rephrase a
sentence, help you learn proper English from your own writing and read
text aloud using a text-to-speech module. Ginger is available for iPhone,
iPad and Android devices. You can also run it as a Chrome or MS-Office
plugin.
 After the Deadline — After the Deadline is an open source tool that does
contextual spell checking, advanced style checking and intelligent
grammar checking. You can run it as a plugin on several platforms:
WordPress, Chrome, Firefox and Windows Live Writer.
In addition to these, there are spell- and grammar-checking plugins available for
most content management systems (such as WordPress, Joomla and Drupal)
and Web development IDEs (such as Dreamweaver, CoffeeCup and Microsoft
Visual Web Developer). In short, plenty of good proofreading tools exist, so there
is no reason why any of your Web pages should have even a single spelling or
grammar error.

Tech Note
Consider adopting (and enforcing) a zero tolerance policy for Web page spelling and
grammar errors. Declare any mistake, no matter how minor or subtle, to be unacceptable.

Lab 6-11: Spell- and grammar-checking your site

In this lab, you will spell- and grammar-check the textual content of your company site.

1. Use one of the tools mentioned above — or another similar tool of your
choosing — to spell- and grammar-check the textual content of your site.

Do not confuse spell-/grammar-checking with validation. The former is

used for evaluating and correcting text content, the latter for code.

342
 CIW – User Interface Designer

2. Optional: Take a second pass through your text with a different spell-
/grammar-checker to compare what they identify and what correction
suggestions they offer.
In this lab, you spell- and grammar-checked the textual content of your company site.

Case Study: The Lifeguard Who Couldn't Swim

Eddie Aikau was the first professional lifeguard at Waimea Bay in Oahu, Hawaii, where he
saved over 500 people. He never lost a life in the 30 foot high waves of the big surf spot. He
worked as a lifeguard in the 60s and 70s, before jet skis became popular.

Today a lifeguard will often use a jet ski in the course of his or her profession. Jet skis are
much faster than swimming; they accelerate, save time and hence are more liable to save a
life.

If you were saved by a lifeguard and later found out he or she couldn't swim, you'd be
confused, right? Should a lifeguard only know how to drive a jet ski, or should they also
know how to swim?

In the same way, a professional UI Designer, or Web Designer, has tools for making their job
easier and faster. WYSIWIG ("What You See Is What You Get") apps, visual Web editors, and
Content Management Systems all, to some extent, accelerate the process of constructing a
Web site.

However, just like the lifeguard who should know how to swim, the UI Designer should know
the fundamentals.

A popular CMS like WordPress provides cloud-based, ready-to-use templates with valid,
responsive code. All you have to do is add your own content, maybe search for and install a
plug-in that handles whatever interactivity you want, and instantly you have a Web site.

User Interface Design, and Web Design in general, is a profession. Professionals get paid
because they know their profession. Just like a lifeguard is expected to know how to swim,
the professional UI Designer is expected to know HTML and CSS, to troubleshoot, to
understand the underlying code and to exude competence and confidence.

The standard-bearer for lifeguards is Eddie Aikau, who might have used a jet ski, but more
importantly excelled at the fundamentals of his job.

As a UI Designer you are the standard-bearer for your profession, too, so know the
fundamentals as well as or better than the features of the tools.Is there a lifeguard out there
who doesn't know how to swim? Let's hope not. Just like we hope that there is not a UI
Designer that doesn't know the fundamentals of his or her profession.

343
 CIW – User Interface Designer
Consider the analogy between lifeguards/jet skis with UID/tools, and discuss the following:

 Why is it important for a UI Designer to know CSS and HTML?

 What place do tools like WYSIWIG apps have for UI Designers?
 What problems might a UI Designer run into if he or she does not know the
fundamentals of Web design?

Lesson Summary

Application project

When professional designers work on a project, they generally store all of the
content they create during the design process in a design document. Having all
the relevant material in one document helps to keep team members "on the
same page" and serves as a concise overview for stakeholders who might need
to inspect the design: managers, marketers and salespeople, beta testers,
customer service representatives, etc.

In this lesson, you stored all of your various design files in a Design folder. In this
application project, your mission was to create a design document that contains
all the material in these design files.

Here are some guidelines that helped you make a high-quality design document:

 Pay attention to both the content and the form of the design document.
Good content is clear, correct and complete. If the content of any of the
files stored in your Design folder is unclear, incorrect or incomplete, fix it
before copying it to the design document. Make sure to save your changes
in the original files, so that their content is synchronized with the design
document.
Good form for a document like this means presenting the content in a well-
organized, consistent and readable manner that is pleasing to the reader's

344
 CIW – User Interface Designer

eye. Use the layout and typography skills you acquired in Lesson 5 to do
this.
 Begin with a title page. At the top, write Design Document in big bold
letters. Below that make a table of contents that lists (in logical order) the
document's components — i.e. all the relevant design materials you have
created thus far in the course: vision statement, strategy and
implementation tactics, site specification, mind map, word list, mood
board, site map, user personas, use case documents, diagrams, and
scenarios, branding plan, site color scheme, typography scheme, default
and custom page templates, sketches, wireframes and mockups.
 Begin each component at the top of a new page. Use the "page break"
function to do this, not a stack of empty paragraph returns. Using page
break ensures that the pagination will be the same on all computers.
 Use just the right amount of white space: for page margins, line spacing,
tabs, etc. Too little white space can make pages cramped and difficult to
read, too much can make them disjointed and incoherent.
 Create a footer (that repeats on each page) containing general information
such as the company name, project name, version number, date, etc.
Skills review

In this lesson, you built your company Web site. You began with an HTML and
CSS refresher to jog your memory of Web programming rules and techniques.
You then revisited the design elements of your site (vision, strategy, specification,
wireframes, etc.) and revised them to fit your current sense of the site's look and
feel. Then you created a page template for one representative page of the site
and used it to build the actual page (HTML document). Then you created the
remaining page templates for the site and used them to build the rest of the site.
You then spell- and grammar-checked the site's textual content. Finally, in the
application project you created a Web site design document and in the optional
lab you created responsive versions of the site optimized for all three major
browsing devices: desktops, tablets and phones.

345
 CIW – User Interface Designer

Now that you have completed this lesson, you should be able to:

 6.1 Create a simple Web user interface using best practices.

 6.2 Identify the basics of HTML, CSS and responsive design.
 6.3 Apply a default page template to a Web site.
 6.4 Apply a set of custom page templates to a Web site.
 6.5 Use spelling and grammar tools to review site text.
Activity 6-1: Identifying HTML and CSS terms

Optional Lab

Optional 6-1: (Re)designing your site for all major devices

Despite having just two steps, this optional lab could take many hours to complete.
In this optional lab, you will revisit the Web site pages you built in this lesson and create
versions of them for all three major device types: desktops/laptops, tablets and phones. For
guidance, see the Responsive Web Design section in Lesson 5.

346
 CIW – User Interface Designer

1. Revisit the page templates (sketches, wireframes, mockups) you built in

this lesson and create versions of each that are optimized — form
(presentation) and functionality (interaction) — for all three major devices:
desktops/laptops, tablets and phones.

Note: Most of your responsive redesign work will be layout changes to

accommodate the page objects to smaller or larger displays. Other things
to consider: resizing images, leaving noncritical objects out or hiding them
offscreen (viewable by swiping), ensuring that buttons are
clickable/tappable at all display sizes, etc.

2. Based on the page templates you built in step 1, create optimized versions
of each of your Web site pages for all three devices. You should end up
with the entire Web site being equally effective (form and functionality) on
all devices.
In this optional lab, you created versions of your Web site pages for all major display
devices: desktops/laptops, tablets and phones.

Glossary

assets

All of the content (text, images, audio, video, scripts, etc.) that is included in a
designed object (Web page, app or game screen, etc.).
CSS shorthand property

A CSS property that you can use to specify multiple related properties at the
same time.
font

A set of characters with a certain typeface, size and style.

347
 CIW – User Interface Designer

hot spot

An area in an image map that, when clicked (tapped), jumps to a linked page.
HTML element box

The invisible box in which every HTML element resides. CSS lets you control the
appearance of HTML element boxes and their contents.
mobile-first design

Designing Web site pages for mobile phones before designing them for larger
devices: tablets, laptops, desktops, etc.
ripple-through effect

A situation in which changing one item in a project affects — and necessitates

the changing of — several other dependent items.
Web site splash screen

A Web page that serves as an entryway for a site, usually displaying the site
name and logo, and an appropriate image.
WYSIWYG

What you see is what you get.

Lesson 7

Navigation Concepts
Objectives
By the end of this lesson, you will be able to:

348
 CIW – User Interface Designer

➥ 7.1 Explain why navigation is critical to interface design, including user-centered design
concepts, and "mystery meat navigation.
➥ 7.2 Identify best practices for Web site structure, URLs and file names. Create a site
navigation system.
➥ 7.3 Describe familiar conventions used in site navigation, including breadcrumb trails,
logos, menus, visited links, home page, naming conventions.
➥ 7.4 Compare primary and secondary navigation elements in a Web site.
➥ 7.5 Identify the benefits of guided site navigation.
➥ 7.6 Given a scenario, create a navigation hierarchy for a Web site.
➥ 7.7 Given a scenario, create a navigation action plan for a Web site.

Why is Web Site Navigation So Important?

OBJECTIVE 7.1: User-centered navigation design

Navigation
Video transcript
Download

When building a Web site, inexperienced designers have a tendency to leave site
navigation to chance. They begin by creating a home page, and linking it to the
main pages in the site, for example: Portfolio, About, Contact, etc. Then they link
these pages to other site pages: Graphics, Programming, Podcasts, Blog,
Resume, Client List, etc. Before long, they end up with a disorganized sprawl of
pages with no solid underlying structure. This causes users to have trouble
finding what they are looking for on the site. In turn, this causes them to be
frustrated and apt to seek similar content at a competitor Web site. The
otherwise charming James Bond 007 Museum site (www.007museum.com) falls
prey to a bit of navigational sprawl. See Figure 7-1.

349
 CIW – User Interface Designer

Figure 7-1: The James Bond 007 Museum site's sprawl of links makes it somewhat
difficult to navigate

A well-designed navigation system enables users to move between the sections

and pages of a site in an orderly manner guided by a clear mental model of the
underlying site structure. To build such a system, you cannot simply make a
bunch of page links and see what happens. You need to analyze the content of
your site and devise a clear and efficient scheme for organizing it into
meaningful sections.

The Smithsonian site (www.si.edu/museums) does an excellent job organizing

its enormous breadth of content into clearly ordered and visually defined
sections that users can easily navigate. See Figure 7-2.

350
 CIW – User Interface Designer

Figure 7-2: The Smithsonian site makes it easy to navigate through a vast amount
of content

In this lesson, you will learn principles and techniques for creating robust
navigation systems that optimize the navigational usability of your sites.

Tech Note
Taking the time to design a clear and efficient navigation system is especially important for
larger Web sites. Enabling users to find what they want quickly and conveniently on a 10-

351
 CIW – User Interface Designer
page site is relatively easy, but it can be a huge challenge for a 500-page site with dozens of
sections and subsections.

Site Structure, Directory Structure and URLs

OBJECTIVE 7.2: Site structure best practices

In this section, you will learn about three site navigation-related topics:

 Site structure — How a site's pages are organized for user access on a
browser.
 Directory structure — How a site's file directories are organized on a Web
server.
 URLs — How page URLs can help users navigate a site.
Site structure

A Web site consists of a set of pages organized into one or more configurations,
commonly called structures. The three most commonly used site structures are:

 Hierarchical — Pages are organized into parent and child (sub)sections.

 Sequential — Pages are organized into a specific sequence.
 Web-like — Pages are connected via a Web of links.
Hierarchical Structures
Hierarchical structures organize pages into a set of parent and child
(sub)sections (Figure 7-3).

352
 CIW – User Interface Designer

Figure 7-3: Hierarchical

structures

A parent section contains one or more child subsections; for example, the Photos
section of a site might contain Landscapes and Seascapes subsections. A
parent section can also be a child; Photos might be a subsection of a Portfolio
section. A child can also be a parent; Landscapes might contain the subsections
Color and Monochromatic, and so on.

Most Web sites have a hierarchical site structure: a home page that branches off
tree-like into a set of main sections, each of which further branches off into a set
of subsections, and so on, all the way down to the furthest
branches/subsections.

The Weather Channel's Web site (www.weather.com) is a good example (Figure

7-4) of a hierarchical structure. Links to its main sections are in the navigation
bar: Forecasts, Maps, Video, Photos, etc. And links to child subsections are in
drop-down menus that appear when you mouse over the main link LIVE TV: All
TV, Personalities, Experts, etc. (Figure 7-5)

353
 CIW – User Interface Designer

Figure 7-4: The Weather Channel Web site uses a hierarchical site structure

Figure 7-5:
Weather.com hierarchical structure

Sequential structures
354
 CIW – User Interface Designer

Sequential structures organize pages into a specific sequence based on content.

Anytime you are directed to go through a set of pages in a specific sequence you
are dealing with a sequential structure. The 16
Personalities (www.16personalities.com/free-personality-test) site, as shown in
Figure 7-6, offers a free personality test that uses a sequential structure to move
users through a set of 10 test pages in the proper order, by answering questions
and clicking a "Next" button:

Figure 7-6: The 16 Personalities personality test is structured as a sequence of 10

pages

Web-like structures

355
 CIW – User Interface Designer

The pages of a Web-like structure are connected via a Web of links that
resembles the structure of the World Wide Web itself.

Like mind maps, Web-like structures enable users to navigate through site pages
similarly to how they think, nonlinearly and by association.

Wikipedia's generous use of inline links in its articles is an excellent example of a

Web-like structure in action. You know how it goes. You start reading a Wikipedia
article, click on an inline link for more information on a term you do not
recognize, click on another link in the second article to see a related third article,
and so on. Indeed, the similarity between free associative thinking and using
Wikipedia is so strong that you can end up spending an hour on something that
only really requires five minutes to research.

In the approximately 200 words of this Wikipedia article on User Interface Design,
there are 16 inline links. (Figure 7-7) (That does not include the many links in the
horizontal and vertical navigation bars on the page.) That averages to about one
link every 12 words, a not-uncommon density of links for a Wikipedia
article. (https://en.wikipedia.org/wiki/User_interface_design)

356
 CIW – User Interface Designer

Figure 7-7: Wikipedia's inline-link heavy Web-like structure enables users to think
nonlinearly

Tech Note
Web sites often mix site structures. For example, an online bookstore might use a
hierarchical structure for its primary navigation, a sequential structure for ordering and
purchasing, and a Web-like structure for suggesting books that are similar to other books.

Directory structure

357
 CIW – User Interface Designer

The directory structure of a site is the hierarchical arrangement of directories on

the Web server where its files are stored: HTML, CSS, JavaScript, images, audio,
multimedia, etc. Site files are stored on a server just like they are on a personal
computer. The root directory contains a set of child subdirectories, which in turn
contain other subdirectories, and so on. Sound familiar? It should; it is basically
the same type of organizational scheme as the hierarchical site structure
presented above, and, just as with site structures, directory structures need to be
thought out, clear and efficient.

To make a good directory structure, imagine an inverted tree (Figure 7-8), with
the root at the top, and work your way from the top down to the furthest
branches. Store the home page in the root directory at the top of the tree. Store
each of the next level of pages in its own child subdirectory of the root:
Root/Products, Root/About, Root/Contact, etc. Store each of the next-level pages
in a child subdirectory of the previous level of directories: Products/Desktops,
Products/Tablets, Products/Phones, etc., until all the site files are stored.

Figure 7-8: Hierarchical Structures - a

flowchart or sitemap to illustrate links to child subsections

At this point, take a break. Have a nice cup of tea, take a walk — anything to clear

358
 CIW – User Interface Designer

your mind. Then return to your directory structure. To get some objective
distance, pretend it was made by a colleague and this is the first time you have
seen it. Assess it critically:

 Does the overall directory structure make sense? Is it clearly and logically
organized?
 Is the directory structure efficient? Are any directories missing; are any
redundant? Can any directories or perhaps entire branches be removed?
 Are the directory names clear and descriptive? As you will see in the next
section, choosing directory names that indicate their location in the site
can help site visitors use page URLs to get a sense of the site's structure.
If, based on your critical assessment of the directory structure, you feel it could
benefit from some fine-tuning, take the time to do this. Having a good directory
structure is as important as having a good site structure. Indeed, if you are
working on a hierarchical site, chances are the directory and site structures will
be identical. This is less likely to be true for sequential or Web-like sites.
URLs

Web-savvy site visitors can use a Web page's URL — as displayed in the browser
address bar — to get a reasonably accurate sense of the page's location within
the site structure. For example, consider the URL below. (The http:// protocol part
of the URL is hidden as is common in newer browsers):

companyx.com/europe/new-products/pricing.html

Instructor Note: Students can practice reading URLs and file names to identify
site structure in Activity 7-1: Using URLs to identifying site structure.
Here is what a Web-savvy user can glean from a quick look at this URL:

359
 CIW – User Interface Designer

 companyx.com/europe/products/new/pricing.html — The Web page

provides information on pricing.
 companyx.com/europe/new-products/pricing.html — The page resides in a
directory named new-products, which means that: (a) it provides pricing
information for new products; and (b) there is likely to be an old-products
and/or current-products directory and associated site category, which
means that the site divides products into categories based on when they
were created.
 companyx.com/europe/new-products/pricing.html — The new-products
directory resides in a directory named europe, which means that: (a) the
page provides pricing information for new products marketed specifically
in Europe; and (b) there are likely to be other markets, such as: America,
Asia, Australia, etc.
 companyx.com/europe/new-products/pricing.html — The name of the
company is Company X, and it has its own .com domain, meaning it is
probably well established.
URLs can be similar to breadcrumb trails, in that both present a trail through the
site that leads to the current page. If you plan on enabling your site visitors to use
URLs in this manner, there are a couple of important limitations you need to keep
in mind:

 You cannot rely on URLs helping users understand the site structure. Some
users might not have any idea how to interpret a URL. Or, the browser
address bar might be hidden, in which case the URL would not be visible.
 A URL can only communicate site-structure information if the site's
directories are logically organized and meaningfully named.

Lab 7-1: Revisiting and revising your site and directory structures
In this lab, you will revisit your company site map and directory structure and revise them, if
necessary.

360
 CIW – User Interface Designer

1. Revisit the current version of your company site map. In light of the
material presented in the Site Structure topic above, make any changes to
the site map that you feel will improve the overall structure of the site.
2. Revisit the current version of your company site directory structure. In light
of the material presented in the Directory Structure topic above, make any
changes to the directory structure that you feel will improve it, especially in
terms of page URLs that Web-savvy site visitors can use to determine
where they are in the site.
3. If the changes you made in steps 1 and 2 affect the design of your site
pages, make the necessary changes to their wireframes and mockups.

Note: You should always strive to get the information architecture

(structure) of your Web sites right before you dive into the actual design:
wireframing, mocking up, prototyping. If not, you run the risk of having
time-consuming trickle-through effects like this, in which you need to
revisit and revise wireframes, mockups, etc.

4. If you made any changes — site map, directory structure, wireframes,

mockups, etc. — make sure they are reflected in the Design Document you
created in Lesson 6.
In this lab, you revisited and possibly revised your company site map and directory.

Positional Awareness

OBJECTIVE 7.3: Familiar navigation conventions

For users to navigate your site quickly and easily, they must have positional
awareness of its structure: an understanding of where the current page is
positioned within the site structure. They should never have to wonder where
they are in the site, or how to get to where they want to go.

Here are a few techniques you can use to ensure that users have strong and
accurate positional awareness when browsing your site:

361
 CIW – User Interface Designer

Instructor Note: Positional awareness is particularly important for e-commerce

sites. If users become lost while they are shopping, they are likely to abandon
their purchases and visit competitors.

 Include a descriptive heading (or title) on each page. Headings that clearly
indicate a page's position within a site — Home, Work, Services, About,
Contact, etc. — boost positional awareness. But headings are limited in
that they only identify the current page, not the parent or child pages. Users
need to know where they are in relation to other site pages.
 Assign different colors to the main site sections. Giving each of the main
site sections a unique color scheme can help users gain positional
awareness. It can also give your site a distinctive visual flair. But colors are
limited in that users must create an accurate mental model of which colors
are associated with which sections, and hold this model in memory while
they move through the site. Also, relying on colors can be problematic for
colorblind or visually impaired users.
 Assign different background images to different site sections. As with
colors, giving different site sections different background images can
boost positional awareness and contribute to the stylistic impact of your
site. The same limitation holds as with colors: Users must have a correct
mental model of how images map to sections, and hold it in memory while
browsing the site.
 Include breadcrumb trails. Breadcrumb trails show where pages are
located in the site by displaying the path from the home page to the
current page. They are very useful for large complex sites where users
need help to figure out where they are and the path they took to get there.
For more modest sites, breadcrumb trails are usually not needed.
eBay uses breadcrumb trails, which makes sense because the eBay site is
huge and incredibly complex. In Figure 7-9, the breadcrumb trail eBay >
Electronics > Video Games & Consoles (displayed below the eBay logo)
shows that the current Video Games & Consoles page resides in the
Electronics directory, and that Electronics resides in the eBay root
directory. www.ebay.com/rpp/video-games

362
 CIW – User Interface Designer

Figure 7-9: eBay uses breadcrumb trails to help users navigate its large and
complex structure

 Include a site map. A site map can be condensed or comprehensive. A

condensed map contains only the most often visited site pages. A
comprehensive map includes a larger selection of pages — or if the site is
relatively small, all of its pages.

Unlike the site map diagram you made in Lesson 2, a site map on an actual
Web site is usually a set of text links laid out for structural clarity — child
pages indented under parents. For mid to large sites, comprehensive site
maps are put on their own pages. For smaller sites, condensed maps are
built right into the page footers.

Of all the positional awareness tools you can give your site visitors, a site
map is the clearest and most complete, but there is a downside to using a
site map: To access it, users must leave their current location either by
scrolling to the bottom of the page (if the map is in the footer) or jumping
to a different page. Because these actions interrupt the browsing
experience so dramatically, most users will only turn to site maps as a last
resort when they are hopelessly lost. Even worse, many users have no idea
that there even is such a thing as a site map. For them, navigation means:
inline text links, toolbar buttons and drop-down menus.

363
 CIW – User Interface Designer

The three-click rule

Instructor Note: Emphasize the "three-click rule" of site navigation. This guideline
is very useful when students are developing their own Web sites.
One of the classic tests of usability is to count the number of clicks — or taps,
swipes, pinches, etc. — a user must perform to accomplish a task: accessing a
specific piece of information, purchasing a product, changing a preference
option, etc. If that number is below a certain threshold, users will feel that things
are running smoothly. If it is above the threshold, they will feel they are being
forced to work too hard and get annoyed, consciously or unconsciously.

The threshold to get to the desired information on a Web site is generally held to
be three clicks. This is known as the "three-click rule." It applies to all sites, but
especially to those whose purpose is to provide users with information.

When you design the structure and navigation of your Web sites, be sure to keep
this three-click rule in mind. If users need to click four or even five times for an
obscure task they rarely need to perform, you can probably get away with it. (To
make sure, test it on users!) But any more than five is usually unacceptable.

Primary and Secondary Navigation

OBJECTIVE: 7.4 Primary vs. secondary navigation

The first step in creating an effective navigation system is to organize your site
content in a logical, usable, and consistent manner:

 Logical — The site content should be divided into a set of manageable

pages, not too long and not too complex. These pages should be arranged
in a logical manner, so that users can intuitively understand the overall
structure of the site.

364
 CIW – User Interface Designer

 Usable — The page arrangement should optimize usability by enabling

users to quickly and easily:

 Get an overview of what is in the site.

 See where they are in the site.
 See where they can go in the site.
 Find the information they are looking for.
 Scale elegantly on different devices.
 Consistent — The page structure should be consistent. Do not use different
organizational schemes for similar sections of the site. Draft a concise set
of organizational rules and apply them consistently to all site sections.
It can be quite challenging to devise a good (logical, usable, consistent) site
content organization scheme. This is especially true for a large, complex site.
Imagine that you were hired to create the official Web site for a college. You
would have to devise a way to arrange a huge number and variety of topics in one
cohesive site: academics, admission policy, students, faculty, news, research,
alumni, campus events, transportation, etc. Where should you start? How should
you proceed?

A starting point that many professional designers use is to divide a site's pages
into two categories, primary and secondary, and to provide primary and
secondary navigation elements to enable users to access these pages.

 Primary pages are global — accessible via primary navigation elements

from everywhere in the site.

Instructor Note: Be sure your students understand that primary navigation

does not refer to browser buttons but to features of the Web pages
themselves.

The navigation bar at the top of a Web page is the conventional place to
put primary navigation elements. On the Apple home
page (www.apple.com) in Figure 7-10, the navigation bar contains links for
the home page (apple icon on the far left), product pages (Macs, iPads,
365
 CIW – User Interface Designer

iPhones, watches, Apple TV), service pages (Apple Music, Apple Support),
sitewide search (magnifying glass icon), and a shopping bag (bag icon).

Figure 7-10: Apple's navigation bar contains primary navigation links

 Secondary pages are local — accessible via secondary navigation elements

only from within a specific section of the site.
When you select an element in the Apple navigation bar, a set of secondary
navigation elements appears below it. For example www.apple.com/ipad,
in Figure 7-11, iPad is selected in the navigation bar, and a set of
secondary elements localized to iPads is displayed below it: iPad Pro, iPad
Air 2, iPad Air, etc.

Figure 7-11: Selecting iPad in the bar displays secondary navigation elements
beneath it

366
 CIW – User Interface Designer

Tech Note
In addition to primary and secondary navigation, some designers use tertiary and even
quaternary navigation, particularly when working on large sites. The downside to this is that
it can make navigation more complex and difficult for users. If possible, it is best to limit
your site to primary and secondary navigation.

Some designers use a third category called utility:

 Utility pages and the navigation elements that link to them do not fit into a
single logical area of the site. For example: location/language selectors,
shopping carts, user logins, etc.
To keep things simple, you should treat utility pages as secondary pages.
That way you only have two categories of pages and navigation to think
about: primary and secondary. Keeping things simple for you, the designer,
helps keep things simple for your audience, the site visitors.
Card sorting

One of the most effective tools for organizing site content is card sorting, an
activity in which participants sort a set of cards into categories based on what is
written on them. There are two types of card sorting: open and closed.

 In open card sorting, each card has a single topic on it, corresponding to a
single page or set of related pages in the site. Participants are asked to
organize the cards into categories based on these topics. Depending on
the site, they might be asked to create two categories (primary and
secondary), three or more categories, an unlimited number of categories, a
logical hierarchy of nested categories and sub-categories, and so on. When
they are done sorting, they are asked to name the categories they made.

Open card sorting is generally used for a new Web site, or an existing site
whose structure is being substantially redesigned.
367
 CIW – User Interface Designer

 In closed card sorting, each card has a topic and a category or sub-
category on it. Participants are asked to organize the cards into their
designated (sub-)categories.

This method is generally used for an existing Web site with page
categories that are to be kept intact.
Once your site content is organized into a logical, usable, and consistent set of
pages, you can turn your attention to navigation:

 Divide the site into primary and secondary pages. As explained above, you
should limit your site to primary and secondary pages to avoid confusing
users with too much complexity. Turn to tertiary or higher pages only if the
site is so large and multifaceted that you cannot effectively divide it into
primary and secondary pages.
 Decide what primary navigation elements are needed to enable users to
move efficiently through the primary pages.
 Decide what secondary navigation elements are needed to enable users to
move efficiently through the secondary pages.

Navigation Elements

OBJECTIVE 7.5: Guided navigation

There are many different navigation elements you can use for your Web site
navigation systems. These are some of the most common elements:

 Navigation Bars — A navigation bar is a set of text or image links laid out
horizontally (in a row) or vertically (column). Sites often display primary
navigation links in a horizontal navigation bar and secondary links in a
vertical bar.
368
 CIW – User Interface Designer

 Drop-Down Menus — A drop-down menu is a set of child sub-items that

appears (drops down) when you point the mouse to a parent item in the
menu bar. Sites with a large number of sections and subsections often use
drop-down menus for navigation.

 Hamburger Menus — A "hamburger" menu may be used to replace a

navigation bar with a drop-down menu highlighted by the icon in Figure 7-
12 below that was developed in the 1980s and looks a little like the buns
and meat of a hamburger.

Figure 7-12: Hamburger menu icon

You can see this icon in all the screenshots of Web sites throughout this
lesson (as the browser's means for handling secondary or tertiary menu
items) and it is almost the default solution for menus on apps. Often
designers will use CSS to also generate a special hamburger menu for their
primary navigation items, but that appears only when the user's screen
width is reduced on a cellphone.

 Inline Links — An inline link is the classic text hyperlink embedded within a
line of text (section heading, body, image caption, bulleted list, etc.).

 Breadcrumb Trails — A breadcrumb trail shows where the current page is

located in the site structure by displaying a trail through the site that leads
to the page. For example, this breadcrumb trail communicates that the

369
 CIW – User Interface Designer

current page (Drawings) is stored in the Anime section of the site, which is
in turn stored in Works, and in turn in Home:

Home > Works > Anime > Drawings

The term breadcrumb trail comes from the story of Hansel and Gretel, who
left a trail of breadcrumbs in the forest so they could find their way back
home.

 Footers — Page footers hold the "fine print" of a site: copyright, privacy,
usage licensing, etc. They also often include copies of the links that appear
in the primary navigation bar, so that users who are near the bottom of the
site can jump to other pages without having to scroll back up to the top.
Occasionally footers also show a condensed version of the site map
instead of — or in addition to — displaying a more comprehensive site map
on its own dedicated page.

 Site Search — Site search consists of a search box that holds the text to be
searched for, and a button that performs the search. (Some sites do away
with the button and require users to press Enter instead.) The results are
typically shown in a separate Web page.

 Site Maps — As described above, a site map is a structured set of links to

sections and pages throughout the entire site. A condensed site map (the
kind that appears in a page footer) might link to a dozen of the most often
visited site pages, and a comprehensive site map (on its own page) might
link to most or even all of the site's pages.

370
 CIW – User Interface Designer

 Tag Clouds — A tag cloud is a cloud-like assemblage of links whose size

(and sometimes color) indicates their relative importance (relevance,
popularity, etc.) in the site. Tag clouds are particularly popular in blogs an
social networking sites.

 Pagination — Pagination identifies the current page by its numeric position

in a set of pages (e.g. Page 2 of 7), and provides previous and next page
controls (arrows or similar) to enable users to move back and forth
through the pages in the set.

 Guided Navigation — A guided navigation system helps users work through

a potentially confusing multistep process, such as creating a profile on a
social networking site or purchasing products on a retail site. It is the
online equivalent of a software wizard: a program that takes a user through
a complex sequence of steps to accomplish a specific goal, such as
calibrating a desktop monitor.

371
 CIW – User Interface Designer

Exercise 7-1: Introduction to Navigation Concepts

Navigation icons

Instructor Note: Explain that icon is used in its general sense here, as a visual
representation of something (a linked resource, in this case), not in its specific
sense as a small square image on a computer screen.
There are several different types of visual icons you can use for site navigation.
Four of the most common are text, images, image maps, and buttons.

 Text — click on the text to jump to the linked resource.

372
 CIW – User Interface Designer

Text links can be conventional (underlined, with colors to indicate visited

and unvisited), or CSS-customized (no underline, rollovers, etc.). No matter
what text-link style you use, you need to make sure that the links are clearly
visible to users. Hiding links makes sites difficult to navigate. The Gibbston
Valley home page (www.gibbstonvalley.com) uses simple sans-serif text
links for its primary navigation (Figure 7-13):

Figure 7-13: Gibbston Valley uses text links for primary navigation

 Images — click on the image to jump to the resource.

Navigation images can be small and square, like the everyday icons of a
computer user interface. If you use these types of icons for navigation,
consider labeling them, or having labels pop on mouse rollovers. Less
experienced users might have trouble recognizing the meaning of an icon
by its image alone.

Navigation images can be larger: photos, graphics, illustrations,

animations, etc. But you need to be careful with this approach, because it
can be difficult to indicate that an image is clickable without resorting to
an awkward text message: "Click this image to go to its Web page."

The Yemekteydik ve Karar Verdim home

page (www.yemekteydikvekararverdim.com/welcome.html) uses large

373
 CIW – User Interface Designer

labeled images for primary navigation (Figure 7-14). Rolling over each of
these four images loops a short video of it.

Figure 7-14: Yemekteydik ve Karar Verdim uses labeled images for primary
navigation

When choosing images as the primary means for navigation, scalability to

mobile devices becomes more challenging. How does a pretty layout
respond on a smaller screen? Do the images break out of their grid and
stack instead? How do the visually-impaired navigate if there is no text for
their device to translate aurally? A responsible designer takes these issues
into consideration.

374
 CIW – User Interface Designer

 Image maps — click on a hotspot in the image to jump to its linked

resource.

Image maps can be very effective navigation tools, particularly when the
navigational information you need to convey is better presented visually
than in text. For example, a schematic of an electronic device with
hyperlinked components that connect to pages with detailed descriptions
of these components.

There are also some disadvantages to using image maps for navigation:
They can be just as difficult to use as standard navigation images for
people with disabilities.

 Large image maps can load slowly.

 Image maps are not (currently) in style, largely due to the difficulty of
making them work correctly when they responsively resize for
different device screens, e.g. desktop/laptop, tablet, phone, etc.
 Image maps encourage mystery meat navigation.

Coined by Vincent Flanders of "Web Pages That Suck" fame, mystery meat
navigation refers to navigation elements (links, images, image maps, etc.)
whose destinations are not revealed (or obvious from the context) until the
user points the mouse at them. Image maps encourage mystery meat
navigation, because it is tempting to leave a beautiful image map graphic
as-is, rather than to add klunky-looking text labels to its hotspots.

The Future Water City home page (www.futurewatercity.com) uses an

image map for navigation. (Figure 7-15) Is this an example of mystery
meat navigation? Or does the image provide enough context for users to
be able to know what the hotspots connect to?

375
 CIW – User Interface Designer

Figure 7-15: Future Water City uses an image map for primary navigation

 Buttons — click on the (text-labeled) button to jump to the resource.

Buttons used to be a wildly popular navigation icon. Search the Web and
you will find hundreds of tutorials from the last decade on how to create
rollover buttons for page navigation bars. Though still quite common,
navigation buttons are less ubiquitous today, as many contemporary Web
designers prefer to use simple text links instead, largely due to the benefits
they offer for Search Engine Optimization (SEO) and responsive (mobile)
design.

The Cloud Digitale Medien home page (www.cloudweb.ch) uses a flat-UI

look for a set of buttons for its primary navigation. (Figure 7-16) Although

376
 CIW – User Interface Designer

they appear to be graphics, they rely on iconography delivered through a

specific font family, Font Awesome, thus mixing text-based and button-
based approaches.

Figure 7-16: Cloud Digitale Medien uses flat-UI buttons for primary
navigation

377
 CIW – User Interface Designer

Exercise 7-2: Navigational Elements

Navigation Conventions and Principles

OBJECTIVE 7.6: Navigation hierarchy

Just as with any other aspect of Web design, your site navigation system needs
to follow certain conventions. Innovation is great, but not if it results in your site
visitors scratching their heads and wondering where they are and what they are
supposed to do.

378
 CIW – User Interface Designer

Tech Note
Designers are often thought of as creative artists, but this is a misconception. Artists have
free rein to create whatever they envision; designers are obliged to design usable objects
for a specific target audience.

As a Web designer, your target audience of site visitors is likely not looking for a
navigation system that is a stunning piece of art. They are expecting a system
that helps them locate desired information quickly and easily. If you want to
succeed in Web design, you need to learn how to provide your users with such a
system. And to do this, you need to learn the conventions and principles of Web
site navigation.
Navigation conventions

Here is a list of well-established site navigation conventions. Depending on the

site content and style, you might choose to modify some of these conventions or
to ignore them entirely. That is fine — you are, after all, the site designer — as
long as you make these choices consciously and can justify them in terms of
your overall design goals.

 Include primary navigation on every page: links to the main sections of the
site.
 Use standard page names: Home, About, News, Work, Store, Contact, etc.
 Include a Home page at the root of the site structure.
 Include an About page that describes the site's goals, history, mission, etc.
 Include a Contact page that visitors can use to get in touch with the site
owner.
 Display the logo on the top left of every page, and link it back to the home
page.
 Include a search box in the top-right corner of every page.

379
 CIW – User Interface Designer

 Include a footer containing copyright and privacy information on every

page.
 Use standard icons for shopping carts, social media, RSS feeds, etc.
 Consider responsiveness and accessibility issues at all times.
Navigation principles

Here is a set of principles for Web navigation. Use the various techniques
presented throughout this lesson to put the principles into action:

 Design for users. As a responsible Web designer, you need to keep the
needs of your users at the top of your priority list. Users in this case means
the people who will be visiting the site, not the client who hired you to
create or redesign the site. You need to satisfy the client also; they are
paying your salary. But your main responsibility as a designer is to
optimize usability for the site visitors.

Tech Note

Remember: To optimize usability, you need to do thorough and frequent usability

testing with real-world users, ideally in their actual workplaces performing their
actual everyday tasks: navigating the site, locating information, etc.

 Make navigation controls visible. Users need to be able to access a page's

navigation controls (text and image links, menus, etc.) quickly and easily.
They should never have to spend more than a few seconds scanning the
page to find them. To accomplish this, use your CARP and ERBU principles
— particularly contrast, proximity, and emphasis — to make the controls
stand out visually and to differentiate them from other clickable items on
the page. When designing for touchscreen mobile displays, you also need
to ensure that your navigation controls are large and separated enough to

380
 CIW – User Interface Designer

enable users to access them easily and accurately. For more information,
go to the online Smashing Magazine and search for "finger-friendly
design."
 Provide multiple navigation options. If all site visitors used the same
method to navigate through a site, your job as navigation system designer
would be quite simple. But users are different. Some prefer classic
underlined text links, others prefer image links, or drop-down menus, or site
maps, etc. To accommodate these differences you need to provide your
sites with multiple navigation options. As a rule of thumb, always provide
at least two ways to navigate to the same destination, and avoid using
more than three.

Tech Note

Providing multiple navigation options is especially important for accessibility.

Visually impaired users might not be able to use small or low-contrast text links,
image maps, etc.

 Provide clear positional awareness for users. As navigation designer, you

need to enable your users to know where they are in the site, where they
have come from, and where they can go. Pretend that they are visiting a
city they have never been in before. Your job as navigation designer is to
provide them with a "You are here" indicator on every street corner (page),
and a clear sense of the layout of the entire city (site).
 Be consistent. As with all aspects of Web design, a site's navigation
system must be consistent for it to be effective. Users rely on the
navigation system to find their way around the site. This reliance
establishes a contract between user and designer: The user agrees to
spend time on the site, and the designer agrees to provide simple, clear,
and usable navigation. Being consistent in your design can help
accomplish this.

381
 CIW – User Interface Designer

 Follow conventions. Most users see the Web as a single unified platform
and expect to be able to carry navigation conventions they learn on one
site to other sites. Though your creative side might be tempted to rebel
against these norms and fashion wildly imaginative navigation systems,
your designer's side needs to put its foot down and remind you to design
for usability, not for innovation awards. In other words: Follow well-
established navigation conventions.
 Use clear and descriptive names. The names you choose for navigation
elements must communicate useful site navigational information clearly
and simply. They are not an opportunity for you to be clever or funny or
poetic. They are instructions, and like all instructions, they need to provide
understandable information for how to perform a task. The task, in this
case, is to navigate to a desired location on the site quickly and easily.
So, choose your navigation element names carefully. Use short,
descriptive, and conventional terms that communicate unambiguously to
your site audience. (You should have a good idea of the terms your
audience understands from the user personas you created.) Do not ask
your users to solve word or navigation puzzles, because they will not
bother. They came to your site for information, resources, or services — not
to play games.
 Quickly and easily! The phrase "quickly and easily" has been used several
times in this lesson with respect to site navigation. And for good reason. It
is not enough to enable site users to get from point A to point B. You need
to enable them to get to point B rapidly and with minimal cognitive and
physical effort. If your navigation is sluggish or difficult, you risk losing
users to competitor sites with better navigation.
Web users are notoriously impatient; do not give them a reason to become
impatient with your site. Ensure that all of your navigation system — from
whole down to the smallest parts — enables users to get what they want in
the site quickly and easily.
Common navigation design mistakes

382
 CIW – User Interface Designer

Along with striving to follow principles of good navigation design, you should
take care to avoid making common navigation design mistakes like these:

 Mistake: Putting navigation bars in unexpected places.

Users expect to find horizontal navigation bars across the top of a Web
page, and vertical navigation bars down the left side. Following this
convention increases the page's usability, which in turn increases the
likelihood of satisfied users. Putting a horizontal navigation bar at the
bottom of the page or a vertical one on the right side might look distinctive,
and it might even make sense given the content and layout of the page.
But by going against the convention, you risk decreasing the page usability
and alienating your users.

Remember: Your goal as a Web designer is not to innovate for the sake of
innovation, but to help users find their desired content quickly and easily.

 Mistake: Misusing drop-down menus.

For large sites whose content is arranged into many sections, subsections,
sub-subsections, etc., drop-down menus can be a good choice for
navigation. But for smaller sites with simpler structures, drop-down menus
are often overkill and end up doing more harm than good. Here are some
downsides to using drop-down menus:

Drop-down menus can be frustrating to use. When users point the mouse
to a menu item, they are ready to click on it. But if a drop-down menu
appears, that impulse to click is thwarted, and they might experience it as a
moment of frustration, a subtle crimp in your workflow.

It can be difficult to choose an item from a drop-down menu. This is

particularly true if the item is nested in a (sub-)submenu. Everyone who
has used drop-down menus has experienced this; one slip of the mouse

383
 CIW – User Interface Designer

and you are back to the main menu.

Drop-down menus can encourage users to skip over important top-level

pages.

Depending on how they are programmed, drop-down menus can be

difficult for search engines to crawl and index, resulting in poor search
engine optimization.

 Mistake: Putting too many links on a page.

Cramming dozens of links onto a page is bad design for two reasons:

It makes the page look dense and forbidding, rather than open and inviting.

It puts an unpleasant cognitive strain on users.

Our brains can only process a handful of discrete pieces of information at

a time; five to seven is a good rule of thumb. If you bombard site visitors
with 20, 50, or 100 links, chances are their attention is going to be
splintered, and they will miss the forest (the main navigational options of
the page) for the trees (all the shiny navigation links, buttons, menus, etc.).

There are some exceptions to this, situations in which a well-designed

page can have a large number of links. For example, a site map, which by
definition provides links to most or all pages on the site. Or a gallery of
thumbnail images. Or a Wikipedia-like informational article that links many
terms for further investigation.

But for normal pages, try to limit your main navigation links to a half dozen
or so, and your total page links to a maximum of 10-20.

384
 CIW – User Interface Designer

 Mistake: Putting navigation options in the wrong order.

Many Web designers put the most important navigation options at the
beginning of a list of options — left-hand side of a horizontal navigation
bar, top of a menu, etc. — and the last important options at the end. But
cognitive psychology research shows this to be a bad design decision.

The "serial position effect" reveals that human attention/retention tend to

be highest for things that appear at the beginning and at the end of a
series. This means that you should put the most important navigation
options at the beginning and the end of your navigation bars and menus.
Reserve the middle area for less important options.

 Mistake: Putting form above function.

The main goal of a navigation system is to enable users to navigate a site

efficiently. Its form — the appearance and layout of the navigation controls
— is important only to the extent that it serves this functional goal.
Navigation systems that are too ornamental, too complex, too
unconventional, take too long to load or are too difficult to use are all
unacceptable from the perspective of user-centered design, which values
usability above all else.

If you are an artist, by all means make your art! But, as mentioned above,
do not confuse art with design. Put on your designer's hat when you are
working on a navigation system for a Web site. Design for users, not
galleries.

 Mistake: Making inaccessible navigation.

Creating a brilliantly designed site navigation system is an act of utter

futility if that system cannot be accessed by your users. As with all aspects

385
 CIW – User Interface Designer

of Web design, you need to be sure that the objects on your pages display
and work equally well on a large variety of browsers and devices, and for a
large variety of users with different backgrounds, skills and (dis)abilities.
Common responsive solutions

Dealing with multiple devices is now a requirement, and since your primary
navigation is one of the most important elements on a Web page, having some
solutions at your disposal can make your job easier.

One solution is to design from a "mobile-first" perspective in which the site has to
scale up instead of down. However, full-screen desktop and laptop scenarios
more often lead the design process, as we have done in these lessons.

Another common solution during the early iterations of your site development is
to build at least a temporary "media query" section into your main CSS file. This
will allow you to experiment with the following issues when a smaller screen is
identified:

 Have the font-size in a navigation bar reduce in size.

 Have all the elements of the navigation bar simplify to well-spaced text
with just enough white space to separate themselves from the content.
 Have a navigation bar flip from a horizontal layout to a vertical or gridded
layout.
 Replace image-based navigation with text-based navigation.
 Have the navigation bar hide itself based on scrolling direction.
 Have your navigation menu group itself into a hamburger menu.
This is not an exhaustive list of solutions. For example, the hamburger menu has
its drawbacks and critics. Because it's small it's harder to find on the screen, and
could fall prey to "out of sight, out of mind." You should proceed with research
and caution.

Lab 7-2: Creating a navigation system checklist

386
 CIW – User Interface Designer
In this lab, you will create a checklist containing the navigation conventions, principles, and
common mistakes presented above. You can then use this checklist to assess the
effectiveness of your Web site navigation systems.

1. Create a checklist that contains the navigation conventions, principles, and

common mistakes presented in this section. Keep it simple by including
headings only:

Conventions
□ Include primary navigation on every page.
□ Include a Home page at the root of the site.
□ Etc.

Principles
□ Provide clear positional awareness for users.
□ Quickly and easily!
□ Etc.

Mistakes
□ Putting navigation bars in unexpected places.
□ Misusing drop-down menus
□ Etc.

2. If two (or more) items in your checklist are very similar, combine them. If
something missing from the list, add it. Your goal is to end up with a
thorough and concise checklist that you can use as a practical tool for
optimizing your navigation systems.
3. When you are finished, add the checklist to your Design Document.
In this lab, you created a navigation system checklist that you can use to assess the
effectiveness of your Web site navigation systems.

387
 CIW – User Interface Designer

Exercise 7-3: Navigation Concepts

Creating a Navigation System

OBJECTIVE 7.7: Navigation action plan

Now that you have a solid understanding of the importance of navigation for site
usability and of the conventions, principles and techniques for creating usable
navigation, you are in a good position to create a high-quality site navigation
system. As you work on your system, it is crucial that you keep the main goal of
site navigation at the forefront of your design considerations at all times:

388
 CIW – User Interface Designer

To enable your site visitors to find what they are looking for quickly and easily.

With this main goal firmly in mind, you can use this five-step procedure to create
a navigation system for your site:

1. Determine the navigational needs of your users. User-centered navigation

should grow organically out of an understanding of what users are actually
going to do on your site. What tasks will they need to perform frequently,
perform sometimes, and perform once in a while? What site pages will
they need to access to get these tasks done? What will their typical
patterns of movement be through the site? What pages need to be one or
two clicks away at all times, from all locations? Which navigational
elements (links, bars, menus, etc.) do the site visitors like using? Which do
they dislike?

In Lesson 3 you were introduced to two powerful tools for identifying the
needs and work habits of your site visitors: user personas and use cases.
Another, very popular tool for this purpose is contextual inquiry, a user-
centered design method in which information is gathered about users by
interviewing them at their place of work. For more information, check out
the Wikipedia article on contextual inquiry.
2. Design a first version of a navigation system that meets your users'
needs. Set the scene for this step by reviewing the navigation elements,
conventions, and principles presented earlier in the lesson. Your navigation
design will benefit from having them in mind as you work.

a. Make an annotated site map.

1. Use card sorting (as discussed above), mind mapping (see

Lesson 2), or a similar method to divide your site pages into a
set of clear and logical categories and subcategories.
2. Use a program of your choice (Inkscape, Gliffy, Word, etc.) to
create a site map that consists of the site pages, each in its
own box, arranged in the categorical structure from step 1. If

389
 CIW – User Interface Designer

you need help, refer back to Creating a Site Map in Lesson 2.

Put a descriptive name for each page in bold at the top of its
box, and make sure the boxes are large enough to hold a fair
amount of text annotations.
3. Study the site map from the perspective of a real-world user
who needs to navigate the site. In each page box, write down
the navigation links it needs, i.e. the pages or sections to
which it must link. Use the three-click rule as a guiding
principle: Make sure that no page in the site is more than three
clicks away from any other page.
4. Review your work and fine-tune it as necessary. Focus on
making navigation clear and simple for your users.
b. Decide which navigation elements to use. Now that you have a list of
the navigation links each page contains, you need to choose
navigation elements for these links: vertical or horizontal navigation
bars, drop-down menus, image maps, etc. Once you decide on an
approach, write it down in the site map page box. Make sure to apply
your navigation presentation scheme consistently throughout the
entire site.
c. Choose color and typography schemes for the navigation
elements. Use a graphics program (Photoshop, Fireworks, etc.) or an
online color tool (Paletton, Adobe CC/Kuler, etc.) to choose color
and typography schemes that:

 Makes navigation elements clearly visible on the page, without

being so intrusive that they dominate or undermine the page
design.
 Clearly differentiates between primary and secondary (tertiary,
etc.) navigation elements.
 Makes navigation elements legible to both normal and visually
challenged users: poor vision, color blindness, etc.

390
 CIW – User Interface Designer

 Blends well with the color and typography schemes for the
site proper.
 For more information on color and typography schemes, see
Lesson 5.
d. Create the navigation elements. At this point, you know what links
your pages will have, which navigation elements you will use to
present these links, and what color and typography schemes you will
use for these navigation elements. Using this information, create the
navigation elements.

Note: The workflow of this step and the next (layout) are connected.
You might follow the sequence shown here, create the navigation
elements then lay them out on the page. Or you might begin with
layout then creating the navigation elements afterward. Or you might
jump back and forth between the two steps.
e. Lay out the navigation elements. As discussed in Lesson 5, layout is
a key determinant of usability. If a page contains all the navigation
elements users need to navigate quickly and easily, but they are laid
out in unexpected or difficult to find/access places, its usability will
suffer. For optimal usability, you need to get three things right:

 The correct links — to minimize the clicks to go from point A

to point B.
 The correct navigation elements for these links (bars, menus,
etc.).
 The correct layout of these elements on the page.

If you have one or two navigation elements — for example, a

horizontal bar and a vertical bar — the layout is unambiguous: Place
the horizontal bar at the top of the page and the vertical bar on the
left side. But layout can be more difficult — a bit like a jigsaw puzzle
— when a page has several different types of navigation elements:
bars, menus, site search, perhaps an image map or two, etc.

391
 CIW – User Interface Designer

Tech Note

Learn from real-world sites with navigation systems that work well. Two good
places to find cutting-edge examples of good navigation design
are http://www.Awwards.com and http://www.WebbyAwards.com.

3. Create a working prototype of the navigation system. As you know, usability

testing is important all through the design process. At this point in your
navigation system design, it is crucial. To hold such a test, you need to
create a prototype that is robust enough to give users a realistic sense of
what it will feel like to navigate the actual Web site. The easiest way to do
this is to replicate your site map in actual HTML Web pages. Each page
should have the navigation elements you created in step 2.d laid out as in
step 2.e. Give each page a big bold descriptive title so users know where
they are in the site, but do not worry about any other page content: You are
building this prototype to assess the navigation system, not content
presentation.
4. Test the navigation system on real-world users. Use your prototype to test
the navigation system on real-world users. Test a minimum of 3-5 users
from each of your main audiences: experienced users, intermediates,
beginners, people with disabilities, etc. (You should have identified your
audience types when you created user personas earlier in the design
process.) Focus on the test subjects' positional awareness while
navigating the site, and their ability to get to where they want to go quickly
and easily. For more information on usability testing, see Lesson 3.

Do not make the mistake of choosing all highly Web-savvy users as test
subjects. This will skew your test results. Instead, choose "average"
subjects who know how to get around a site, but are not Web
professionals. These kinds of subjects are far more likely to reveal trouble
spots in the navigation system. And that is what you want from a usability
test: to learn what does not work as well as it should, so you can fix it.

392
 CIW – User Interface Designer

Among your group of testers, someone will choose to test your site on
their phone. This is an excellent time to figure out how your navigation will
respond to smaller screens. See Common Responsive Solutions above.
5. Based on the test results, decide if the navigation system needs more
work. If it does, design a next version of the system, then jump back to step
3 (prototype).

Note: Steps 3-5 form an iterative loop. You keep repeating them in order —
3 4 5, 3 4 5, 3 4 5, etc. — until you decide that the navigation system is
finished.
If the navigation system does not need more work, declare it finished (for now)
and move on to the next phase of the site design.

Lab 7-3: Optimizing the navigation system of your company site

In Lesson 6, you created the first draft of a navigation system for your company Web site. In
this lab, you will optimize that initial draft, as guided by the principles and techniques
presented in this lesson.

1. Run the navigation system you created in Lesson 6 for your company site
through the Navigation Conventions, Principles, and Mistakes checklist you
created. Be scrupulous! Go through every item in the checklist, and jot
down anything in your current site navigation system that needs fixing or
improving.
2. Assign priorities to these fixes and improvements:

High: Critical fixes that must be made in order for the navigation system to
function correctly.
Intermediate: Improvements that will substantially increase the usability of
the navigation system.
Low: Improvements that will improve the usability of the system, though to
a lesser extent than the improvements in the intermediate list.
3. Ideally, you should make the fixes and improvements in all three lists. But,
if you have a large number of items in your lists, and limited time, do what
professional designers do in this situation: Take care of all the high-priority

393
 CIW – User Interface Designer

items and as many of the intermediate and low-priority items as you have
time for.
In this lab, you revisited and optimized the Lesson 6 navigation system of your site.
Test Your Knowledge

Case Study: Does "Less is More" Apply to Site Navigation?

SimpLizzity, a new company with the mission to "provide simple tools for complex tasks"
decided to hire a professional Web firm to develop their Web site. They selected Roaratorio,
a local design team with a reputation for building attractive and usable sites. SimpLizzity
provided the images and text/content for the 250 products on their site, and left the rest of
the design and development to Roaratorio. SimpLizzity's only demand was that the site
have a simple look and feel in keeping with the company's mission statement.

Roaratorio designed an aesthetically pleasing site with an open, calm feel, using plenty of
white space and making sure not to crowd pages with too many objects. They structured
the site content very clearly, organizing the 250 products into about 40 pages organized into
three levels of intuitively logical categories, subcategories, and sub-subcategories.

394
 CIW – User Interface Designer

Understanding that Web site usability depends on site visitors knowing at all times where
they are and how to get to where they want to go, Roaratorio provided excellent positional
awareness for users by using these navigational elements: descriptive page headings, a
horizontal navigation bar (for primary site links) and a vertical bar (for secondary links),
different colors for each of the main site sections, breadcrumb trails and a condensed site
map (set of links) in each page footer. They followed the "three-click rule," ensuring that
every page was a maximum of three user clicks away from every other page. The site had
no dead ends (pages without links), and provided users with feedback to guide them
through the product selection and purchasing procedures. In the rigorous full-day usability
test, not one of the 10 test subjects had any problems with the site navigation.

When SimpLizzity was given the semi-final (pre-launch) version of site, they loved
everything about it — except for the navigation! They felt that the descriptive page headings
were too technical and lacked consumer appeal, the vertical navigation bar was
unnecessary and potentially confusing, the different section colors made the site look
inconsistent in its color scheme, the breadcrumb trails were too wordy and the footer site
maps were too bulky. SimpLizzity felt the navigation system was overdone and intrusive,
making the site pages look busy and complex instead of simple and clean as they wanted.

After explaining their misgivings, SimpLizzity asked Roaratorio one question: Was all this
navigational rigamarole really necessary?

As a class, discuss this scenario and answer the following questions.

 What do you think: Was all this navigation really necessary? Justify your
answer.
 Is Web site navigation important enough that it should override a client's
preferences for a particular look and feel in a Web site? If so, how can the
designer communicate this effectively to the client?
 What changes could be made to the existing navigation elements —
descriptive headers, horizontal and vertical navigation bars, section colors,
breadcrumb trails, footer site maps — to reduce SimpLizzity's
dissatisfaction without undermining navigational usability for site visitors?
 Which of these navigation elements could be removed without doing
serious harm to the site usability? Would anything have to be added in its
place?

Lesson Summary

395
 CIW – User Interface Designer

Application project

Staying with the theme of the Case Study — whether or not the "less is more"
approach applies to site navigation — revisit the navigation system you designed
for your company site in the previous lab, and jot down the answers to these
questions:

 How much of your navigation system can you strip away without seriously
undermining the navigational usability of the site?
 What navigation elements can you scale back, make more subtle, less
intrusive?
 What navigation elements can you get rid of entirely?
 Are there other, less intrusive types of navigation that could do work just
as well, perhaps even better than the current ones?
Treat this like an intellectual design challenge. Do not worry about whether it
makes sense to implement the redesign ideas you come up with. Just focus on
simplifying your navigation system as far as you can without compromising its
usability.

When you are done, compare your "less is more" navigation redesign to the
original design (from the previous lab). Which is more usable? Which yields a
more attractive and effective page design? If your redesign is better than the
original, consider changing it.
Skills review

You began this lesson by learning why having a good navigation system is critical
to Web site usability. You studied the basics of site structure, directory structure,
URLs, and positional awareness. You learned about primary and secondary
navigation, then took a look at different navigation elements. You examined
conventions and principles for good navigation design. And, finally, you learned
how to use all of the above to create a navigation system for a site.

396
 CIW – User Interface Designer

Now that you have completed this lesson, you should be able to:

 7.1 Explain why navigation is critical to interface design, including user-

centered design concepts, and "mystery meat" navigation.
 7.2 Identify best practices for Web site structure, URLs and file names.
Create a site navigation system.
 7.3 Describe familiar conventions used in site navigation, including
breadcrumb trails, logos, menus, visited links, home page, naming
conventions.
 7.4 Compare primary and secondary navigation elements in a Web site.
 7.5 Identify the benefits of guided site navigation.
 7.6 Given a scenario, create a navigation hierarchy for a Web site.
 7.7 Given a scenario, create a navigation action plan for a Web site.
Activity 7-1: Getting page and site-structure information from URLs

Optional Lab

Optional Lab 7-1: Exploring MOMA's navigation system

In this optional lab, you will explore the navigation system of the Museum of Modern Art
(MoMA) Web site. Studying how other sites handle navigation can help you learn what
works well and not so well from the perspective of the user (you, in this case), and this in
turn can help you optimize the navigation system of your own sites for their users.

1. Browser: Go to the home page of the Museum of Modern Art

at www.moma.org, as shown in Figure OL7-1. The MoMA home page you
see might look quite a bit different than this page from October, 2015.

397
 CIW – User Interface Designer

Figure OL7-1: The MoMA home page from October, 2015

Study the page without mousing over it. Can you tell from just looking
which elements are hyperlinks? How easy (or difficult) is it to find the
primary and secondary navigation elements? What is your first impression
of the MoMA site navigation system — positive, negative, or neutral?

2. Browser: Continue your exploration of the navigation system by mousing

over the links on the home page, without clicking on any of them.

Can you tell what the level-2 pages are, i.e. the pages that reside one level

398
 CIW – User Interface Designer

beneath the home page in the site hierarchy? Can you tell what the level-3
pages are, the pages one level beneath the level-2 pages? How many page
levels can you find?

3. Browser: Click Explore in the navigation toolbar to go to the level-2 Explore

page.

What content is offered in this section of the site? How easy (or difficult) is
it to return to the Home page without using your browser's Back button?
How easy is it to jump to a specific level-2 page in another site section? A
level-3 page?

4. Browser: Click the Inside/Out Blog link to go to the level-3 Inside/Out Blog
page.

Does the site navigation system provide you with solid positional
awareness on this page? Can you see, quickly and easily, where you are in
the site structure, where you came from, and where you can go? If not, how
could you fix this without undermining the stylistic consistency of the
page?

5. Browser: Visit a few different pages and keep an eye on the browser
address bar.

How clearly do the page URLs identify your current location within the
overall site structure? Imagine that you e-mailed a Web-savvy friend the
URL of a page on the site, with no description of the page content. What
might you expect her to assume about the page and the site structure from
just looking at the URL?

6. Browser: Spend a few minutes browsing through the MoMA site on your
own.

399
 CIW – User Interface Designer

What familiar navigation conventions are used? Are they applied

consistently, across the entire site? Which principles are followed? How
strictly does the site obey the "three-click rule?" (For help see "Navigation
Conventions and Principles" above.)

7. What is your overall impression of the MoMA site's navigation design?

What works well, and what works not so well? How might you improve the
latter? How usable is it for the type of people who are likely to visit it?

What MoMA navigation elements might you consider using for your
company site? If necessary, take the time now to improve your site's
navigation based on what you learned in this lab.

In this lab, you explored the navigation system of the Museum of Modern Art Web site to
help you optimize the usability of the navigation of your company site.
Glossary

card sorting

A tool for designing the information architecture of a Web site, in which

participants organize topics on cards into categories that make sense to them
(usability.gov).
contextual inquiry

A user-centered design method in which information is gathered about users by

interviewing them at their place of work.
mystery meat navigation

A navigation element (link, image, image map, etc.) whose destination is

unknown until the user points the mouse at it.

400
 CIW – User Interface Designer

positional awareness

An understanding on the part of the user of the position of the current page
within the structure of the site.
software wizard

A program that takes a user through a complex sequence of steps to accomplish

a specific goal.
Uniform Resource Locator (URL)

A text string that supplies the protocol, hostname, and file name needed to
access a resource on the Web.

Lesson 8

Designing and Developing a Professional Web Site

Objectives
By the end of this lesson, you will be able to:

➥ 8.1 Identify why prototyping is so important.

➥ 8.2 Explain common patterns of user activity on interfaces, including breadcrumbs,
progressive disclosure, and pattern libraries.
➥ 8.3 Optimize the "look and feel" for a site.
➥ 8.4 Identify the importance of forms for user input within a user interface using best
practices.
➥ 8.5 Explain how a form in a Web page should be processed to a database.
➥ 8.6 Identify an appropriate framework for a Web site.
➥ 8.7 Describe how UI library elements are used to create a Web site.
➥ 8.8 Identify a content management system to create a Web site.
➥ 8.9 Identify templates and themes.

401
 CIW – User Interface Designer

➥ 8.10 Compare various site publishing tools, including FTP, HTTP and vendor-specific
tools.
➥ 8.11 Choose a Web host and domain name for your site.

Why is Prototyping So Important?

OBJECTIVE 8.1: Importance of prototyping

In the previous two lessons — 6: Creating a Web User Interface, and 7: Navigation
Concepts — you created a high-fidelity working prototype of your company Web
site. Remember, a working prototype is a presentation of multiple pages with
some limited interactive features. In this lesson, you will learn how to make this
prototype into a full-fledged professional site ready to be published on the World
Wide Web.

Prototyping is a critical part of the design process. This is not always apparent to
novices in Web design. The mistaken logic goes something like this:

Why should I bother spending so much time making a prototype if I already have
a good idea of the design of the Web site itself? Why not just make a few
sketches and wireframes and then dive into coding the actual Web pages?

Instructor Note: Students should share their prototypes with as many people as
possible in order to gain useful feedback and keep their focus on User Centered
Design.
Why? Because this approach will almost certainly fail. If you are building a three-
page site by yourself and jump straight from wireframing to coding, failing might
not be so traumatic. You can treat the first version of your coded site as a
prototype and iterate from there. If you are building a 1,000-page site with a team
of 12 and your developers code the site without prototyping it first, however,
failure could mean losing a month or more of work and salary for 12 people.

Here are some key benefits of creating prototypes of your Web sites, according

402
 CIW – User Interface Designer

to Jacob Gube (2013):

 Prototyping helps you identify design problems early on. Prototypes reveal
flaws in design early in the design process. This is especially true for
detailed high-fidelity prototypes, but even simple wireframes can identify
design problems that were not apparent in the designer's mental image of
the page. Finding these flaws early lets you fix them before the developers
begin the actual coding, which in turn can save a significant amount of
time and money.

 Prototyping helps you iterate more quickly. Design is an iterative process:

You design/test, re-design/re-test, over and over until you are satisfied with
the results. Since prototypes are relatively easy to create and modify, using
prototypes enables you to iterate much more quickly and painlessly than if
you repeatedly re-design working versions of the site.

 Prototyping helps you compare design solutions. Web design is largely a

matter of choosing the best (most usable) elements from a set of possible
elements. For this reason, the design process requires comparing different
solutions for the same problem: page layout, color scheme, typography,
navigation, etc. Because prototypes are easy to build and modify, they are
ideal tools for creating multiple design solutions. For example, you could
create three different mid-fidelity prototypes to show how the same page
would look with three different color schemes.

 Prototyping helps you get meaningful design feedback. Getting critical

feedback from both users and professionals is a crucial part of the design
process. To give meaningful feedback about a design, those critiquing
need to have a clear sense of what the design looks like. No matter how
carefully you describe a design in words, your description will be nowhere
403
 CIW – User Interface Designer

near as accurate as showing testers the actual design. Prototypes are

excellent tools for doing this.

 Prototyping helps you present design ideas to stakeholders. There are many
different kinds of stakeholders in a Web site design project: members of
the design team, the client (who hired you to design the site), the users
(site visitors), customer service representatives, marketing and sales staff,
etc. Chances are you will need to present your design ideas to most, if not
all of these stakeholders at some point in the design process. Prototypes
are well-suited for doing so.

You need to be careful, however. Not all prototypes are suitable for all
stakeholders. For example, if your client is not design-savvy, showing them
a wireframe might confuse them and do more harm than good.
Fortunately, since prototypes are relatively easy to build, you can easily
make multiple prototypes of the same design idea, one for each set of
stakeholders.

 Prototyping helps you perform user testing early on. User testing with real-
world site visitors is one of the most important components of the Web
design process. In the user-centered approach to design presented in this
course, users should be tested frequently, from the very beginning to the
very end of the design process. Prototypes help you achieve this.

 Prototyping helps you save time and money. The simplest and most
convincing argument for prototyping is that it saves time and money when
developing a Web site.
Yes, prototyping takes effort and work hours, but, just as with user testing, if you
do not prototype, you run the risk of getting the design wrong and having to
backtrack, or worse, start over again from the beginning. When it comes to Web

404
 CIW – User Interface Designer

site design, better be safe than sorry: Make good prototypes, do good user
testing, from the beginning to the end of the design process.

There are many helpful methods and tools you can use to create a working
prototype. You can place mockups made in a graphics creation program (like
Photoshop) inside a presentation created with a program like PowerPoint or
Keynote. Google Ventures calls this solution their "secret weapon" for design
sprints. Presentation software provides simple tools for making limited
interactivity. In other words, you can make buttons jump to specific slides
presenting specific mockups.

You can also choose from a long list of dedicated prototyping applications such
as UXPin, Invision or Axure. You can also build your prototypes using HTML and
CSS, or you can begin with a more robust base of responsive and coded
solutions like you would find in a Framework like Bootstrap.

User-Centered Web Design

When you've finished the prototype, share it with a lot of people, people willing to
provide feedback. As you will recall from Lesson 3, user-centered design (UCD) is
a methodology with the main goal of optimizing a design's usability —
effectiveness, efficiency, "enjoyability" — for its real-world users. As a
professional Web site designer, you need to practice user-centered Web design
for two interconnected reasons:

 The designer/user contract — A major ethical component of practicing user

interface design is to honor the (implicit) contract between designer and
user. This contract states that the designer will make the user experience
as productive, pleasant and pain-free as possible. Using a poorly designed
UI hurts, both cognitively (confusion, interruption of work flow, annoyance)
and physically (RMI and eye strain from an unnecessary abundance of
required keystrokes and mouse points, clicks, drags).
 User satisfaction — A positive byproduct of honoring the designer/user
contract is the likelihood of increased user satisfaction, which translates to

405
 CIW – User Interface Designer

more and longer site visits, product sales, positive word of mouth
advertising, etc.
In this section you will learn some tips and techniques for optimizing the usability
of your site for its visitors.
Optimizing the user experience

Closely related to user-centered design, user experience design (UXD) seeks to

optimize the user experience, all aspects of the user's interaction with a product
or service: usability, accessibility, pleasure, etc, according to researchers Jakob
Nielsen and Don Norman (n.d.). Because user experience design addresses such
a broad range of user issues, many disciplines are involved in the UXD process:
design, development, engineering, packaging, marketing, sales, etc.

There are two main requirements for a product to provide a high-quality user
experience:

 It must enable users to perform their desired tasks easily and efficiently. If
this requirement is not met, the product will almost certainly fail.
Customers rarely purchase products that look great but do not perform
their jobs well.
 It must be a joy to use. If this requirement is not met, the product might still
do reasonably well in the marketplace, but chances are that customers will
become dissatisfied with it and, by extension, with the company that built
it.

Tech Note
The terms usability and UX (user experience) are often used interchangeably. Though they
are similar, they are not identical. Usability is an attribute of the UI, how easy it is to learn,
how efficient and enjoyable it is to use, etc. UX is broader, encompassing the entirety of the
user experience with a product.

Learning about your Web site visitors

If your goal is to provide your Web site visitors with a high-quality user

406
 CIW – User Interface Designer

experience, you need to know what makes them tick. What devices are they
using: desktops/laptops, tablets, phones, watches? What type of Internet service
do they use, where are they located geographically, what language do they
speak? What browsers and window sizes do they use to view your site? What
pages do they visit and what tasks do they perform frequently, sometimes,
rarely?

There are two main analytical methods for learning about your Web site
visitors: user analysis and Web analytics.

User analysis
User analysis is a set of methods for understanding the characteristics and
behaviors of the users of a product (software or hardware), such as:

 What users want from the product.

 What they need from the product. What users want from a product is not
always what they need. For example, many users want all the new features
they have read about or experienced in competitor products, but they might
end up actually using only 25% of these features.
 How they use the product.
 What UI-related problems they have using the product.
 What associated products they use. For a Web site, this includes: browser,
browsing device, Internet connection type, etc.
Instructor Note: Students should understand that testing is done throughout the
entire Web design process and different methods may be useful at different
points in production.
User analysis methods, according to www.UID.com (2015) include:

 Usability testing — Analysts create and administer tests to evaluate the

usability of a product design from the perspective of users.

Usability testing is an extremely important part of successful UI design. It

should be performed frequently, from the very beginning all the way

407
 CIW – User Interface Designer

through to the very end of the design process. For more information, see
Lesson 3.

 Context interviews — Analysts interview users at their workplace during a

normal workday in which they are using the product to accomplish their
everyday tasks.

To enhance the rapport between analyst and user, a master/apprentice

relationship is often adopted in which the analyst learns how the user
thinks by acting as an apprentice would when learning from a master
craftsman.

 Diary studies — Users keep a diary in which they report their thoughts and
actions over a specific period of time.

 Ethnographic shadowing — Analysts accompany users (follow them like a

shadow) in their everyday work life over a period of time to learn how they
think and act.

 Surveys — Users respond to surveys designed to gather salient information

about their characteristics and behaviors.

 User workshops — Analysts guide groups of 5-10 users in a discussion of

specific aspects of product usage.

408
 CIW – User Interface Designer

 Feedback forms — An easy and effective way to get feedback from users
about a site is to provide them with a feedback form. You should keep the
form simple and inviting to encourage site visitors to use it, as in this
example from Amazon UK (www.amazon.co.uk) in Figure 8-1:

Figure 8-1: Amazon UK's user feedback form is simple and inviting
Web analytics
Web analytics, according to Kennedy (2014), is the collection and analysis of Web
site data to help understand the characteristics and behaviors of its users: where
they are located, what browsers and computing devices they are using, what site
pages they visit, which links and ads they click on, etc. This understanding can
help you optimize the usability of your site, and in doing so increase user
satisfaction, market share, sales, branding effectiveness, etc.

Tech Note
The information generated by Web analytics overlaps, to a significant extent, that generated
by user analysis. Doing both types of analysis invokes redundancy that can help analysts
discover patterns that might not have been clearly visible using only one of the methods.

Web analytics is similar to Web site usability testing in that both gather data
about what users actually do on a site and draw conclusions based on this data.

409
 CIW – User Interface Designer

Of the two, the Web analytics data is more accurate. No matter how ideal the
situation is for a usability test, it is still an artificial situation in which users are
being observed as they work, and this artificial component skews the results
somewhat. Web analytics, on the other hand, simply observes and records what
users do when they are actually visiting the site, on their own, unimpeded by
testing procedures or observers.

Here are some key things that Web analytics reveals about a site's visitors:

 Conversions — Often the most important kind of Web analytics data for a
site is its conversions. A conversion occurs when a user performs a
desired action on a Web site: downloads a file, clicks on a link, etc. Web
analytics reveals things like the number of brochures downloaded in a
month, the number and type of products purchased, the number of times a
banner ad is clicked, etc. Finding ways to increase these numbers often
drives much of the Web analytics and usability work on a site.
 Pages per visit, time per visit — It is obvious why these two metrics would
be of interest to a Web site usability designer. Knowing what pages users
visit and how long they spend on each page can go a long way to pointing
out the strengths and weaknesses of a Web site, with respect to its
viewing audience. It can be quite difficult to interpret these metrics
accurately, however. A short visit to a page could mean that the user
achieved a goal quickly and easily, or abandoned it because of frustration
or an interruption. A long page visit could mean a user found lots of
interesting content, became lost and confused, or left the computer to get
a cup of coffee, etc.
 Bounce rate — Bounce rate is the percentage of "single-page sessions" in
which users leave a site from their entrance page quickly without having
interacted with that page. Most Web analytics tools enable you to
determine bounce rates for both individual pages and the entire site. A high
bounce rate can obviously mean poor page or site usability, but, like the
pages/time per visit metrics, bounce rates can be difficult to interpret
accurately. Visitors might leave a page quickly because they found it
difficult to use, because they achieved their goal quickly, because they
were interrupted, etc. Like most Web analytics data, page/times per visit

410
 CIW – User Interface Designer

and bounce rates are useful for spotting user patterns that point to
potential problems in the design.
 Exit pages — An exit page is the page from which a user leaves a site.
Knowing where users are choosing to exit your site can help you devise a
strategy for encouraging them to stay. For example, you can create a list of
pages you do not want users to exit from, and modify those pages —
add/remove features, relocate them in the site hierarchy, etc. — to
discourage users from leaving.
There are many Web analytics tools available, free and for-pay. Among the best
are: Google Analytics, Clicky, KISSmetrics, and Woopra. Figure 8-2 is an example
of a dashboard screen from KISSmetrics
from https://blog.kissmetrics.com/better-product-innovation/

Figure 8-
2: Dashboard screen from KISSmetrics

User Interface Design Patterns

411
 CIW – User Interface Designer

OBJECTIVE: 8.2 Common user action patterns

All analytical methods look for patterns in the data they analyze. Once a pattern
has been found and understood, you can draw useful conclusions from it and
take appropriate steps to optimize design and functionality. User analysis and
analytics can help you spot user patterns; UI design patterns can help you apply
patterns to your Web sites.

A user interface design pattern is a reusable solution to a common UI design

problem. This can be a software (coding) problem, a visual design problem, or a
mix. For example:

 Problem: Web site visitors need to know their location in the site structure
to be able to navigate to different locations in the site.
 Solution: Use the breadcrumbs design pattern to show the steps in the
hierarchical path that lead to the current page; for example: Home >
Portfolio > Graphics.
Instructor Note: User interface design pattern libraries are updated daily and can
reflect design trends and patterns.
The terms reusable and common are important. A UI design pattern must be
general enough to be reusable, so that it can be applied to different variants of
the same UI problem, and the problem must be common enough to warrant the
existence of a design pattern to solve it. It would not make sense to have a UI
design pattern that solved a UI problem for one specific site.

There are several high-quality (and free!) user interface design pattern libraries
online. Among the best are: UI Patterns, Pattern Tap, Pttrns, and Mobile Patterns.
There are also libraries with patterns specifically for Android, iOS, Windows and
other devices, which you can find by searching for "android design patterns," "ios
design patterns," etc.

Design pattern libraries do not provide visual design templates that you can
simply copy and paste into your Web sites or apps. Instead, they present images
(screenshots) of useful design patterns and (occasionally) text descriptions of
how these patterns solve particular problems, as in Figure 8-3 Breadcrumbs

412
 CIW – User Interface Designer

Design Pattern page from UI Patterns (www.ui-

patterns.com/patterns/Breadcrumbs):

Figure 8-3:
The Breadcrumbs Design Pattern page from UI Patterns

Here are some of the most commonly used UI design patterns, grouped in
categories:

 Data Input
 Account Registration — Let users register an account with the Web
site.
 Calendar Picker — Let users select a date from a calendar.
 Wizard — Guide users through a data-input task one step at a time.
413
 CIW – User Interface Designer

 Image display
 Gallery — Let users view a set of images, one at a time.
 Image Zoom — Let users zoom into an image to view its details.
 Slideshow — Let users view an ordered sequence of images, one at a
time.
 Navigation
 Breadcrumbs — Let users view the hierarchical path to the current
page.
 Drop-down menus — Let users select menu items from a drop-down
list.
 Navigation Tabs — Let users view different sections by clicking on
tabs.
 E-commerce
 Paywall — Let only paying users enter (a certain part of) the site.
 Shopping cart — Let users add, remove, and update products they
intend to buy.
 Miscellaneous
 Progressive disclosure — Show only the information and features
that users currently need to see, and hide the rest until it is required.

Optimizing the look and feel of a Web site

OBJECTIVE 8.3: Mobile site look and feel

After drawing conclusions from the data you gathered via user analysis and Web
analytics, you need to put these conclusions into practice by using them to
optimize the look and feel of your site.

All throughout this course, you have been asked to consider the "look and feel" of
your Web site design. What exactly do these mysterious terms mean? A simple
analogy might be the best way to get at a useful answer: The look and feel of a

414
 CIW – User Interface Designer

Web site is like the look and feel of a car, as shown in this table.

Car Web site

Look Is the car small? Mid-sized? Large? Boxy? Curvy? Is the site small, mid-sized, large? Boxy or
Conventional? Sporty? Economical? Luxurious? flowing? Is it linear, like a magazine? Or non-
Do you like the color? The styling? The interior? linear, like a mind map?
The dashboard?
Do you like the color scheme? The layout and
What is your first impression, before your inner typography? The interactive controls?
critic kicks in? Is it attractive? Does the way it
looks make you confident it is built well? Would What is your first impression? Is it an attractive
you like to drive it? If you had the money, would site? Does it invite you to use it? Does its
you buy it? appearance make you confident about its
content? Is its design appealing enough that
you would gladly return to it?

Feel How does the door lock and handle feel? The How does it feel to move through the site? Are
driver's seat? The position you are in with respect the navigation controls clearly visible and easy
to the steering wheel and pedals? Are the to use? Can you get a sense of the structure of
dashboard controls (radio, heat, etc.) easy to the site from looking at one of its pages?
reach and use?
When you perform a task in the site — register
When you start the car, does the feeling (and for example, or make a purchase — do the
sound) inspire confidence? Does it move smoothly actions you need to take feel natural and
from a full stop to forward motion? Does it intuitive? Do the task steps flow seamlessly,
accelerate nicely? Does it have enough power? one to the next? Is it easy and convenient to
Does it steer well? Are the brakes just right, not find what you are looking for on the site?
too sensitive and not too loose?
Do you feel you are visiting a beautifully
Do you feel you are behind the wheel of a functional Web site, a passable one, or a
beautifully engineered machine, an adequate shoddy piece of Web design?
vehicle, or a piece of junk?

Table 8-1: The look and feel of a Web site are like the look and feel of a car

Lab 8-1: Optimizing the look and feel of your company Web site

415
 CIW – User Interface Designer
In this lab, you will optimize the look and feel of your company Web site.

Based on the UCD and UXD material presented above, revisit your company Web site, make
a good long critical examination of it, and do whatever you feel is necessary to optimize its
look and feel.
Rather than reinvent the wheel by creating your UI elements from scratch, feel free to draw
upon Web UI design patterns from UI Patterns, Pattern Tap, Pttrns, Mobile Patterns, or
similar sites. There is no shame in using patterns others have used; all professional
designers do it, consciously or unconsciously.

In this lab, you optimized the look and feel of your company Web site.

Focus on Web Forms

OBJECTIVE 8.4: Using forms for user input

Web forms are a primary means of actively interacting with and learning about
your users. Forms aid in the collection of user data. This data collection can
happen using a variety of forms designed for a variety of purposes. Some
common forms in today's Web sites are:

Instructor Note: Many content management systems and frameworks include

database elements to assist students with data collection.

 An email form which captures the contact info of the person emailing you.
 A registration form separating a new visitor from their initial access of
protected content.
 A log-in form allowing for a more abbreviated input experience.
 A CAPTCHA human verification form to register or send messages to other
site visitors.
 A payment form for the user to enter their billing information.
 A search form to search the site and enter search commands.
You have probably seen Figure 8-4, the most famous form on the Web: an empty
text box, a "Google Search" button, and an "I'm Feeling Lucky"

416
 CIW – User Interface Designer

button. www.google.com

Figure 8-4: Google

Search

The form design is very simple, but its function is not. Google collects a lot of
information every time you perform a search, including the other Web sites you
visit, the news and blog posts you read, your location, your time of day and even
your specific computer id number. Regardless of the privacy concerns, this also
illustrates a best practice: the separation of user interface design from backend
functionality.

Registration forms are typically the first point of communication with a new
visitor to your site, as in Figure 8-5.

417
 CIW – User Interface Designer

Figure 8-5:
Google Account Registration

Your registration form will collect all the user information your Web site service
will need to add a user to its system. How much and what kind of data you
collect depends on the purpose of your site. You must think carefully about the
purpose of the user information you are trying to collect.

Keep it simple. Although it may be tempting to collect as much data as possible

for some possible future use, visitors do not look forward to filling out forms with
dozens of fields. Optional fields speed up the process and help emphasize the
most important fields. Additionally, too many fields mean less data accuracy:
visitors will be less attentive and make more errors when completing the form.

418
 CIW – User Interface Designer

There is also a potential for legal liability when you collect financial information;
weigh this against the potential benefit from collecting the information.
The nuts and bolts of forms

Web forms, or just forms, typically send the data they collect to a database, so
one doesn't usually exist without the other. Forms are otherwise straightforward,
however. They are created with HTML using the <form> tag. Data fields within a
form, also called Web form elements, are created with the <input> tag. Forms can
be created using only HTML, but JavaScript, CSS, and server-side languages like
PHP can be used to enhance them.

HTML cannot store or process data by itself, so an HTML form must send the
data somewhere, often to a Web page that has embedded code designed to
handle it. This does not have to be a separate page, and it is a common practice
for the code to exist on the same page as the form. The server-side code, in turn,
adds the data to your Web site's database.

GET and POST

OBJECTIVE 8.5: Database connection

Want to know a little bit about how all the data is sent to a database (and pulled
out of a database)? Learn about GET and POST. GET and POST are "request
methods" built into a Web browser's underlying code. POST comes into play,
invisibly, when data is entered into a form and a "Submit" button is clicked. The
POST method sends that data to the server that hosts your Web site to be
processed in some way. That might be a database. GET, in turn, is the method for
pulling that stored data from the database for your use.
Interacting is risky

By interacting with strangers out in the world using a Web page, you of course
open yourself up to all kinds of human behavior, good, bad and in-between.
Preparing for the variety of possible interactions is wise.

419
 CIW – User Interface Designer

Some users make mistakes when they enter their data. It happens. Also, little
roaming packets of code known as robots regularly attempt to submit forms and
create accounts automatically, for a variety of reasons. Some more malicious
users want to ruin your day by breaking your database.

You cannot trust the data you receive from a form without performing something
called Input Validation and Input Sanitization.

Input Validation is a "reasonableness" check on the type of data submitted; it

addresses honest mistakes. It is not a guarantee but a smart thing to do.

If a user misspells her name "Anne" as "Ann", input validation will not help, but if
her name is "z1234$", input validation should reject it. Names do not have
numbers or special characters in them, yet. If there are errors such as this, the
submission of the form to the server will be blocked and the user will be given
corrective feedback.

Input validation is done with JavaScript or with other server-side languages. How
the code is written, and when and where it runs, not only impacts the data
credibility but also the performance of your Web site.

Tech Note
As you progress in your career as a user interface designer you will often find that knowing
code is crucial and specifically knowing JavaScript is a common job requirements for a
designer these days. Learn as much as you can.

For instance, mischievous users (i.e. hackers) can alter your code on-the-fly, but
cannot alter validation if it's stored on the server (versus on the user's computer).
This means that the validation can be trusted, but because the server is handling
the validation, the server will slow down. A hacker might be trying to slow your
server down for some reason, not break into your database. The variety of
possible interactions is vast.

Input Sanitization is a related concept. Sophisticated malicious users can do

more damage than just submitting bad data. They can take advantage of security

420
 CIW – User Interface Designer

holes in old coding standards. A hacker can read, alter, or delete your entire
database if your code is vulnerable. As an example, an attack might consist of
adding special characters, usually single quotes, to form fields. The quotes will
change the command from helpful to destructive. Modern programming
languages all have methods to sanitize user input, but old programming habits
die hard and there are millions of vulnerable sites on the Web.

As a designer using forms, it's necessary to have a basic understanding of how

the form data will be processed. For instance, a database best practice is to only
have one value per field. This precludes using form fields like "phone numbers" or
"email addresses" with comma separated values. If your challenge is to collect
two phone numbers or email addresses, you should use separate fields, i.e.
"home phone," "work phone." Learning as much as you can about all the standard
tips and tricks related to forms closes you off from bad code and security holes.
Exercise 8-1: Web Forms

Constructing a Professional Web Site

421
 CIW – User Interface Designer

After repeating the core cycle of design, prototyping and testing a few times, you
reach a final result that satisfies the users.

At this point, you are ready to construct a final, professional Web site. Many
factors go into choosing how to proceed, including the size of the project, the
company it serves and the development team who will help build and maintain
the site. A standard HTML and CSS solution is no longer considered a fully
"professional" approach to site development.

Designers and developers all over the world are diligently working to iron out all
the kinks in the process of building and maintaining complex Web sites. It is a
small but growing industry. They are trying to apply all the best practices the
short history of Web development has produced into cohesive, trustworthy,
validated, sanitized and responsive packages of front-end and back-end
solutions. These solutions include all the user interface elements you might need
pre-built for you.

Two of these solutions, discussed by author James Williamson (2014), are Web
Frameworks and Content Management Systems.

Designing and Developing a Professional Web Site

Web Framework

OBJECTIVE: 8.6 Identify an appropriate framework

A framework is a set of customizable tools and techniques. There are dozens of

Web frameworks in use today. They typically consist of page templates and code
modules (HTML, CSS and JavaScript) that you can use as building blocks to
create Web pages with professional-quality structure, semantics, functionality,
and styling.

Instructor Note: Web application frameworks often provide libraries for database
access and form elements, such as GET and POST discussed later in this lesson.

422
 CIW – User Interface Designer

The main benefits of using a framework to create a Web site are efficiency,
consistency, and compatibility. Working with a framework often reduces site
development time significantly, because most of the code has already been
written and tested. Since frameworks are rigorously coded for consistency, using
one makes it easier to create a consistent site, and since frameworks seek to
optimize browser compatibility, using one maximizes your chances for building a
site that looks and works the same (or very similarly) on all major browsers.

Among the most popular Web frameworks are Bootstrap and Foundation.

Bootstrap
Bootstrap (www.getbootstrap.com), an open-source framework developed by
Twitter, consists of HTML, CSS, and JavaScript code designed to help build user
interface components. In essence, Bootstrap is a free collection of tools for
creating Web sites and Web applications. It contains HTML and CSS-based
design templates for typography, forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions. (Figure 8-6)

423
 CIW – User Interface Designer

Figure 8-6:
From the Bootstrap home page

The main strength of Bootstrap is its huge popularity. Having a large and active
user base is a big part of what makes a framework a good choice for Web site
development. Technically, Bootstrap is not necessarily superior to other popular
frameworks, but it offers more resources than the other four frameworks
combined: articles, tutorials, plug-ins and extensions, theme builders, etc.

To download Bootstrap, go to the Bootstrap home page (search for "bootstrap

framework") and click the Download Bootstrap button. For usage instructions,
click the Getting Started button.

Foundation
Foundation, an open-source framework maintained by ZURB, is especially well-
suited to responsive design. It features a responsive grid and HTML and CSS UI
424
 CIW – User Interface Designer

components, templates, and code snippets, including typography, forms, buttons,

navigation and other interface components, as well as optional JavaScript
extensions. Like Bootstrap, Foundation has a robust user community, which
makes it another good choice for a Web framework.

To download Foundation, go to the Foundation home page (search for

"foundation framework") and click the Download Foundation button. For usage
instructions, click the Learn button.
Less and Sass

Like our favorite tool the Cascading Style Sheet, Less (which stands for "Leaner
CSS" although it involves many more files) and Sass (which actually stands for
"Syntactically Awesome Stylesheets") are newer style sheet languages and both
of the HTML/CSS-based Web frameworks listed above make use of Less or
Sass. Foundation uses Sass and Bootstrap uses both (Usablica, n.d.).

Think of Less and Sass as the future of CSS. Less and Sass were developed to
support several useful features that CSS does not support, including the ability to
define variables as you would in JavaScript, a way to group multiple code lines
together for reuse (called "mixins") and the inclusion of mathematical functions.
One immediate difference you will see in a Less package is multiple files and
folders. This distribution of CSS definitions into a hierarchy of files can be
daunting at first to learn, but it slowly makes sense over time and can be highly
rewarding for site maintenance.

In order to serve the actual CSS code to the browser, the Less or Sass code must
first be compiled. The tools for pre-compiling and compiling are framework-
specific - sometimes it is achieved through desktop-based software, sometimes
with the use of JavaScript files or Ruby. Sometimes remotely on a server,
sometimes locally.

Each choice of framework comes with a number of new challenges to learn.

User Interface Libraries

425
 CIW – User Interface Designer

OBJECTIVE: 8.7 User interface library elements

As a supplement to the Web frameworks described above, there are a number

of user interface libraries you can use to create UI elements for your Web sites.
Most of these UI libraries are written in JavaScript, though some are written in
other languages, such as Java and C++. Among the most popular JavaScript-
based UI frameworks are jQuery UI, React, and Kendo UI:

jQuery UI
jQuery UI is an open-source UI library maintained and distributed by the jQuery
foundation. The jQuery UI library consists of a set of GUI widgets, animated
visual effects, and themes implemented with jQuery, CSS, and HTML. Figure 8-7
is an example of some drop-down lists made with jQuery UI selectmenu widget
from its site https://jqueryui.com/selectmenu/#custom_render :

426
 CIW – User Interface Designer

Figure 8-7: Drop-

down lists made with the jQuery UI selectmenu widget

To download the jQuery UI library, go to the jQuery UI home page (search for
"jquery ui") and under Quick Downloads click the Stable button.

React
React is an open-source UI library maintained by Facebook, Instagram and a
community of independent developers. Written in JavaScript, its goal is to enable
developers to create UI elements for Web applications simply and effectively.

To download the React library, go to the React home page (search for "react")
and click the Download React button.

Kendo UI
Kendo UI is a for-pay jQuery-based UI library. It is fast and lightweight, and its
features include 70+ UI widgets, Bootstrap support, mobile controls, and offline
427
 CIW – User Interface Designer

data processing.

To download a free trial of the Kendo UI library, go to the Kendo UI home page
(search for "kendo ui") and click the Download free trial button.
Learning how to code HTML, CSS and JavaScript in a framework

One of the consequences of using a framework to build a Web site is that you
have to learn some new rules for coding HTML, CSS, and JavaScript.
Frameworks extend these languages to make them more powerful and efficient.
In doing so, they modify the languages by changing their syntax — sometimes
subtly, sometimes dramatically — and adding keywords, features, and
parameters to them.

Here is an example of how standard HTML differs from Bootstrap. Both snippets
display a lead paragraph that is 1.5 times the size of a normal <p> paragraph.
Standard HTML needs an embedded style rule in the <p> tag to do this; Bootstrap
users can use the built-in Bootstrap class lead.

 Standard HTML

<p style="font-size: 150%">This is a lead paragraph.</p>

 Bootstrap HTML

<p class="lead">This is a lead paragraph.</p>

Here is an example of how standard CSS code differs from the Sass code used in
Bootstrap and Foundation. Both of these snippets create a footer and copy class
with text color set to white and background color to blue:

428
 CIW – User Interface Designer

 Standard CSS

.footer {

color: #fff;
background-color: #00f;
}
.copy {

color: #fff;
background-color: #00f;
}

 Sass

$primary-color: #fff
$background-color: #00f

.footer, .copy

color: $primary-color
background-color: $background-color

Here is an example of how jQuery code differs from JavaScript code. Both
snippets set the background color of the HTML body element to red:

 JavaScript

429
 CIW – User Interface Designer

Function changeBackground(color) {

Document.body.style.background = color;
}
Onload = "changeBackground ('red');"

 jQuery

$ ('body') .css ('background', '#ff0000');

The moral of the story: If you use a Web framework, be prepared to relearn, to
some degree, how to code HTML, CSS and JavaScript.
Choosing the right framework

Instructor Note: Students will get a chance to try out a number of frameworks in
the Application Project at the end of the lesson.
When it comes time to choose a framework for a Web site, the very first decision
you have to make is whether you even need to use a framework. Frameworks
tend to be big, bulky, and complex. You cannot simply decide to use a new
framework and assume you will get the hang of it immediately. There is a
learning curve to mastering a new framework, sometimes quite steep.

Because of size and complexity, using a framework is not necessarily the right
thing to do, particularly if you are creating a relatively modest site. Where
frameworks really pay-off is for large, ambitious sites, especially if the stylistic
presentation of these sites needs to be modified fairly often.

The key benefits of using a framework according to Steele (2013) and Gerchev
(2014) are:

430
 CIW – User Interface Designer

 Efficiency — Once you have mastered a framework, you can code Web
sites more quickly and efficiently (fewer lines of code) with it than without
it.
 Security — If you use a popular framework, you can rest assured that it is at
least reasonably secure. This is one of the main advantages of having a
large and active community behind a framework: If security vulnerabilities
are found — or other nontrivial problems and bugs — they tend to be
reported and fixed quickly.
 Cost — Most Web frameworks are free, and since using a framework
enables you to code more rapidly, the development costs will be smaller.
 Support — Popular frameworks come with an active support team, solid
documentation, and community forums where you can get help with usage
issues and questions.
 Simplicity — Once you have become fluent using a framework, using it can
dramatically simplify the task of creating a new Web site.
 Reliability — Along with security, one of the main advantages of using a
framework with a large and active group of supporters behind it is that its
code will be thoroughly tested and debugged, both by developers and the
community at large.
There are also some potential disadvantages to using a framework, such as:

 You learn the framework, not the underlying languages. Professional

developers need to have a thorough understanding of all the programming
languages they work with. Frameworks can get in the way of this. For
example, a developer might master jQuery without mastering its underlying
language, JavaScript.
 Frameworks are limited. A framework's core behavior cannot be modified,
without effectively recreating the framework from the ground up, which
defeats the purpose of having a framework to begin with. This forces
developers to respect the limits of the framework they are using, and work
the way it is required. The moral: Make sure you choose a framework that
suits your needs.

431
 CIW – User Interface Designer

 Framework code is public. Since framework code is available to everyone, it

is also available to people with bad intentions. It can be studied in order to
know how things work and to find flaws that can be used against you.
 Customizing a framework can be difficult. All frameworks allow
customization, but this process is sometimes difficult and time-
consuming, particularly if you modify something at the core of the
framework.
 Framework code is not your code. When you use a framework, you are
using code that you did not write. This means you will not know the code
as thoroughly as you know your own. It also means that you are allowing
others — the framework developers — to make thousands of important
decisions for you.
 It can be difficult to decide whether or not to update a framework. If you do
not update to the latest framework version, your site could fall out of step
with current Web standards. If you do update, you run the risk of breaking
things that work fine in the previous framework version.
 Frameworks can make extra work for development teams. When you use a
framework, chances are you will customize it to some extent. If you are
working in a development team, this means that every team member must
learn how to use both the framework and all of its customizations.
If, after having considered the framework pros and cons presented above, you
decide to use a framework to develop your Web site, these questions can serve
as guidelines for choosing the right framework for the job:

 Does the framework have a large and active community? The bigger the
community using the framework, the more likely it is to have good
documentation (references, tutorials, articles, etc.), real-world examples,
third-party extensions, and integration with current (and future) hardware
and software.
 Is the framework being actively developed? A good framework needs to
keep up with the latest Web technologies, especially when it comes to
responsive mobile design.

432
 CIW – User Interface Designer

 Is the framework mature? Using an immature framework that has not been
proven yet in the real world is like using the first version of a hardware
device: You run the risk of encountering nasty v1 bugs, oversights, and
non-optimized design choices. Playing with new frameworks is fine;
depending on them for important Web site jobs is unwise.
 Is the framework well documented? When it comes to mastering a
framework, good documentation is not only desirable, it is crucial. Always
check a framework's documentation resources before choosing it.
 Is the framework easily customizable? If you intend to make a fair amount
of customization to your framework, you should choose a more general
framework that invites this customization, rather than a rigidly specific one
that hinders it. For example, adding new CSS rules to a framework is much
easier than overriding or rewriting existing ones.
 Does the framework provide you with everything you need? If not, consider
using components from different frameworks. For example, you might use
the grid system from Bootstrap for page layouts, Sass from Foundation for
CSS, and jQuery for page widgets.

Web Content Management Systems

OBJECTIVE 8.8: Content management system

Along with frameworks, another popular tool for building and maintaining Web
sites is a Web content management system (CMS): an application for creating,
reviewing, editing, and publishing Web site content (Williamson, 2013). A CMS
can enable both developers and end users to build site pages quickly, create and
update content easily, and extend site functionality by installing plug-ins.

Among the most popular Web content management systems in use today are
WordPress, Drupal and Joomla.

WordPress
WordPress is an open-source Web content management system based
on PHP and MySQL. It is the most popular blogging CMS on the Web, and one of
the most popular CMS's for Web site creation. WordPress is used by The New
433
 CIW – User Interface Designer

Yorker, Variety, Sony Music, MTV News, eBay, and Best Buy among many big
brands.

WordPress supports themes, plug-ins, mobile and other features:

 Themes — WordPress users can install and switch between different

themes to change the look and functionality of a WordPress Web site
without adversely affecting its content or stability. Themes are made with
PHP, HTML and CSS and are available in two options: free or for-pay
premium (commercial).
 Plug-ins — WordPress users can extend the features and functionality of a
Web site or blog by downloading and installing WordPress plug-ins. There
are over 40,000 plug-ins available, ranging from search engine
optimization, to client portals used to display private information to logged-
in users, to content displaying features, such as the addition of widgets
and navigation bars.

Instructor Note: Students should try out several content management

systems in order to discover which one they prefer and find easier to work
with.

 Mobile — Mobile users can install native WordPress blogging applications

for WebOS, Android, iOS, Windows Phone and BlackBerry mobile devices.
Designed by Automattic, these applications enable users to create new
blog posts and pages, manage (make, reply to and moderate) blog
comments, and view blogging stats.
 Other features — WordPress supports a host of other features, including:
integrated link management; search engine-friendly permalinks; the ability
to assign multiple categories to articles and to tag articles and posts;
automatic text formatting and styling; and HTML editing.
To run WordPress, the Web server must support PHP and MySQL. For details,
search for "wordpress system requirements." To download WordPress, go to the
WordPress home page (search for "wordpress.org"), and click the Download
WordPress button. To download a theme, click the Themes tab.

434
 CIW – User Interface Designer

Drupal
Drupal is an open-source Web content management system written in PHP. It is a
very popular CMS, used to make all manner of Web sites, from personal blogs to
corporate, political and government sites. Drupal is used by Weather.com, Fox,
Georgetown University, and Johnson & Johnson, among others.

Drupal core, the standard release of Drupal, contains basic features common to
Web content management systems. These include user account registration and
maintenance, menu management, RSS feeds, taxonomy, page layout
customization and system administration. The Drupal core installation can serve
as a simple Web site, a single- or multi-user blog, an Internet forum, or a
community Web site, providing for user-generated content.

To run Drupal, the Web server must support both PHP and MySQL (or equivalent).
For details, search for "drupal system requirements." To download Drupal, go to
the Drupal home page (search for "drupal"), and click Download and Get Started.

Joomla
Joomla is an open-source Web content management system built on a model-
view-controller (MVC) framework. It is written in PHP and stores data in a MySQL
(or equivalent) database. Though its popularity for building new Web sites has
slipped a bit over the past few years, the number of existing sites that use
Joomla is still large, second only to WordPress. Famous organizations that use
Joomla include Harvard University, Guggenheim.org, and Barnes & Noble.

Joomla's features include: page caching, RSS feeds, printable versions of pages,
news flashes, blogs, search and support for language internationalization.

To run Joomla, the Web server must support both PHP and MySQL (or
equivalent). For details, search for "joomla system requirements." To download
Joomla, go to the Joomla home page (search for "joomla"), and click the
Download button.
Using a content management system to create a Web site

Though CMS's differ to some extent in operation and functionality, here is the
typical four-part CMS Web site-creation workflow:

435
 CIW – User Interface Designer

1. Create the site structure.

As when building any Web site, the starting point is to organize the site's
overall content into a set of sections, divide each section's content into a
set of pages, and arrange its sections and pages into a clear and efficient
hierarchical structure.

Because getting a site's structure right is so crucial to its usability, this task
is often left to a professional developer or information architect. However,
your skills as a UI Designer should be up to the challenge, and your own
site structure design results from Lesson 6 are applicable here.

2. Create the page templates.

As you learned in Lesson 6, once the Web site structure has been
determined, a template should be created for each unique site page. A
page's template specifies its layout, color and typography schemes,
navigation and styling.

As with the site structure, getting the page templates right is crucial to site
usability. Novice UI Designers should seek out professional designers and
developers to get it right. In some cases, Web-savvy end users might
choose to do it on their own. The reason that this end-user do-it-yourself
approach is even possible is because CMS's are so much easier to master
than HTML, CSS and JavaScript coding.

Tech Note

Beware of letting your clients make their own page templates! First, they are likely to
do a mediocre or even poor job — making good page templates requires a great deal
of expertise. Secondly, their failure could tarnish your professional reputation and
brand, directly or indirectly.

436
 CIW – User Interface Designer

3. Create the site pages.

To do this, choose a page template and use the built-in CMS page editor to
add the desired content to the page. With most CMS's, you can add
content as you create pages, or you can upload the content separately
later in the process.

Unlike the first two steps — creating the site structure and page templates
— creating site pages is a task well suited for end users. In fact, one of the
biggest advantages of using a Web content management system is that
end users can easily learn how to maintain the site on their own, editing
existing pages and creating new ones.

Tech Note

Even though CMS's enable end users to create pages on their own, it is safer for you,
the designer/developer, to create the first page or two for every page template. That
way your users will have good models to follow if they decide to create new pages
from the templates.

Most CMS's allow you to control what end users do with the site by
creating user groups and setting permissions based on those groups. That
means that you can allow clients to edit as much or as little of the site's
content as you like after you finish the project. Within an organization, you
can have individuals within one department edit specific pages, while
another department is responsible for, say, another section of the site.

4. Publish the site.

Each CMS has its own ways of developing site content remotely and
locally. In most cases you can use online tools to prep a page remotely, in
"draft" mode, then click a publish button when you are done, or at a
scheduled date and time. Alternately, you can work on the page locally and
send it to the site's Web server through an FTP.
437
 CIW – User Interface Designer

CMS front-end and back-end management

Every Web site has two parts, a front-end and a back-end. This is outlined by Ben
Fox on the Word Press University site as:

 Front-end — The visible interface between site visitors and site content.
Site visitors interact directly with the front-end via UI controls. In effect, the
front-end is everything users see and interact with when visiting the Web
site.
UI/UX designers are responsible for designing front-ends, and developers
for coding them. People who work on Web site front-ends are often called
client-side designers and developers, because the users are considered
clients.

 Back-end — The invisible (to site visitors) system that performs the behind-
the-scenes tasks which enable the Web site to function properly. The back-
end of a Web site generally consists of three parts: a server, a database
(for the Web site content) and one or more applications that manage this
database.

Developers and database programmers are typically responsible for

building Web site back-ends. Those who work on back-ends are often
called server-side developers.
A Web content management system enables you to work on both the front- and
back-ends of a Web site. To work on the front-end, you use whatever tools the
CMS provides for creating and modifying Web content. For
example, http://rachmiel.org/blog Figure 8-8 provides tools for editing an
existing post from a WordPress blog:

438
 CIW – User Interface Designer

Figure 8-
8: You can use the tools on this page to edit an existing WordPress blog post

To work on the back-end of the Web site, you use the CMS's administration tools.
This WordPress administration page enables developers (or end users) to
manage the back-end (server-side) widgets available on the site. As you can see
in the menu on the left (Figure 8-9), there are other administrative pages for
managing blog posts, media, pages, comments, appearance, plug-ins, users,
tools and general settings. (http://rachmiel.org/blog/)

439
 CIW – User Interface Designer

Figure 8-9:
You can use this WordPress admin page to manage back-end (server-side)
widgets
Choosing the right content management system

Instructor Note: Students will get a chance to try out a number of CMS's in the
Application Project at the end of the lesson.
As with Web frameworks, choosing the right Web content management system
for a Web site is a crucial part of a successful Web site creation plan. Again, the
first question you need to answer is: Should I use a CMS to build this Web site for
this client? The client is more of a consideration when it comes to CMS's than
frameworks, because in most cases, once a CMS site has been built the client
takes over most or all of the tasks for maintaining the site: creating and
modifying page content, fine-tuning the appearance, etc.

To help you decide whether to use a Web content management system, here are
some of the key pros and cons of using a CMS to build a Web site, according to
adage technologies (2014) and Iris Web Designs (n.d.):

440
 CIW – User Interface Designer

Pros
For the developer:

 CMS's have pre-made elements, solutions and plug-ins that speed up and
simplify the site-development process.
 CMS's are easy enough to use that developers can build the site and then
turn it over to the site owner (client) with little to no further involvement.
For the site owner (and end users):

 CMS's enable just about anyone who can use a computer to edit an
existing Web page or create a new one (based on a template). This, in turn,
can save site owners money that otherwise would be spent hiring
professional writers or developers.
 Most CMS's enable site administrators to easily control and monitor the
people who modify the site.
Cons
For the developer:

 CMS's are generally quite limited in what they can do (without extensive
and costly customization), and in some cases these limitations can force
developers to have to make unhappy compromises in the site design.
 CMS's store page elements separately and assemble them on the fly when
the browser requests a page. Without proper measures (e.g. efficient
caching), this can make CMS-created Web pages load slowly.
For the site owner (and end users):

 Using a CMS to edit a site correctly requires training. A carefully designed

site can be damaged or even broken by incorrect CMS usage.
 Popular CMS's (like WordPress, Drupal, and Joomla) are often targeted by
malicious spammers and hackers.

441
 CIW – User Interface Designer

If, after having considered the pros and cons, you decide to use a Web content
management system to build your Web site, these guidelines can help you find
the right CMS for your needs:

 Functionality — Choose a Web content management system with

functionality that satisfies the needs of the developers (those who use the
CMS to build the site), the client (site owner), and the end users (those who
use the CMS to create and edit page content). Though most support the
same set of basic features, all CMS's are not created equal. Research your
CMS candidates thoroughly to verify that they support the functionality
that the developers, client and end users need.
 Usability — Choose a highly usable CMS. To assess this, you must spend
time using the CMS; never rely wholly on reviews or user comments. If
there is one thing you should take away from this course, it is the
importance of usability in Web site design. Functionality is an important
part of usability, but it is not the whole picture. Other, equally important
factors include: efficiency, ease of use and likeability (emotional design). If
you choose a CMS that has high functionality, but poor usability, it is likely
that the developers, client and users will all be dissatisfied with it.
 Administration — Choose a CMS that has a full-featured and well-designed
administration system. When developers (or end users) make changes to
the front- or back-end of the site, chances are they will use the
administration system to do it. For example, specific editing roles will be
assigned to specific users. The administration system of your chosen CMS
needs to support this role assignment, and make it easy and convenient to
manage.
 Customization — Choose a CMS that supports quick and easy
customization. That way, both you and your client will not be locked into a
set of severe CMS limitations in design or functionality with no (easy) way
to get around them. Do not just assume the CMS you are interested in has
good customization support, verify it!
 Security — Security is a high priority for all online ventures. This is
especially true for CMS's, because their code is generally public and easy

442
 CIW – User Interface Designer

to hack. Do your research and make sure to pick a CMS that has excellent
security, consistently proven in the real world.
 Support — Choose a CMS with a large and active community that provides
you with access to message boards, forums and discussions with users
and developers. No matter how brilliantly engineered a CMS might be, it is
useless if you cannot get quick and reliable answers to your questions.
 Scalability — Choose a scalable CMS that can grow with your client.
Envision their Web site needs two to three years out, and pick a CMS that
will be able to fulfill them. Things to look for are: successful track record,
large and active developer community, good selection of well-maintained
plug-ins, ease of customization and extensibility.

Lab 8-2: Choosing a CMS theme template

OBJECTIVE 8.9: Template for user interfaces

In this lab, you will use a free service, WordPress.com, to set up a temporary Web site for
the purposes of identifying appropriate theme templates.

1. Go to www.wordpress.com and click on the "Create Website" button.

2. The very first step, "Step 1 of 4," is to choose a theme template. This free
version of WordPress immediately offers nine theme templates, displayed
as nine large thumbnail images in a grid, from which to choose. The name
of each theme is prominently displayed within the thumbnail and below it
("Boardwalk," "Cubic," "Edin," etc. as of January 2016).

How do you choose a theme template? WordPress assumes you do not

have any criteria for making a choice so it includes the statement "You can
always switch to a different theme later". The beauty of a CMS theme
template is that the layout can be swapped at any time, if no
customizations have been applied, but you do have at least some simple
criteria, right?

443
 CIW – User Interface Designer

Instructor Note: Students should refer to the Web site vision statement
when deciding on a CMS theme template.

3. What is the Web site for? If it's a portfolio of some kind (photographs,
artwork, screenshots of Web sites) perhaps one of the templates that
emphasizes large imagery over text would be appropriate.

If it is going to be a collection of predominantly written material, like a blog,

a short story, or a newspaper, you might choose one of the theme
templates that emphasizes black text on lots of white space.

If you are selling something, look for a theme template that has an even
balance between a single product image and blocks of text descriptions.
Keep in mind that if you are making a product-based Web site which
generates income, WordPress will assume you have money to spend on a
more robust template. Templates with built-in payment tools, like carts, will
require purchase.

Choose a theme template.

4. You have now been introduced to the concept of a theme template. For
further exploration, finish the remaining steps: picking a domain name and
selecting a plan (for which there are free options) and either logging in or
registering.

5. Once the four steps are completed, you arrive at a landing page. Because
you have no content yet, viewing your site (the "My Site" and "View Site"
links, for instance) is not useful. However, in the left sidebar, click on
"Themes." The content of the window changes to show even more
thumbnails of theme templates.

444
 CIW – User Interface Designer

6. Browse all the variations on theme templates by clicking on a thumbnail.

Each choice will generate a full size preview in your browser.
In this lab, you used a free service, WordPress.com, to set up a temporary Web site for the
purposes of identifying appropriate theme templates.

Additional Web Development Tools

OBJECTIVE 8.10: Comparing publishing tools

In addition to the framework and CMS tools discussed above, there are several
other tools developers use when building Web sites. Among the most common,
according to Scott Clark (n.d.), are: code editors, Web development IDEs,
prototyping tools, FTP clients, browser development add-ons, and Telnet and
SSH clients.

Code editors
There are four main types of tools Web developers use to build Web sites: code
editors, Web development IDEs, frameworks and Web content management
systems. Some developers stick with one tool for the entire project; others use
different tools for different tasks.

A code editor is the preferred tool for developers who enjoy the precise control
that coding by hand affords. Four of the most popular HTML editors available
today are Notepad++ (free, Windows), Atom (free, OS X and Windows), Komodo
Edit (free, Windows and OS X), and Sublime Text (for-pay, OS X and Windows).
Developers tend to form strong emotional bonds with their code editors; for this
reason, you should try several editors before declaring one your editor of choice.

Web development IDEs

A Web development IDE (integrated development environment) is an application
that you can use to build and publish a Web site. The main benefit of using a Web
IDE is in its integration of tasks: You can build the entire site, from the ground up,
and then publish it to your Web host all from within the same application. Also,
most Web IDEs are WYSIWYG programs — What You See Is What You Get —
which is an especially appealing feature for developers who would rather work on
a visual representation of a Web page than its source code.

For years, Dreamweaver has been the most popular Web development IDE, and

445
 CIW – User Interface Designer

for good reason; it is an excellent, full-featured application for developing and

publishing Web sites. Other high-quality Web IDEs include: CoffeeCup HTML
Editor, Microsoft Visual Web Developer, Aptana and KompoZer.

Prototyping tools
As discussed at the beginning of this lesson, one of the key jobs of Web
developers is to build prototypes. To do this, they can use any of the four
development tools mentioned above — a code editor, Web development IDE,
framework, Web content management system or, they can use one of the many
Web prototyping tools available for download online. The advantage of using a
prototyping application is that you can create an interactive prototype quickly and
easily, often without writing a single line of code.

Among the best Web prototyping tools in use today are InVision, Justinmind,
Marvel and Origami. The first three are all for-pay applications; Origami is free.

FTP clients
To optimize their workflow, developers need to be able to upload files (HTML,
CSS, JavaScript, images, audio, multimedia, etc.) to Web servers quickly and with
minimal effort. An FTP (File Transfer Protocol) client is used to do this. Some
tools — such as the Dreamweaver IDE and WordPress CMS — have an FTP client
built right in. Other tools — such as the Notepad++ code editor and Bootstrap
framework — do not; if you use these tools, you need to get an FTP client to
manage your Web uploads.

Among the best FTP clients are FileZilla (free, Windows and OS X), Cyberduck
(free, Windows and OS X), and SmartFTP (for-pay, Windows only).

Browser developer tools

When developing a Web site, it is very helpful in terms of fine-tuning and
debugging to view the structure of your page code from within the browser in
which it is displayed. Fortunately, all major browsers facilitate this by providing a
comprehensive set of built-in developer tools: Chrome, Firefox, Internet Explorer,
Edge, Safari and Opera. If these do not suffice, you can install additional
developer extensions and plug-ins.

Though each set of browser developer tools differs to some extent, they have
certain basic features in common, including:

446
 CIW – User Interface Designer

 HTML and CSS — Helps you fine-tune a page's HTML and CSS code by
changing it and seeing your changes reflected in the page display.
 Resources — Enables you to inspect the resource files (scripts, images,
media) loaded into the page.
 Network — Enables you to view network usage information: page loading
time, bandwidth, HTTP headers, etc.
 Performance — Helps you optimize page performance: load time, render
time, memory usage, etc.
 JavaScript — Helps you to debug JavaScript by using watch expressions,
breakpoints, and stepping over, into, and out of functions.

Telnet and SSH clients

Telnet (short for terminal network) is a network protocol that enables two
devices on the same network to communicate with each other. A Telnet client is
a program that provides a command line interface to enable this communication.
Web developers use this Telnet client command line to manage — send
commands to and receive information from — a Web server or other remote
network device.

Telnet is not a secure protocol. Since security is such a huge concern on a public
network like the Internet, most Web developers use an SSH (secure shell) client
instead of Telnet, because SSH is a secure, encrypted protocol.

Common tasks for which developers use an SSH or Telnet client include:

 Remote device setup — Configure the initial setup of the device: switch,
access point, router, etc.
 Remote device management — Unpack Web server files, create or (re)move
directories, install applications and scripts, reconfigure settings, etc.
Three of the most popular Telnet and SSH clients are: PuTTY (free, Telnet and
SSH, Windows), Dave's Telnet (free, Telnet, Windows), Terminal (free, Telnet and
SSH, built into OS X).

Tech Note

447
 CIW – User Interface Designer
Though there are still some diehard Web developers out there who prefer the directness of
using an SSH or Telnet command line, most developers use the remote-device
management tools built into their CMS, IDE, or Web server control panel (accessible through
the Web hosting company site).

Web Hosting Services and Domain Names

OBJECTIVE 8.11: Web host and domain name

The final step of the Web site-building process, as outlined by Webhosting Secret
Revealed (n.d.) is to publish the site: Upload all of its folders and files (HTML,
CSS, JavaScript, images, audio, multimedia, etc.) to a Web server to make them
accessible to users via the World Wide Web.

Web site developers are responsible for creating, organizing, and storing (locally)
all of the site folders and files. They are not (usually) responsible for the physical
Web server. This is the task of a Web hosting service: a company that provides
Web servers — called Web hosts — on which Web site folders and files can be
stored, i.e. a place where individuals and organizations can publish their Web
sites.

There are four main Web hosting options: shared server hosting, virtual private
server (VPS) hosting, dedicated hosting and cloud hosting. All four perform the
critical task of storing (hosting) Web site files and making them accessible to the
World Wide Web. Where they differ is in things like storage capacity, user control,
speed and reliability.

You can use the pros, cons and conclusions in these descriptions, provided by
Chris Wiegman (2011), to choose the best Web hosting option for your needs:

Shared server hosting

In shared server hosting, many different Web sites (up to hundreds) are hosted
on the same server. Typically, all these sites share a common pool of server
resources, such as RAM and the CPU.

Pros — Less expensive and easier to manage than other hosting options.
Cons — No root access, limited storage space and bandwidth, limited ability to
handle high traffic levels or spikes, limited customer support, performance can
be adversely affected by the other sites on the server.
448
 CIW – User Interface Designer

Conclusion: Shared server hosting is the best choice for a Web site with modest
storage, processing and traffic demands.

Virtual private server (VPS) hosting

In virtual private server hosting, like shared server hosting, multiple Web sites are
hosted on the same server. Unlike shared hosting, VPS divides the physical
server into a set of virtual servers, one per hosted Web site.

Pros — Root access (in most cases), more control over server configuration,
more storage space and bandwidth, better technical support.
Cons — More expensive than shared hosting, more expertise required to manage,
performance can still be affected by other sites on the server.

Conclusion: If shared server hosting does not meet your Web site needs —
management, bandwidth, etc. — move a step up to VPS hosting.

Dedicated server hosting

In dedicated server hosting, a Web site is hosted on its own exclusive physical
server. In effect, you rent a server from the Web hosting service.

Pros — Root access, full control over server configuration, maximum speed,
storage space, bandwidth, security and technical support of the four hosting
options.
Cons — The most expensive (by far) of the hosting options. Requires substantial
time and networking expertise to manage.

Conclusion: If your Web site gets a great deal of traffic, and if you need to make
frequent root-level changes to its server configuration, and if VPS hosting does
not meet your needs, and if you have the money ... dedicated server hosting
could be the way to go. That is a lot of ifs! Dedicated server hosting is not
something you should jump into lightly. Due to its expense and technical
demands, you must be certain that it is the best hosting option for your Web site
needs. Some VPS plans are close in effectiveness to dedicated server plans. Do
the research before you make a decision.

Cloud hosting
In cloud hosting, a set of servers (called a cloud) work together to host a group of
Web sites. (Figure 8-10)

449
 CIW – User Interface Designer

Figure 8-10:
Cloud hosting

Pros — Reliable, customizable, and best of all hosting options for handling high
traffic or spikes (because the traffic can be shared by multiple servers).

Cons — No root access (in many cases), requires substantial technical expertise,
can be expensive (though usually less so than dedicated server hosting).

Conclusion: If you have a rapidly growing Web site with heavy traffic but cannot
afford a dedicated server, cloud hosting can be an effective solution.
Domain names

In order to use a hosting service to host a Web site, you need to register a
domain name:

 A domain name is a text string that identifies a unique IP address on the

Internet.

450
 CIW – User Interface Designer

 An IP address is a numeric string that identifies a unique computer on the

Internet.
A domain name is basically an easy-to-remember text-based shortcut for
specifying a numeric IP address. For example, the domain name google.com is
much easier to remember (and type into a browser address bar) than its IP
address, 216.58.208.46. The Domain Name System (DNS) is responsible for
translating domain names into IP addresses. It does this automatically and
behind the scenes, invisible to the user.

How to register a domain name and assign it to your hosted Web site
Here is the procedure for registering a domain name and assigning it to your Web
site:

1. Choose a (good) domain name registrar.

Most Web hosting services let you register a domain name when you
purchase a Web hosting plan. This simplifies the process of getting — and
eventually renewing — a domain name. It can also save you money, since
Web hosts often provide special deals if you purchase a hosting plan and
domain name at the same time. For these reasons, registering a domain
name with your Web host is generally a good way to go, provided there are
no hidden domain name renewal costs. (Read the fine print!)

As an alternative, you can turn to one of the many domain name registrars
out there. Alas, not all of these registrars are of equal quality. Some
provide good deals and are above board, others have hidden fees or
conditions. These domain name registrars are all currently highly rated:
GoDaddy, NameCheap, iPage, and Name.com. By the time you read this,
however, the market might have changed, so be sure to do your research
and pick a registrar that has a good, solid reputation with its customers.

2. Find an unregistered domain name.

To do this, you can use the domain name search engine provided by the

451
 CIW – User Interface Designer

domain name registrar. If the name you want is already registered, you
might need to get a bit creative by choosing a different top-level domain
(com, .net, .org, .biz, .info, .co, .space, .Web site, etc.) or changing the
spelling of your name (mysite to mysyte, my-site, m-eyesight, etc.). Most
domain name search engines recommend alternative names close to the
one you are looking for.

3. Follow the registrar's instructions for registering the domain name.

Registrars provide different domain name registration plans: one-year,

multiple-years, additional options such as enhanced privacy or security,
etc. Make sure to read through these alternatives very carefully before
clicking the Register button. Be on the lookout for hidden costs for options
that you do not need. Beware of registrars that charge an exorbitant
amount to renew a registration.
Once you have registered a domain name, all that is left is to assign it to your
hosted Web site. To do this:

4. Follow the domain name assignment procedure provided by your Web host.

Each Web hosting service has its own procedure for assigning a domain
name to a hosted Web site. Generally, these procedures are streamlined,
making the task of assigning a domain name to your Web site quick and
easy. If you need help, turn to the FAQ of your Web host or contact them
directly.

Once your domain name has been properly assigned to your Web site,
users will be able to visit the site by entering the domain name in their
browser address bar.

Lab 8-3: Choosing a Web hosting service and domain name

452
 CIW – User Interface Designer
In this lab, you will choose a Web hosting service and a domain name for your site. Based
on the material presented above:

1. Choose a Web hosting service (company) and option (shared, VPS,

dedicated, cloud) that is right for your company Web site.
2. Choose a domain name registrar and domain name for your site.
3. Optional: If you are certain you have found the right Web hosting service,
option, domain name registrar, and domain name for your site, make it
official by purchasing them. If you have any doubts, defer purchase until
you are ready.
In this lab, you chose a Web hosting service and a domain name for your site.
Exercise 8-2: Developing a Web Site

453
 CIW – User Interface Designer

Case Study: Designer's Disease Strikes Again!

454
 CIW – User Interface Designer
Samuel von Gnegg, a graduate of the esteemed Web design program at the Technische
Universität in Berlin, recently got his first Web site development job with a major client,
BMW. Gnegg assembled a team of first-class designers and developers and got to work.
After BMW approved the Web site design, Gnegg passed the final page mockups to his
development team for coding. After much deliberation, the developers decided to create a
custom framework to build the site. Four months later, Gnegg presented the working Web
site to BMW.

The BMW executives were thrilled with the site! All aspects: appearance, styling, and
functionality. When the BMW developers saw the source code, however, they were
extremely unhappy. Rather than being able to use their knowledge of HTML, CSS, JavaScript
or common frameworks like Bootstrap and Foundation to maintain the site, they had to
learn how to use the custom framework the Gnegg developers had created. Even though
this framework was well assembled and documented, there was a steep learning curve to
mastering it.

BMW demanded that Gnegg's developers recode the entire site in plain HTML, CSS, and
JavaScript, with no framework. Gnegg complied, but in doing so, had to pay the four
members of his development team for two extra months of work.

Consider this scenario and discuss the following questions:

 Why is this case study entitled "Designer's Disease Strikes Again!" ... ?
 What mistakes did Gnegg make? What mistakes did his developers make?
What mistakes, if any, did BMW make?
 What would have reduced the likelihood or prevented these mistakes?
 Is it ever appropriate for a development team to create a custom
framework? If so, under what circumstances?

Lesson Summary

Application project

455
 CIW – User Interface Designer

Instructor Note: If time is an issue, have students install and explore a select few
of these. Bootstrap and WordPress are good choices, due to their popularity.
jQuery is also good, because it is the only JavaScript framework.
Web frameworks and content management systems are powerful tools for
creating and maintaining a Web site, but, to be useful, a framework or CMS must
be well suited to the developer's needs, habits and workflow. If a developer does
not feel comfortable using a framework or CMS, it will almost surely undermine
the quality of the Web site being built.

In this application project, you will spend some time getting to know some
popular Web frameworks and CMS's. This will help inform your choice of
framework or CMS, should you decide to use one to rebuild your company site or
develop a future site.

Download, install, and learn the basics of using each of these:

 Frameworks

 Bootstrap
 Foundation
 UIkit
 jQuery
 Content management systems
 WordPress
 Drupal
 Joomla
Use the "Getting started" learning tools provided on each of the framework and
CMS Web sites. Set yourself a reasonable goal to accomplish with each tool. For
example, create rough drafts of four Web pages structured like Figure 8-11:

456
 CIW – User Interface Designer

Figure 8-11: Web site structure

Or, if you decide to use a framework or CMS to re-build your company Web site,
create a few pages from the site.
Skills review

Now that you have completed this lesson, you should be able to:

 8.1 Identify why prototyping is so important.

 8.2 Explain common patterns of user activity on interfaces, including
breadcrumbs, progressive disclosure, and pattern libraries.
 8.3 Optimize the "look and feel" for a site.
 8.4 Identify the importance of forms for user input within a user interface
using best practices.
 8.5 Explain how a form in a Web page should be processed to a database.
 8.6 Identify an appropriate framework for a Web site.
 8.7 Describe how UI library elements are used to create a Web site.
 8.8 Identify a content management system to create a Web site.
 8.9 Identify templates and themes.

457
 CIW – User Interface Designer

 8.10 Compare various site publishing tools, including FTP, HTTP and
vendor-specific tools.
 8.11 Choose a Web host and domain name for your site.
Activity 8-1: Identifying Web design and development terms

Optional Lab

458
 CIW – User Interface Designer

Optional Lab 8-1: Building your Web development toolkit

"A worker is only as good as his tools." In this optional lab, you will build a Web
development toolkit by choosing your favorite tools from the list in the "Additional Web
Development Tools" section above. With this toolkit in place, you will be well prepared to
take on nearly any Web development task.

Download, install and test a few of the tools from each of these categories. Choose your
favorite tools and consider them part of your personal Web development toolkit. Get rid of
the rest.

 Code editors — Popular HTML editors include Notepad++, Atom, Komodo

and Sublime Text.
 Web development IDEs — Popular Web development IDEs include
Dreamweaver, CoffeeCup HTML Editor, Microsoft Visual Web Developer,
Aptana and KompoZer.
 Prototyping tools — Popular prototyping tools include InVision, Justinmind,
Marvel and Origami.
 FTP clients — Popular FTP clients include FileZilla, Cyberduck and
SmartFTP.
 Browser developer tools — Each major browser has its own set of
developer tools: Chrome, Firefox, Internet Explorer, Edge, Safari and Opera.
 Telnet and SSH clients — Popular Telnet and SSH clients include PuTTY,
Dave's Telnet (Telnet only) and Terminal (built into OS X).
In this optional lab, you built a personal Web development toolkit.
Glossary

bounce rate

The percentage of sessions in which users leave a site from their entrance page
without having interacted with that page.
cloud

A set of servers that work together to perform specific tasks: host Web sites,
store user data, etc.

459
 CIW – User Interface Designer

content manage-ment system (CMS)

An application that enables developers and end users to create, review, edit, and
publish Web site content.
conversion

When a Web site visitor performs a desired action on the site: downloads a file,
makes an online purchase, clicks on an ad, etc.
domain name

A text string that identifies a unique IP address on the Internet.

Domain Name System (DNS)

A system that maps uniquely hierarchical user-friendly domain names to specific

numerical IP addresses.
exit page

The page from which a user leaves the site.

IP address

A multipart numeric string that identifies a unique computer on the Internet.

Less and Sass

Style sheet languages that specify how structured documents are presented.
metric

460
 CIW – User Interface Designer

The measurement of a specific characteristic of a system's performance or

efficiency.
model-view-controller

A framework that divides user interfaces into three parts: model (stores and
retrieves data), view (generates a display of the model), and controller (updates
the model and view).
MySQL

A relational database management system (RDBMS).

PHP

A server-side scripting language designed for Web development.

root access

The ability to perform low-level administrative tasks on a server.

SSH client

A program that uses the secure SSH protocol to enable two devices on the same
network to communicate with each other.
Telnet client

A program that uses the Telnet network protocol to enable two devices on the
same network to communicate with each other.
UI design pattern

A reusable solution to a common UI design problem.

461
 CIW – User Interface Designer

UI library

A collection of pre-written scripts and code snippets that you can use to create UI
elements for apps, Web sites, and applications.
user analysis

The collection and analysis of user data to help understand the characteristics
and behaviors of these users.
user experience design (UXD)

A design methodology that seeks to optimize the user experience all aspects of
the user's interaction with a product or service: usability, accessibility, pleasure,
etc.
Web analytics

The collection and analysis of Web site data to help understand the
characteristics and behaviors of its users.
Web development IDE

An application you can use to build and publish a Web site.

Web host

Same as Web server. Sometimes Web hosting services are called Web hosts.
Web hosting service

A company that provides Web servers (Web hosts) on which Web site files can
be stored. Also called ISP: Internet service provider.

462
 CIW – User Interface Designer

Web server

A computer that is connected to the Internet and delivers Web pages via the
World Wide Web.

Lesson 9

Site Publishing, Maintenance, Security, and SEO Strategies

Objectives
By the end of this lesson, you will be able to:

➥ 9.1 Test a user interface, including HTML5 validation, quality assurance, security, focus
groups. Validate the site code.
➥ 9.2 Explain the tasks required to properly maintain a Web site.
➥ 9.3 Define search engine optimization (SEO), including the relationship between SEO and
Internet marketing.
➥ 9.4 Explain the relationship between written Web site content and SEO.
➥ 9.5 Given a scenario, explain SEO strategies for mobile apps and data.
➥ 9.6 Describe how metadata is used in SEO, including the <meta> tag, document
identification, search engines, delayed file change.

Making Sure a Web Site is Ready to be Published

OBJECTIVE 9.1: User interface testing

Web Publishing and SEO Strategies

Video transcript
Download

463
 CIW – User Interface Designer

The final step in the Web site development process is to publish the site: upload
all of its files (HTML, CSS, JavaScript, images, audio, multimedia, etc.) to the Web
server you have chosen to host the site. This is a huge step, in that once you
publish a site, it can be viewed by the entire world. If you publish prematurely —
before all the site kinks have been worked out — the results could be
catastrophic for your sales, reputation and company brand. To prevent this from
happening, you need to ensure that the site is ready to be published before you
upload it to the Web.
Usability testing the site

Instructor Note: Have students re-read Lesson 3 for a refresher on usability

testing procedures, if necessary.
Usability testing is crucial throughout the Web development process, from
beginning to end. As discussed in Lesson 3, you should have been performing
frequent formative usability tests during the design and development phases.
Now that the Web site is (nearly) complete, you should do summative usability
testing to ensure a high-quality user experience by finding and fixing any
potential usability problems.

In summative usability testing, the emphasis is on confirmation and comparison:

 Ensuring that the Web site is working as intended.

 Comparing the usability of the Web site to that of its competitors.
This summative testing phase is especially important, since it is the last time you
can catch and correct bugs or other issues before making the site live. For this
reason, you should seek test results that are as objective and quantitative as
possible. Subjective and qualitative results, such as the opinions or gut feelings
of the testers, do not matter as much in summative testing as they did in earlier
formative testing when you were more free to make broad-strokes changes to
the Web site.

Here are some of the things you can test for in a summative usability test:

464
 CIW – User Interface Designer

 How much time and how many clicks does it take for a user to find a
specific piece of information — e.g. the terms of a product's warranty — on
the home page?
 How much time and how many clicks does it take for a user to navigate to
another top-level page? Level-two page? Levels three and up?
 How much time and how many clicks does it take for a user to register on
the site?
 How much time and how many clicks does it take for a user to log in to the
site?
 Do users get confused when trying to accomplish certain tasks? Is there a
pattern, specific tasks or places in the site where users tend to get stuck
and pause?
 Do users miss seeing any of the items they are looking for? Are there any
patterns?
 Do users click (or tap) the wrong button accidentally? If so, is it because
the button is unclearly labeled or too small to interact with accurately? Are
there any patterns?
 Do users have trouble remembering important information about the
pages they have viewed? Are there patterns?
 Did any pages fail or take too long to load?
After administering a summative test, you should assess its results and write up
a list of bugs and problems grouped into priority levels, based on scope and
severity. By this late stage in the development process, these problems should be
quite minor, assuming you have been testing frequently and thoroughly all along.
You should then systematically work through the list to fix bugs and mitigate
problems in their priority order. (For more on prioritizing usability test bugs and
problems, see Lesson 3.)
Validating site code

When a user opens a browser and visits a Web page, the browser reads the
page's source code (HTML, CSS, JavaScript, etc.) and then renders (displays) the
page in the browser window according to the instructions in this code.
Unfortunately, the conditions under which users access Web sites vary greatly.

465
 CIW – User Interface Designer

The number and variety of Web browsers and hardware devices has increased
dramatically over the past few years. A user visiting your Web site might be doing
so from a desktop or laptop, a tablet or phone (in portrait or landscape
orientation), a smart watch or band or pair of glasses, and so on. Each of these
devices will interpret your Web page code somewhat differently. Likewise, the
user might be running Windows, OS X, or Linux. They might be using the Google
Chrome browser, or Firefox, Internet Explorer, Safari, or Edge. If they are using a
desktop/laptop, their browser window might take up the entire screen or only a
small portion of it. Disabled users will expect your Web site to be accessible to
whatever specialized software or hardware devices they are using to view the
site.

 In short: Your site must be interpreted correctly on every possible device,

operating system, browser, and for all users, regardless of ability.
 It can take a lot of hard work to accomplish this. It is, in fact, one of the
biggest challenges for Web developers: to make sites that are compatible
with all hardware devices, browsers and users.
Luckily, when it comes to verifying the correctness of your Web site code — its
adherence to the coding language's rules, syntax and recommended practices —
there is a handy tool you can turn to for help: a code validator. Rather than having
to step through every line of your source code to make sure it is correct, you can
simply send the code through a validator and get the results a few seconds later.

High-quality (and free!) Web site code validators are available for HTML, CSS and
JavaScript. These validators analyze a specified file, or snippet of code, and
generate a report of its errors and problems. Examples of some common
problems found by code validators include: illegal code syntax and usage,
deprecated tags and attributes, code misspellings and more.

The W3C validators are considered the gold standard in HTML and CSS code
validation.

 W3C HTML Validator — Validates HTML code in an online Web page, a

local Web page file, or direct HTML input. To access it, search for "w3c
html validator."

466
 CIW – User Interface Designer

Figure 9-1 shows the result of feeding the Mozilla Developer Network
home page through the W3C HTML Validator: two warnings and three
errors were reported. Even the developers of Firefox have some room for
improvement!

Figure 9-1: The result of sending the Mozilla Developer Network home page
to the W3C Validator

 W3C CSS Validator — Validates CSS code in an online Web page or CSS
file, a local Web page or CSS file, or direct CSS input. To access it, search
for "w3c css validator."
 JSLint - The most trusted JavaScript validator, evaluates JavaScript code.
To access it, search for "jslint."

467
 CIW – User Interface Designer

In addition to these, there are a number of other high-quality code validators and
development tools that Web professionals use, such as:

 W3C developer tools — Provide links to the W3C HTML and CSS validators
and several other tools, including a broken-link checker, mobile-friendliness
checker, internationalization checker and more. To access it, search for
"w3c developer tools."
 W3Schools HTML and CSS Validators — Validate HTML and CSS code in an
online Web page. To access both of these, search for "w3schools
validators."
 Code Beautify CSS and JavaScript Validators — Validate CSS and
JavaScript code in an online Web page or CSS or JS file, a local Web page
file or CSS or JS file, or direct CSS or JavaScript input.
 WAVE — Assesses the user accessibility of an online site. To find it, search
for "wave accessibility tool."
 Total Validator — An HTML validator, accessibility validator, spell checker
and broken links checker all rolled into one. Unlike the other development
tools listed here, Total Validator must be installed on your local computer.
To find the download page, search for "total validator."
 Browser plug-in validators — Several browsers have HTML, CSS and
JavaScript validation plug-ins, including Firefox, Chrome and Safari.

Tech Note
Advanced Web site code might work perfectly but still be marked invalid by conventional
validators. If your development team is up to the task, you can get around this potential
problem by creating custom validation tools that follow the specific set of code-
assessment rules you set forth.

Validate, validate, validate!

468
 CIW – User Interface Designer

Instructor Note: Be sure students document the date, type and outcomes of code
validation as well as any changes made to the site as a result of the validation
procedure.
New developers often make the mistake of assuming that code, which has been
declared valid by a reputable validator, will remain valid forever. In fact, there is
no such guarantee that code will remain valid in the future. Web languages
change: HTML, CSS, JavaScript, PHP, frameworks, UI libraries, etc. Tags and
attributes become deprecated, new features and techniques are added. Web UI
solutions evolve: A top-notch Web site from 10 years ago would probably be
considered hopelessly invalid today, due to its lack of responsive design for
mobile devices.

Once a validator has exposed errors in your site, you can dig into the source code
and fix what needs fixing. After making these changes, however, you need to
resist thinking of your site as 100% valid forever. Despite having (apparently)
fixed the code, the core problems might still remain hidden away behind the
scenes. Or worse, new problems might have appeared due to the fixes you
implemented.

The moral of the story: Do not just validate your code once right before
publishing and assume it will remain valid in perpetuity. Instead, be proactive and
re-validate it every time you make changes to the Web site, and once every month
or so even if you have not made any changes.

Tech Note
Many successful Web sites contain some code that does not validate perfectly. A New York
Times page, for example, usually gets 50+ warnings and errors from the W3C HTML
Validator. Just because other developers create sites with coding issues does not mean
you should. Be safe rather than sorry and write 100% valid site code.

Quality assurance

Quality assurance is an umbrella term for a set of procedures that includes

usability testing, code validation and Web site optimization. Its goal is to ensure
that the Web site is of high quality in both form (presentation, appearance, visual

469
 CIW – User Interface Designer

style) and function (usability, features, ease of navigation, etc.).

Along with ensuring high quality in the moment, quality assurance helps you plan
for the future by answering such questions as these:

 Will the site be viable for the next few years?

 Does the site code use current best-practice solutions to design and
development problems, rather than drawing upon out-of-date or
deprecated ones?
 Are the site operation and maintenance sufficiently straightforward for the
people who will be responsible for it?
As a contracted Web developer, you will eventually come to the end of the main
phase of your work on a Web site and no longer be involved with its day-to-day
operation or maintenance. As a responsible and ethical Web professional,
however, you should do your best to ensure a healthy future for the site, knowing
full well that another person or team will have to maintain the site without your
guidance.

This is yet another instance in which Designer's Disease can cause problems.
Designer's Disease leads developers to assume that their users have the same
understanding of how a product works, i.e. the same mental model of its
functionality — as they do. In this case, your Designer's Disease might cause you
to assume that the people who inherit your Web site will have the same ease
operating and maintaining it as you do. Alas, this is rarely true, and, if you take a
moment to think it out, how could it be true? You have been intimately involved
with the site design and code during its long development period, you know every
aspect of it inside out. Those who inherit the Web site are new to its technical
demands. It is like the difference between having lived in a city for years and
visiting it for the first time.

Web site operation manual

One way to help the people who take over the Web site after you leave is to
practice programmer-friendly coding by choosing descriptive names for your CSS
classes and, if you end up coding, JavaScript variables, as well as a generous
supply of clear comments in the source code. Another, more thorough way is to
create a Web site operation manual, a document that describes in detail how to
operate, maintain and customize a site.

470
 CIW – User Interface Designer

As mentioned in Lesson 1, a Web site style guide is a compendium of the stylistic

conventions of a Web site: page layouts, color schemes, typography, graphics,
tone, content, page widgets, etc. You can think of a site's operation manual as a
companion piece to its style guide. The style guide is to the site's visual
presentation as the operation manual is to the site's code structure. Together,
they cover both form and function.

To create a Web site operation manual:

 Make a master index that, like a site map, shows the site's hierarchical
directory structure and where all its asset files (code, content, and media)
should be stored.
 Describe, in detail, all of the unique elements in this index (Web pages,
images, etc.). Your goal is to enable those who inherit the site to
understand exactly how these elements should be handled: maintained,
fine-tuned, customized, extended, etc.
 Explain the logic behind any code that might be difficult to understand or
work with.
 Include a bug log in the operation manual for developers to document any
bugs they find in the site code: date and description of bug, if and how it
was fixed, etc.
 Include a change log in the manual for developers to document any
changes they make to the site code: date and description of change,
reason for change, etc.
 Compile all of the above in one stylistically consistent document (layout,
format, typography, etc.). If appropriate, include images (diagrams, screen
shots, etc.) to supplement the text. A complicated technical issue can
often be dramatically simplified with the right picture or two. (Figure 9-2)
 Add to the document: a title page and table of contents, a footer (on every
page) with the project name and page number, and optionally a glossary
and index.

471
 CIW – User Interface Designer

Figure 9-2: An operation

or user manual
Securing the site

Web site security comes into play at all levels of development with regards to a
non-local site, i.e. a site hosted somewhere other than on your personal
computer. Whether you use an FTP client to push all your changes to a remote
server somewhere, or you've chosen the CMS route to site development, or you
become involved with a big corporate site that serves thousands of people and
relies on proprietary maintenance tools — in other words, any project that
contains sensitive information like passwords, private data, addresses and phone
numbers — you need to take Web site security very seriously.

If a site you develop for a client gets hacked, your reputation could be severely
damaged. Though you cannot prevent hacking completely, you can minimize the
likelihood of a site being hacked by creating and enforcing a solid security plan.

Common types of security attacks

Three of the most common security exploits you need to safeguard against are
social engineering, denial-of-service and brute-force attacks.

Instructor Note: Have students consider ways they can educate users on
protecting their passwords and other sensitive information.

 Social engineering attacks — In social engineering attacks, hackers use

deception to persuade users to reveal information (such as login names

472
 CIW – User Interface Designer

and passwords) that the hackers can use to break into the site.

Your security system must be as invulnerable as possible to these types of

attacks. Since social engineering targets people, the best line of defense is
education. Ensure that Web site administrators, staff and users are all
aware of the tactics attackers can use to gain their confidence. These
include posing as authorized staff members via email, sending malicious
links and engineering situations in which personal details are exposed.
Users should never share a password with anyone, even their own boss or
IT department. Practice safe Web site usage: Do not ask, do not tell.
 Denial of service (DOS) attacks — Denial of service (DOS) attacks use so
much bandwidth that a Web server can no longer serve up pages to real
visitors.

Since administrators can block specific users from accessing the Web
server — i.e. using its bandwidth — DOS attackers expanded their repertoire
to include distributed, coordinated DDOS attacks launched from many
locations at the same time. Once such an attack is underway, it can be very
difficult to stop. Here are a few techniques that have proven effective in
stopping DOS and DDOS attacks. (Note: You might need to work with your
Web hosting service to deploy these.)

 Launch a counter-attack on the attacking computer(s).

 Allocate extra bandwidth to the site during extreme traffic spikes.
 Change the site home page to a redirecting page that requires input
from the user, thus preventing automated attacks.
 Brute-force attacks — Brute-force attacks are, as their name implies, the
crudest type of Web site exploit. A brute-force attacker typically hacks into
a Web server without any insider knowledge, then uses a program to guess
entry credentials (such as user names and passwords) over and over until,
by sheer chance, a match is found and they gain entrance to the site
infrastructure.
Since protecting the personal data of your users is often a legal responsibility —
written right into the Web development contract — preventing brute-force attacks

473
 CIW – User Interface Designer

is vital. Here are some strategies for doing so:

 Lock an account after a certain number of password attempts have been

made.

 Use a CAPTCHA test, an example of which is shown in Figure 9-3, to prove

that the entity trying to log in is human. CAPTCHA stands for "Completely
Automated Public Turing Test to Tell Computers and Humans Apart".

Figure 9-3:
A CAPTCHA test

 Require all users with access to the Web site to have strong passwords,
passwords that are difficult to crack.
Password best practices
The passwords that people use to gain entrance to your Web site are crucial to
security of the site. All passwords must be strong, i.e. optimized for maximum
security. Here are some key tips and techniques for doing this:

 Require all site users — administrators, staff and visitors, no exceptions! —

to have a strong password, one with these characteristics:

 Contains a minimum of 8 characters. In general, the longer a

password is, the stronger it is.

474
 CIW – User Interface Designer

 Contains all of these: lower-case and capital letters, numbers and

symbols. Symbols include: ` ∼ ! @ # $ % ^ & * ( ) _ - + = { } [ ] \ | : ; " ' <
> , . ? / but not a blank space.
 Contains no known words or names, or combination thereof. In
general, the further a password is from known words or names — full
or partial — the stronger it is.
 Does not use obvious substitutions. For example: It does not
substitute O for o, or 1 for i, or 3 for e, etc.
 Require users to change passwords at regular intervals, once every 90
days or so. This runs the risk of being perceived as heavy-handed by users,
but, depending on the level of sensitivity of the site information that might
be a risk you need to take.
 Instruct users to never tell anyone their password — including the site
administrators or other IT staff within their company — and to never write it
down, either on paper or digitally. If they forget a password, tell them the
server can resolve this without human intervention, by either sending them
a password reminder or letting them create a new password.
 Add an additional layer of security, for example a phone number or
alternative email address that can be requested for verification when the
user attempts to log in from an unexpected IP address.
 Require users to have a unique password for your site, one they do not use
for any other sites. Unfortunately, you cannot enforce this unless you
assign users passwords they cannot customize, a policy they might
perceive as overbearing. Just telling users they are required to have a
unique password often works.
 Consider logging user actions. This is a somewhat extreme measure, but it
can be an invaluable way to uncover hard-to-trace malicious exploits
perpetrated by or directed towards site users.
Testing your site security

Instructor Note: As with all other important steps of the design procedure, make
sure students document their site security procedures so that, if problems arise,
it will be easier to find the site's weaknesses or vulnerabilities.

475
 CIW – User Interface Designer

Before your Web site goes live — before you publish it to the Web server — you
should do one final security check. It is better to be safe than sorry.

 Ensure that all of your Web site security applications are up to date.
 Ensure that all of these applications are correctly configured.
 Ensure that all users have strong passwords.
 Ensure that all users and groups have the correct permissions.
Finally, one effective way to test a Web site's security system is to try to hack it
yourself. Since you have first-hand knowledge of its configuration, you are in an
ideal position to exploit any security weaknesses it might have. You could also
hire a professional company or individual to try to hack the site. The advantage is
that they will likely know all the latest security-breaching tricks. The downside is
that "professional" hackers are not all trustworthy. Do you really want to invite an
expert to hack into your system?

Lab 9-1: Making sure your Web site is ready to be published

In this lab, you will make sure that your company Web site is ready to be published.

Use the material presented in this section as a guideline to ensure that your company Web
site is ready to be published. Focus on:

 Usability testing the site. (See Lesson 3 for help.)

 Validating the site code using the W3C Validator.
 Using other developer tools to do things like check for broken links and
evaluate the site's mobile-friendliness and accessibility.
 Securing the site.
In this lab, you took steps to make sure your company Web site is ready to be published.

Maintaining a Web Site

476
 CIW – User Interface Designer

OBJECTIVE 9.2: Web site maintenance

When you publish a Web site, the development phase of the site-building process
comes to an end. That does not mean, however, you can sit back and assume
that all will be well.

Instructor Note: Have students create a calendar of scheduled maintenance

and/or updates to the site to keep it relevant and at optimal performance.
In the short term, out-of-date or incomplete content, security problems and newly
surfaced bugs will all require immediate action. In the long term, the site will
eventually outgrow its current form and more fundamental changes will need to
be made. Like the site, the broader environment will also evolve: New browsers
and devices will appear, new security issues, new coding features, etc.

Appropriate actions must be taken to keep the site aesthetically pleasing,

functionally robust and legal in the midst of all these internal and external
changes. Doing this is called maintaining the site.
Creating a site maintenance plan

To maintain a site effectively, you need to have a solid site maintenance plan. To
create such a plan, you need to take several factors into account. Among the
most important are content, performance, functionality and user feedback.

Content
You need to periodically check your existing site content for accuracy. The world
changes and your content must change with it. If not, site visitors will eventually
lose confidence in the information on your site, which could lead to fewer
visitors, less sales and negative buzz that could undermine your company brand.

Even more importantly, you need to add new content to the site on a regular
basis. If not, Web users — most of whom are addicted to constantly changing
information — will feel no compelling reason to keep visiting the site. How often
you should update your content depends on the nature of the site. A site with
static content (such as a wiki for an 80s TV show) will tend to need less content
renewal than a dynamic site (such as a blog for current TV shows). In both cases,

477
 CIW – User Interface Designer

however, new content will keep information-hungry Web users motivated to keep
returning to the site.

Performance
You need to ensure that your Web hosting plan is able to support your current
traffic. If necessary, upgrade your plan.

Ensure that your source code (HTML, CSS, JavaScript, etc.) follows the current
Web code standards, as set by the W3C and similar organizations (IETF, ISO,
ECMA, etc.).

Ensure that your SEO plan is up to current best practices. (For more on SEO, see
the next section in this lesson.)

Ensure that the current site owners can successfully maintain the site by creating
a Web site operation manual (as discussed in the previous section). It is a sad
thing to watch a well-built Web site fall apart when site maintenance is passed
from expert developers to non-expert clients.

Functionality
Verify that all existing site links connect to their intended target pages and add
new links (to both internal and external pages) on a regular basis.(Figure 9-4)

478
 CIW – User Interface Designer

Figure 9-4: Use the site map to verify all existing site links connect to their intended
target pages.

Likewise, verify that all existing media objects (images, audio, video, etc.) display
and run correctly, and add new objects — or change existing ones — on a regular
basis.

Ensure that the security system is up to current best practices and enforce it:
Require strong passwords, delete old accounts and review user permission
settings.

479
 CIW – User Interface Designer

Ensure that the backup system is up to current best practices and enforce it:
Back up the entire Web site regularly and redundantly. A local backup is not
enough; make sure there are backup copies in other geographical locations.

User feedback
Feedback from site users can significantly improve site maintenance by
providing the maintainers with knowledge of the pros and cons of the site from
the perspective of real-world users. Asking users for feedback has an additional
benefit: It increases user satisfaction by involving them in the site-development
process.

As mentioned in Lesson 8, an easy and effective way to get feedback from users
about a Web site is to put a user feedback form on the site.
Exercise 9-1: Site Manuals

480
 CIW – User Interface Designer

Search Engine Optimization (SEO)

OBJECTIVE: 9.3 Search engine optimization (SEO)

What makes users visit a new Web site? Sometimes reading about the site in
their daily news feed, or hearing about it from a colleague, or seeing it in an
advertisement. Far more often, however, users discover and visit a new site by
entering a term in their search engine — Google, Bing, etc. — and clicking on one
of the search results. According to Conductor.com, when people use a search
engine, about one-third of the time they visit the site listed at the top of the
search results list, and a full two-thirds of the time they visit one of the sites in
the first five results.

Clearly, if you want to maximize your site visitors, you need to get your Web site
listed as close as possible to the top of search engine results lists. This leads to
one of the most asked — and tortured over! — questions on the lips of any Web
site owner who is looking to increase their audience size:

How do we get to the top of the search engine results lists?

What is search engine optimization (SEO)?

Search engine optimization (SEO) is the practice of ensuring that your site pages
acquire and maintain a favorable search engine ranking.

Your company Web site might be exquisitely designed, highly usable and filled
with top-notch content, but none of that will matter if nobody visits the site. In
order for Web users to visit your site, they need to know that it exists. A good SEO
strategy ensures this will happen.

If you are building a site for a client, the amount of traffic the site gets will
influence the effectiveness of the client's business via online exposure, product
sales and advertising revenue. Since site traffic is dependent on search ranking,

481
 CIW – User Interface Designer

SEO goes a long way to determining how satisfied clients feel about your
services.
How SEO works

Search engines use automated programs called Web crawlers — also known as
Web spiders, robots or bots — that "crawl" from page to page across the Web,
read the source code and store this data in the search engine's database. When a
user enters a search term, the search engine analyzes the data its crawlers have
gathered to create an on-the-fly list of Web pages it deems appropriate for the
search.

Each search engine uses its own proprietary algorithm to determine what it
considers to be appropriate search results and to rank them by relevance. The
exact nature of a search algorithm is kept a closely guarded secret by the search
engine company that developed it for two main reasons:

 It prevents other search engine companies from using (and profiting from)
the algorithm's strengths. For example, it is the strength of Google's
proprietary search algorithm that enables it to perform better than its
competitors, and in turn to make Google the leading search engine on the
Web. Sharing this algorithm with the world would mean sharing it with rival
companies who would like nothing more than to compete strongly with
Google.
 Keeping the search algorithm a secret prevents SEO experts from being
able to "trick" a search engine into giving a site a higher ranking than it
might otherwise get. SEO professionals often look for ways to exploit a
search algorithm to help nudge their client sites to the top of the search
results list. Though common, this practice is generally considered to be
unethical, particularly if the SEO experts drive up the ranking of inferior
sites or sites with content not directly related to the search term.

482
 CIW – User Interface Designer

Instructor Note: Since Web crawlers consistently rate pages with more site
links higher, encourage students to build site links - internal and external -
into their sites.
Despite the pains search engine companies take to keep their algorithms secret,
clever SEO experts eventually figure out the gist of what makes these algorithms
work. In response to this, the search engine companies update their search
algorithms and in response to that, the SEO experts work 24/7 to understand the
updated algorithm. Thus ensues a game of cat and mouse that is one of the
hallmarks of the relationship between search engine companies and SEO
experts.
SEO and Web site marketing

SEO is just one piece of the puzzle in developing a successful Web site. Putting
your site's success at the mercy of search engine optimization means that the
site will live and die with the algorithms used by the search engines. On the other
hand, neglecting SEO will undermine the Web site's ability to retain current
customers and acquire new ones.

In a nutshell: You should consider SEO to be a vital part of your Web site
marketing plan, but not the entire plan. (Figure 9-5)

483
 CIW – User Interface Designer

Figure 9-5: Use SEO

Reports to improve SEO ranking and conform to best practices.

Here are some other marketing-related ways to increase your Web site audience
and traffic. Note that, when applied correctly, all of these techniques will work in
harmony with your SEO strategy, rather than compete against it.

 Provide high-quality and regularly updated content. A gorgeous

presentation might get you a bunch of one-time visitors who admire the
beauty (innovation, cleverness, etc.) of your site, but to build a loyal base of
users who continue to visit your site for months or even years, content is
key. Not just any content; you need high-quality content that is regularly
updated.
 Cultivate a good reputation with your users. In our social-media obsessed
world, word gets around. Getting good buzz from users is a great way to
build a large and active audience.
 Promote the site actively to your target audience. Along with SEO, use
whatever avenues of promotion you deem appropriate for your audience:
online directories (Yelp, Angie's List, etc.), social networking, blogs and
articles, photo sharing, advertising, email flyers, etc.

484
 CIW – User Interface Designer

 Identify and strengthen your site's competitive uniqueness. If your site is an

online clothing store, find some way to make it more desirable than other
similar online clothing stores: all-natural fibers, extra-petite sizes, exotic
men's shirts, etc. Think different, rather than "been there, done that."
 Use marketing tactics such as mailing list announcements and
newsletters. Remember: Web users typically get a huge stack of emails
every day, so make sure to give your announcements and newsletters an
irresistible "hook" — freebies, special deals or insider information generally
work well — to grab their attention and entice them to revisit the site.
 Use Web analytics to increase site traffic. See Lesson 8 for information on
Web analytics.

SEO and Written Site Content

OBJECTIVE 9.4: SEO and written content

SEO is a team effort: It works best when every department is pulling toward the
same goal. The designers must understand how the site's visual design (layout,
typography, etc.) can raise or lower search ranking. The developers must know
how the site's code and underlying structure can help optimize ranking. The
writers must have a clear grasp of how the site's written content can be used to
drive traffic.

The most common way to optimize written content for search engine ranking is
to use SEO keywords: specific words and phrases in a Web page that enable
users to find the page with a search engine.

For example, if a user wants to find a refurbished iPad, they would probably enter
two words in the search engine: refurbished and iPad. Web pages that contain
one or more instances of both of these keywords — refurbished and iPad — are
more likely to rank high in the search results than pages that contain just one (or
neither) of the keywords.

That is just the tip of the SEO-keyword iceberg. To go deeper, you can use
a keyword suggestion tool (such as Google Adwords Keyword Planner) to
generate a list of keywords that users who search for refurbished or iPad also

485
 CIW – User Interface Designer

tend to search for. The suggestion tool might return keywords such as used,
repaired, iPhone, Apple, and so on. You can then write these keywords into the
Web page to help raise its search ranking.

Instructor Note: Be creative in helping students brainstorm keywords - play word

association games or try out free Keyword Planners on the Internet.
Here are a few additional keyword-based techniques that a writing team can use
to increase the search engine ranking of a Web page:

 Include search keywords in the page title and headings. For example, if you
are creating a page about the medicinal uses of thyme, include Thyme in
the title and in a header or two, and consider including other related
keywords such as: medicinal, herbal, health, etc. A good keyword-rich title
might be Medicinal Uses of the Herb Thyme, and a good header Thyme:
Healthy and Delicious.
 Include a substantial amount of keyword-related content on the page. For
example, if your primary keywords on a page are "golf," "putting," and
"strokes," rather than writing a 50-word paragraph about golf putting
strokes, write 200-500 words about it.
 Use variations of keywords in the page text. Rather than repeating "coffee
beans" 10 times on the same page, include variations like "fresh coffee,"
"fresh beans," "unground coffee," and so on.
 Use the same keywords that similar Web pages use. If you are creating a
page about how to make a pizza, use the keywords similar pages use, such
as: pizza, recipe, mix, flour, dough, etc.
 Use long tail keywords. For example, instead of using single keywords like
"4K" or "television," use long-tail keywords like "4K television monitor" or
"4K television tv monitor" or "4K ultra HD television monitor," and so on.
 Use keywords that are in the site URL. For example, a page with the URL
glassbeadgame.com/rules.html would tend to rank high if the user
searched for "glass bead" or "bead game" or "glass bead game."

SEO and Mobile-Friendliness

486
 CIW – User Interface Designer

OBJECTIVE 9.5: SEO strategies

Since mid-2015, when Google began using mobile-friendliness for search

ranking, any effective SEO plan now needs to include mobile optimization as a
major part of its overall strategy. Fortunately, if a site is already well optimized
for search engines, there are only a few additional things you need to do to
optimize your mobile-friendliness, according
to www.moz.com/learn/seo/mobile-optimization (n.d.).

Tech Note
Since Google keeps its mobile-friendliness algorithm a secret, there is no way to know for
sure how much these techniques will influence a page's search ranking, but, it stands to
reason that improving a site's overall mobile responsiveness is likely to improve Google's
mobile-friendliness rating.

 Pick the right site configuration. When you set out to build a mobile-friendly
Web site, a key decision you need to make is what site configuration to
use. You have three choices:
 Responsive design — Uses CSS3 media queries to accommodate both
mobile and non-mobile devices. See Lesson 5 for more information.
 Dynamic serving — Serves up different versions of HTML and CSS code,
depending on what user agent is requesting the page.
 Parallel URLs — Assigns unique URLs to different versions of the site.
Though Google supports all three configurations, it tends to give the highest
mobile-friendliness ratings to sites that use responsive design.

 Design pages to load and render quickly. Due to hardware and connectivity
issues, page loading and rendering speed is even more important for
mobile users than for desktop users. In addition to optimizing images, you
should minify code and leverage browser caching.

487
 CIW – User Interface Designer

 Optimize page UIs for touchscreen finger gestures. Touchscreen gestures

— finger taps, swipes, pinches, etc. — can result in user interaction
mistakes if onscreen buttons are too small, too close together, or in the
path of a finger swipe to scroll the page, etc. To minimize the likelihood of
these mistakes occurring, you need to optimize your page UIs for
touchscreen usage.
 Do not block CSS or JavaScript. Until quite recently, some mobile devices
could not support CSS and/or JavaScript, so developers blocked these
languages from being read by the devices. That is no longer necessary,
since almost all recent mobile devices support both languages. Moreover,
the presence of CSS and JavaScript tends to raise Google's mobile-
friendliness rating.
 Do not use Flash. Flash is no longer a relevant Web technology. If you want
to create Flash-like apps or special effects, use HTML5 instead.
 Do not use pop-ups. It can be very difficult to close these on a mobile
device. This might lead to frustrated users and a high bounce rate.

SEO and Metadata

OBJECTIVE 9.6: SEO and metadata

A Web page consists of digital data. This data is interpreted and rendered by a
browser, enabling the user to see the page as designed and the content as
specified. Behind the scenes, there is a substantial amount of data that is hidden
from users. For example: Site visitors do not see HTML tags or CSS rules or
JavaScript code, unless they go to the trouble of explicitly viewing the page
source.

Metadata is a special type of data that provides information about the other data
contained in a Web page or site. It is, in effect, data about data, hence its name:
meta-data. Metadata is invisible to site visitors, but is accessible to browsers and
other applications such as search engine crawlers.

XML Sitemaps
Unlike the navigational page-link site map that you created in Lesson 2, an XML

488
 CIW – User Interface Designer

sitemap is an XML file that contains metadata about the pages on your site. It
resides on the Web server and is read by search engine crawlers, not human
users. You can think of an XML sitemap as a navigational site map for Web
crawlers.

Specifically, an XML sitemap contains a list of page URLs with metadata that
tells crawlers about each page's priority, location, last time of modification and
frequency of change. The limits of an XML sitemap are 50,000-page URLs and
50-mb file size. If your XML sitemap is bigger than this, you can split it into two or
more sitemaps. This means that you could choose to include all your site pages
in the XML sitemap, regardless of the site's page count. Developers generally
include only the most relevant pages, however, which are usually the higher-level
pages that users visit most often.

Figure 9-6 is an example from Woorank.com (n.d.) of an XML sitemap that

contains metadata for three URLs (https://www.woorank.com/):

489
 CIW – User Interface Designer

Figure
9-6: An XML sitemap with metadata for three URLs from www.woorank.com

Crawlers can be excluded from indexing certain pages of your site and can be led
to the sitemap directly using the robots.txt file on your server. Another similar
way to tell crawlers what to take notice of is to use HTML <meta> tags.

HTML <meta> tags

You can use HTML <meta> tags to write metadata directly into the head section
of an HTML document. Here is the general syntax:

<meta attribute="value" ... />

The ... (ellipsis) means that a <meta> tag can have one or more attribute/value
pairs. Here is an example of a single-attribute <meta> tag that tells the browser

490
 CIW – User Interface Designer

that the character set used in the HTML document is UTF-8 (Unicode):

<meta charset="utf-8" />

Here is an example of a two-attribute <meta> tag that provides a description of

the contents of the HTML document:

<meta name="description" content="Links to online HTML validators" />

SEO and <meta> tags

Up until quite recently, the SEO usage of <meta> tags was dominated by
keywords <meta> tags, the proper use of which could raise a page's search
engine ranking significantly, according to Nathaniel Towers (2015) who posts on
firstscribe.com. For example, this keywords <meta> tag would have helped raise
the ranking of a page in a user search for blazers, suits, or jackets:

<meta name="keywords" content="blazers, suits, jackets" />

These days, however, keywords <meta> tags seem to have lost most, if not all, of
their ability to affect ranking. Google has explicitly stated that they do not use
keywords <meta> tags for search ranking. Bing says using keywords <meta> tags
can only lower, not raise, ranking and other search engines have tended to follow
suit.

It would be a big mistake, however, to conclude that all <meta> tags are useless
in terms of SEO. In fact, several <meta> tags can still significantly influence
search ranking, directly or indirectly. Here, for example from cohlab.com (2015),
are some of the <meta> tags that Google still recognizes (as of late 2015).

491
 CIW – User Interface Designer

 The description <meta> tag

<meta name="description" content="pageDescription" />

The description <meta> tag provides a short description of the page it

resides in (pageDescription in the above syntax statement). Choose
content keywords that entice users to visit the page.

 The <title> tag

<title>pageTitle</title>

Though not a <meta> tag, the <title> tag is included here because it is the
page title that appears in the search results list. Choose clear and
descriptive titles to make your pages stand out among the other search
results.

 The robots and googlebot <meta> tags

<meta name="robots" content="value1, value2, ..." />

<meta name="googlebot" content="value1, value2, ..." />

The <meta> robots and googlebot tags influence the search engine

492
 CIW – User Interface Designer

crawler's behavior, based on the value — or comma-delimited values —

assigned to the content attribute. The <meta> robots tag works with all
search engine crawlers, while the <meta> googlebot tag only works with
Google crawlers.

By default, the content attribute values are "index, follow" which tells the
crawlers to index the page and follow all of its links. Here are other
common content values:

noindex — Do not index the page.

nofollow — Do not follow the page links.
none — Do not index the page or follow its links.
content="none" is the same as content="noindex, nofollow"
nosnippet — Do not show a snippet of the page in the search results.
noarchive — Do not show a cached link for the page in the search results.
unavailable_after:[date] — Do not index the page after the specified date.

 The notranslate <meta> tag

<meta name="google" content="notranslate" />

The notranslate <meta> tag tells Google not to display a translate link in
the search results.

 The charset <meta> tag

493
 CIW – User Interface Designer

<meta charset="characterSet" />

The <meta> charset tag specifies the HTML document's character set
(characterSet). Generally, the charset attribute is set to "utf-8" (Unicode).

 The refresh <meta> tag

<meta http-equiv="refresh" content="numSeconds; url=redirectURL" />

Tech Note
Warning: Not all browsers support <meta> refresh tags. For this reason, Google — along
with most professional developers — recommend using a server-side 301 redirect instead.
For instructions on how to do this, search for "301 redirect" or contact your Web hosting
service.

Creating an SEO strategy

Instructor Note: Have students consider the fact that a link from a popular blog
can also increase the number of visitors to a site. How can you incorporate this
into your SEO strategy?
SEO is a fluid practice, because the search engine algorithms they target are
fluid, i.e., subject to frequent and unannounced changes by their creators,
according to Mackensie Graham (2015)
on www.thenextweb.com/socialmedia/2015/02/26/7-seo-strategies-to-
implement-in-2015. For this reason, you should not attempt to create a fixed list
of best SEO practices that will guarantee high search rankings for your sites.
Instead, you should keep your SEO eyes open, gather promising-looking
optimization techniques, try them out, observe the results, keep the ones that
work and get rid of the rest. After you have done this for a period of time, you will
494
 CIW – User Interface Designer

have assembled a custom toolkit of reliable SEO techniques you can deploy for
different situations, like a painter choosing colors from a palette.

The following SEO techniques have been effective in the past. Some of them will
still work well; others might not. Remember: SEO is fluid, thus unpredictable. You
can use them as a starting point for building your own custom SEO toolkit. (Note:
The techniques for the first four categories — marketing, keywords, mobile-
friendliness and metadata — are presented in condensed form here. For details,
see the relevant sections above.)

 Marketing

 Provide high-quality and regularly updated content.

 Cultivate a good reputation with your users.
 Promote the site actively to your target audience.
 Identify and strengthen your site's competitive uniqueness.
 Use marketing tactics such as mailing list announcements and
newsletters.
 Use Web analytics to increase site traffic.
 Keywords

 Include search keywords in the page title and headings.

 Include a substantial amount of keyword-related text content on the
page.
 Use variations on keywords in the page text.
 Use the same keywords that similar Web pages use.
 Use long-tail keywords.
 Use keywords that are in the site URL.
 Mobile-friendliness

495
 CIW – User Interface Designer

 Pick the right mobile site configuration: responsive design, dynamic

serving or parallel URLs.
 Design pages to load and render quickly.
 Optimize page UIs for touchscreen finger gestures.
 Do not block CSS or JavaScript.
 Do not use Flash.
 Do not use pop-ups.
 Metadata

 Use an XML sitemap.

 Do not use keywords <meta> tags.
 Use description <meta> tags.
 Use <title> tags.
 If appropriate, use robots and/or googlebot <meta> tags.
 If appropriate, use notranslate <meta> tags.
 Use charset <meta> tags.
 Use 301 redirects rather than refresh <meta> tags.
 Miscellany

 Add alt attributes to all page images (<img> tags). Since Web
crawlers cannot decipher the meaning of an image by looking at its
file, they rely on the alt attribute text instead. Thus, taking the time to
add meaningful alt attributes to your <img> tags serves two
purposes: It improves SEO and it enables visually impaired users to
know what the images depict.
 Include internal links to similar pages in the same domain. For
example, if a page in the domain writethought.com contained 11
internal links to other writethought.com pages, it would tend to be
more highly ranked than if it contained just a handful of

496
 CIW – User Interface Designer

writethought.com links. This is one of the reasons that Wikipedia

pages are so highly ranked in search engines.
 Include external links to other sites with similar content. For example,
a page on auto repair with 10 external links to auto repair sites
would tend to rank higher than a page with no external links to auto
repair sites.
 Include links to other Web sites that link back to your site. For
example, if a page linked to 20 other sites and 10 of them linked
back to that page, it would tend to rank higher than if it linked to 5
other sites and 2 linked back to the original page.
 Label hyperlinks with relevant text.
For example, instead of:

To learn more, download this.

a better option (in terms of SEO) would be:

To learn more, download the Studium-X Tutorial.



 Make getting return visitors a high priority. Search engines tend to

favor a page that has been picked 1,000 times after a search for "ui
design" over one that has been picked 200 times.
 Use social media. Much of the company marketing and brand
promotion that used to cost a huge amount of money can now be
accomplished for next to nothing through the skillful use of social
media networks. Do not miss out on this golden opportunity! Do
whatever it takes to develop and maintain a strong social media
presence on Facebook, Twitter, Pinterest, Instagram, etc.

497
 CIW – User Interface Designer

 Keep it simple! SEO is hard work. An SEO Web site audit can take
days or even weeks of painstaking labor to complete. The cleaner
and more streamlined your Web site is, the easier it will be to carry
out this research. So be sure to practice the "keep it simple" method
when optimizing your site code. You may also wish to consider
using one of the free SEO auditing tools available online, such as:
SEO Book, Microsoft SEO Toolkit, or SEO Toolset.

Lab 9-2: Creating an SEO strategy for your company site

In this lab, you will create a rough draft of an SEO strategy for your company site.

Using the Creating an SEO Strategy techniques presented above as a guide,

brainstorm an SEO strategy for optimizing the search ranking of your company site.

Tip 1: Move quickly through each of the SEO strategy techniques, one by one. If you
feel it applies to your Web site situation, jot down a few notes about it. If not, move
on.

Tip 2: Stay in brainstorm mode the entire time. Let your ideas flow, unimpeded. Do
not second guess yourself; go with your gut. You will have a chance to edit and
expand things out in the optional lab at the end of this lesson.

In this lab, you created the first draft of an SEO strategy for your site.

Exercise 9-2: SEO Strategies

Question :Fill in the blanks by typing the appropriate terms.

Here, this type of question contains the select box, text box, and drag and drop boxes. The
shortcut keys to perform this task are. Press the Alt+down arrow key to activate the target. Press
the arrow key to navigate through all the items. If the selected item is a text box or a select box,
it will automatically get focused. If you want to drop the item in the droppable field, navigate to
any of the draggable using the Tab key, and press the Enter key to copy the draggable, Now,
navigate to any of the droppable field and press the Enter key to drop the copied item. If you

498
 CIW – User Interface Designer
want to remove the item from the droppable field, navigate to the droppable field and press the
Delete key for Windows and the Fn+Delete key to remove the item.

1. Search engine optimization (SEO) is the practice of ensuring that your site
pages acquire and maintain a favorable search engine

.
2. The amount of

a site gets will influence the effectiveness of the business via online exposure,
product sales and advertising revenue.
3. Search engines use automated programs called Web

that "crawl" from page to page across the Web, read their source code, and store
this data in the search engine's database.
4. Each search engine uses its own proprietary

to determine what it considers to be appropriate search results and to rank them

by relevance.
5. SEO

are specific words and phrases in a Web page that enable users to find the page
with a search engine.
6. Another keyword-based technique to increase search engine ranking is to
include search keywords in the page title and

.
7. A

keyword is a keyword phrase, usually of 3-5 words.

8. To

is to remove all the unnecessary characters from source code without changing
its functionality.
*Matching is not case sensitive.

499
 CIW – User Interface Designer

Case Study: Upward Mobility

In 2006, when the hot-air balloon company Upward first built their Web site, they designed it
exclusively for full-sized desktop/laptop monitors — a sound decision at the time, since
mobile Web devices were still relatively scarce. Over the years, however, as Web-enabled
phones and tablets rose in popularity, more and more users complained that the site was
difficult to view on mobile devices. Even worse, the Upward ranking for relevant searches in
Google had slipped from the top of page 1 to the middle of page 2.

Finally, in 2016 — after having lost a full 25% of their customers to their arch rival Up Up and
Away! — Upward hired the local Web company WeboLicious to do a major redesign to
optimize the site for mobile-friendliness and get them back on page 1 of a Google search.
The WeboLicious team made the following development decisions:

 They used a parallel URL site configuration, a unique URL for each version
of the site: desktop, tablet, phone and watch.
 They made the opening page of the site a beautifully produced, and
somewhat slow-loading Flash movie.
 They chose to replace the standard touchscreen gestures with custom
gestures that they had developed after years of experimental research.
 They blocked CSS and JavaScript on all mobile devices built before 2013.
After paying WeboLicious a hefty sum for their redesign, Upward noticed a sharp spike
downward in their daily page visits. They searched for "hot-air balloons" in Google and were
horrified to find that instead of climbing back up to page 1, they had fallen to the middle of
page 4 in the search list results. Livid, they set up a meeting with WeboLicious and told the
head developer:

We hired you to improve our mobile-friendliness and search ranking, but you have done
exactly the opposite! Fix this, right away, or we will see you in court.

As a class, discuss this scenario and answer the following questions.

 What mistakes did Upward make in this situation?

 What mistakes did WeboLicious make?
 How could WeboLicious fix what needs fixing?

500
 CIW – User Interface Designer

 How could Upward ensure that they never make the same mistakes again?

Lesson Summary

Application project

As discussed above, in order to help the people who take over the control of a
Web site after it has been published, developers sometimes create a Web site
operation manual: a document that describes in detail how to operate, maintain,
and customize the site.

Follow these critical guidelines to create an operation manual for your company
Web site:

 Make a master index that, like a site map, shows the site's hierarchical
directory structure and where all its asset files (code, content and media)
should be stored.
 Describe, in detail, all of the unique elements in this index (Web pages,
images, etc.), to enable those who inherit the site to understand exactly
how these elements should be maintained, fine-tuned, customized,
extended, etc.
 Explain the logic behind any code that might be difficult to understand or
manipulate.
 Include a bug log in the operation manual for developers to document any
bugs they find in the site code: date and description of bug, if and how it
was fixed, etc.
 Include a change log in the manual for developers to document any
changes they make to the site code: date and description of change,
reason for change, etc.

501
 CIW – User Interface Designer

 Compile all of the above in one stylistically consistent document (layout,

format, typography, etc.). Include images (diagrams, screen shots, etc.) to
supplement the text and simplify complex issues.
 Add a title page and table of contents, a footer (on every page with the
project name and page number), and optionally a glossary and index.
Skills review

Now that you have completed this lesson, you should be able to:

 9.1 Test a user interface, including HTML5 validation, quality assurance,

security, focus groups. Validate the site code.
 9.2 Explain the tasks required to properly maintain a Web site.
 9.3 Define search engine optimization (SEO), including the relationship
between SEO and Internet marketing.
 9.4 Explain the relationship between written Web site content and SEO.
 9.5 Given a scenario, explain SEO strategies for mobile apps and data.
 9.6 Describe how metadata is used in SEO, including the <meta> tag,
document identification, search engines, delayed file change.

502
 CIW – User Interface Designer

Activity 9-1: Identifying publishing, maintenance, security, SEO terms

Optional Lab

Optional Lab 9-1: Expanding your company site SEO strategy

In this lab, you will expand your company site SEO strategy.

Revisit the SEO strategy rough draft you created earlier in this lesson and study it carefully,
with a critical eye. Edit it as necessary to make it more comprehensive and bring it to a
professional-quality level.

503
 CIW – User Interface Designer
Tip 1: Move slowly through each of the SEO techniques in the Creating an SEO Strategy
section above. Using your rough draft as a guide, write detailed notes about the techniques
that apply to your situation and NA (not applicable) for the other techniques, along with a
brief explanation of why they do not apply.

Tip 2: You should not be in brainstorming mode for this task. You should work slowly and
thoroughly, digging down into the details.

In this lab, you expanded out your company site SEO strategy.
Glossary

<meta> tag

An HTML tag that provides information (metadata) about the Web page in which
it resides.
301 redirect

A 301 redirect is a server-side method for telling browsers and search engines
that a Web page or site has been permanently moved to a new location.
CAPTCHA test

A test used to determine whether the entity trying to log in is human. CAPTCHA
stands for: Completely Automated Public Turing test.
code validator

An application that checks code to ensure it complies with the coding language's
rules, syntax and recommended practices.
keyword suggestion tool

A tool that expands a keyword to a set of similar keywords.

long tail keyword

504
 CIW – User Interface Designer

A keyword phrase, usually of 3-5 words.

maintaining the site

Performing all the tasks necessary to keep a Web site up-to-date and in good
working order, so that it displays and works correctly in current browsers and
devices.
metadata

A type of data that provides information about other data in a Web page or site -
data about data.
minify

Remove all the unnecessary characters from source code without changing its
functionality.
quality assurance

An umbrella term for a set of procedures (usability testing, code validation, site
optimization, etc.) that ensure a site's form and function are of high quality.
robots.txt file

A text file that provides special instructions (e.g. privacy information) about a
Web site to Web crawlers.
search engine optimization (SEO)

The practice of ensuring that site pages acquire and maintain a favorable
position in search rankings.
search ranking

505
 CIW – User Interface Designer

The position at which a site appears in the results listing of a search engine.
SEO keywords

Specific words in a Web page that make it possible for users to find the page
with a search engine.
site maintenance plan

Document outlining scheduled dates to update and verify links, content, and
functionality of the Web site.
strong password

A password that is difficult to crack.

Web crawler

An automated program that gathers data from Web pages.

Web site operation manual

A document that describes in detail how to operate, maintain and customize a

Web site.
XML file

A file written in XML (extensible Markup Language), a language used to store,

describe and share data via networks such as the Internet.
XML sitemap

An XML file that contains metadata about the pages on a site.

User Interface Designer is the second course in the CIW Web And Mobile Design

506
 CIW – User Interface Designer

series. This course introduces strategies and tactics necessary to design user
interfaces, with particular emphasis on creating user interfaces for mobile
devices. It focuses on teaching specific development techniques and strategies.

This course teaches how information obtained from the client, sales, and
marketing to design and develop compelling visual experience Web sites for
multiple platforms, including mobile, tablet, and desktop. You will learn more
about wireframes, color schemes, tones, design templates, formatting, and
typography. This course builds upon your abilities to implement user analysis
techniques, usability concepts, usability testing procedures and the vital role of
testing to publish and maintain a Web site.

You will also learn branding considerations and responsive design

implementation in relation to the user interface design of Web sites.

User Interface
Designer User Interface Designer Courseware Lesson(s) and Section(s)
Objective
Domain 1: User Interface Design Projects
1.1 Describe Lesson 1: Introduction to User Interface Design
how Web user
interfaces have
evolved as  Evolution of Web User Interfaces
more devices
access the  Lab 1-1: Exploring the UI design evolution of several
Internet. Web sites
1.2 Explain Lesson 1: Introduction to User Interface Design
current trends
in user interface
design, such as  Current Trends in Web Design
mobile devices
and responsive  Lab 1-2: Demonstrating current Web UI trends
design
techniques.
1.3 Explain the Lesson 1: Introduction to User Interface Design
responsibilities
and tasks of
Web design  Web Design Team Roles and Responsibilities
team members.
1.4 Describe Lesson 1: Introduction to User Interface Design
the basic tasks

507
 CIW – User Interface Designer

of Web design
project  Web Design Project Management
management,
including
project
management
phases, project
documentation
and
communication.
1.5 Describe Lesson 1: Introduction to User Interface Design
the advantages
of Web design
project  Collaborative Web Design
collaboration.
1.6 List the Lesson 1: Introduction to User Interface Design
benefits of
creating a
personal Web  Creating a Web Design Portfolio
design project
portfolio.
1.7 Start Lesson 1: Introduction to User Interface Design
planning a
fictitious Web-
based business,  Creating a Plan for a Web-Based Business Project
including
drafting a goals  Lab 1-3: Creating a plan for a Web design business
statement
(types of
customers, feel
of work,
mission
statement) and
creating a
design team.
Domain 2: User Interface Design Process
2.1 List steps in Lesson 2: User Interface Design Process
a basic Web
design project's
development  Choosing a Web Design Methodology
process,
including
bottom-up
approach, Agile
approach,

508
 CIW – User Interface Designer

vision, strategy,
specifications,
mindmapping,
site map,
wireframe.
2.2 Describe Lesson 2: User Interface Design Process
the Agile Web
development
approach,  Agile Web development manifesto and principles
including
streamlining  Lab 2-1: Comparing bottom-up and agile design
project methodologies
workflow,
eliminating
bottlenecks,
focusing on
value,
facilitating
changes in
requirements.
2.3 Define a Lesson 2: User Interface Design Process
project vision
for a Web site
or mobile app  Creating a Web Site Vision Statement
interface.
 Lab 2-2: Creating a vision statement for your company
site
2.4 Explain the Lesson 2: User Interface Design Process
user interface
design process,
from vision to  Creating and Implementing a Web Site Strategy
strategy.
 Lab 2-3: Defining a Web site strategy and tactics to
implement the strategy
2.5 Define the Lesson 2: User Interface Design Process
specifications
for designing a
Web site.  Creating a Web Site Specification

 Lab 2-4: Creating a specification for your company

site
2.6 Discuss Lesson 2: User Interface Design Process
considerations

509
 CIW – User Interface Designer

for site
publishing,  Publishing a Web Site
including FTP
uploads, mobile
apps,
publishing
tools.
2.7 Describe Lesson 2: User Interface Design Process
various choices
and challenges
of site hosting,  Choosing a Web Site Host
including
security, costs.
2.8 Describe Lesson 2: User Interface Design Process
the security
maintenance
required for  Securing a Web Site
Web sites.
2.9 List Lesson 2: User Interface Design Process
guidelines for
ethical Web
design,  Creating Ethical and Legal Web Sites
including
comparing
unethical vs.
illegal.
2.10 Apply the Lesson 2: User Interface Design Process
mindmapping
process to user
interface design  Creating a Mind Map
projects.
 Lab 2-5: Hand drawing a mind map of your company
site
2.11 Determine Lesson 2: User Interface Design Process
metaphors for a
user interface
design.  Using Metaphors

2.12 Define the Lesson 2: User Interface Design Process

purpose of
creating word
lists and mood  Creating Word Lists and Mood Boards
boards in
relation to the
Web design

510
 CIW – User Interface Designer

process. Create  Lab 2-6: Creating a word list and mood board for your
a word list for
your Web site company site
using the two-
step process
and mood
board using the
eight-step
process.
2.13 Create a Lesson 2: User Interface Design Process
site map for a
fictitious
business.  Creating a Site Map

 Lab 2-7: Creating a site map for your company site

Domain 3: User Centered Web Design
3.1 Explain the Lesson 3: User-Centered Web Design
optimal
relationship
between Web  User-Centered Web Design
users and site
design,
including
customers vs.
contributors,
attracting and
retaining users,
needs-driven
design, and
scenario-based
design.
3.2 Identify Lesson 3: User-Centered Web Design
Participatory
Design and its
involvement  Participatory design and scenario-based design
with all
stakeholders.
3.3 Explain Lesson 3: User-Centered Web Design
Scenario-based
design and
when it is used.  Scenario-based design

 Lab 3-1: Creating scenarios for your company Web

site

511
 CIW – User Interface Designer

3.4 Describe Lesson 3: User-Centered Web Design

the importance
of Cognitive
Psychology in  The Cognitive Psychology of Web Design
relation to Web
Design.  Lab 3-2: Applying cognitive principles to your Web
site design
3.5 Identify the Lesson 3: User-Centered Web Design
terms
"personas" and
"usability" to  Personas and Usability
understand your
audience.  Lab 3-3: Creating a persona for your Web site design

3.6 Explain use Lesson 3: User-Centered Web Design

case and use
case scenarios.
 Use cases and use case scenarios
3.7 Describe Lesson 3: User-Centered Web Design
the purpose and
importance of
site usability  Usability testing
testing.
 Lab 3-4: Creating personas, use cases, and use case
scenarios
3.8 Given a Lesson 3: User-Centered Web Design
scenario,
determine how
to improve site  Accessibility
accessibility.
3.9 Explain Lesson 3: User-Centered Web Design
how to improve
site
accessibility for  Optimizing accessibility for mobile devices
mobile devices.
 Lab 3-5: Optimizing the accessibility of the mobile
version of your site
Domain 4: User Interface Design Principles
4.1 Apply user Lesson 4: User Interface Design Principles and Legal
interface design Guidelines
principles to
Web site
design.

512
 CIW – User Interface Designer

 Web UI Design Principles

 Lab 4-1: Demonstrating UI design principles
4.2 Describe Lesson 4: User Interface Design Principles and Legal
CARP Guidelines
(contrast,
alignment,
repetition,  Visual Design Principles
proximity) and
how it is
important to UI
design
principles.
4.3 Describe Lesson 4: User Interface Design Principles and Legal
ERBU Guidelines
(emphasis,
rhythm,
balance, unity)  ERBU: Emphasis, Rhythm, Balance, Unity
and how it is
important to UI  Lab 4-2: Using CARP and ERBU to assess Web page
design design
principles.
4.4 Explain Lesson 4: User Interface Design Principles and Legal
branding Guidelines
considerations
in user interface
design.  Branding

 Lab 4-3: Creating a branding plan for your Web design

company
4.5 Given a Lesson 4: User Interface Design Principles and Legal
scenario, Guidelines
describe and
resolve legal
issues in Web  Legal Issues Impacting Web Design
design.
Domain 5: Color, Typography, Layout, and Wireframing
5.1 Describe Lesson 5: Color, Typography, Layout and Wireframing
the importance
of color usage
in user interface  Color
design.

513
 CIW – User Interface Designer

 Lab 5-1: Creating a color scheme for your company

site
5.2 Consider Lesson 5: Introduction to JavaScript
font choices
and challenges
in user interface  Typography
design.
 Lab 5-2: Creating a typography scheme for your site
5.3 Identify Lesson 5: Introduction to JavaScript
elements of
effective Web
page layout  Layout
(e.g., content,
navigation,
space), and
discuss
variables that
may apply to
specific
situations or
site types.
Given a
scenario,
determine an
effective Web
page layout.
5.4 Create a Lesson 5: Introduction to JavaScript
Web page
wireframe for a
fictitious  Wireframes and Mockups
business.
 Lab 5-3: Creating a sketch and wireframe of a page
from your site
 Lab 5-4: Creating a mockup of a page from your site
5.5 Explain Lesson 5: Introduction to JavaScript
page layout
techniques
when creating  Responsive Web Design
user interfaces
for mobile
devices.
Domain 6: Designing a Basic Web Page User Interface

514
 CIW – User Interface Designer

6.1 Create a Lesson 6: Designing a Basic Web Site

simple Web
user interface
using best  Creating a Web Site
practices.
6.2 Identify the Lesson 6: Designing a Basic Web Site
basics of
HTML, CSS
and responsive  HTML and CSS refresher
design.
6.3 Apply a Lesson 6: Designing a Basic Web Site
default page
template to a
Web site.  Part 1: Creating One Site Page

 Lab 6-1: Organizing your company site design

materials
 Lab 6-2: Revising your Web site vision, strategy, and
specification
 Lab 6-3: Revising your mind map, word list and mood
board
 Lab 6-4: Revising your page sketch, wireframe, and
mockup
 Lab 6-5: Gathering and creating assets for the page
template
 Lab 6-6: Building the default page template
6.4 Apply a set Lesson 6: Designing a Basic Web Site
of custom page
templates to a
Web site.  Part 2: Creating the Remaining Site Pages

 Lab 6-7: Revising the site map

 Lab 6-8: Creating custom page templates
 Lab 6-9: Gathering and creating assets for a site page
 Lab 6-10: Creating the remaining site pages
6.5 Use Lesson 6: Designing a Basic Web Site
spelling and

515
 CIW – User Interface Designer

grammar tools
to review site  Spell- and Grammar-Check the Site
text.
 Lab 6-11: Spell- and grammar-checking your site
Domain 7: Web Site Navigation Concepts
7.1 Explain Lesson 7: Navigation Concepts
why navigation
is critical to
interface  Why is Web Site Navigation So Important?
design,
including user-
centered design
concepts, and
"mystery meat"
navigation.
7.2 Identify Lesson 7: Navigation Concepts
best practices
for Web site
structure, URLs  Site Structure, Directory Structure and URLs
and file names.
Create a site  Lab 7-1: Revisiting and revising your site and
navigation directory structures
system.
7.3 Describe Lesson 7: Navigation Concepts
familiar
conventions
used in site  Positional Awareness
navigation,
including
breadcrumb
trails, logos,
menus, visited
links, home
page, naming
conventions.
7.4 Compare Lesson 7: Navigation Concepts
primary and
secondary
navigation  Primary and Secondary Navigation
elements in a
Web site.
7.5 Identify the Lesson 7: Navigation Concepts
benefits of
guided site
navigation.

516
 CIW – User Interface Designer

 Navigation Elements
7.6 Given a Lesson 7: Navigation Concepts
scenario, create
a navigation
hierarchy for a  Navigation Conventions and Principles
Web site.
 Lab 7-2: Creating a navigation system checklist
7.7 Given a Lesson 7: Navigation Concepts
scenario, create
a navigation
action plan for  Creating a Navigation System
a Web site.
 Lab 7-3: Optimizing the navigation system of your
company site
Domain 8: Designing an Interactive Web Page User Interface
8.1 Identify Lesson 8: Designing and Developing a Professional Web Site
why
prototyping is
so important.  Why is Prototyping So Important?

8.2 Explain Lesson 8: Designing and Developing a Professional Web Site

common
patterns of user
activity on  User Interface Design Patterns
interfaces,
including
breadcrumbs,
progressive
disclosure, and
pattern
libraries.
8.3 Optimize Lesson 8: Designing and Developing a Professional Web Site
the "look and
feel" for a site.
 Optimizing the look and feel of a Web site
 Lab 8-1: Optimizing the look and feel of your
company Web site
8.4 Identify the Lesson 8: Designing and Developing a Professional Web Site
importance of
forms for user
input within a

517
 CIW – User Interface Designer

user interface
using best  Focus on Web Forms
practices.
8.5 Explain Lesson 8: Designing and Developing a Professional Web Site
how a form in a
Web page
should be  GET and POST
processed to a
database.
8.6 Identify an Lesson 8: Designing and Developing a Professional Web Site
appropriate
framework for
a Web site.  Web Framework

8.7 Describe Lesson 8: Designing and Developing a Professional Web Site

how UI library
elements are
used to create a  User Interface Libraries
Web site.
8.8 Identify a Lesson 8: Designing and Developing a Professional Web Site
content
management
system to create  Web Content Management Systems
a Web site.
8.9 Identify Lesson 8: Designing and Developing a Professional Web Site
templates and
themes.
 Lab 8-2: Choosing a CMS theme template
8.10 Compare Lesson 8: Designing and Developing a Professional Web Site
various site
publishing
tools, including  Additional Web Development Tools
FTP, HTTP and
vendor-specific
tools.
8.11 Choose a Lesson 8: Designing and Developing a Professional Web Site
Web host and
domain name
for your site.  Web Hosting Services and Domain Names

 Lab 8-3: Choosing a Web hosting service and domain

name
Domain 9: User Interface Design and SEO Strategies

518
 CIW – User Interface Designer

9.1 Test a user Lesson 9: Site Publishing, Maintenance, Security, and SEO
interface, Strategies
including
HTML5
validation,  Making Sure a Web Site is Ready to be Published
quality
assurance,  Lab 9-1: Making sure your Web site is ready to be
security, focus published
groups.
Validate the
site code.
9.2 Explain the Lesson 9: Site Publishing, Maintenance, Security, and SEO
tasks required Strategies
to properly
maintain a Web
site.  Maintaining a Web Site

9.3 Define Lesson 9: Site Publishing, Maintenance, Security, and SEO

search engine Strategies
optimization
(SEO),
including the  Search Engine Optimization (SEO)
relationship
between SEO
and Internet
marketing.
9.4 Explain the Lesson 9: Site Publishing, Maintenance, Security, and SEO
relationship Strategies
between written
Web site
content and  SEO and Written Site Content
SEO.
9.5 Given a Lesson 9: Site Publishing, Maintenance, Security, and SEO
scenario, Strategies
explain SEO
strategies for
mobile apps  SEO and Mobile-Friendliness
and data.
9.6 Describe Lesson 9: Site Publishing, Maintenance, Security, and SEO
how metadata Strategies
is used in SEO,
including the
<meta> tag,  SEO and Metadata
document
identification,
search engines,

519
 CIW – User Interface Designer

delayed file  Lab 9-2: Creating an SEO strategy for your company
change.
site

520