I have seen the shadow of the moon

I'm excited. In the first week of my summer internship at Cooper, I couldn't wait to get my hands on a test project for a PDA system. And when starting on my first team project for a new piece of software, my Cooper mentor, Nick Myers, had to warn others that he was about "to let the lion out of his cage."

To a young graphic designer, the world of screen-based, interactive work is mouth-watering. The relatively new, ever-expanding and extremely relevant world of web, touch screen and software design allows for seemingly limitless visual exploration. Like early nautical explorers (viz., the title of this post), graphic designers must confront various barriers as they reckon with the unknown.

Uncharted Territory

Books, branding and posters have a long and celebrated history in graphic design. But designing for screen-based, interactive products is relatively uncharted territory.

meggs.gif For example, the latest edition of Meggs' History of Graphic Design, considered the authoritative source of graphic design history, doesn't mention "The Digital Revolution" until page 488. (The book ends on page 530).

Say I was designing a book and considering a subtle element: page numbers. Over the past few hundred years, page numbers have seen thousands of different visual treatments. Among these, there are likely a few hundred brilliantly effective ways of guiding a reader through a book.

Now, say I was designing software and considering an important element: buttons. On-screen buttons have been designed since the early days of GUI development, but the degree in which the important element has been explored is miniscule in comparison to the variation of subtle elements of, say, publication design. As a result, only a few combinations of button size, shape and shading are currently used to usher users through the seemingly infinite digital interfaces that exist on the web and elsewhere. Hundreds of solutions that would create a better user experience likely remain undiscovered.

buttons.jpg From top to bottom, a set of companies with very different user goals, but nearly identical solutions: the Nintendo Wii, Apple Leopard OS and Windows Vista. Like fashion, certain styles are going to be dominant, but perhaps, among other things, these buttons could better inform users of what might happen upon clicking them rather than just be generic visual solutions. Better solutions certainly await to be discovered.

Good branding firms sometimes assign clients a set of attributes to guide their visual goals. These adjectives are usually traits like friendly, dependable or knowledgeable (see: enthusiastic and diverse or speed and precision). It's a good process that allows the designer and client to remain on the same page.

Nothing is new about this practice. It's been done for so long that designers are challenged with making unique solutions for the same visual problems that others have faced before. Current fashion, new typefaces, special types of paper and new printing techniques are tools sometimes used to make new solutions to old problems.

fourseasons.jpg Branding firm Siegal+Gale found that at the Four Seasons the golden rule is to "build relationships" and that "guests are not merely attended to; they are cared for and understood." Hence, they designed the luxury hotel's materials with forms and colors that express caring and understanding. (PDF: Siegal+Gale case study)

In creating interactive products, the same experience attribute process is sometimes used by design firms to maintain a client's branding (see: approachable and fun icons). Like in the print world, certain shapes, colors and forms have long been associated with certain experiences.

However, interactive products give graphic designers a new playground. Hover states, links, selected states and other, similar actions are new grounds for discovery. What happens in a knowledgeable hover state? What's a dependable link? We're only just beginning to explore good answers to these relatively uncharted visual problems.

A New World of Typography

Due to its relatively recent inception, screen-based interface design hasn't been explored as extensively as other, older forms of graphic design. Despite the ubiquity of the internet, even screen-specific typefaces like the one this essay is set in are in their infancy.

For hundreds of years typographers have designed type for a wide range of things, including signage, newspapers, magazines and books, but rarely for screen. Relatively few professional attempts, the most well-known being Matthew Carter's Verdana and Georgia in the mid-1990s, have been made to tackle screen-based typography. And new high resolution, small screens on smart phones have opened up even more doors for new discovery.

To have international consistency between online and print materials, one company, IKEA, has even taken the extreme step of switching all its materials to a screen-based typeface, Verdana. IKEA's decision is strange because Verdana was designed for the screen, but the idea of having consistent branding is not. Type families containing separate styles for screen and print uses seem like an inevitable yet rarely explored next step.

