Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Gothic Organic Style of Web Design

  • Print
  • + Share This
An entire subculture of innovative experimental web designers exists, speaking primarily to the fine arts community rather than the commercial end. Consequently, many of their useful approaches have yet to be properly introduced to web designers. The Gothic Organic Style of Web Design is just one of these fresh styles that can be practically incorporated to improve commercial sites.
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.

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.

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.

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.

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.

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).

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.

Figure 10-entropy8.com

  • + Share This
  • 🔖 Save To Your Account

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020