Know Your Icons Part 2 - Modern Icon Design


In the last installment you learned about the history of icon design and how it has evolved from black and white representations of office items into full colored, glassy, hyper-rendered, isometric representations of... office items. In this installment I will be delving further into the world of icons and exploring what icons mean to us today.

This Post is Day 8 of our Interface Design Session. Creative Sessions

What is an Icon?

i·con - noun (Computers) a picture or symbol that appears on a monitor and is used to represent a command, as a file drawer to represent filing —

So we know the meaning of "Icon" in the traditional computing sense of the word, but how does this explain all the illustrative icons we see today? How is a beautifully rendered image of a Teapot, Space Ship or Bucket of Chicken supposed to represent something within the user interface? There's a few answers to this question.

  • Application Icons: Application icons are a great example of un-conventional design. These icons often have a strong trend towards memorable images over representations of the application itself.
  • Website Navigation: Website navigation is another place you'll find some unusual "icon" designs. The interpretation of the icon is dependant on the context in which it is used, it's OK to use an un-conventional design as long as the audience knows what it's function is.
  • Format: Some designs defy explanation, such as "Form over Function." This means that the icon has been designed purely for aesthetics.

No matter how strict or unusual your design is, all icons should be made to specification - there will be more about that soon.

Below you will see a breakdown of modern icon design. Some people may argue that the icons on the "illustration" side of the chart shouldn't be considered icons. This is partly true, they're not traditional icons, but they are Modern Icons in the sense that they could represent applications, games or a specific context.

The icons on the left side of the chart are icons that would be considered to be Traditional Icons with a modern twist. We immediately associate these icons with their function, this is achieved by over 30 years of visual language, which is a powerful factor in the designs success.

The icons down the middle of the chart are icons that are neither illustrative or informative, but a combination of both. The Envelope is traditional because of its form, but it could be perceived differently due to its rendering, a design like this works best within a certain context. The Blue Twitter Bird has immediate recognition from internet users, but is reduced to an illustration of a blue bird for non-users (like my mum) and the stylistic GTalk Bubble is also fairly reliant on brand association.

Links to the Icons above (in no particular order)

Pump It Up, by mgilchuk, My Breafast, by blink, SNOW.E 2 XP, by RADE8, CS3 iKons - Win, by -kol, iChat Bubble, by Delta909, Icecream icon set, by Miniartx, Batman Mask, by Svengraph, In Spirited We Love, by Raindropmemory, Twitter Bird, by freakyframes, StarWars Vehicles Archigraphs, by Cyberella74, Systematrix Full, by royalflushxx, New Moshii World, by anekdamian, Somatic Rebirth Extras, by The Iconfactory and David Lanham

Conventions and Specifications

When designing icons for an interface you can't go past convention. Check previous designs for an indication of how to approach yours. You will find that most Software packages and User Interfaces have similar icons, this is because of User Experience (UX). If a user is suddenly confronted with a design that they're not expecting or comfortable with, they're likely to get confused.

If you're designing for a specific platform, always check the developers notes before you start, these will give you an idea of the size, perspective, and color palette you should be using. You can find links to both the Apple and Microsoft developers notes in the "Resources and Further Reading" section at the end of this post.

Green = Good — Blue = Help — Yellow = Alert — Red = Error

Modern Specifications

Icon specifications get more complicated with each new technology or operating system. Windows and Mac are in an Arms Race over icon size, with the largest icon to date measuring a massive 512 pixels. The trend for huge icons has much to do with modern screen resolutions, but there's also a certain drool factor with a giant, perfectly rendered icon. Look at the examples below if you don't believe me!

AppZapper, Billings, Things and Coda Application Icons for Mac (downscaled to fit this post!)

Now that I've shown you the Drool Worthy icons, let's move onto some icons I've designed myself. The example below is a de-constructed .ICO file made in my previous life as an icon and interface designer (those who know me as LoungeKat probably didn't know this fact). The main 256px icon has been made in Adobe Photoshop with shapes and layer styles, it was then re-scaled for each individual size (64, 48, 32, 16) and imported into Microangelo Toolset to be combined as an .ICO. The 256px icon isn't part of the icon file itself, but included in the software as a Transparent PNG that windows calls on if the size is required. This keeps the file size down.

As you can see, I've used a few variations on the design depending on the color depth and size of the icon. Icons include all of these sizes and color spaces to accommodate all of the different ways that they can be viewed by the operating system.

It's important to design each size separately, scaling a large image can make the design look blurry. When you're designing a 16px icon it's always best to get right down to pixel view. As you can see, a few well placed pixels can convey much more than you think. You can read additional information on Icons, various specifications, and industry recommendations in Axialis Software's icon guide.

An example of scaling

To get a better understanding of icons I would suggest looking at as many different operating systems, programs, interfaces and portals as possible. Think about the different way color and metaphor is used for each application. Which icons stand out as being easy to understand (perhaps the folder or trash can strike you as the most recognizable?), which icons need further explaining? Trust me, you will be surprised what you find out about the psychology behind the visual language we use every day and often take for granted.

Resources & Further Reading

This Post is Day 8 of our Interface Design Session. Creative Sessions
Related Posts
  • Computer Skills
    App Training
    Demystifying Microsoft Office & Office 365 PricingOffice logo
    You want to buy Microsoft Office, but which suite should you get? This tutorial will help you choose the best for your usage and will guide you toward a better understanding of how Microsoft has structured its most popular software offering's pricing.Read More…
  • Design & Illustration
    Create a Mobile Downloader App Interface in Photoshop45
    Photoshop is a fantastic app to create mockups for mobile applications. Its vector tools, combined with Layer Style effects, allow designers to quickly create layouts for their projects. In this tutorial, I will show you how to create a downloader app design for an iPhone, in Photoshop. Once completed, you will have a good understanding of how to create modern interface elements, as well as, charts and graphs in Photoshop. Let's get started!Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: A ReviewApplication foundation 400
    Over the past few months, we've been taking a look at all of the features and aspects that make WordPress a potential foundation for application development. In fact, we've spent roughly 15 articles talking about all that WordPress offers. And though we'll be reviewing each of the points in this email, perhaps the biggest thing to take away that building web applications using WordPress is different than using many of the popular frameworks that are currently available namely because WordPress isn't a framework.Read More…
  • Code
    iOS SDK
    Objective-C Succinctly: Introduction0e5ds8 preview image@2x
    Objective-C is the programming language behind native Apple applications. The language was originally designed in the 1980s as a way to add object-oriented capabilities to the ANSI C programming language, and it has since been used to create everything from command-line tools to Mac programs to mobile apps. You can think of Objective-C as Apple's version of the C# programming language.Read More…
  • Computer Skills
    App Training
    A Beginner’s Guide to PagesPages400
    Apple announced, recently, that iWork is now available free of charge with every Mac purchased after October 1st, enabling new users to create documents, spreadsheets and presentations without having to spend any additional money. In this tutorial, I will show you how to create and format a text document using Pages, as well as how to insert a table, chart, shape and media such as image, video and audio.Read More…
  • Web Design
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…