Gothic Organic Style of Web Design
- Case Study: Symmetry Is Death - Entropy8
- Technique: Analog-esque Background Textures
- Commercial Applicability
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Web sites aren't made by computers; web sites are made by people. This fact is easily forgotten by today's web designers, because there's very little physical about a web site. Web pages are rarely printed; digital stock photography is often employed; and most web design tools are just pieces of software. It is not at all unusual for entire web sites to be created and deployed without once importing any analog media at all. From wireframe mockups through site development to the "go live" event, the entire web design process is often entirely self-contained within the confines of the machine. OK, maybe you made a rough sketch on a napkin during an after hours brainstorming session, or maybe you drew a vague site map on a whiteboard during a development meeting. But many site-building projects never cross the digital divide.
And yet the physical world in which we and your site-visitors live exists outside of the computer. A dry leaf crunches underfoot, an oak tree gnarls and twists, water glistens and beads, a face scrunches and contorts. These vivid sensory experiences cannot be reproduced on a website using HTML text and grayscale stock photography. To create a website that feels like real life, you've got to intentionally import design elements from real life. Not every line in real life is parallel or perpendicular. Not every surface is evenly shaded. Not every object is perfectly rectangular. In real life, shapes may be symmetrical, but more often than not, they have irregular outlines. The real world is less Cubist and more Baroque.
The design style that best manages to distill the chaos of the world into bits is the Gothic Organic Style ( Figure 01). Gothic organic designers are not photorealists. The idea is not to fully represent every single aspect of the real world on a web site. That would be impossible (not to mention bandwidth-hogging). Instead, gothic organicists take a more abstracted "part for the whole" design approach that suggests and connotes the irregularities and entropies of "real life," without literally depicting all of them. By using the right combination of representative real world textures, shapes, and images, these designers are able to conjure up a believable (or at least enjoyable) analog experience.
){kind=link}
Figure 01-entropy8.com
The Gothic Organic Style is "organic," in that it uses human forms, plant forms, and other organic shapes and textures as its building blocks. In that sense, gothic organicism differs greatly from many of the other styles in this book, which are more geometrical and "straight-angled" in origin and nature.
The Gothic Organic Style is "gothic" for two reasons. First, like the Gothic architecture that birthed the early cathedrals, gothic organicism is intricate, billowing, overblown, and all-encompassing. It is less like the World Trade Center and more like the Cathedral of Notre Dame. A more contemporary architectural comparison is between the two Guggenheims -- New York vs. Bilbao. The original New York Guggenheim ( Figure 02) was patterned after circular geometrical shapes (I'm grossly oversimplifying). It's more akin to the tight, grid-based icon style which I examine later. Whereas the Bilbao Guggenheim ( Figure 03) was patterned after, well, a fish. It doesn't get any more gothic organic than a fish.
){kind=link}
){kind=link}
Figure 02-Bilbao Guggenheim
Figure 03-New York Guggenheim
The second reason for the "gothic" nomer is slightly less scholastic. The pioneering practitioner of gothic organicism, Aurelia Harvey, owes a debt to the contemporary underground "gothic" scene -- death rock, black clothing, self-mutilating performance art, and the like. Hence the interest in cadavers, decay, and most noticeably, dark backgrounds. But your applications of this style probably won't be as spooky as all that.
Since the gothic organic style is ultimately sense-engaging, it is most applicable for branding or product-enhancement sites. Have you been hired to do the promotional site for a new album or film? Are your clients looking to create an experience that leads fans to explore the themes and ideas beneath the project's surface? Then gothic organic design is the logical approach. Granted, not everyone gets hired to make such sites, and not every musical artist has a story behind the song. Still, an increasing number of non-web media entertainment companies are using the web less as a place for frequently asked questions, and more as yet another way to brand their projects. In a sense, these branding web sites become like CD covers or movie trailers, just more interactive and thus more engaging.
Other possible commercial applications for this style include sport sites, trekking/tour sites, cruise ship sites, and any site that seeks to create a "you are here" immersive environment. Rather than small jpeg snapshots of what your white water rafting experience looks like, better than even a five-second, thumbnail-sized Quicktime film of a run through the rapids, why not an entire screen-covering page that makes you feel like you're in the raft? The background layer could be an abstract animated gif that gives the feeling of rocks and water overhead. Ambient audio of rapids and excited yelling could fade in and out. The Quicktime movies and the jpeg snapshots could still be used as insets within this design, but if you're meaning to put your visitor in the midst of the action, why just give him a tiny window into the experience and ask him to trust you for the rest? The web is far more powerful than a printed brochure. Why continue to waste its strengths on mere brochure-ware?
The key to gothic organic design is: a) deciding which elements of "real life" best represent a "real life" web experience; and b) deciding how to render those elements most effectively given the limitations of the web as media. Hopefully, after you examine some master sites and discover some practical design techniques, you'll be comfortable enough with gothic organicism to begin incorporating it into some of your projects.
Case Study: Symmetry Is Death - Entropy8
If it weren't for sculptor/web designer Aurelia Harvey, I wouldn't be writing this chapter. She is single-handedly responsible for crafting gothic organicism (although she would have never called it that), for advancing its online design vocabulary, and even for discovering and developing its commercial applications. There are other design styles in this book for which a single person is solely responsible (Lo-Fi Grunge, Woodmation Hello Kitty), but none are so closely associated with their pioneers as gothic organicism is with Harvey.
In 1995, when few people were even aware of the web, Harvey was already experimenting with unorthodox HTML, animation, and visual narrative. Her primary vehicle of experimentation was her personal site, entropy8.com ( Figure 04). Harvey has since merged with Michael Samyn to form entropy8zuper.org. Their current experiments in real-time visual collaboration, although mind-blowing, are beyond the scope of this book. So keep in mind, this is someone's "old" work here, work which she herself has outgrown, but which still amazes and instructs, even by contemporary web design standards.
){kind=link}
Figure 04-entropy8.com
Harvey says, "Art is for all the things you can't say out loud." So entropy8.com is first and foremost a means of personal visual expression. As such, some of its navigation is difficult, some of its meaning is cryptic, and some of its images are hard to swallow. But if you wade with me through this world for a while, you'll come away with some useful web design approaches, approaches which Harvey herself has applied successfully to her own commercial gigs.
The first striking thing about entropy8 is its mystery and allure. Images are distinguishable, but just barely. The idea is to create a sense of seduction and curiosity which leads to surfer exploration and involvement. For instance, the navigation menu presents a series of highly textured, closely cropped images (Figure 05). The only image that has any sort of explanation at all is the "WORK!" image.
){kind=link}
Figure 05-entropy8.com
The top left hand image of the menu is vaguely squid-ish. Clicking on it leads to an expanded page with tentacles in the background ( Figure 06). Note that the tentacles are still primarily decorative, more suggestive than overt. The tentacles connote fern fronds, plant tendrils, fractal spirals, and other growing things expanding organically into the void -- all obeying entropy, the tendency of any ordered system to head toward chaos. Tentacles also represent the linked nature of the web, where a central source reaches out in several different directions at once. And how many tentacles does an octopus have? Hence entropy8.
){kind=link}
Figure 06-entropy8.com
Whether or not you "get" this metaphorical picture language, there's no mistaking the feeling you are in exotic web territory. Entropy8 is no ordinary "click here" site. The sense of vague implicit meaning either propels you to drill deeper, or causes you to bail out in search of more didactic pastures. Thus gothic organicism is not the optimal style for a data-centric site like usatoday.com. But not every site is an online newspaper.
Entropy8 was built back when 640X480 was still the default window size. Hence Harvey's pages are none too liquid. They are mostly scrunched into the top left hand corner of the browser window. When entropy8 was actively maintained, there was a brief instructional arrow at the site's entrance asking visitors to resize their browser windows accordingly. The same resizing effect can be achieved sans instructions by simply "centering" the active area using border frames and percentage widths. (I examine this solution later in the "Controlling Window Size" section).
There are certain tricks you can do with background images when a surfer's window size is known and controlled. Such tricks simply aren't possible when the surfer's window size is unknown and variable. If I know someone's browser window is at most 480 pixels wide, I can build a detailed background image that begins scrolling sideways at 490 pixels without worrying about it. Otherwise, I have to build my background image to accommodate the possibility of a 1280 pixel-wide screen, while still allowing for the possibility of a 480 pixel-wide screen. Such a large image, in order to load in a decent amount of time, has to be less detailed. And it must look good cropped width-wise at 480, 800, 1024, etc. When the browser's window size is controlled, such considerations need no longer limit us.
There are other ways around the background image/ window size problem (fixed-width JavaScript pop-up windows, scalable "background" images) which I explore in subsequent chapters, but Harvey's solution of limiting the window size works best for her backgrounds, which are necessarily detailed and thus too slow-loading to be created at 1280 X 1024 pixels. Why spend so much energy worrying about background images? Because for Harvey's particular brand of gothic organicism, background images are crucial.
Harvey's background images are the primal swamp from which her text and foreground images emerge ( Figure 07). These backgrounds are dark, intricate, large, and wrought with all sorts of "real world" gunk -- veins, fractures, creases, smudges, and other sundry evidences of decay. In other words, these backgrounds are highly, realistically textured. Some of these backgrounds are photographs of textured real world objects. Other backgrounds appear to be scanned images of mixed-media analog art collages (Figure 08). Many backgrounds have been further tweaked and manipulated in Photoshop using a combination of lighting effects and layer masks ( Figure 09).
){kind=link}
){kind=link}
){kind=link}
Figure 07-entropy8.com
Figure 08-entropy8.com
Figure 09-entropy8.com
Once the browser's window size has been controlled and the background images have been made to fill the entire window, Harvey can then begin to accurately position foreground images over these backgrounds ( Figure 07). She achieves this near-exact positioning of foreground elements using a combination of tables and transparent spacer gif's, as was the technique in those post-Seigel, pre-CSS days. (The same positioning can better be achieved these days using Cascading Style Sheets.) Harvey's backgrounds as such act less like repeating textile patterns and more like actual elements of the overall page design.
Harvey further ups the ante by making many of her foreground images transparent and animated (either via DHTML or gif animation). The results are very un-web-like. On one page, a giant angsty wire contraption lashes out repeatedly into the decaying void (Figure 07). On another page, a geisha girl dances elegantly above stylized tessellating globes (Figure 10). On yet another page, gold-encrusted letters float surrealistically over yet another squidy background (Figure 09). What all these foreground images abhor and lack is a rectangular boundary. Yes, all web images have to be more or less square. But by using transparent gif's, these square borders need not show. Thus you have moving images and shapes that seem to possess their own edges and weight, floating above backgrounds that seem to possess their own history and texture. Just like in the real world.
){kind=link}
Figure 10-entropy8.com