Graphical Effects

Web Media and graphics are inseparable. Web authors will almost invariably begin using images, so examining a few of the most effective techniques should help to inspire even more creative solutions.

Animated GIF Images

Example: Turning Away by Curtis Harrell

Anybody who has visited message boards or livejournal has seen animated .gifs. The simple animation and small file size make them favorite icons on IM programs and blogs, but they can still be put to good use in web media. Take a look at Curtis Harrell's page. It shows a haiku composed of three randomly changing lines of text. As the lines change they change the feeling of the overall poem, particularly since each element is carefully designed with relationship to the other lines. The interesting aspect of the poem from an image-use standpoint is that those changing lines of text are actually animated .gif images, each changing their text at a slightly different speed. Here's a perfect example of how an impressive visual effect can be accomplished without any complex coding at all.

"Miniml" Design

Example: miniml version 2 by Craig Kroeger & JD Hooge

Looking back at Turning Away, the particular effect is heightened by the minimalist design of the page. Those three revolving .gifs are the only image files on the page, and they do not even look like it at first glance. is a site created to showcase a very minimalist design mentality, both in graphical webpages and audio visualizations (indeed in the audio files themselves). Open the site. Play with it. It's written in Flash, but forgoes the "usual" flash visuals and over-the-top colors. The site's biggest strength is its interface. The text may be small, the content perhaps confusing, but menus appear and disappear with the move of a mouse, without even requiring a click. Interacting with the page is a very simple process. The main menu telescopes inside other menus, which disappear seamlessly under the content window. All in all a brilliant use of flash to achieve an unusual effect.

Minimal design focuses the attention on the text, a useful consideration when you are attempting to direct a reader through a site. Fewer images and script mean (usually) more browser compatibility. With the exception of Flash designs they also tend to load faster than graphical layouts, at the cost of being harder to do well. Since there is less there, each element has to be more carefully crafted.

The Flash Design of Joshua Davis

Example: The Homepage of Flash designer Joshua Davis

While there are no specific portions of this page directly applicable to hypermedia (despite some interesting computer-generated art) Joshua Davis is regarded as one of the web's foremost Flash designers. If Miniml interests you, browse through his site to see some more mainstream Flash projects. It's impressive, to say the least.

Fading Text

Example: Surfin' Safari, Safari Developer Dave Hyatt's Weblog

If you load the page and scroll down, you will notice the text fades to white as it reaches the top of the page. This fade effect is done with nothing more complicated than a partially transparent .png file. They are easy to create in Photoshop. Start a new file, then use the gradient tool to fade vertically from color X to transparent. If you tile that file right within a CSS element and make that element appear over the text, any text that scrolls under it will appear to fade out. This could be used for interesting effects within poems or other less wordy forms of literature. An author could choose to design their site to only allow one line of a text to display clearly, the rest fading out slower or faster. Unfortunately a demo would not necessarily help; the best way to learn how to use transparent .pngs is to create some and experiment. As Owen points out, Adobe Photoshop is an invaluable design tool here.

Other Projects

The New River Digital Writing and Art

The New River is the collection of digital projects that including the Revolving Haiku discussed above. The site is worth a look because most projects use some graphics, be they interactive Flash and Shockwave files or regular jpeg format. There are both visually impressive projects and confusing, poorly designed ones, but there is some interesting stuff there.

>>> Continue to Conclusion >>>

Stylesheets: Dark | Dark (No Links) | Simple Dark | Owen Style (Light) | Light Side | Plain Text Style