33. Web design defined

Introduction    (click any heading below to return here)

Page and site design are covered at such a late point in the course in order to underscore their importance as well as to prevent getting the technological cart ahead of the horse. Now that you have acquired the technical skills necessary to author pages, it is time for you to learn how to design functional and attractive Web pages and Web sites.

This first lesson is an introduction to the difficult task of designing for the Web. We begin with basic definitions and describe the broad goals for Web design.

Web design overview

This chapter deals with the definitions and rationales of design.

1. Definition of Web design
2. Business planning
3. Business goals
4. Usability goals
5. Development goals

Web designed defined

You cannot appreciate the importance of this definition without some further information about design, but already you can see that Web design is by no means limited to choosing colors, graphics, typefaces, and photos. A great deal more is involved, and developing a well-designed site is hard work. The first step in learning how to do that work will be understanding each part of the definition, in turn.

Because the majority of Web sites are of a business nature (either profit or nonprofit), all design lessons will focus on business sites. The federal government is considered to be a nonprofit business.

The first piece of business is to discover what the terms "content" and "appearance" encompass. You were introduced to these two elements of design while you were learning about HTML and CSS. The point stressed at that time was the need to distinguish between content and appearance in page markup.

Content and appearance

By now you have seen quite a few Web pages. Some sites you thought were great looking, some you found particularly easy to use, and some were both great looking and easy to use.

Great looks are important, but not nearly as important as content. Just as clothing fashions change, Web page designs change to stay current with new trends. Later, you will visit some sites designed back in 1995, and you will probably agree that the fashion has changed. The content on a Web site, on the other hand, tends to change very little over time.

You are already aware that the Web has introduced its own jargon. One such term is Web team, which usually refers to a working group composed of experts responsible for content, art, and engineering. Content experts handle all the words, art specialists handle all graphics and colors, and engineers program the sites. If the programmers add or change any of the content, a business disaster can result.

Content is information. Without it you cannot start to design. Content-rich sites are far easier to design than sites built around little or no content. By now you may have developed a personal page, or even done so for a friend. If so, your first question to your friend was likely, "What exactly do you want on your page? " Until you got an answer, you did not get very far, because you didn't have enough content to work with.

Audience

If a site meets its particular needs, then it is relevant. When there is a good match between user needs and what a site offers its users, users sometimes hear their inner voice say, "I've found it! No more searching!" Most of you know how this feels.

Relevance always assumes an audience. For example, you know that the prices of textbooks and tuition are highly relevant to students (an audience). Similarly, rainfall is relevant to farmers (another audience), and so on. Different audiences have their own specific needs and expectations.

Understanding the site's audience is a key design issue. Just as in business you have to know your customers, in Web design you have to know the category of users your site is to serve.

The more precisely you can answer these questions, the better you can target your audience and fit a design to them.

Purpose

It is doubtful you would judge a Web page to be either "nice" or easy to use if you weren't interested in its particular function. If you ran across a site dealing with lawn mower repair while you were looking to purchase a refrigerator, you probably wouldn't stick around long enough to evaluate the site. It would be irrelevant to your needs, and you would click it off.

There are no functional equivalents of the general store on the Web -- or at least, no successful ones. Users look for particular sites that have what they want, and they quickly become irritated if they have to wade through sites and pages that do not have what they want. The more general the site, the more irritating it will be to use. Well-designed sites have specific aims; they are designed to make certain things happen.

• Increase online catalog sales by 5% in the 3rd quarter
• Increase average time on site to more than 2 minutes

Bad designs will result from letting development get ahead of planning. You should thoroughly understand the purpose of the site before any development begins. Well-designed sites have a focus because they have well-stated objectives.

Purpose (non-profits)

Admittedly the course focuses on Web development for making money in business. But there is a secret about organizations that are non-profit.

Major government agencies compete for their slice of the government budget. If an agency needs a budget increase of 10 million for a priority initiative, guess what? Some other agency looses that much. There really is no more money to be made. It is not possible to hold a money-making sale.

Philanthropic agencies give money away. Universities provide free grant money. Both require sales pitches formal written proposals.

Whether for-profit or not, the objectives of your outfit are why you are working so hard at it. Get those objectives accurately translated to the design!

Site Focus

It is expected for large companies to have a single home page or splash page that acts as a table of contents or jumping-off point for users. It is easier for us to remember and to type www.sears.com (you can just type sears and press Control+Enter) than www.sears.com/appliances/kitchen/ which would be the alternative. Home pages should support the company's image with attractive art as well as support user navigation.

As a Web designer for a large company site you might decide "specific site objectives" cannot be documented very well because the site's focus is too broad. Your best solution would be to break the divisions of the company into separate design jobs. Web design for Sears customer service, appliance sales, tool sales, repairs, and employment would be undertaken as different design tasks.

The overall appearance of a large site must be consistent on all pages to give users feedback on where they are. We refer to this as "visual coherence." You will learn more about this in the Usability and Navigation Module.

Checkpoint    (answer then click)

The definition of design has three components. Name them. Click the check point to confirm your answers.

• Specification of content and appearance
• for a particular category of users
• and for a specific objective of the site.

Designer Business Goals

Business planning

