Boxes And Arrows : The Design Behind the Design

Learning to Love the Pixel: Exploring the Craft of Icon Design

by Uday Gajendar on 2003/10/13 | [5 Comments]

• The craft of creating icons can support high-level (i.e., typically IA-driven) considerations of the user’s experience by helping visualize access points throughout the application.
  
  
• Conversely, processes and methods used in high-level design can improve icon design by avoiding thrown together graphics that simply “pretty up” screens, and instead crafting something relevant, usable, and attractive.

But what does “craft” mean for interaction designers? In looking at the activity of creating icons, craft can be seen as contributing care and diligence to the production of artifacts that benefit the user. From the designer’s point of view, craft also suggests a personal sense of pride and ownership in the artifact. In addition to debates over wireframes, search engines, and controlled vocabularies, discussing craft as a value of the user-centered process will expand upon typical issues confronting designers, highlighting matters of moral value, innovative potential, and aesthetic character, which are embodied within and transcend any one artifact (such as an icon).

Icons as communication

From Byzantium to your desktop
What are icons anyway? Historically, icons (from the Greek, eikons, or “images”) were religious paintings on wood panels, made during the Byzantine Empire in the 6th century.[1,2] They flourished across Europe for several centuries under various stylistic and cultural influences (i.e., the Middle Ages, the Italian Renaissance, etc.). As visual symbols, they encouraged pious duty and passed on Biblical stories to mostly illiterate audiences.[3] They served as a way to “touch” and “see” something otherworldly yet influential in daily living.

Fast-forward to today. In the dynamic graphical computing context, icons are stylized representations, with varying degrees of abstraction, of some internal (i.e., encoded in binary) object, process, or status of an application. According to Mullet and Sano, an icon denotes an object “by virtue of its own likeness to or resemblance of that object, on the basis of some quality or characteristic inherent in the icon itself.”[4] Icons are thus points of access to the digital space. They may be clicked or viewed, and offer actions the user can take for routine computing tasks. Of course, “pious duties” are not espoused, but “holy wars” over icon colors and styles are known to have raged across design departments.

How does meaning come from icons?
As contextually-located objects, icons exemplify the big challenges of communication and interpretation when using codified visual languages to convey meaning. “Semiotics,” or the study of communication processes, can help designers arrive at a deeper understanding by defining the relationships among signs, symbols, references, and human interpreters. I will forego academic discourse about this rather dense topic, but the following basic semiotic elements should be noted:

• Syntax: the internal grammar of parts that enable a properly formed sign to be parsable by someone or some system—think of the computer throwing a “syntax error”
• Semantics: the intending meaning of the sign by the maker(s) of it
• Pragmatics: how the sign is received, perceived, and acted upon by some person or interpreter by the confluence of syntax and semantics; the resulting effect [5,6]

Whether in home software, mobile phones, or enterprise applications, icons have helped make computing more communicative between people and digital systems. Arguably, they have also cluttered our screens and morphed into a winking, blinking miscellany of digital ephemera that distracts the user from her goal. Or they are simply ignored. Herein lies the value of craft in enhancing user experience, at the pixel level and beyond.

Icons as problems of craft

The craftiness of it all…
So, what is craft? A quick (and somewhat simplified) stroll through its history will help, with guidance from Malcolm McCullough’s Abstracting Craft. Arising from old English “craeft”—for strength and power—craft was the province of tradesmen, smiths, and guilds skilled in the manual production of goods.[7] Craft was plying one’s trade to materials like metal or wood, devoting significant time and effort to creating objects of unique worth. This is in contrast to products of mass industrialization and distribution, created via mechanized means under the inhumane conditions of factories and mines.

