Web Design That Connects

No two people have an identical view of the World Wide Web. Depending on who you ask, the Web can be entertaining, colorful, informative, and so on. Almost everyone agrees that it should be easy to use. So why is so much of what's on the Web confusing, uninformative, and difficult to use? The short answer is this: Poor design.

When we started designing and creating Web pages, you couldn't actually do very much designing. HTML hadn't evolved to the point where we could control more than the size of the text and the color of the background. For those of us who came from the print world, we initially found this confining, but soon learned that HTML's (and the browsers') limitations were a sort of blessing in disguise: Pages loaded quickly, and you weren't annoyed by unsolicited movies, audio, and other things that slow the page-loading process. As a result, web pages were actually usable via 28.8k modems.

As the browsers and HTML evolved, designers felt that because they could do something, they had to do it. The old acronym K.I.S.S., which stands for "Keep It Simple, Stupid," seemed to be forgotten. As modems became faster, designers found more ways to suck up that extra bandwidth. In addition, good grammar, punctuation, and organization of documents increasingly took a back seat to the way a Web site looked.

We've always been "bandwidth conservatives," meaning that we want a darned good reason to wait for a page to load. We know that most people think the same way. This doesn't mean that pages have to be boring or drab, but they should be appropriately designed with the user in mind. We also believe that the content is still at least as important as the presentation. If you don't have a message to convey, then there isn't much point to a Web site, regardless of whether it's plain or fancy.

It all boils down to functionality and navigability. The web sites we design do what you need them to do: carry your message, convey your information. In addition, we design sites to be easy to navigate because we have no reason to think someone would visit any Web site unless they had a compelling reason.

Design Examples

Note that some of the samples are presented as GIF or JPEG images, since some of the projects were Netscape-centric, and don't translate to Internet Explorer. Also note that links have been intentionally deactivated.

VRWorld Camera Technologies Web Site

This site is aimed at auto racing enthusiasts who want to be able to record their races from inside the cockpit, and from as many as four different viewpoints. The site is very straightforward, with a form for subscribing to VRWorld for update information. Cascading Style Sheets and CGI-based form handling are included in the design.

Leonardi Consulting

A leading IT Consulting company wanted a clean, concise web presence that conveyed "business" and without clutter and slow load times (when your servers are down, time becomes a critically scarce commodity, as does patience).

PalmSource Online Store Design Project

After we designed PalmSource's online store, Palm re-absorbed them. They got PalmSource and the design--but then they built the site in-house.

Avery's Of California Retail Store Web Site

A high-end gift and crystal store, Avery's has a tradition of customer service and did not want to sell online, owing to long relationships with many customers who rely on their expertise. The design uses JavaScript and DHTML extensively to load quickly and to navigate smoothly.

Rivera Research & Development Web Site

This was among the first web sites for a guitar amplifier manufacturer. It went live in 1996 and featured a newly designed logo, as well as buttons that looked like the knobs and switches on Rivera amplifiers. This was pre-CSS, so it was built to HTML 3 specs. In fact, it was designed to run in AOL's browser.

Zon Guitars CD-ROM

Our design goal was initially to build an online "calculator" so that dealers and customers for Zon Guitar's unique instruments could "build" a bass guitar to their specifications, choosing woods, finishes, hardware style, and so on. Then we thought we could expand on it, make it available as a CD-ROM and include price lists, Zon's User's Guide, press releases, catalog sheets, and more. Everything can be used online, as well as sent out via mail. Costs are contained, and updates can be made at any time.

Zon Guitars

The color and font choices, as well as the decorative initial, were selected to match Zon's recently designed brochures and letterhead. The site was designed to run in the lowest common denominator of browsers at the time, AOL's browser.

Sharon Ferguson Studio

Artist Sharon Ferguson enhances photographic images with hand-coloring techniques. The requirements were simplicity, readability, and straightforwardness.

Santa Cruz Guitar Company

The look was intended to be straightforward and earthy, with an emphasis on wood, since Santa Cruz Guitar Company specializes in some of the finest handmade acoustic guitars. Again, since many of the audience were expected to use AOL as their path into the Internet, the HTML and design were kept very simple and straightforward.

