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

Posted by
“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.”Designing web-based enterprise software involves creating complex artifacts like architecture wireframes, object models, screen flows, and clickable prototypes in order to articulate aspects of the online experience for product stakeholders. As an interaction designer at Oracle, this is quite the norm for me. This routine, however, was recently disrupted when I was assigned the task of creating icons for some of our products.

I first wondered (a bit snootily, perhaps) whether such seemingly trivial bitmaps could be worthy of an interaction designer’s breadth of skill and knowledge. I’m used to designing whole systems of interaction! It soon became clear that, while macro-level outputs (such as flow diagrams or wireframes) require a flexible 10,000-foot view of the application, micro-level icons demand I put on a parachute (or straightjacket, some may say) and plummet to a 1600-percent zoom in Photoshop, going eyeball–to-eyeball with just a few pixels. Amid this dramatic shift in scale and display, I realized interaction designers can have a positive impact on the user experience in two additional ways:

  • 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.

Similarly, reflecting upon icon craft offers lessons for information architects and strategic design thinkers. For example, in moving from macro-level plans to micro-level pixels, there is a shift of mind (or “metanoia”) that forms new perceptions of how parts and wholes relate in the overall application UI.[14] In particular, considering the craft of the design helps the designer or architect:

  • 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.

  1. “A Short History of Icons,” from Praying With Icons by Jim Forest, published by Orbis Book, 1997.
  2. Icons, Their History and Construction,” online document.
  3. Ibid.
  4. Mullet and Sano, Semiotics: A Primer for Designers,” at boxesandarrows.com.
  5. McCullough, Malcolm. /0060920432/ref=nosim/boxesandarrows-20”>Flow: The Psychology of Optimal Experience.
  6. Senge, Peter. Uday Gajendar is an interaction designer with the Oracle Usability and Interface Design Group, where he has spent the last two and a half years designing healthcare software, financial applications, and visual querying tools.

5 comments

  1. Thanks for your article, Uday. I’ve recently been involved in my own team’s latest round of icon design, and I was in the mindspace for your words.

    Applying the high level design concepts to the low level construction of icons was a nice thread to the article. It made me think of our own recent “breakthrough” where we realized the visual choices we’ve made in our individual icons could be generalized to affect our higher level design as well.

    I’ve posted a short article on my own web site that describes what we’ve learned.

    http://www.jarrettinteractiondesign.com/2003/10/14#a354

    As an aside, I found it oddly sad that your article didn’t include any graphics of the icons you’ve developed. In writing my own article, I realized I was also reluctant to share my work, for two reasons: some of the graphics may be meaningfully proprietary (for now anyway, since they relate to unreleased parts of the product), and, more importantly, I never feel that I’m very good at it. I hope you don’t have the latter concern!

  2. *excuse my english*
    There is another really great book on Icon Design from William Horton: The Icon book:

    http://www.amazon.com/exec/obidos/tg/detail/-/0471599018/qid=1066159997/sr=1-4/ref=sr_1_4/104-3738131-3660741?v=glance&s=books

    The author emphasize that you have to test, test an test the icons before they are finished. It has many ilustrations, and few text. It´s certainly a visual and pratical book.

    But the greatest thing is that all guidelines from icon design values to the whole interface design. It was the most useful book on this subject I read.

  3. The definition of craft as ‘skilled labor applied towards practical ends’ is a bit too broad, I think. Historically, craft implied working with traditional processes and media, with minor innovations and slow evolution through time — not because the crafts people didn’t have creative ideas, but because innovation was not actively encouraged. Tradition, convention, and purity of execution were the valued traits of fine craftsmanship. The guilds Uday describes were for weavers, masons, and others we now consider merchant tradespeople.

    During Modernism, as Western society began to question rigid adherence to traditional methods, techniques, and forms, artists began to experiment with materials and processes that were formerly the domain of crafts people. In the 20th century, the art-craft dichotomy, rigidly in place since the western Renaissance, began to soften. Craft is currently more the provenance of artists than of auto mechanics and bricklayers.

    I’ve spent many hours doing the kind of icon designing Uday describes, and concur that the Photoshop portion of the program requires fine art and design skills, as well as an awareness of tradition and convention. There are some contemporary visual symbols the designer can now call upon (documents, folders, trash cans, etc.). But I’d guess more often that not, the designer has to creatively construct new ways of symbolizing concepts that may also, themselves, be new. So this part of the process could be called craft in the broadest sense — skilled labor applied towards a practical goal; or it could be called craft in a narrower, more modern sense — handwork with an overlay of innovation and creativity.

    None of these definitions of craft really get at what’s going on, though, when one looks at the end-to-end icon development process. The interaction designer must work with user expectation, aesthetics, and pragmatics to create contextual fit both within the application and the user’s workflow. At it’s core, icon design is information design; every bit of visual information contained in the image must serve a stated goal.

    Good icons are little kernels of information, functionality, and meaning that work on the user at a kind of pre-verbal or non-verbal level. The process of achieving this is 1 part design, 1 part intuition, and 4 parts analysis. Designing icons is somewhat like designing a screwdriver — it has to look good, it has to feel good, and it has to *work.*

  4. I too have been involved in a massive icon re-design project at work, but my experience was from the product analyst perspective than the graphic designer’s told here.

    I don’t think you can over-emphasize the value of solid analysis done up front in advance of any design. The time I spent grouping functionality into related concepts allowed us to begin the project by creating the basic images upon which we could build a consistent icon library.

    I’ve also reeped the rewards of this prework each time a maintenance icon is required, since oftentimes the image is an obvious almagamation of existing images.

  5. Hi , I just found this site…it is a wonderful compilation of topics I am interested in for quite some time.
    Regarding the article about icons I missed quite a few points: What about the starting point of the graphical user interface? I think the thoughts that the people at Xerox Park had are very important to understand the sucess of the graphical user interface.
    According to the human process of learning as a child you go through different phases of understanding your surroundings…from trying out to more abstract ways of understanding. People like Piaget, Montessori and Bruner developed theories about the human process of learning and gaining understanding.
    People like Alan Kay transfered this knowledge into the computer. His famous phrase: “doing with icons make symbols.” expresses the fact that icons are also implemented instructions for symbolic actions within the computer, e.g. like the trash can. You can drag and drop something on it and therefore you delete a file. Of course the technical restrictions on the Internet were a backdraft to the state of the art already reached for desktop applications. Instead of being able to describe more complex interactions by using animated context sensitive icons and more dynamic cursor changes, they became “just” labels for the categories: The user is brought back in the caveman age: he or she is able to point at something to express a “yes”. This of course is one of the reasons why icon design is so delicate.
    You have to find a “noun” that expresses the topic, instead of having a “verb” to communicate an action or even a “dialogue” to start interaction.

    An old, but still basic book about the topic: Brenda Laurel “The Art of Computer User Interface Design”

Comments are closed.