This chapter is from the book
This chapter is from the book
This chapter is from the book
Characteristics
The minimalist layouts of the Psychedelic Minimalist style are a given. They are achieved by conservatively applying modernist grid systems (see Chapter 3 for a more detailed discussion of grid systems). Here I will focus on the psychedelic characteristics of Psychedelic Minimalism: color and its application.
Psychedelic Minimalist color schemes include bright, unrestrained colors, but only a few per palette. It’s not a kaleidoscopic freakfest of dozens of unrelated colors. The colors in each palette are visually related to each other. The saturation and value of each palette are very similar, with only the actual hues differing. One site might contain four related neon colors; another might contain six related pastel colors.
Many of the screenshots in this chapter don’t really do justice to the pure, electric colors visible on your monitor as you visit these Psychedelic Minimalist sites. This is because a monitor screen makes its colors from pure light, whereas a printed book makes its colors from ink that reflects light. Ink color is subtractive—printed ink absorbs the colors you don’t see and reflects the colors you do see. When primary print colors (cyan, magenta, yellow) mix, they result in a muddy brown. In contrast, screen colors are additive. When the primary screen colors (red, green, blue) mix, they make a pure white light. Screen colors and print colors actually exist in different color spaces, called gamuts. These color gamuts overlap somewhat, but there will always be some extreme screen colors that don’t translate to print, and vice versa.
All this is academic to anyone who has translated between RGB (screen) color and CMYK (print) color. (The K in the acronym represents black, a necessary fourth color since cyan, magenta, and yellow don’t actually combine to make true black.) Many web designers avoid extreme RGB screen colors that fall outside of the CMYK print color gamut. They believe these colors are gaudy and unnatural, since they don’t normally appear in the real world of subtractive or reflective color. Yet Psychedelic Minimalist designers mine these extreme screen colors for their rich vibrancy and luminous sheen.
Bright “Screen” Colors for Navigation Elements
Because minimalist layouts purposefully inhibit a lot of background color, a natural place for color to appear is in navigation elements, such as link lists, link rollovers, main menus, submenus, and “you are here” wayfinding headers. Navigation color can be applied subtly or extremely, for purely decorative effect or to add layers of meaning.
In the New Media Initiatives section of the Walker Art Center site, everything is grayscale except the magenta link colors, the white on magenta header text, and the lime wiki page actions (Figure 4.1). Even the favicon logo (the tiny image that appears in the browser address field) is magenta. Rolling over a magenta link turns the link black and surrounds it with a magenta background. These two bright colors (magenta and lime) are enough to enliven an otherwise gray and somber page. The large dashes also add a bit of playfulness.
)
At olofsdotter.com, the system of graduated link colors (from red to black) indicates the relative newness of the project being linked (Figure 4.2). Bright red links lead to the freshest projects, while black links lead to the oldest projects. The links are arranged from freshest to oldest, creating a graduated cascade down the page. This playful system adds color as well as an extra layer of meaning to the navigation.
)
The site for the New Museum uses a different bright color for each of its main sections. On the site’s home page, rolling over each section’s name reveals its color (Figure 4.3). On the first page of each section, the name of the section in the menu remains colored, and a submenu strip appears in the same color scheme (Figure 4.4). A colored square around any submenu section indicates you are in that section. Rolling over any submenu link surrounds it with a colored square, providing user feedback by indicating the link’s function. Once you have clicked beyond the front page, rolling over any section name in the main menu reveals its color and its submenu strip, so you can go directly to any subsection from any page on the site.
)
)
This navigation scheme is intuitive and usable; no functionality has been sacrificed at the altar of psychedelia. The bright and unique colors of each section actually enhance functional navigation, because they distinguish the sections from each other and make way-finding easy.
Cyan, Magenta, Yellow, and Black
One way to achieve a vibrant palette is to translate CMYK print colors into the RGB color gamut. Cyan, magenta, and yellow always wind up being brighter and more iridescent than they are in print. Several sites incorporate this CMYK scheme, although the actual screen colors they use vary slightly from site to site.
The main page for catalogtree.net is simply a long list of key phrases. Each phrase links to a project associated with that phrase. Rolling over a calendar year highlights all the phrases associated with that year in brilliant CMY (Figure 4.5). Rolling over any single phrase changes the color of that phrase and highlights all other associated phrases. Once a project is visited, its rollover color (cyan, magenta, or yellow) remains visible as a visited link color (Figure 4.6).
)
Figure 4.5 catalogtree.net rolling over the year 2005
)
Figure 4.6 catalogtree.net after visiting some links
Drabber link colors might have receded into the otherwise grayscale layout. These bright CMY colors are integral to the success of Catalog Tree’s navigation scheme because they are so prominently visible. Catalog Tree also uses the CSS text-decoration: line-through; property to effectively “cross out” previously visited links—an unorthodox but sensible approach in this context.
The CSS code for the page actually creates link subclasses labeled according the print colors they mean to approximate:
a.cyan {
color: #0099cc;
}
a.magenta {
color: #ff00cc;
}
a.yellow {
color: #ffff00;
}
These hexadecimal values are not mathematically equivalent to pure CMY values. For example, the web-safe color closest to actual print magenta is 009966. Fortunately, this mathematical discrepancy doesn’t really matter, since the CMYK and RGB gamuts don’t perfectly correspond anyway. The goal is simply to choose three CMY-ish colors that correspond to each other in the context of the site.
The VJ10 Festival page at constantvzw.org also uses a CMYK color scheme, with additional lime green characters (abstract dashes, parentheses, and question marks) for added background texture (Figure 4.7). These additional background characters subtly embody the theme of the festival, which is about invisible electronic traces.
)
The web site for Galerie Eva Presenhuber substitutes gray for black and foregoes magenta altogether, using only cyan and yellow (Figure 4.8). (Their cyan is #02c6ff and their yellow is #ffa800). The yellow appears only as a rollover color. The site’s colors are meant to correspond with the art gallery’s print advertisements in ArtForum magazine (Figure 4.9). In both contexts, this Psychedelic Minimalist approach is simultaneously elegant and electric. Regardless of which artist is currently having a show at the gallery, each artist is represented equally in the gallery’s “house” style (Figure 4.10).
)
)
Figure 4.9 Advertisement for Galerie Eva Presenhuber in ArtForum magazine
)
Neon Patterns as Ornamental Architecture
Some Psychedelic Minimalist designers often use bright screen colors in abstract patterns as background ornamentation. These patterns never overwhelm or overtake the minimal grid structure of their sites. The patterns are not freeform, intuitive layout schemes; nor are they open, fullscreen baroque compositions. They are merely subtle embellishments that contribute to the to psychedelic side of the psychedelic-minimalist balance.
generatorx.no is an extreme example of neon ornamental architecture (Figure 4.11). The site has 10 different background patterns (Figures 4.12 and 4.13). These intricate, crosshatched, vertically tiling patterns are applied generatively. Every 30 seconds a new background pattern is assigned to all the pages of the site. However, the background patterns don’t swap out while you are reading a page. They only change when you visit a new page or refresh an old page, provided 30 seconds have transpired since the last time you changed pages. The 10 background patterns all share a similar color scheme. They are designed to seamlessly collage with other tiling, crosshatched patterns in the foreground layout of each page.
)
Figure 4.11 generatorx.no
)
Figure 4.12 Background .gif of the page in Figure 4.11
)
Figure 4.13 One of 10 other background .gifs from generatorx.no
Surfing generatorx.no can be subtly unsettling. Each page of the site looks more or less the same, but as you backtrack through the site, you notice that pages you have visited are slightly changed—an appropriate effect for a website about software-modulated design. Functionally, generatorx.no is really just a standard weblog, but visually it is anything but standard. An ingenious combination of textures and colors elevate this site to lush, vibrant extremes of Psychedelic Minimalism.
Background Killer: Neon Diagonals, Dots, Gradients, and Patterns
Because Psychedelic Minimalist style is a lot like Late(st) Modernist style, but with bright colors added, the dotted and diagonal backgrounds that work for Late(st) Modernism also work for Psychedelic Minimalism. All you need to do is change the colors from grayscale to neon. generatorx.no is an extreme and complex example of psychedelic diagonal backgrounds, but you can always apply yours more subtly.
Neon-colored gradients are another way to kill Psychedelic Minimalist backgrounds. The web site for the PBS television series art21 uses a different gradient background for each section. The gradient background colors match the wayfinding and navigation colors of their respective sections. If visitors’ windows are 1024-pixels wide, they see only part of the gradient background (Figure 4.14). If their windows are 1280-pixels wide, they see more of the background (Figure 4.15). The gradient background effectively kills the extra right-hand negative space while enhancing the color scheme of the content area.
)
Figure 4.14 pbs.org/art21 at 1024-pixels wide
)
Figure 4.15 pbs.org/art21/artists/barney at 1280-pixels wide
The design portfolio of Lifelong Friendship Society kills its right-hand background with an abstract, non-tiling, Santa Fe-esque quilting pattern. The pattern takes up more space in the site’s News section, because the news column is narrow (Figure 4.16). It takes up less space in the portfolio section, because the portfolio content area is wider (Figure 4.17). The color scheme of the pattern purposefully matches the color scheme of the submenu links in the portfolio section.
)
Figure 4.16 lifelongfriendshipsociety.com/site/news.php at 1152-pixels wide
)
Figure 4.17 lifelongfriendshipsociety.com/site/archive.php?id_project=93&image=2 at 1152-pixels wide