09.10
Borrowed Article from Michael over at Pixel Resort
Icons and Logos are NOT the same
I often stumble upon the confusion between icon and logo design. While logos may use the same visual vocabulary as icons, let there be no doubt; Icons and Logos are two completely separate design disciplines requiring different tools and different mindsets.
The gap between the designers vocabulary and the clients knowhow can cause some problematic confusions. To alleviate this lets look at what an icon is, what a logo is and how these two things could come to be confused.
What’s an Icon?
Apart from any religious denotations an icon is a graphical representation of a concept or operation. We use icons to bridge the understanding of abstract analogies and practical use. Icons can be used to illustrate an entire application or individual operations within that application. In short, icons help us understand and recognize concepts that might otherwise be pretty hard to grasp.
I could write a very long article about the whimsical nature of icon
conventions and the semiotics that guide these, but in this case it’s more relevant to look at the technical differences that is so fundamental for icon design and how these differ from logo design.
Icons are not Scalable
More than often, icons are not scalable. The very idea of icons are to best convey a given message within a predetermined confined visual space. In today’s iconcentric interfaces we allow for multiple variations of the same icon. The icons that are sitting in your dock most likely have atleast 5 different states embedded, making them appear crisp in all aspects of your interaction with them. List view in OSX gives you the 16×16 pixel version while the dock uses the 256×256 pixel adaptation. These are not scalable vector versions, they are handcrafted raster masterpieces. The creator must carefully select how to best take advantage of the canvas in any given size and more than often completely recreate the icon in those sizes.
My manilla mail icon in it’s various states. Note the different layout of the elements in the smaller sizes.
Icons are Quadratic
Icons operate within a complete square canvas. How you choose to employ that canvas is up to you, but it’s restricted to that straight edged space.
Icons are created on a neatly defined and restricted canvas
So that’s it. Icons are not scalable, they’re handcrafted raster imagery born from the desire to objectify an operation or a concept within a confined visual space. How does this differ from a logo?
What’s a logo?
A logo is a graphical element like an ideogram and/or a carefully arranged typeface that together forms a trademark or a brand. There’s an infinite amount of ways to think about logos and logo design. Again, the important thing here is to look at the technical differences from icon design.
Logos are Scalable
A logo should be completely scalable. A logo is the spearhead of a company’s commercial brand or any economic or non profit entity for that matter. Therefore a logo should be replicatable across many forms of media. This has great impact on the sort of mindset you need to bring when designing logos. We’re talking strictly vectorbased output and more than often, graceful degeneration of colours all the way down to uni colours.
Logos are supposed to be scalable.
Logos have no boundaries
Well in theory a logo could be anything. Other than the obvious benefits of working in a format that is easily scalable and replicatable there really is very little rules compared to icon design. Icon design is very influenced by technical dimensions and the restrictions of the systems that display them. Logo design is a completely different venue. A logo could be any shape, colour or dimension – it can be waved from a 100 feet banner or tattooed on a butt cheek. It’s only constraint is that of the physical media that will display it.
Why are we confused?
Icons have taken a very prominent role in modern interfaces. This has obviously spilled over to the realm of branding where many icons serve both as application icon and branding for that entity.
Panic creates excellent software and uses their application icons as product branding
This wave of iconism™ (yes, I just invented that for this purpose) has influenced many graphic designers and a lot of the appealing aspects of the cartoony and crafty iconized style has made it’s way to modern logo design trends. Infact this style has become the posterchild for the web 2.0 movement, and such many internetbased firms have logos that uses the same visual vocabulary as icons.
Logos inspired by an Iconistic style
And while logos can certainly employ an icon-like style, and even mimic the quadratic nature of icons. Let there be no doubt, Icons and Logos are two completely separate design disciplines. It’s important to know the difference between these two things, as they inheretly seek out to fulfil two very different goals, both technically and mentally.
Below I’ve included a PSD template that supplies you with the canvas in the correct dimensions for making your own icons. If you wanna talk icon or logo design throw me an email or just have a look at my services page.
If you liked this article, why not comment and/or tweet about it. You can also hit me up on that thing called twitter
Link to the article, go and comment him!
Some might think that you should know the difference, isn’t it obvious? Well, not really, I myself have to explain each to people when I tell them what I do, even it’s as simple as me saying= Logos are fun, Icons are the bane of my existence packaged in a tiny 12x12px square.
-Chris
I really want to write my own articles soon, anyone have any ideas on what design aspects I can write on?
PLUS I discovered CSS tables as opposed to floating…so much better. only issue is that WordPress implements another random css file that still has that brown image on the bkgd behind the back of the side bar so the left “table-cell” doesn’t extend like it should…its overwriting something in #wrapper…might be time to think about porting over my wordpress accnt to my .com….hrmm BurnMyBiscuits have any advice?
