Site Design

Site design is kinda like that old game Othello, it takes a second to learn, but a lifetime to master. It is the ability of the designer to create a site which is not only visually interesting, but just as important, it also allows the viewer to get to the information they are seeking as quickly and efficiently as possible. It is what separates a good designer from someone who just knows how to annoy people with lens flares! Your probably saying right now ‘Well okay, Yoda…what constitutes a well-designed web site?’ (Wow! How did I know that? I guess those Psychic Friends phone calls really do work!) Any web site worth it’s weight in M&M’s excels in the following four areas: Technical Flexibility; Navigation;Layout;Color Scheme. .

Technical Flexibility

Let’s start our journey into the wonderful world of site design with technical flexibility. What I mean by the term ‘technical flexibility’ is the ease that your design can accommodate the many different shades and flavors of computers and browsers out there. (Sounds like Jesse Jackson at a Rainbow Coalition meeting.) This is the step that many designers get that dreamy-eyed look like they won that Nickelodeon/Toys ‘R Us all-you-can-grab toy contest. If the computer you have is a 400 MHz PII with 128MB RAM with 16MB of video memory sitting on a connection, it’s easy for you to dream up these wonderful eye-candy websites that use DHTML, Flash, T-1 and style sheets. These often eat up too much time, bandwidth and computing power that the average internet viewer has access to. On the other hand, you don’t just want to just slap up some text and a couple images. To be honest, we all know that not only does that not look professional (and we have to justify the salaries that we get), but it just isn’t fun to look at. So what are we designers to do, we are torn by our loyalties to our clients on one side, and our artistic sensibilities and instincts on another. Hmmm…tough question. There isn’t a clean-cut answer to this one. While we may all have different criteria that we use to determine what technologies we use to raise the wonderful creature that we all know as the world wide web, I think that we can all agree that the audience comes first!

For instance, let’s say that the New York Times gives you a contract to redesign its web site. (First off, congratulations, and I wish to ask you for a low-interest loan that I can pay back at my discretion.) The first thing that should pop into your mind is, what is the goal of this site? Better yet, what is its purpose? Since this is a news site who gets its revenue stream from the multitude of viewers that come to its site, the main goal for you should be to make this site as accessible as possible. Since most people use either use Netscape or Internet Explorer, the site should be cross-browser compatible. The site should also be able to be viewed by people who don’t have the latest versions of these browsers, so it would be best to not have the bulk of the site laid out in style sheets. It also wouldn’t be a good idea to rely a lot on plug-ins such as Shockwave (Even though Macromedia Flash is sooo cool. If you have the means I highly recommend it.) Graphics should only be used to augment the visuals of the site as parsley is used to garnish a meal at a fine restaurant. A good example of a web site that looks great no matter what browser/computer/connection combination you come up with is espn.go.com. It loads fast, and it looks good on any computer. IBM and HBO are also good landmarks to follow when developing your site. Now if you are developing a site for a design firm, or a company in a high-tech industry, it may be prudent to use more bandwidth heavy add-ons. Remember, you don’t want all of your hard work to be only seen on a super-computer.

Navigation

The next trait to look for in a good web site is navigation. Missing the mark on this trait can kill your web site. You don’t want to make it so hard to find links throughout your site that you have to be Indiana Jones, but you also don’t want to have a site so full of links everywhere that you run from the site like Ellen Ripley was trying to get off LV-426 in Aliens. On every page you should want to viewer to be able to see where they are, and be able to easily get to any other section of the site within a couple of links. A great example of this line of thought is Yahoo! , or any of the C-NETsites . On every page you can see where you are, where you have been and also be able to backtrack and revisit areas that you have missed. An example of overloading a page with links is ICQ . That page just scares the bejesus out of me. All those links and you have no idea where you’re going!

Layout

I guess we’ll move onto overlooked aspect of layout in web pages. Most designers trip up by using too much screen real estate when dreaming up web sites! A web site should be viewable from 640×480 or higher. Since the mainstream browsers’ default settings make them open up with features such as navigation buttons that have both pictures and text showing, the viewing space of the web site is actually smaller than 640×480. Taking factors into account such as default settings, the bottom end of your web site that your web site should be viewable from is about 600×350. I know everyone moans when they have to take their great ideas and concepts and cram them into such a small plane, but there are a lot of people who have computers that only either display at that resolution or the owners of the computers don’t bother to increase it past 640×480. This can be accomplished by either developing a site that has a footprint of what is viewable at 640×480, or by making the site able to grow and shrink along with size of the browser. Godiva seems to make this mistake, and they may annoy their clients.

One thing to pay attention to is to NOT use the entire screen. You should try to leave some ‘whitespace’ around the text and graphics to guide your viewer’s attention to the focal point of the web page. Another factor in having good layout is to have a consistent layout throughout your site. Navigation should always be in the same place on the screen on every page and text should always have the same look throughout. Don’t overload a page with too much information, for it is better to have them coming back panting for more, than leave screaming having being shocked and overwhelmed at the amount of information on the page. Sites that have good layout include Netscape, Adobe, Apple, and E-trade. One last thing to mention before we move on is that browsers on Apple and PC sometimes have different opening dimensions. Apple browsers have a tendency to open at dimensions less than what is viewable at 640×480, so be warned.

Color

Last, but certainly not least, in our hearts here at the Eclipse, is the topic of color scheme. First, let the color scheme should fit the client’s personality. For instance, if you have a contract for an firm that does accounting of a corporate insurance firm (I really can’t think of anything any more conservative, but if you do, give me a ring…) don’t use anything that’s NOT in a Crayola 8-pack of crayons. On the other hand, if you think that the image of your client would benefit from being a bit more on the ‘edgy’ side, then go for it. Be sure that your artistic impulse doesn’t come at the expense of readability. As far as readability is concerned, follow this rule: If you have a wee-bit of trouble figuring out what it is, you KNOW your viewer will not be able to read it. If you’re a beginner, stick to the old tried and trues: white, red, and black. Text should always be in a color that stands out from the background, but doesn’t give your eyes the same affect that those laser pointers that we see so often at cultural events such as Monday Night Nitro. Some colors combinations that will send the Color Police banging at your door are: yellow on white and blue on black. Links should always be of the same color, but should also be able to be viewed when they have been clicked. I usually just pick a color, and then choose a lighter, more intense value for when it is clicked, and a darker, but less intense color for when the link has been clicked. A couple of cool sites with saucy color schemes are Nike, and Iomega. All of these sites use color to spice up the otherwise boring worlds of smelly feet, and data storage.

It seems that our journey through the basics of site design is coming to a close. For gratitude for sifting through my pages of gibberish, I hereby give you the first rule of web page design. When in doubt or during bouts of creative block, do what all great people do…get ideas from other sites!

Author: Chris Jamison
Copyright Lunar Media Inc
Chicago Web Design