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

Home > Articles > Design > Voices That Matter

📄 Contents

  1. Influences
  2. Characteristics
  3. Uses
  • Print
  • + Share This
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

Figure 4.5 catalogtree.net rolling over the year 2005

Figure 4.6

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

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

Figure 4.11 generatorx.no

Figure 4.12

Figure 4.12 Background .gif of the page in Figure 4.11

Figure 4.13

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.

  • + Share This
  • 🔖 Save To Your Account