Animated

This simple logo, a version of the mod_perl logo, is made of 30 frames. It took about 25 minutes to complete. It loops perpetually. The novelty of this sort of design can wear off quickly. An animated graphic or logo meant for production should either be unobtrusive or do its bit and be done with it so it doesn’t become as annoying as a <BLINK> tag.

Theory of web design

The most import issues with web iconography are:

• Affordance. The user should immediately recognize what the graphic means and how to use it.
• Originality. Most of brand identity is being unique to the degree to be recognizable.
• Aesthetic. Sure it’s low rez and often monochrome but it has to be nice to look at.
• Classicism. Web graphics are still so new classicism might sound funny but there are heavily trod patterns that must be understood and respected because they are the semiotics users know.

Being conservative in web design seems counter intuitive because widespread use of graphics on the web is not even a decade old. Considering that less than 100 sites dominate more than 90% of all web flow, there is a conservative thread worth following. There’s also room to stand out when you have reason.

Few users are willing to put up with more than a few seconds of difficulty from a website. Google lists more than 3 billion web pages. It doesn’t take much to make yours less interesting than a couple million others. A frustrated user will leave and might even bad mouth your site on a comment board or to a widely distributed email list on the way out the door.

Once you have a solid style/theme, the icons will roll. An EKG squiggle means health and medicine as surely as a caduceus and with many fewer pixels. Parallel bars of differing height means reporting, or the stock market, or sales.

Simple graphics are like cartoons. They are about what you leave out. What you decide to show and what you know the viewers’ imaginations will fill in. Style still comes into play. Limited memory and bandwidth, means the best use of simplicity rule the day.

Standards

There are a few standard sizes which are shared across the web. For advertisements, they are often: 250x250, 160x600, 120x600, 468x60, 728x90. The last two are the banners and leaderboards we’re all familiar with.

For sharing images between sites, especially open source and journal related ones, there are two that are used most often: 80x15 and 88x31. If you want to have someone link back to your own site, these are probably the best to provide. Consider other sites have different color schemes so it’s good to provide a range. Here are a few examples.

Here’s a fantastic starting point for your own.

Favicons

Boxes and bars

Design
HTML by the nature of its birth is a shallow system for layout and page design. Graphics were attached as an afterthought. All layout HTML tools including the faithful <table>, are woefully square. Next time you see nice rounded boxes on your favorite websites, view the source code and see the contortions that they require. Bars and dividers are important elements in block based layout. When placed well, they can make a static pile of boxes seem dynamic.

Text works

Text is easy, clean, obvious, and fast. Don’t sell text short, whether it’s straight HTML with a little fancy style tag work or a gif of text. Occam’s Razor is good to keep in mind: One should not increase, beyond what is necessary, the number of entities required to explain anything.

Consider every major website, its success, and the hundreds of comers who were beaten. The winners are almost always the most plain; the most text rich. Aside from pornography, even those few who have adopted more flash and graphics tend to be successful in spite of it, not because of it.

The simplest possible solution is usually the right one. The American folk version being, KISS, or Keep It Simple Stupid.

Don’t be afraid to break the rules we just went over

Playing conservative is good. Finding something new that works right is better. Your webserver logs will tell you, more accurately and quicker than your users’ feedback, what is genius and what is a mistake.

It’s a wide world that’s as close as the nearest Internet café. The US is only fourth in the international ranking of Internet usage lately. Take it to heart. You might not need to have to have your pages in Spanish and Korean yet but it might be good to try to take a world view when working on your site’s feel and layout.