Written by Daniel Ashton | 31 January 2012
Posted in graphic design

Last time I looked at development of metaphors for your icons, I'll elaborate on this later by looking at the development of today's RSS icon.

We're developing icons here, these are intended to be used on a website, app, software or even printed material. We need to consider design consistency along with fact the icons need to work together, as a single system. Designing them all on 40 separate 16 px x 16px canvases will result in them being individual and not a single entity. For example the inbox and outbox icons in a mail client need to have the same basis because they have similar functions. It's vital to design icons in context and in company.

When designing icons for websites we're forced (at this stage but watch out for new SVG format) pixels. The placement of every pixel is vital to ensure smooth curves and soft lines. It's important to have a firm grasp on concepts involved in proper anti-aliasing.

In the next blog post I will examine this in detail by looking at the anatomy of an icon. First lets look at the CSS3 icons i'm using on the new Salcombe Retreat website.

Written by Daniel Ashton | 30 January 2012
Posted in graphic design

My last blog article was a mini case study on the global brand Apple.

Metaphors in icon design

Icons are not logos, they rely on familiarity to be effective, if a clear convention already exists (like a shopping trolly for a shopping cart) then you'll need a pretty good excuse not to use it.

If a clear convention does not exist then we need to develop one. In the days before there was a common icon for RSS all manner of attempts were made, things as diverse as coffee cups and pills. Stephen Horlander created the RSS icon we know today, it was adopted by Microsoft. While the icon itself may not always convey what feeds are it has become familiar and therefore synonymous.

As an example lets see what happens when we try to develop an icon to represent window cleaning services

Mood Board

The first step in the design process of an icon is to find out if there is already an exisiting convention in terms of the visual represntation of a service or product. A great way to do this is through Google image searches, this research can then be put together on a mood board. Why not try using moodshare.co, it's an amzing online tool for the creation of mood boards and gives you the ability to share them.

Heres my mood board focusing on Window Cleaning

We can see from the mood board that a squeegee is a prominent descriptive metaphor related to window cleaning, but we need to consider what type of icon we are developing. Are we asking the user to carry out an action? Or are we puling them towards an object or service? In this case it is the later.

So now consider, does a squeegee imply the sale of window cleaning products, or the service of cleaning windows? We want to sell people a service, not a squeegee, so to further elaborate we can include a person and/or bucket. Although the metaphor is yet to become a familiar convention the combination of squeegee, bucket and man clearly defines the service of window cleaning, and through strict use across a company brand it could one day become synonymous with the service of window cleaning.

A great example of how an abstract icon can one day become a convention is the spread of todays RSS Icon. We'll look at that soon, but lets talk about how important it is to avoid designing icons in isolation.

Written by Daniel Ashton | 26 January 2012
Posted in graphic design

Last time we looked at some of the defining categories of icons. Now it's time to consider how brand leaders are driving the use of icons forward.

Apple - a brand case study

 

As part of my icon series I thought I should incude at least a mention of the Apple brand. Apple are driving the shift towards icons navigation, not only on small palm top computers, but also on the flagship Ipad. As touch screen technology becomes the standard, there is a greater and greater need for well designed icons.

The Apple loyalists amongst us will always insist it's the friendliness and simplicity of their Apple machine is the reason Apple has overtaken Google as the worlds most valuable brand.

Today Apple aren't selling computers, their selling an overall perception and relationships. Apple has become a designer brand. Their products fit perfectly into this world where the consumer seeks material possessions to be happy. They've marketed themselves as an exclusive product for the trendy and successful portion of our population and the rest have followed suit.

The loyalists wont like this next statement, but the fact is it's not the quality of the product that's Apples current success, in fact the market is flooded with alternative that easily match most of Apples products. People really are buying into the label, just as they would an item of designer clothing. And this is the real reason Apple has been so successful.

One thing Steve Jobs is is a great physiologist. Any  company wanting to mimic this success need to understand that Apple has a brand personality. You can clearly see the parallels between Apples personality and Facebook. They both base themselves around lifestyle choice. It's about aspirations, passion and innovation.

Their biggest rival Microsoft has always struggled to to really fit into any of those lifestyle choices. Always beaten by Apple  to the post on innovation with their Windows operating system full of bugs and glitches and never aspiring to be user friendly. The charismatic leader of Apple Steve Jobs was always full of passion and inspiration for his products, so much so that he insisted on marketing them under the single umbrella that is Apple. A bold move that Microsoft could never do. Take the Xbox for example, barely a mention of the Microsoft brand.

The single umbrella that is the Apple brand could be the true drive behind their global popularity. With the launch of Siri artificial intelligence on the new iPhone 4s the Apple brand has become almost human. It's more than a phone it's everything you need and a friend.

To quote the iPhone 4 advert "The iPhone 4 is so much more than just another new product...this will have a lasting impact on the way we connect with each other".

So in conclusion Apples success is about the human element of this global technological giant, they have successfully dispelled the technophobe amongst us and created an umbrella brand that presents them as everything you need and your best friend.

Before we look at the anatomy of an icon lets have a quick discussion about metaphors in icon design

Written by Daniel Ashton | 25 January 2012
Posted in graphic design

In my last blog article I looked at 'Explaining Icons'.

Now it's time to start considering the process of building your icon. With the advent of HTML5 and CSS3 there will be a gradual shift towards in browser creation of vector graphics. But these are new technologies that have a long way to go until full implementation so for the time being we still need to use images to present graphics on our web pages. There's a million different image editors out there and we all have our favourite.

As we're still going to be using bitmap images there really is no reason why we can't use Adobe Photoshop. Most graphic designers are using applications like Illustrator or Fireworks, probably out of habit as they're used to creating scalable vectors for company logos and other printed products. Many icons can be as small as 16px x 16px so for this purpose Photoshop is not dead! It's designed for working in pixels, it has advanced anti-aliasing features and by combining this with transparency very crisp beautiful icons can be achieved.

When designing icons the placement of every pixels counts. When working in Photoshop switch the pixel grid on and make sure every pixels is aligned to the grid, with restrained anti-aliasing helping smooth the curves

Don't know what antialiasing is? Have a look at this tutorial that will help you use anti-aliasing and transparency in tandem.

Next we'll look at the anatomy of an icon..

But lets first consider another case study, this time focusing on the global brand giants Apple who at the cutting edge of touch screen technology are leading the way in Icon navigation