Mass-produced goods gave rise to the social unrest of the early 20th century and the critical philosophies of Marx and others, which emphasized the value of the human worker in regards to his output. This suggested the primacy of relationships between the eye, hand, and mind, and tools and materials. In the UK, William Morris led the noble Arts & Crafts movement to resurrect handiwork aesthetics and values of material economy and moral virtue. Americans saw this with Shaker furniture, which was borne of homespun simplicity. Amidst the tumultuous changes of the ensuing “machine age” of the Industrial Revolution, craft as a practice came to be perceived as hobby-like amateurism (think of the crafts section at your local Wal-Mart), while art became a search for loftier values removed from technique. Meanwhile, bold, fast machinery suggested high quality and “futuristic” production. Remember “streamlined” refrigerators, phones, and car tailfins of the first half of the 20th century?[8]

However, from Eames furniture to Rand’s logos to Apple consumer products, personal craftsmanship has resurged as a signifier of commercial design achievement. Consumers and BusinessWeek alike have applauded the high quality of the iPod, Mini Cooper, Nike watches, OXO utensils, and so forth. Craft remains “skilled labor applied towards practical ends.”[9]

It’s not easy being digital
But what about digital media? Can there be a craft of intangible things like icons and interfaces? Digital media is ephemeral, iterative, incremental, reversible (thanks to Undo), and now increasingly networked and collaborative—does any of this make a GIF or web page less craftworthy? And why should designers care?[10]

One reason craft is important, as McCullough suggests, is that the structure, constraints, and play of any medium stimulate personal innovation, pushing the boundaries of what’s possible while solving design problems in a skillful manner. The digital medium, comprising pixels, screen resolution, and color bit depth, can be manipulated by computational processes and tools like Photoshop to unheard levels of ingenuity and “craftiness.”

Secondly, as designers plan an optimal interface, concern for detail—striving for craft—can motivate a team, elevate quality, generate pride, and encourage positive attitudes about how people can use digitally mediated processes and artifacts to improve the user experience. McCullough refers to this as the “moral value” of an activity independent of the product, towards a “humane end.”[11]

Crafting icons, pixel by pixel…by pixel

Some examples from my time designing icons should help illustrate the value of craft with the interaction designer’s involvement at such a detailed level. No doubt these examples will help many readers recall their own icon design efforts—maybe even yesterday’s project.

The development of an icon can be a deep process of applying personal knowledge, corporate context, and skilled labor towards the creation of something the user will see and interact with and that will drive her experience with an application. And, since an icon gets maximum exposure to the end user, the designer better do a darn good job creating it!

I start pixel production after receiving detailed icon requirements from the product team, such as the product name and user profile, visual context, task situation, functional description, and icon type. In the Oracle UI standards for web-based applications, icons are categorized into different types: global button, information quantifier, inline messaging, object type quantifier, and functional icons. Each type has specifications for sizes and colors that reflect the corporate brand for Oracle’s web-based applications and that constitute a usable, persistent visual language. This aids in a user’s interpretation of and expectations for icons featured in other Oracle applications. So I must match the icon request with the category and dictated visual style, including dimensions and colors (e.g., a functional icon is 24×24 pixels, with four to six shades of web-safe “blue”).[12]

I then sketch out concepts on paper, starting broad and narrowing down to a select few worthy of Photoshop. Digitizing the icon is a task featuring a curious intimacy among the tools (PC workstation and Photoshop), the artifact I’m making, and me, due to the level of zoom required to manipulate the pixels. Much like a bricklayer building a wall or a nuclear scientist laying down plutonium, I precisely position pixels one by one, which can yield big differences in just a few clicks—what was once a folder suddenly becomes an account ledger.

Meanwhile, with multiple windows open in Photoshop (across two monitors, of course), I am afforded different views of the same artifact at varying levels of zoom—this helps me consider the totality of the image, like a cinematographer taking in a whole scene. I also concurrently view other icons and source materials (screen captures, stock photos, scanned sketches, clip art, etc.) that I can use for quick reference, inspiration, or even for some parallel icon analysis (“Should I move this pixel over one more?” “Why is this icon not like the others?” “How can I strengthen the color scheme?”). I also refer to screenshots of the application to make sure what I’m making fits in its context. Throughout the process there is rapid iteration and multiple undos, which permit many concepts to be generated in a short period of time. Some Photoshop features, such as the History and Layers Palettes, make this even easier.

