A thick Web design book without glossy paper and pictures!
A thick Web design book without glossy paper and pictures! Who would have thought it would be published? That’s exactly what I set out to do a few years back and it seemed to make sense to enough readers that now it has even been massively updated. Why engage in such a fool’s errand? Simply because there are plenty of Web design books out there that provide color snapshots of well-implemented sites or short discussions of the cool features in today’s trendy sites. However, given the fluid nature of the Web, the interesting sites have often changed by the time the ink has dried on the pages, leaving only a paper record of what the site used to be like. Worse yet, what is left only tells part of the story. It often hides the usability problems, the technical execution problems, and the slow loading pages. Even so, I often turn to such resources as they provide a great deal of visual inspiration. But they tell only half the story—and I will try to tell the other half in this book.
The goal here is to talk about what makes sites work beyond the trends of the latest font or visual treatment. Usability will certainly be a major concern, but so will correct construction. I’ll try to speak from the experience I gained from building hundreds of sites over the years with my firm. Some of the projects worked well and others didn’t, and I found that I learned not only from my successes, but also from the failures of both my own projects and those I have observed or rescued. Experience is truly the best teacher in an industry as young as Web design.
I’ll try to make sure to teach the fine balance between designer wants and user needs, between form and function, and between uniqueness and consistency, all while respecting what is possible to execute in the chaotic medium known as the Web.
After reading this book, you’ll truly appreciate how Web design is a fluid mixture of art and science, inspiration and execution, and ultimately, of frustration and elation. You may excel on the visual side of a site only to fail in the technology or delivery aspects. Web design is all-encompassing and the investment in understanding deeper medium and technical issues will pay huge dividends in future projects.
Yet as you read this book, you might not always agree with what I have to say. You may even find that some of the rules and suggestions are not perfectly consistent. However, that may be the point—to get you to think and not dismiss something out of hand. Instead, ponder why such rules and suggestions were developed before you throw caution to the wind. Great designers, regardless of medium, bend or break established rules on purpose. Real breakthroughs rarely come due to ignorance or arrogance.
Unfortunately, I won’t be able to guarantee a proven step-by-step process that ensures a great Web site. Some things really do take practice. Building numerous sites and browsing even more sites is required to excel at Web design. However, I can say that if you do read this book, you’ll have at least half of what you need to make great sites. The rest will be up to you and your creativity. So get out there and show the Web what you can do!
What is Web Design ?
Most discussions of Web design get off track in short order, because what people mean by the expression varies so dramatically. While everyone has some sense of what Web design is, few seem able to define it exactly. Certain components, such as graphic design or programming, are a part of any discussion, but their importance in the construction of sites varies from person to person and from site to site. Some consider the creation and organization of content—or, more formally, the information architecture—as the most important aspect of Web design. Other factors—ease of use, the value and function of the site within an organization’s overall operations, and site delivery, among many others—remain firmly within the realm of Web design. With influences from library science, graphic design, programming, networking, user interface design, usability, and a variety of other sources, Web design is truly a multidisciplinary field.
Defining Web Design
There are five areas that cover the major facets of Web design:
- Content This includes the form and organization of a site’s content. This can range from the way text is written to how it is organized, presented, and structured using a markup technology such as HTML.
- Visuals This refers to the screen layout used in a site. The layout is usually created using HTML, CSS, or even Flash and may include graphic elements either as decoration or for navigation. The visual aspect of the site is the most obvious aspect of Web design, but it is not the sole, or most important, aspect of the discipline.
- Delivery The speed and reliability of a site’s delivery over the Internet or an internal corporate network are related to the server hardware/software used and to the network architecture employed.
- Purpose The reason the site exists, often related to an economic issue, is arguably the most important part of Web design. This element should be considered in all decisions involving the other areas.Of course, the amount each aspect of Web design influences a site may vary according to the type of site being built. A personal home page generally doesn’t have the economic considerations of a shopping site. An intranet for a manufacturing company may not have the visual considerations of a public Web site promoting an action movie. Precisely what is meant by the expression “Web design” seems to be fluid; our discussion must take this into account, but at the same time provide ideas concise enough for the designer to keep in mind at all times. We’ll start first with abstract definitions and get more concrete as we move on.
The Web Design Pyramid
One way to think of all the components of Web design is through the metaphor of the Web pyramid shown in Figure 1-1. Content provides the bricks that build the pyramid, but the foundation rests solidly on both visuals and technology, with a heavy reliance on economics to make our project worth doing.
As Web designers, we try to plan our sites carefully, but construction is difficult. The shifting sands of Web technology make it challenging to build our site; construction requires teamwork and a firm understanding of the Web medium. Even if we are experts able to construct a beautiful and functional Web site, our users may look at our beautiful construction with puzzlement. Designers, or their employers, often spend more time considering their own needs and wants than those of the site’s visitors. Our conceptual Web pyramids may become too much like brick-and-mortar pyramids—impenetrable tombs that leave us wondering if the users who strike out over the Web to reach our monuments can even find the door. Do they even understand the point of the site?
While Web development challenges aren’t quite on the level of those faced by the ancient Egyptians, building a functional, pleasing Web site that can stand the test of Internet time is certainly not easy. The pyramid provides a simple way for designers to think of all aspects of Web design in interplay, but does little to provide a deeper understanding of the Web medium.
The Medium of the Web
While the Web pyramid analogy is a very abstract way of describing Web design, it is a useful tool for showing the interplay of the various components of Web building. A more practical way to discuss Web design is to think of the various components of the Web medium, as shown in Figure 1-2.
Today’s Web sites are primarily a basic client-server network programming model with three common elements:
The server-side This includes the Web server hardware and software as well as programming elements and built in technologies. The technologies can range from simple CGI programs written in PERL to complex multi-tier Java based applications and include backend technologies such as database servers that may support the Web site.
The network The network describes the various connectivity elements utilized to deliver the Web site to a user. Such elements may be the various networks on the public Internet or the private connections within a corporation—often dubbed an intranet.
Other times users can post information for site owners or even other users, creating more of a multi-way communication path, as illustrated here:
Types of Web Sites
Users tend to view Web sites, and thus Web site design, by the function of the site or by its visual appearance. It is important to be able to describe sites this way; however, there are many more ways to categorize them. While the possible categories of sites may appear endless, we can safely group sites in a few general ways. We’ll start first with the abstract and then move to visual categorizations.
First, consider if a site is information focused or task focused. Sometimes we may describe this distinction as one between a site that is document-centered and one that is application-centered. Document-centered or informational sites provide information for users, but they provide very limited interactivity (other than allowing the user to browse, search, or sort the information presented). Sites that are task or applications oriented allow the user to interact with information or accomplish some task, such as transferring funds from a bank account or buying a new sweater. Hybrid sites do a little of both; these are becoming more common as the line between information and application blurs. Figure 1-3 plots the continuum from a simple static document-oriented site (often called a “brochureware” site) to full-blown software applications. This abstract grouping suggests that there is a transition from more document- or print-oriented Web sites to more interactive programmatic Web sites. This is indeed true; the intersection between the two philosophical camps is a source for much of the contention—and innovation—in the Web design community.
Another way we might group sites is within the following broad categories:
- Informational sites These sites provide information about a particular subject or organization (the “brochureware” sites). These are the most common Web sites on the Internet and often take on aspects of the other site categories over time.
- Transactional sites This type of site can be used to conduct some transaction or task. E-commerce sites fall into this category.
- Community sites These provide information or transaction-related facilities, but focus on the interaction between the visitors of the site. Community-based sites tend to focus on a particular topic or type of person and encourage interaction between likeminded individuals.
- Entertainment sites These sites are for game playing or some form of amusing interaction, which may include transactional, community, and informational elements.
- Other sites Included here are artistic or experimental sites, personal Web spaces such as Web logs (also called blogs), and sites that may not follow common Web conventions or have a well-defined economic purpose.
We might also group sites based upon the organization that is running, or in some sense paying for, the site. Within this type of categorization we see five major groupings:
- Commercial A site in this group is built and run by an organization or individual for commercial gain, either directly through e-commerce
or indirectly through promotion for some off-line purchase of goods or services.
- Government This site’s parent entity is ultimately a government organization, and the purpose of the site is to satisfy some social or legal need.
- Educational This type of site’s parent entity is some educational institution (perhaps government related), and it is used to support learning or research goals.
- Charitable A charitable site exists to promote the goals of a nonprofit organization or the charitable activities of an individual or organization.
- Personal The site exists at the sole discretion of some person or group for any number of reasons, usually as a creative outlet or form of personal expression.
Categorization can be difficult. For example, educational sites might really fall under the governmental category. Some sites in the personal category may arguably belong in the charitable or commercial group, depending on the reason for the person putting the site together. Now we turn to the more visual characteristics of sites, with a few sample categories of sites commonly seen on the Web.
As we group sites visually, we may see a range from those which rely more heavily on text and those which focus more on graphic presentation or imagery. The four most common design schools on the Web are:
- Text oriented These are sites designed with a focus on textual content. Such sites, as shown in Figure 1-4, are relatively lightweight, download-wise, and often somewhat minimalist in design.
- GUI style These are sites that follow certain graphical user interface (GUI) conventions from software design, such as top-oriented menu bars, icons, and pop-up windows. GUI-oriented sites range from simple GUI devices added to a primarily text-oriented site to full-blown Web applications with customized user interface widgets. Figure 1-5 shows some examples of GUI style Web sites.
- Metaphorical Metaphor sites borrow ideas from “real life.” For example, a site about cars might employ a dashboard and steering wheel in design and navigation. A metaphor-designed site, as shown in Figure 1-6, tends to be extremely visual or interactive. This may be frustrating to some users and engaging to others.
- Experimental Experimental designs attempt to do things a little differently than the norm. Creativity, unpredictability, innovation and even randomness are often employed in sites following the experimental design style.
Of course, on the Web we find mixtures of form or potential new categorization of sites. For example, how would you categorize a portal site, such as the one shown in Figure 1-8, that provides a wealth of content, navigation choices, and even community related-facilities in a single page? This is certainly a design style that is used in a great deal of sites. We see the potential rise of other design categories when we look at Web site genres such as e-commerce sites, particularly strict “catalog and cart” sites, as well as online personal journal sites called “Weblogs” or “blogs.” We’ll take a closer look at these design ideas in later chapters.
A Clearer Definition of Web Design
So, after all this discussion, what exactly is Web design? It is obviously a very user- centered multidisciplinary design pursuit that includes influences from visual arts, technology, content, and business. A succinct definition follows.
Web Design: A multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but not limited to, technical development, information structure, visual design, and networked delivery.
Because Web design is so multidisciplinary, it is often appropriate to pull ideas and theories from related fields. Indeed, we’ve been doing that even in the very first pages of this book. Some people, however, take this approach a little too far, developing their sites in a manner similar to print pieces or adopting so many software GUI interface conventions that the user becomes confused. While Web design borrows heavily from other design pursuits, there are significant differences. For example, the medium is very different than print because more function is provided—not unlike software. Delivery issues and content effects make Web sites different from traditional software applications as well. Web design isn’t just adoption of old ideas. It’s something altogether new.
We shouldn’t say the Web is totally different either. There are plenty of people who do that as well. The Web is so revolutionary, they say, that none of the old rules hold. This is complete nonsense. Despite the proclamations of pundits, new media forms have always adopted conventions from other forms and invented new ones of their own. Furthermore, no new form has completely eliminated any other. Radio, magazines, newspapers, television, and other entertainment media all continue to exist in some form or other despite emerging technologies and new media forms. The Web certainly isn’t so new that we should throw out any valuable concepts we learned before. It does, however, have its own principles. We should strive to understand other media design concepts and modify them to fit the Web. The rest of the introduction will present some of the themes of Web design and conclude with a “roadmap” for the rest of the book.
Web Design Themes
When discussing Web design, we see similar themes come up over and over again. Whether it’s the political struggle between a corporation’s marketing department and information technology group over site ownership, or a graphic designer trying to convince a client of the appropriateness of a particular look or multimedia technology, these themes are at the heart of the matter. These issues often result in rather heated discussions among designers, as well as between designers and their clients both inside and outside corporate Web teams. While there is no simple answer to some of these issues, they are relatively easy to describe.
Generally the major themes behind modern Web design include:
- Designer needs versus user needs
- The balance of form and function
- The quality of execution
- The interplay between convention and innovation
In the abstract sense, these themes are not at all unique to the Web medium. Artists like Leonardo DaVinci certainly struggled at times to balance the desires of patrons and even his viewing public with his own needs. Commercial artists producing something like a magazine advertisement or billboard have to balance the demands of visual look with successful and clear communication. Execution varies in any discipline, but in one as young as Web design, the effects are more evident. Lastly, the rules of convention and the desires of innovation are as common as the struggle of a young person rebelling against convention, the middle age designer discovering the wisdom of the masters, and the old designer trying to rediscover his or her innovative youth. Despite the general nature of these themes, their specific details vary with each medium. It will be valuable to introduce each here before we encounter them later on. We start with the most important issue first: user-centered versus designer-centered site design.
A common theme of Web design is the focus on users. Unfortunately, a common mistake made in Web development is that, far too often, sites are built more for designers and their needs than for the site’s actual users. Always remember this important tenet of Web design:
Rule: YOU are NOT the USER.
What you understand is not what a user will understand. As a designer, you have intimate knowledge of a Web site. You understand where information is. You understand how to install plug-ins. You have the optimal screen resolution, browser setup, and so on. When you build your site around your own visual characteristics and skill levels, you often will confuse the actual users of the site. You must accept the fact that many users will not necessarily have intimate knowledge of the site you have so carefully crafted. They may not even have the same interests as you.
Given the importance of the users’ interests and desires, it might seem appropriate to simply ask the users to design the site the way they want. This seems to be a good idea until you consider another basic Web design tenet:
Rule: USERS are NOT DESIGNERS.
Not everyone is or should be a Web designer. Just as it would seem foolish to let moviegoers attempt to direct a major motion picture on the basis of their having viewed numerous movies, we should not expect users to be able to design Web sites just because they have browsed a multitude of sites. Users often have unrealistic requirements and expectations for sites. Users will not think carefully about the individual components of a Web site. In summary, users are not going to have the sophisticated understanding of the Web that a designer will have.
That said, the key to successful, usable Web site design is always trying to think from the point of view of the user. User-centered design is the term given to design that always puts the user first. But what can we say about users? Is there a typical user? Does a “Joe Average Internet” exist that we should design our sites for? Probably not, but we certainly should consider certain traits, such as reaction times, memory, and other cognitive or physical abilities, as we design sites. An overview of cognitive science helps us understand basic user capabilities; we will discuss this topic further in the next chapter. Remember, however, that while users may have similar basic characteristics, they are also individuals. What may seem easy to one user will be hard for another. Sites that are built for a “common” user may not meet the needs of all users. Power users may find a site restrictive, while novice users find it too difficult. Users are individuals with certain shared capacities and characteristics. Sites should take account of the relevant differences while focusing on the commonalities, as stated by the following Web design tenet:
Rule: Design for the common user, but account for differences.
Lastly, we can see that the differing needs of the user and the designer raise an issue of control. Control over a visit to a site is an unwritten contract between the designer and the visitor to how the experience will unfold. Often, sites provide little user control, forcing the user to view content in a predetermined order with little control over presentation or technology. Rarely do we find the exact opposite occurs, where the site gives users ultimate control over visitation, allowing them to choose what to see and how to see it and even allowing them to add to or modify the site’s contents. However, most sites do allow the user some choices and the ability to control experience, but always under the influence of the designer’s requirements. We’ll revisit some of the general ideas of control and user experience throughout the book.
Form and Function
A key problem with Web design is that sites often do not balance form and function. Under the influence of modernism, many designers have long held that the form of something should follow its function. Consider that the form is one base of our Web design pyramid analogy, while function is the other. Function without form would be boring: while the site may work, it won’t inspire the user. Conversely, even if the form is impressive, if the function is limited, the user will be disappointed. There needs to be a clear and continuous relationship between form and function. Put simply, the form of a site should directly relate to its purpose. If the site is marketing-driven, it might be very visual and even incorporate heavy amounts of multimedia if it helps to accomplish our goals. However, if the site is clearly a task-based one, such as an online banking site, it might have a much more utilitarian form. Of course, determining the appropriate form for a site requires that the function of the site be clearly defined. Unfortunately, for many Web sites the ultimate function of the site isn’t always clearly conveyed. Even worse, the relationship of form and function for the site is not always clearly established.
Rule: Make sure the visual form of a site relates to its function.
It is likely that there will be a continual struggle between form and function, despite the fact that in nearly all cases the only side the designers should be on is that of their users. In fact, there really need be no disagreement. Form and function do not always have to fight; they complement each other nearly all of the time. A nice-looking design makes a functional site much better, while great functionality will make up for a deficiency in “look and feel” over time.
Seasoned designers understand this balance and practice the idea of holistic design by following the rule that the correct execution and integration of all facets of the site will outweigh the value of a single component. In fact, the real difference between a Web designer and a mere Web builder is that the former is capable of not only executing the individual parts of a site correctly but can also breathe extra “life” into the project as a whole.
Execution: The Easy Part?
Rule: A site’s execution must be close to flawless.
Why are execution problems rampant in Web sites? Simple: this is a young industry with changing standards. Consider state-of-the-art Web design from a few years ago and you’ll see the difference. Further, most Web professionals often didn’t have the background in computer science, networking, hypertext theory, cognitive science, and all the other disciplines that might affect the quality of the produced site. Some naïve designers even ignore the inherent differences in the emerging Web medium by not addressing problems of varying resolutions, color reproduction, bandwidth limitations, and so on. A Web designer who overlooks these types of technical characteristics of the Web is like the print designer who will not admit that ink bleeds on paper—great Web designers must know and respect the medium, which includes everything from browsers and bandwidth to programming and protocols.
Rule: Know and respect the Web and Internet medium constraints.
So, given the environment of Web design, we end up with today’s assortment of sites, from those that are standards-compliant, lightweight, user-friendly, informational, and task-rich to those that are browser-specific, unusable, or multimedia bandwidth hogs touted as “next generation” designs. Yet does this comparison suggest that all good sites are the same? Not necessarily.
Conformity versus Innovation
Many Web designers feel that design theories and site design categorization increase conformity and stifle innovation. It is true that rigidly following design templates such as “top-left-bottom” layout or adhering to such common practices as putting organizational logos in the left corner of a Web page will limit some page design choices; designers have misunderstood the reason for these conventions. Consider that, while it might be possible to design books with triangular pages, few books are done this way. The cost of production, the awkwardness, and the reader’s unfamiliarity with such a shape could make a triangular book a risky proposition. Most books are square or rectangular and have a distinct cover, title page, table of contents, chapter breaks, and so on. Are these conventions stifling to the book designer? Few would say they are; a great deal of creativity is still possible within the given constraints of a modern book. The same should be said for Web design. Graphical User Interface (GUI) design for software programs has influenced what is considered standard for Web user interfaces, but new ideas have also emerged. Designers need to respect conventions of navigation choices, navigation placement, colors, and so on. These ideas do not limit design; they simply constrain sites to recognizable forms so that users do not find the sites they visit to be completely different.
Rule: Appropriately respect GUI and Web interface conventions.
Learning Web Design
Reading a book like this is useful in uncovering the theories and commonly held practices of Web design, but more is required if you are to ever achieve mastery of Web design. Always remember that learning the basics of Web site development is not necessarily difficult, but do not underestimate the time and effort it will take to become an accomplished designer. This is no different from carpentry, painting, writing, illustration, or just about any skill you can think of. So make sure you set reasonable expectations for yourself as you learn.
One useful approach to learning Web design is by evaluating the efforts of others. We can look at what is done right and what is done wrong and try to emulate the good and fix the bad. Beware, however: it is not always easy to evaluate and compare site designs. Far too often people compare that which is not comparable. You would never compare a video game with a word processor, yet both are software programs. Why, then, do we compare experimental sites with corporate sites, or e-commerce sites with Web design agency portfolio sites? Far too often, this type of comparison is done in
the Web design community. Sites and books put forward a variety of sites as absolute yardsticks of great design. Yet, obviously, not all sites will have the same issues as those that the “excellent design” rules were derived from. What is cool or clever for one site may be an absolute disaster for another. A great example is the splash page shown in Figure 1-9. A splash page is the term used to describe an entry page to a site—one that comes before the actual home or core page of the site.
A splash page is often used to set the tone for the site and may consist of an interesting animation, preloading sequence, or some form of “installation” information in regards to what technology is required or what the user’s expectations should be. While splash pages can be effective, very often they are not. The mere mention of the phrase “skip intro” results in hearty chuckles among many designers. Yet the much maligned splash page may just happen to have some uses. Some movie and entertainment sites have found such sequences to be an integral aspect of their sites. Just like a movie without opening credits, these sites would be incomplete without a splash page. This simple example illustrates the most dangerous problem facing those learning Web design— namely, assuming there is only one form of good Web design. Often, it seems that the only absolute in a fluid discipline like Web design is that there is no absolute.
Rule: There is no form of “correct” Web design that fits every site.
As you read this book, you’ll notice that various rules and suggestions are presented. These are fairly safe and well thought out, but their real value comes from understanding the motivation for them, not from blindly applying them. The importance of this distinction will become apparent once you see that many of the “rules” seem at odds with other rules. Exhibiting good judgment that strikes a balance between conflicts is
a key attribute of a great Web designer.
A discussion of site evaluations that attempts to cover all aspects of Web design from taste to technical implementation can be found in Chapter 5, and a checklist useful during such site evaluations is presented in Appendix B. Yet do not fall into the trap of becoming a professional critic. Certainly it is important to point out what not to do by finding flaws in sites or criticizing what is bad, but spending too much time discussing bad Web design may not be fruitful, particularly when you consider that there is no accounting for poor taste. It is easy to criticize, but it is much more difficult to take your acquired knowledge and apply it to a site of your own.
In the final analysis, the best approach to learning Web design is obviously by doing. Reading about site design theory or reviewing sites simply isn’t a replacement for building sites of your own. Yet before you set out constructing a site, learn the core principles of Web design as well as the building and evaluation procedures that will help you construct your Web sites well.
Pinning down exactly what is meant by the term Web design can be difficult. At best we can see that Web design is a multidisciplinary pursuit that consists of five primary components: content, visuals, technology, delivery, and purpose. However, theories of exactly how these components should mix together vary from person to person as well as project to project. Striking a fine balance between form and function, user and designer, content and task, and convention and innovation is the lofty goal of the Web designer. The good designer knows that scales should not tip too far one way or another and tries to avoid the absolutisms of “correct” Web design. Yet not everything in the field of Web design is so abstract—many specifics can be found. Correct mastery of the technical medium and knowledge of various details and conventions are mandatory for aspiring Web practitioners. We begin the discussion of the core aspects of Web design in the next chapter, which focuses on user-centered design.