- As Close to Print as the Web Should Get
- Case Studies
- Saksi's Personal Sites: Faux-Functional Finnish Fashion Fodder
- Techniques
- Background/Foreground Gif Pairing
- Scanlines
- Brushes for Smudges
- Motion Within a Collage
- Sites Mentioned in This Chapter
This chapter is from the book
This chapter is from the book
This chapter is from the book
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
Grungy Commerce: Nokian Tyres
Lest you're thinking there could be no commercial application whatsoever for lo-fi grunge, consider the Nokian Tyres site (Figure 04.05), again designed by Saksi. There are still the narrow columns, the scanlines, and the brushes, but here Saksi abandons the gridless layout for a more partitioned look. Note that his border of choice is simply tiny dashes (on other sites he uses tiny dots). Dashes work surprisingly well as borders in web pages, especially considering their ease of implementation.
Figure 04.05. nokiantyres.fi
Saksi uses a solid-color block at the top of the page and then repeats that color in the nav bar to indicate hierarchical location, as any good usability expert would suggest. The site is clean, navigable, and readable, yet still "cutting-edge" enough to appeal to your average quasi-daring, thirty-something mountain biker.
The Nokian Tyres site is a perfect example of how such a seemingly design-centric style can be employed to serve a commercial purpose. Miika even sneaks in a grungy typewriter font to list the tire specifications. The typewriter font works well in this context, because the entire web page is set up to resemble a printed product specification sheet that a reseller might receive from a manufacturer.