The immediacy and improvisation of this process help cultivate dexterity with the tools (such as implicitly mastering keyboard shortcuts and mouse positions to reach toolbar buttons). This also creates a “feel” for the pixels—the ability to anticipate the effects of moving one pixel versus another, much like a sculptor gaining a feel for marble or clay to express her vision.

This increasingly smooth, continuous interplay of hands, eyes, and tools (particularly the mouse as an extension of my hand) mediates my influence on the pixels and creates a sense of “flow,” or optimal experience of a craftsman engaged in his trade. (This is usually aided by listening to trendy trance music.) Popularized by University of Chicago psychologist Mihalyi Cziksentmihalyi, the concept of “flow” combines maximum performance towards a challenging goal with immediate feedback loops.[13] This is exactly what icon design involves at a tightly focused level, much like a jeweler refining an intricate pattern. All the while, my past training as a designer operates subconsciously, evaluating visual balance, scale, harmony, color, form, contrast, figure and ground, etc. The hand/tool/mind relationship implies ongoing active knowledge, but with the physical memory of mousing around to different parts of the Photoshop interface to find functions and shortcuts.

Of course, beyond the actual production of icons, I work as an intermediary among project managers and developers (the folks that request the icon) and the standards group (the people who approve the icon) to achieve icon agreement. There is constant pressure to satisfy team requirements and user goals while preserving standards. And there’s always input from other designers—often the toughest critics!

Shifting the mind from icon to wireframe…and back

These anecdotes suggest craft is an emergent value of a dedicated, focused activity that requires individual skill and diligence. This is the interaction designer’s value in creating artifacts of the user experience—the “it” a user sees and uses firsthand on screen.

• See icons as manifestations of functional requirements in the product plan—as action triggers and status cues that support information display and decision-making.
  
• Recognize that icons reflect the character and voice of the application, particularly that of a style guide governing the look and feel of products.
  
• See icons as designed entities that require research, testing, iteration, and specifications in order to ensure sound, consistent construction.
  
• Add a sense of poetics to enhance the user experience, to alleviate the tedium of tasks that rely on drop-down menus and other standard web widgets.
  
• See icons as part of the whole system of interactions, at a page level (in the organization of components), an architectural level (as visual indicators resting on invisible wireframes that the user may or may not perceive), and a transactional level (as points of access to various paths or flows).

Good craft can be applied to “macro-level” outputs, like wireframes, prototypes, even code itself, to yield something worthy of attention to boost user experience quality and designer morale. Thus, while creating the interaction flows, the designer should be mindful of the controls and pixels that must be crafted to helpfully, efficiently guide the user. Similarly, while designing the icons, the designer should be mindful of the architecture and interface context within which the icon resides, to ensure its relevance and utility.

Examining the craft of icons suggests various ways designers can add value to the user experience, both from the typically broad, strategic perspective, and at the level of detailed pixel perfection. I believe part of a designer’s significance is found in providing a sense of craft to the design, whether it be embodied in an icon, a diagram, or a task flow. This is achieved by using a sound process respectful of context, users, constraints, goals, and especially personal attention to the details of the artifact. Craft adds to a sense of the cohesiveness of the whole and its parts, at varying levels of abstraction and in various relationships. This is particularly true for enterprise applications that have interdependent flow, architecture, and page level issues. Craft also contributes to the “quality of life” for designers slaving away, by offering a sense of purpose in an often impersonal economy where satisfaction must arise from the designer’s attempts to produce “good work” with positive impact. Ultimately, craft becomes a key concept in the modern design lexicon, and helps ensure a sense of humanity in the production of digital artifacts, and their user experiences.