[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]
OK, big news flash here, in case you weren’t aware of it, but artists, even good artists, don’t necessarily know squat about graphic design. (Gasp!) Yes, true fact: art and design are two different skill sets, even though there is some cross over. Sorry if I’m stepping on any toes, but if you want proof, look no further than the endless array of horribly designed artists’ web sites already out there.
To make matters worse, traditional print designers, even good ones, don’t necessarily know squat about web site design. Again, it’s two different skill sets, though the overlap is much more extensive.
Print designers, if they know their craft, can specify a page design that turns out in print precisely as they designed it, with pinpoint placement of graphic elements, total typographical control and exactly specified colors.
The web, on the other hand, still offers very limited typographical control; color space and page size vary between operating systems and individual computers; and even web pages designed by pros, that once looked fine across the board, can go wonky with the newest release of the most popular browser from The Giant Software Company That Shall Not Be Named. The web is wiggly and squirmy, and designing for pages that can be different sizes and shapes on different computers is a little like eating Jell-O with a fork; it can drive stout-hearted print designers to madness and acts of desperation.
Alternatives
You have some of the same alternatives I mentioned in my article on Building your site, notably hiring a professional and using, or starting with and altering, existing page templates. I can’t give you a course in design here, but I can try to point out some important considerations.
Size and proportion
Here’s where web design gets all twitchy right off the bat. Unlike print design, you don’t know the final size or shape of the area in which your design will display; it varies from computer to computer among those viewing your site over the web. EEK! This understandably drives long-time print designers completely crazy, and they will very often make their pages un-web-like by freezing them at a set width and height, or popping them up in a specifically sized window, and otherwise trying to make them behave like print pages. This is one option if it makes life easier for you, but I think it’s better to approach a web page as a web page and take advantage of the fact that it can shrink and grow to accommodate different amounts of content. Web design has lots of advantages over print design, it’s not all disadvantages.
While you can’t predict the exact size in which viewers will be seeing your pages, you can predict the most likely “window”, based on statistics. Most people are viewing the web in one of several common screen resolutions. The most common, as measured in pixels, are: 1024 x 768, 800 x 600 and 1280 x 1024, in order of current popularity. These figures change over time as more people buy larger monitors. Up until a couple of years ago, I was designing for 800 x 600, but smaller monitors are giving way to larger and I now design sites to display comfortably in 1024 x 768, and try to nicely accommodate the way they will look in higher resolutions.
How big is that doggie in the window?
Taking into consideration typical “browser chrome”, the space taken up by the browser interface and all its wonderful widgets and tool bars, and allowing a little extra wiggle room, I work within a “safe” size of 980 x 550. The page can be longer vertically, of course, but that initial size before the user starts scrolling (if they take the trouble to scroll) is the most important. Try to keep your most important content, navigation elements, etc. “above the fold” in that window. (“Above the fold” is a reference to the front page of newspapers, in which the most important stuff has to be seen when the papers are folded in half on the stack.) You may want to leave more or less in terms of horizontal margins. On larger resolutions, the background will expand to fill out the difference.
Remember in designing your page elements that you don’t want to force part of your main image gallery display, or the gallery navigation, below the bottom of the window so users have to scroll to see or use it.
Would you like ice with that?
The content area of your design can either change width with the window width (“fluid”), be a set width, locked to the upper left (“ice”), or be a set width that floats to the center of the window, with the background expanding or contracting to either side (sometimes called “floating ice”). The first is the hardest to implement, the second the easiest, and the third is currently the most popular design structure.
Design elements
Think of a web page as a grid. You can make it as curve-u-licious as you want, but it’s going to have a rectangular grid underneath it, and you need to make your curves work within that structure.
Where to start
You’d be surprised at the number of high-end sites that are based on a few simple elements with some graphic design embellishments. Try starting with a top bar or banner, a horizontal space across the top of the site containing your “logo”, name or the name of the site, and maybe an image element. Under that arrange a navigation area, perhaps horizontal if your site is very simple, or a vertical column to allow for subsections and expansion, and a content area with your page heading, text and images. If you want you can tie the bottom of the page off with a horizontal footer, usually containing a copyright notice or contact information.
Consistency, consistency, consistency.
Ah-ha! you say. Consistency is the hob-goblin of little minds! Perhaps, but on the web, it’s the guardian of clarity and your best defense against confusing or discouraging your visitors. At any given moment after a visitor opens your site, they should be able to glance at page elements and know: What site am I on? What page within that site am I on; and where am I in relation to the other pages (or major sections) in the site?
Consistency means things like: every page should have the navigation in the same place and in the same form. (Don’t, for example, drop out the nav element for the page you’re on, or change its position. Highlight it, perhaps, but leave it in place and in the same order.)
Headings (page titles) and sub-headings should look the same, and be in the same position on every page. Sub-headings should be clearly subordinate to headings. If you have a footer, keep it consistent.
The exception
While there may be variation within your consistent page layout (a text page for information About the Artist will be different from a portfolio or gallery page, for example); the one page that can be dramatically different from the others is the home page, which acts much like the cover of a book or magazine. It should have some continuity, in that it should look like part of the same web site, but it doesn’t have to follow the same pattern as the interior pages, and in fact, should look different so users can distinguish it easily as the home page. It also serves like the lobby of a building, from which visitors can orient themselves.
Navigation
Here’s another area where the web is very different from print. In print you have page numbers and chapter headings that let readers know where they are and help them find something; on the web you must offer them clickable navigation as well. Some important points:
Put it somewhere users expect to find navigation (usually toward top or left).
Make it look like navigation.
Keep it consistent.
Ideally, highlight the navigation element for the page or section they’re in as a sort of “you are here” indicator.
Every page but the home page should have a link to “Home”, preferably as the first navigation element. Every page should have access to all of the major pages or sections. If you’re in a sub-section (e.g. “Portfolio”), every page in the sub-section should have access to every other page in that sub-section, as well as to the main site pages. Don’t make them use their “Back” button, or your own version of a “Back” button (like “Up” arrows, etc.). This is a web site, not a directory on your computer.
Pop this
I’m not a big fan of “pop-out” or “drop-down” menus. I think it’s a poor substitute for visible hierarchical menus. Lots of people love them, but then lots of people love Michael Bolton and Yanni, I’m just not one of them.
More info
For more on navigation concerns, see Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug. Start looking at sites you visit with an eye toward which ones are easy to navigate, and which are not, and see if you can understand why.
Color
Color can be as personal as clothing choice, and likewise will impact the immediate (and perhaps lasting) impression made on others.
There are a number of color utilities out there, many of then free, that are designed to help you choose “color schemes”, groups of colors that ostensibly work together. They are often accompanied by web sites where color schemes can be posted by users. There is a large list on the Web Developer’s Handbook. (Here’s an interesting variation for atists: Web Design Color Inspiration from the Masters based on picking colors from paintings.)
The most important piece of color advice I can give you is to remember the purpose of your site. Don’t choose a color scheme that will overwhelm, conflict with, or otherwise detract from the display of your work. This may often mean using low-chroma, neutralized colors or even grays, or choosing colors that compliment the predominant colors in your work. But, hey, if you think a background of electric green or baby-puke yellow will set off your work to best advantage, go wild.
The so-called “Web Safe Palette”
Back when web site design was a fledgling art, the major software companies were clueless about our need to access the palette of colors that would display reliably across different operating systems, particularly when one of them was often running on machines with a very limited ability to display colors. (Older Windows computers could often display only 256 colors.) So we were left with third party utilities to choose colors from the small palette of 216 colors common to the two systems. Now that almost all computers can display millions, or at least thousands, of colors, the major software companies are once again displaying their ignorance by acting as if the web safe palette is this wonderful web-aware feature they’re providing for you, when it essentially no longer matters! If you are trying to match the edge of a flat color in a graphic or Flash file with a background color set by hex code in the HTML, it can be helpful to use a color from the web safe palette; otherwise use the colors you want.
Different visions of the world
Be aware that your site will look different on Mac and Windows machines. They have a different “gamma” settings, and colors will generally look darker on Windows than on the Mac. Image editors like Photoshop and Fireworks have provisions for previewing your work in the other system’s color space.
Also be aware, very aware, that your fledgling site design can look fine in one browser, and fall apart in another. Though there are standards for how HTML and CSS should work, the engineers that write the browser code that interprets those standards in displaying your page often appear to live in a Bizzarro World where “rite am rong”. Whenever possible, test in different browsers. Impose on your friends who use a different operating system. I test in IE6, IE7 and Firefox for Windows, and Firefox and Safari for Mac. (Occassionally you may want to ensure compatibility by painting yourself blue and sacrificing a chicken to the Web Gods at midnight on a full moon in a bar-b-que pit that faces Redmond, Washington.)
Typography
If CSS has brought web design out of the stone age and up to Victorian levels of technological sophisitication, web typography is still in the medieval dungeons and is the domain of witches and demons. The problem is that your “live” text has to display in a font (typeface) that exists on the user’s machine. You can specify any font you want, but if the user doesn’t have it on their machine, the browser will default to whatever it can find, sometimes with unpredictable results. This is another thing that drives print designers crazy and I don’t blame them, it’s a terrible limitation that leaves very few font choices. The best universally installed fonts are Verdana, for sans-serif body copy, Trebuchet MS or Arial for sans-serif headings and Georgia for serif. In general serif fonts don’t read well at small sizes on the low resolution of a computer screen. Verdana, Trebuchet MS and Georgia were specifically designed for display on screen rather than in print. Avoid things like Times New Roman, and surpress any temporary possession by demons that may make you think about using Comic Sans.
I can’t give you a whole primer on web type, but I often use 11px Verdana for body copy, 12px Arial or Trebuchet for subheadings or text-based navigation elements. Your milage may vary.
Page headings and navigation elements can be created as graphics, allowing you to use any font and restoring full typographic graphic control to at least those areas. Be sure to use image “alt” tags in the HTML for those images for the benefit of search engines.
Don’t use more then three different typefaces.
Text columns.
Here is an area where some big-time web usability gurus (Jacob Neilsen are you listening?) fall flat on their faces, in apparent ignorance of one of the most fundamental rules of graphic design (and one that has been known for literally hundreds of years): human beings read text more easily if it is constrained to a certain width. The general rule is about two alphabets, 50 or so characters, which is approximately the width you’ll see in most hardbound novels. This is the primary reason that magazines and newspapers have columns, though selling ads is a close second, and in newspapers columns are broken down to even smaller widths to make it easier to sell small ads.
White space is your friend
More than that, it’s a page’s highway system and tour guide, the way you move someone’s eye around the page. White space is one of your most powerful design tools, and the proper use of it is one of the quickest indicators of high end design. (“White space” doesn’t have to be white.) Look at the most appealing professional sites and note the amount of space in the design that is “empty”. You’ll notice the same thing in newspaper and magazine ads. The really high end ones will appear to “waste” a lot of the very expensive ad space, but are actually using it to control your eye and attach importance to the highly focused message. Give your text columns plenty of room to “breathe”. Even artists who understand the concept of “negative space” in painting and composition may not grasp its importance in design. What is not there, Grasshopper, is often more important than what is there.
The elements of style (web version)
Make sure it’s clear what is and is not a link. Don’t use colored text except for links and headings. Never underline anything on a web page that is not a link. Use bold or italic (sparingly) for emphasis.
Don’t center your text! Unless the site is one big wedding invitation, never center anything that is not a headline. For some reason, perhaps exposure to too many Microsoft Word documents, a large number of people suffer from the delusion that centering text makes it look more professional, when in fact the opposite is true.
Don’t use italics for long passages, like centered text, it’s hard to read.
Inspiration
Like artists learning to draw by studying the masters, one of the best ways to learn about web site design is to look at existing successful designs. I’ll list some sites below that are large indexes of sites that someone thinks are well-designed. This, of course, is always a matter of opinion, but you will certainly find a higher percentage of well-designed sites here than on the web in general.
CSS Mania
CSS Beauty
CSS Tux
Stylegala
Netdiver
Styleboost
Wow Web Designs
Media Inspiration (categories for Illustrators, Painters, Sculptors, etc.)
And a big list (Under Creativity, CSS Showcases and CSS Galleries) of many more design inspiration sites on Web Developer’s Handbook, along with a ton of links to other web design and building resources.
Here are a couple of design resources for “stuckness” from The Crafted Webmaster.
Other Resources
In addition to the above links, I’ll send you back to the same resources listed in the articles on Planning your site and Building your site which have information relevant to design issues as well.
Next: Preparing images for the web
