#WeekofIcons – Icons for the Ages

Did you know the second version of Instagram’s icon only took 45 minutes to design? Yes, the second rendition. The original icon, an image closely resembling a specific camera made by Polaroid, was available on iPhone for two weeks before Apple decided to feature the app. The caveat? Apple wanted a new icon.

Graphic designer Cole Rise was the mastermind behind the version of Instagram’s signature that became, well, iconic. He was inspired after coming across a previous icon he designed based on an old Bell & Howell camera from the 1940s. There was just one problem — Cole had only 45 minutes to get a workable design to Instagram CEO Kevin Systrom. The simplistic design of a lens, viewfinder, and rainbow with the abbreviation “INST” became one of the most recognizable icons for one of the most beloved apps in the smartphone era. Cole’s 45-minute creation remained Instagram’s identifier from 2010 to early 2016.

In a world dominated by technology, the importance of a well-designed icon is increasingly critical to delivering positive user experiences and improving human-computer interaction.

Navigating the world around us.

The first versions of the icon — pictograms — have been used since the early days of human history, representing the beginning expressions of a written language. In that same vein, modern icons convey meaning through images meant to enhance understanding, evoke emotion, and provide direction.

With virtually all of us carrying around handheld computers in our pockets, we have access to more answers than ever before. Iconography serves as the wayfinder to getting those answers.

The modern digital landscape is demanding. Users expect to unlock their phones to an easily recognizable interface of apps and programs — the app store, camera, email. We count on seeing recognizable images to access information and applications quickly.

A range of styles and variations.

Recognizable does not necessarily mean icons representing similar meanings need to look the same. Icons are often purchased and selected in packs and, for this reason, designers are constantly interested in creating something fresh and new.

“Icon design seems to be an exceptionally trend-oriented area of design,” graphic designer Brian Barrus says. “Many of these trends come and go very quickly because they become so popular and then people need to do something new. This is not all bad, however, because icons are designed to be more temporary in nature than logos, even though they are visually very similar.”

The first and foremost purpose of an icon is to create meaning — and certain styles will convey particular meanings better than others.

Flat icon designs epitomize the mantra “do more with less.” This is your minimalist take on icon design. They are meant to convey clear, simplified meaning with the ability to be large or small in scale without the possibility of losing understanding. A good example of this is the Gmail app icon, or the stock camera app on iOS.

Flat icons often make good use of subtle shading, highlighting, and layers to create some depth and visual hierarchy.

Illustrated icon designs have as much of a chance to evoke personality and emotion as they do understanding. Just take a look at some of Jeremy Reiss’s baseball designs. Hand-crafted icons packed with emotion and thoughtful brush strokes have a unique ability to capture the imagination and also be memorable.

Source: www.jreiss.net

When illustrating icons, remember this key takeaway from Olha Filipenko, a graduate in printing design who currently works for a social game developer in Ukraine: “Improve your imagination. You can illustrate usual things in unusual ways.”

It’s now even easier to work with your icons in Adobe Illustrator as the latest version allows you to create up to 1,000 artboards.

Simplicity and understanding — the keys to success.

While the camera app on iOS conveys a meaning almost impossible to confuse, this isn’t the case for every icon. Often, icons are partnered with text to ensure accurate meaning. And even when you think an icon is clear enough on its own, it’s never a bad idea to couple it with a text label to clarify meaning. Learn more about icon usability best practices here.

“Don’t let the tail wag the dog,” Brian says. “Icons should serve the design and the function of your design, not hinder it by confusing users. Be very cautious before using an icon without a text label.”

For optimal experiences, don’t forget about space.

Icons generally replace words for good reason. There’s just simply not enough space on the screen. InDesign CC, Illustrator CC — all Adobe products — use dashboards and panels to create a more efficient workspace and provide a better experience. That, of course, places even greater importance on icon design and placement.

As you iterate your designs, think about the type of device that will be used and how your icon will change visually when shrunk or enlarged. You can also try responsive icons as a way to maximize your designs.

Innovative approaches to the everyday.

Icons are a crucial part of the modern user experience, and they present a unique opportunity for designers to find beauty in the common things they see everyday. Be innovative in your approach. The goal is to create icons that serve their intended purpose with style.

To learn more about how to create eye-catching icons, rewatch Paul Trani’s livestream, and don’t forget to download the free icon sets available during our #WeekofIcons Campaign.

Download Dmitry Mirolyubov’s free icon set here.

Have something cool to share about icons? Share it with #WeekofIcons and we may retweet your work on Twitter!