In 2010, expanded families for Verdana and Georgia are expected to be released. Although still intended for the screen, the new families reportedly will consider some print use, which will certainly ease some criticism surrounding IKEA's decision to use Verdana. The release will also include more styles, expanding each family from their current four styles (regular, italic, bold and bold italic) to 20 styles (variations of light, regular, semibold, bold and black). While many type families designed for print have long offered a variety of styles, that same choice has not existed in screen-based typography. Multiple weights for Verdana or Georgia may set precedent for a new world of screen-based typography that breaks designers free from the currently rigid set of four styles: regular, bold, italic and bold italic.

There's a lot of talk about services like Typekit and Fontdeck that will soon allow web designers to rent typefaces from foundries. But unfortunately, many of today's popular foundries currently design typography almost exclusively for print. On screen, type designed for print tends to lose its visual quality when set smaller than 16-point or rendered in a gray value. Good typography for the screen remains a relatively new world.

as.jpg This illustration from the Ascender Coporation's website shows how characters un-tuned for the screen are muddled and difficult to read while characters that are designed for screens consider pixel legability and are appropriately tuned or hinted.

Barriers to Discovery

This is an exciting time to be a young graphic designer in the interactive world, but certain barriers seem to be inhibiting new discoveries. Among them, teaching methodologies and platforms to showcase interactive products seem to be significant inhibitors to finding better visual solutions.

Walk into a design school typography class and you'll likely hear about conceptual ideas like spacing and the connotative meaning of letterforms. Walk into a web design class, on the other hand, and you'll likely witness the perfunctory execution of programs like Dreamweaver and Flash.

Even an introductory typography course would never be primarily focused on teaching InDesign, and likewise, interactive classes for designers shouldn't primarily focus on teaching software. Knowing InDesign is a necessary skill, but it's understanding typographic theory that makes designers good typographers. Similarly, understanding what makes a good painting, not understanding paintbrushes, makes a great painter. If interactive courses for graphic designers focused on theories, rather than tools, to designing better interactive products, it would greatly enhance future explorations instead of making graduates produce bland, all-too-familiar work as masters of a particular suite of software.

books.jpg While theory-based books like The Elements of Typographic Style are considered staples of type courses, tool-based books are staples of web design courses.

Unexpected barriers are also faced when platforms created to run interactive experiences don't allow for the implementation of basic visual solutions that have been used by graphic designers for generations. Touch screen hardware, operating systems and browsers still often restrict the use of basic design solutions that have sometimes been in use for hundreds of years.

I recently spent an hour chatting with Firefox developers trying to convince them that their browser should properly display the thin space character. The thin space, used by typesetters long before computers, can enhance the readability between words and typographic elements like ampersands or em dashes, or it can be used to improve spacing between words in oddly fitting lines of justified text. Since kerning is not a real option for body text on the web, a thin space has even more importance in web design.

thinspace.jpg When given the HTML entity for a thin space ( ), Firefox 3.0 for Mac not only displays the thin space incorrectly, but also uses a visually worse and unexpected wider space (Firefox 3.0 also uses its own font-smoothing technique that makes the typeface appear bold).

The thin space works on some browsers in some versions, but did not work on my Mac version of Firefox. At the end of our conversation, the developers conceded that my version of Firefox failed to accurately display the thin space, but maintained that this particular age-old typographic detail, well, didn't matter because they couldn't wrap their minds around what it might be used for.

slimspace.jpg An excerpt from The History of Printing, published in 1855, guiding typesetters about the use of a thin space. It's one element of a wide variety of old visual solutions unavailable for implementation in some cases, inhibiting the discovery of better visual design.

Discussing a valid W3C character with developers of a standards-compliant browser seemed like a good idea with a simple fix, but the thin space is only a smaller tool of a larger and more robust typographic toolkit unavailable in browsers. In an A List Apart article posted earlier this year, The Font Bureau's David Berlow commented on the typographic shortcomings of css and web browsers. Berlow, who has been somewhat vocal about typography on the web, said that type at the CSS Zen Garden is not "treated beyond a fourth-grader’s crayoning abilities" and that he hoped platforms for interactive experiences could aim for at least "the initial capabilities of Adobe Illustrator 1.0," software that was released 22 years ago.

Bon Voyage

Barriers aside, there is a community of people trying to better our visual experiences. In fact, this blog post might be used as an excuse to experiment and find better visual solutions for our users. In the infant world of interactive, screen-based design there is much to explore and discover in creating visually great user experiences. Roar!