Expert Advice on Web Page Design
Master these simple rules of aesthetics before designing your Web site.
by Zino Vogiatzis
n our July 2004 Crafts Technology column (p. 36), we addressed some of the technical aspects of creating individual Web pages. In this column, we'll cover some of the aesthetic techniques recommended in order to produce impressive Web pages.
Page layout
There are practically infinite layout possibilities depending on how you combine text, graphics and images on a Web page. Simply try some variations, but always give priority to the images of your work. They are the main attraction and they'll be the deciding factor. For example, when you have a long and narrow image you may have to put text next to it to make the whole page more functional and visually pleasing. A common-sense rule in Web design is not to have too much information crammed on a page or too much empty space. It's up to you to decide what page layout works best for you and your art in terms of aesthetics and user friendliness. No matter what your layout, be consistent so your visitor knows intuitively after a couple of pages where everything is and can focus on enjoying your art rather than trying to figure out how to use the site. The easiest way to do that is to create a typical page for every section and use it as a template by re-creating it.
Illustration by Tim Lee Page background
The page background is one of the most important choices in your page design as it sets the tone for the whole site and its look. Choose a neutral, muted background color that complements your art and avoid loud colors that interfere with it. Use the same color throughout your site. But if you have distinct categories of creations, you may want to differentiate each one with its own background color. Avoid using images for background — they make the page loading slower, they can make reading the page text very difficult, and they may repeat themselves several times to fill the page. Avoid visual cliches like flames for glass artists, wood paneling for wood artists, metal surfaces for metal artists, etc.
Text fonts
There are three font attributes you have to work with in Web design: type, size, and color. Unlike the printed page, not every font looks good and sharp on the screen. Jagged edges make many typefaces visually unappealing and tough to read. Stick with a sans-serif font in regular style that is relatively smooth on the screen like Arial or Verdana (the latter was actually developed specifically for the screen). If the font you use doesn't exist in your Web site visitor's computer, their browser will substitute the font with one their computer recognizes. By using a widespread font, you're assured the visitors will view your pages as you intended them.
• www.yahoo.com: go to Computers & Internet > Data Formats > HTML > Guides & Tutorials for a list of many online tutorials.
• www.webstyleguide.com: a comprehensive guide to Web design, very good for style and usability aspects of design.
• www.htmlgoodies.com: an extensive HTML guide that covers all technical aspects of design.
The font size you choose for your design is largely irrelevant on the Web. The viewers can change the font size in their browsers to suit their reading needs. You can fix your font at a specific size that cannot be changed by the viewer, but depending on the demographics of your visitors, you want to make sure they have the choice to adjust the font size to their comfort level for reading on screen.
The downside of that is that the page will look different depending on the size font your visitors use (bigger size fonts will expand the text). You can use a particular font size for your design, but check how your pages will look under different font sizes. Use the same size font for all your text and if you need to use bigger size text or elaborate fonts for any reason (e.g., headings, logos, etc.), simply create a graphic for it (see TCR January 2004 Crafts Technology). You can use more than one text color, but don't overdo it. Make absolutely certain that the text colors you use are appropriate for the background color of your pages. The text must be very clear to read.
Links
Put all your site's links together in a navigation bar in every page. You can use either plain text or a graphic for navigation links (bars, buttons, etc.). Make sure the titles of your links are clear to anyone visiting for the first time. For example, the link "Schedule" is not as clear as "Show Schedule" or "Upcoming Shows,” and links titled "Info" or "Other" are very vague. When creating links avoid adding instructions of the type "click here to …". It's far better to make the link's title and the link clear. If you use text, make sure the links don't change color when visited. That way your site will be visually consistent to all your visitors regardless of what pages they have visited in your site. Avoid "drop down menu" links or "mouseovers," i.e., links that change color or shape when the pointer goes over them. You'll complicate your design and the use of the site while adding no value.
If you direct visitors to links outside your site — something you want to do, for example, for galleries that carry your work — make sure the link opens in a new browser window. That way the visitor can always have your site open in one browser window and can come back to it easily. You have earned your traffic, you shouldn't be sending it to other sites without making sure the return to your site is easy. Finally, make absolutely sure all the links in your site work and are correct, i.e., take the visitor to the intended destination.
Zino Vogiatzis is a management consultant who works with small businesses on marketing strategy.
He holds an MBA and two engineering degrees.