The three parts of the definition of design form a synergy: together, they are stronger than they are individually. Only if the three elements are well-coordinated can the impact of the design be potent. A significant change of content, for example, could render your site unattractive to the intended category of users, unless the overall site objectives were altered in tandem with the content. You must start with the three parts coordinated and be at pains to keep them coordinated.

The task of the site designer is specification of content and appearance for a particular category of users and a specific objective of the site.

Designing Web pages and sites can start only after you and your customer have agreed to (and documented) the three critical elements of the design.

Now that you understand how to start design correctly, learn about design goals. How will you know if you are designing well? Here are the major goals for business designs. Later pages describe the goals for usability and development.

Attract attention

Get noticed in a crowded Web. The same way magazine covers attract your eye at news stands, you should design to attract readers. Suggestion: note similarities of site designs that attract your attention. Do not stray too far from familiar good designs that work. Artistic aptitude (and training) is required to do well here. Use specialists. Buy and study The Web Design WOW! Book (www.peachpit.com/books/wow.html) if you want to go it alone.

Set message apart

Create an image and personality for the sites you design. Showcase distinctive company products and services using interesting layout, colors, graphics, typography and so on. Like logos, the personality of a site must not change very often or very far from its roots. Otherwise users would feel your message has changed. Examples of image/personality are conservative, contemporary, expensive, dependable, hip, high tech, and so forth.

Add value

Appearance of site connotes the value of its words. If you are impressed you stay around and read. If a company site is selling information services, for example, design to reflect the reputation of the company and its level of research professionalism. Think of a teenager's vanity site you might have visited -- the page probably didn't seem to have anything worth reading. Also, useful features that are convenient and easy to use makes the site more worth while. For example, a large retail chain home page design includes a "local store finder."

The usability and business goals of design are discussed next.

Designer Usability Goals

Usability means ease of use. This is a basic human factors topic. Good usability means satisfied visitors. Unfortunately, usability is a difficult objective for Web designers. One designer said "if the site is very easy to use then it was very hard to design."

Provide organization

This means two things. Organize the home page so users will find it useful and familiar. And arrange information in priority order, for example, items on sale should be moved higher on the page. Organization is very difficult, so be prepared to spend time reworking designs to improve organization. Some of the first retail sites were organized like the business: in an organizational chart. Not useful or familiar to retail customers. When you have multiple audiences for one home page, figuring out an organization can be daunting, so keep focused on each objective without compromising. For a retail site, you can always have separate home page paths for employees, investors, and job seekers without watering in these groups to the purchasing activities of your customers. A fast-track for each user is much better organization.

Impart selective emphasis

Levels of importance have to be reflected in your design. If retail sales from the site are a primary objective then emphasize sales features. Prominently show shop items on sale, shop by brand, shop by price range, and so forth at the top. In Web design jargon, "above the fold" means the top-most visible portion of a screen with no scrolling. Newspapers place headlines above the fold. Position information like "contact us with your comments" and "page updated on 12/18/2003" at the bottom of screens.

Create unity

Another way to say this is visual conformance or consistency. Different parts of a site can be unified if designed consistently with other parts. Make users feel they are still on your site. This lends readers a sense of familiarity and corporate identity. Style sheets help greatly (fonts, headings, margins, text size, colors). If you add graphic and photos, be consistent with size, special effects and so on. At the opposite end of design unity is careless design or chaotic design.

Make things easier

This is the very hardest goal to achieve, and it requires testing, revision, review and retesting cycles to accomplish. There is a rule that easy to use sites are really hard to design.

Another term for making things easier is "usability", a topic which has some very readable literature available. Buy the book Don't Make Me Think by Steve Krug and read it like Web scripture. Bookmark Jakob Nielsen's home page.

Look for usability tips and techniques later in this course.

The development goals of design are discussed next.

Designer Development Goals

These goals pertain to the development process. Design happens ahead of the development and the design stage is where production planning is carried out. Because software projects are frequently revised and improved, a good design provides the foundation for further work.

Improve production

Design saves production time in three ways. First, agreement on the unified site design means programmers can share style sheets and page templates; they do not have to re-invent. Second, design acts as a blueprint that makes teams of programmers productive; they have fewer decisions about "what to do and how it should look" since design is documentation. Third, production can move ahead on parallel tracks; art, content and engineering need not wait on each other to finish.

Simplify changes

Because an accepted design acts as a reference point, all future work can be based on the current design. It is much easier and better communication to make a point by saying "look how our site does this now, if we move that over here..." Because your design is always strictly organized, changes to subsections can be made in relative isolation of other sections. Programmers appreciate untangled logic, and design helps them organize their logic and keep sections of the page code independent of each other. Organized code usually means bug free code, or at least code that can be easily fixed.

Save money

You must have already sensed this from the discussion so far. The alternative to careful design is friction among developers, reprogramming, redrawn graphics, rephotographed images, and a mire of wasted time. In addition to these obvious development savings there is an even better reason to say "design saves money" here. In advertising (as in life, the saying goes) perception is reality. Web sites are all about perception. A site that looks sophisticated/important can charge more for its goods and services than a bargain-design site. A house with curb appeal sells for more, a well-dressed and well-spoken executive can ask a higher salary, and on and on. So the last design goal is a kind of capstone to the Web design rationale.

Checkpoint    (answer then click)

You have just read about the goals Web designers have. Why do designers need to achieve so many goals? Name all the goals. Click the check point to confirm your answers.