Dynamic Graphics+Create Magazine
HOME   |   MAKEOVERS  |   ARCHIVE  |   EDUCATION  |   JOBS  |   ADVERTISE
Topics
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Electronic
Icon Design
The three Ps: people, process and problem solving 

by Marcy Slane
December 2008
Unless you’re marooned on a deserted island, chances are you use icons daily. They adorn computers, cell phones and miscellaneous kiosks everywhere. They are those small, clever designs you click on or touch, and voilà, you’re where you want to go.

The professionals featured here—Yellow Icon Studio, TurboMilk, Felix Sockwell—excel at creating icons and offer insight into their craft. The fundamentals of quality icon design seem to fit nicely into three categories: people, process and problem solving.

PEOPLE
Yellow Icon Studio (Brazil)

One element designers seem to agree upon for all creative work: You must consider the audience throughout the design process. As cold as technology can feel to some, you can turn it into something warm when you make it all about the human experience.

“I love my job. I love the colors, shapes and, more than anything, I love the way people feel and see the world,” explains Everaldo Coelho, CEO and chief creative director of Yellow Icon Studio. “Actually, icons are just a part of the work—certainly the most visible. What we do is design focused on people and not the object. Put together humanism, psychology, semiotics and design, and you have ‘interactive design.’”

Yellow Icon’s core business is interface design and iconography, but the studio also works in graphic design, web design, illustration, animation and other disciplines. Its client list includes Apple, AT&T, Siemens, AOL and Google, to name a few. If you’re new to icon design, don’t feel you have to be an expert before you dive into an icon project. “My first experiment with icons was not sophisticated—I was only attempting to replace the Windows yellow folder,” quips Coelho.

You can find excellent advice on icon design at the firm’s website—here, again, it’s all about the audience. Says Coelho, “Our creation process is planned to put user needs in first place, coordinating constant studies, updates and resources. As a result, our created icons have been largely known as references for style, functionality, and look and feel. Great digital design is rooted in usability—understanding the user, who he is and what he needs and expects from a particular interface.”

