Case Studies - Page 3

Initially, lo-fi grunge was used to make slick online magazines about fashion, skateboarding, snowboarding, fashion, and fashion. These e-zines were really just excuses for design showcasing (as evidenced by the fact that several "issues" of Saksi's Silbato e- zine have no content whatsoever). The Lo-Fi Grunge Style has since been used to make a very navigable site for a bicycle tire company and a groovy snowboard retail site. Lo-fi grunge's commercial applications are broader than teen recreation and fashion, but those are its initial points of departure. Any product marketed to the "extreme sports" sector is ripe for lo-fi grunge design. This includes all-terrain automobiles, cross- training athletic shoes, sports drinks, soft drinks, jet skis, and Taco Bell.

Saksi's Personal Sites: Faux-Functional Finnish Fashion Fodder

Miika Saksi maintains a cryptic labyrinth of interlinked URLs. Smallprint is his online fashion/culture magazine with little content but lots of different covers and "coming soon" pages. Silbato is an online fashion/culture magazine, and Sueellen is an offline fashion/culture magazine that has an online presence. After its seventh issue, Silbato was subsumed into Sueellen — the eighth issue of Silbato became the first online issue of Sueellen. Simple, isn't it? Except for the fact that, once again, only one issue of Silbato actually has any content. The rest of its issues are just excuses for design. As such, surfing this nexus of sites can be very disorienting, especially if you don't speak Finnish. So I'm not offering these sites as examples of information architecture or even sensible navigation. Simply consider how they look.

One noticeable feature of Saksi's sites is that his pages don't resize to fill the browser window. Instead, his layouts are frozen, often starting in the top-left of the browser window and flowing downward to the right until they dissipate gradually into negative space (Figure 04.01). Although this type of layout ignores certain strengths of the web as a design medium, it still manages to look "unscrunched." If you visit smallprint.net with your browser window at 1000 pixels wide, the layout is still unobjectionable, despite the fact that it occupies only 640 pixels of horizontal window space. How is this accomplished?

Figure 04.01: smallprint.net

First, the design elements in the top-left corner seem to originate somewhere outside of the browser window itself. This is Saksi's way of saying, "I know I'm cramped up in the corner here. I did it on purpose." His loose design spills down into the page, finally taking a more structured form in the green boxes. There is no learnable formula for this particular design solution. The point is that Saksi is intentionally designing for a browser window, not for a printed page.

This layout doesn't look bad in a large window because its background is white, and there is no strong demarcating right border to tell you where the 640 pixel-wide design ends. As such, the negative space below and to the right of the collage is "invited" to become part of the intentional design.

Another way Saksi manages to make negative space seem like part of his collage is by using Photoshop brushes. Brushes are simply patterns that irregularly filter what would otherwise be straightforward lines or marks. Brushes create that smudgy, inconsistent, analog printing press look. By making brush marks at the edge of his collage and causing them to seemingly bleed over into the negative space, Saksi forms a continuity between his image and the negative space.

At other times, Saksi overcomes the unknown dimensions of the browser window by intentionally limiting his design to very small areas (Figure 04.02). It's as if he's saying, "I give up trying to fill this whole screen, because I can't figure out how big it is. I'm just going to make this one part of the screen look really good in and of itself and then cause you to focus on it."

Figure 04.02: smallprint.net

Although there have been new liquid layout design advancements since the heyday of lo-fi grunge in 1998, Saksi's narrow strips of information still have a refreshing, relaxing visual quality. Most people these days try to jam-pack their pages with as much information as possible. In contrast, a site that has only a thin column of design and text doesn't overloaded its visitor with input. Consequently, said visitor can focus his undepleted attentions all the more intently on the strip of information he is given. One objection to these thin strips of information is that they force the visitor to scroll more. And the spirit of David Carson would say, "Wonderful. A bit of intentional scrolling challenges the visitor and gets him involved."

You've noted the smudges. You've noted the misaligned grunge fonts. You've noted the frozen screen layouts. You've noted the TV-esque scanlines. What? You say you haven't noted the TV-esque scanlines? OK. Note the TV-esque scanlines (Figure 04.03). These scanlines, like the smudges, are meant to give the web page a more analog look. Whereas the smudges simulate "analog" printing, the scanlines simulate analog television, subtly acknowledging the fact that web surfers are actually looking at a screen. I talk more about scanlines and brushes in the "Techniques" section.

Figure 04.03: smallprint.net

Finally, let's not overlook the use of fashion models as design elements. If you're designing a site that doesn't exactly warrant the blatant parading of fashion models across the page (and yes, there are those rare instances when fashion models simply won't do), any human body will suffice. Just make sure the body you use is free-floating on the background of your design, with its outlines visible. A torso inside a square photograph won't have the same effect, because it won't be reckoned in the context of the overall design.

An interesting result of this designerly use of human bodies (models or otherwise) has to do with scale. By interjecting human figures into your design, you can make your other design elements seem huge or miniscule by comparison (Figure 04.04). Since everyone naturally identifies with the scale of their own bodies, using human bodies as design elements is a way to interject an objective scalar benchmark into your work, allowing you to then tweak and manipulate that baseline proportional scale to suit your own reality-distorting purposes.

Figure 04.04: factory512.com

Lo-Fi Grunge Style
Fresh Styles for Web Designers: Eye Candy from the Underground
Grungy Commerce: Nokian Tyres - Page 4