LogicTier PCC Intranet Site

An extreme example of usability driving design: This website was for internal use by the Performance Command Center (fancy name for network operations center) engineers, who had to identify and resolve problems relating to customer sites within 15 minutes. Therefore, the last thing they needed was a slow-loading, graphics-heavy page, or to be digging for the information.

The layout is simple, and it was clearly not designed for printing. Instead it is purely web-based and takes advantage of frames and Dynamic HTML to speed the user experience. Except for the logo, no images are used. This makes the page load rapidly, whether it is being accessed locally or remotely, whether through T1 or dialup at 28.8k. Colors were intentionally chosen to not conflict with alert colors (red, green, orange, yellow, and purple) that were shown on large-screen status displays in the room where the engineers monitored customer sites.

Although intended for cross-platform use, the primary audience (mostly engineers on Sun workstations or Windows NT machines) used Netscape Communicator as their browser. In most parts of the page, font sizes have not been selected, allowing the engineers to set their own font preferences.

Scrolling messages are intended to bring updated news to the engineers, including scheduled outages and backups, power- and weather-related alerts, etc.

Customer sites are organized along the left side. Originally, they were to be in a table in the main window, but as the number of customers increases, the table would change, altering the "expected" location of each link. Instead, the Customers list has an auto-scroll, which will introduce a scrolled list when the roster increases sufficiently. When a customer's name is clicked, a new window is opened. This allows engineers to have multiple customers' sites opened simultaneously for comparison, or multiple remediations.

The horizontal bar along the top navigates the engineer to important information that is of a global nature, rather than specific to one customer. Mousing over each of the links provides a DHTML-created small window with an explanation of the link. Clicking any link here brings up a new window, enabling printing of the pages.

Information organized in the largest window launches new windows. This information is "infrastructure," and is accessed nearly as often as the other information connected in this site.

Because the site was accessible by the whole company, information for general consumption was organized into a single section labeled About The PCC. This includes standard operating procedures, a contact link, etc.

W399 - Intranet Portal At Netscape

This site was intended for Netscape Communicator users only, and therefore relied heavily upon Netscape-proprietary tags for layers. Its target audience was over 3,000 users.

Button shapes and a subtle background texture helped users remember locations of items linked from this page. Mouseover flipping images were not used because of strong negative reaction to them in previous designs ("I know where my mouse is pointing, so I don't need something else to tell me," was a common complaint).

Timing functions make a red arrow labeled Phonebook Now Contains AOL info disappear after a few minutes, as well as AOL and What's new triangle buttons. Power Tips (lower left) rotate through a series of tips, and pop up a new window with its own navigation.

The Phonebook Search/Intranet Search toggles on click to select one or the other. It was linked via CGI to an LDAP-based directory server.

Information is organized by function, where appropriate ("How Do I?"), AOL-specific ("AOL Info"), forms ("Where's That Form?"), and odds and ends (the bottom of the middle column). Along the bottom are the most popular forms, and along the right navigation stack are links to major organizations within Netscape.

The next-generation design for W3 was called PointA, which was intended for use by all of AOL/Netscape/CompuServe's employees.

Meridian Phones Web-Based Training

It was no secret that nobody would read the phone's manual, so a self-contained web-based training module was developed. This used Netscape's Layers, so it was clearly intended for Netscape's captive audience. Mousing over any of the links on the left side, or any of the buttons or the display on the image of the phone brought a breeze synopsis of the item/function into view in the phone's display window. Clicking on any link or object on the phone brings a full definition with tips on using the function, below the image of the phone. The example shows what happens when the "Conference" button is clicked.

Netscape Voice Services Home Site

This page was designed for the slowest of connections, and still it uses DHTML to pop small windows with explanations of each item on the page. Mouse over a piece of text, and information appears. Click, and you go to the desired page. Only the blue-and-black logo relies on graphics. The rest is CSSP. Note, too, that there are no underlined links, since everything on the page is a link. This helps to simplify reading/comprehension, and gives the page a cleaner, more organized look.