Creative resources Coelho recommends include the icon designers at The Iconfactory (www.iconfactory.com), Iconic Design Ltd. (http://iconaholic.com), Bartelme Design (www.bartelme.at), Louie Mantia (http://louismantia.com), the illustrations of Ron Chan (www.ronchan.com) and Jonathan Ive, senior vice president of Industrial Design at Apple. Coelho invites everyone to see more of the firm’s work at www.yellowicon.com, or go to http://twitter.com/everaldocoelho.

Of course, Coelho’s greatest allies are the designers at Yellow Icon: “The guys who work with me at Yellow Icon are fantastic—I learn from them every day,” he adds. “They help me improve as a professional and as a person.”


Consistency? Check!
Yellow Icon Studio developed a set of TurboTax icons for Intuit, the makers of Quicken software. CEO/chief creative director Everaldo Coelho was consistent with the check mark, colors and viewer perspective throughout the set, and he kept his icon design simple.

Staying in touch
Byline is an iPhone application allowing users to stay on top of the latest news from their favorite sites and blogs. The next version will include this Yellow Icon Studio/Coelho creation. The designer integrated the orange color and double curved-line symbol (found in the coffee mug) so fanatical users can easily identify it as their treasured news source.

The human experience
Yellow Icon Studio developed this version of Firefox for the Crystal Project, which CEO Everaldo Coelho says “exists to create a vivid and consistent experience for the user, through a design delineated by the observation of semiotic, psychological and anthropologic concepts.” KDE, or K Desktop Environment, a contemporary desktop environment for UNIX workstations, captivated his attention for its functionality and ease of use. “It was in that context that I started to create the Crystal icon theme, which initially had the simple intention to give my Linux desktop a compatible look with the graphics of the new Windows XP and Mac OS X,” he says.

PROCESS
Turbomilk (Russia)

The folks at Turbomilk—Yegor Gilyov, Denis Kortunov and Dmitri Joukov, all partners and designers at the firm—don’t take icon design lightly. They offer a blog on their website, www.turbomilk.com, that posts several tutorials on creating icons and other design topics, which have been well received by designers all over the world. They’ve been dedicated to creating icons and visual design since 2002, and their devotion to the medium shows in the accolades they’ve garnered.

“I was always attracted to minor forms,” Gilyov explains. “As a child, I used to make small models of ships. Gigantomania is not for me, so to speak.” Kortunov sort of fell into design work: “I was an ordinary designer at a company that produced internet stores. Once, they needed a lot of icons, and they made me draw them.”

The group says icon design is about gaining experience through actual work and paying attention to the important details that are crucial to creating icons. “Somebody once described icon design as ‘geek bonsai,’” notes Kortunov. “I think this is a very accurate definition. The design has its rules and laws—you need to spend time to really get involved in this business. [After that], the sky’s the limit.”

Kortunov reaches aspiring icon designers worldwide through his firm’s tutorials and webcasts. (See sidebar “10 Mistakes in Icon Design” from TurboMilk’s Denis Kortunov.) Like Coelho, the group also counts Iconfactory as experts in the field, as well as Stefan Dziallas of iconwerk (www.iconwerk.de).

PROBLEM SOLVING
Felix Sockwell (New Jersey, U.S.)

Felix Sockwell (www.felixsockwell.com) has been creating icons since college. “Icons play a significant role in building a cohesive brand. My senior year, I was tasked with a flyer for the theater department at the University of North Texas. I changed the flyer into a poster and developed individual icons for each venue, as well as buttons for all the show times.”

This foray into the world of icon design was an overwhelming success—ticket sales skyrocketed by 300 percent. He was touched when, at a pizza joint later that year, a waitress approached him and said, “My parents were able to see my performance in a packed house. I just want to thank you. You, more than anyone, made that happen for me.”

“We as designers rarely get to feel that kind of job satisfaction,” Sockwell explains. “I mean, I can change lives—I’ve seen it happen. All you have to do is try to solve problems with honest, hard work.”

Make no mistake about it—success doesn’t often come without the inevitable failures. When asked about past projects that particularly stick out for him, Sockwell says, “There are too many to name, especially the failures.”

Like many creatives, Sockwell implements a solution-based approach to his design work. “Icon design or GUI [graphical user interface] is just problem solving, really,” he says. “You give me a group of categories and I distill them into an ownable formula—hopefully one that can’t be easily copied by that particular company’s competition. I have a mantra: If it’s good and can be copied, it will be; but if it’s great, it can’t be.”

He notes the most difficult aspect of creating icons is “Agencies sell, or promise clients they’ll deliver on a certain style of mine. After we’re done, it almost always looks different. That’s because we’re doing it right. Every problem is different, and every solution should be tailored to those specific needs—not cookie-cutter, preconceived style notions.”

Sockwell’s design heroes include his collaborating partner Thomas Fuchs and illustrator Christoph Niemann. “I’ve worked with some of the best designers around—Sagmeister, Niemann, Sahre, Bierut, you name ’em—but Fuchs is always my best partner in graphic design crimes. We compete and try to outdo each other, and it always shows in the final product.”


Feeling vs. usability
Icon designer Felix Sockwell created this set of icons for the redesign of New York magazine, which used the set for a few years before letting them go: “I can’t say this style is best for a faster read, but they do allow for a more tactile sensation on the page. And they’re recognizable.” Art director: David Matt

The inherent beauty of science
“I found it fascinating and incredibly challenging to find solutions for [subjects] like screening, perceptions and nostrums,” shares Sockwell. “We went for a straight-science approach and ended up with something quite original for these obscure items. When working on a project such as this, one shouldn’t think of aesthetics or beauty, but when finished, if those things aren’t present you have to start over.” Collaboration with Jerry Kuyper and art director Kelly Doe


Designer/client understanding
“This [set for The New York Times] was fairly exploratory,” says Sockwell. “Fortunately, having an existing relationship with the Times, there was a mutual respect in terms of what content best served the material. We went back and forth on a few, but in general, [the process] went smoothly.” Creative director: Khoi Vinh, art director: Caryn Tutino

More successful than intended
“The interesting thing about this project was that the client [The Wall Street Journal] only wanted usage for three years. After the three years expired, they continued to use them—the contracts went up in smoke on 9/11, not their fault—and later they bought the full rights. I think they redesigned the section and stopped using them after about seven years,” explains Sockwell. Art director: Dan Smith

FIND YOUR OWN PERSPECTIVE
Our experts recommend you begin any successful icon creation on paper. Doodle out your ideas and show them to friends and coworkers—see what stands out the most. Then really get started. “If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities,” says TurboMilk’s Gilyov in an article by Sean Hodge, “7 Principles of Effective Icon Design,” found at PSDTUTS: Spoonfed Photoshop (http://psdtuts.com). Be sure the icon has its own personality, but remember to approach the project holistically, as no icon is an island.

SIDEBARS:

Drawing from the web
To get help with the process of creating icons, you can find icon design tutorials all over the web—http://psdtuts.com and www.turbomilk.com are good examples already mentioned. Also try http://psvibes.com.

In addition, Apple’s Human Interface Guidelines at http://developer.apple.com has several good tutorials. On the site, Apple’s advised plan of action for designing icons is set out as:

1) Sketch the icon
2) Create a software illustration of the icon
3) Add detail and color
4) Add shadows
5) Manipulate the image in an image-editing program to get precise effects and create the icon mask
6) Convert the icon to a .icns file—there are several tools available for this

Former managing editor of STEP inside design and Dynamic Graphics, Marcy Slane (marcslane@yahoo.com) is an insurance and technology copywriter by day and freelance writer/editor by night. Her clients include Quayside Publishing Group, numéro magazine and several marketing and design firms.
Events & Courses

WebMediaBrands
mediabistro learnnetwork freelanceconnect SemanticWeb
Jobs | Events | News
Copyright 2009 WebMediaBrands Inc. All rights reserved.
Advertise | Terms of Use | Privacy Policy