You're looking at all articles on The Hickensian tagged 'icons'

YAY!!!

What a way to celebrate 10 years of Hicksdesign (to the very day) – my advance copy of The Icon Handbook arrives! I’m actually holding it in my hands! It has pages that turn with words (what I wrote) and pictures on them!

It looks and smells flippin’ gorgeous!

Excuse me, I think I need a sit down…

If you’ve been waiting for the print version to be available before purchasing, now is your time to pick up a copy!

Since publishing a section from The Icon Handbook as part of 24 Ways last December (Displaying Icons with Fonts and Data- Attributes) I’ve been involved in a few discussions regarding its cons, some of which have since gained workarounds, and it felt a good time to do a follow up post.

First of all, its worth mentioning the context of the article – it’s from Chapter 6, where all the various possible methods for deploying icons on the web are laid out. This includes creating icons with CSS, which isn’t something I’d recommend, but just may be a solution for someone out there and work well in a particular context. In the same vein, using fonts to display icons is just one of the options.

Lets go over the 2 cons that keep coming up:

Unicode Mapping

Jon Tan states (rightly) that where matching unicode characters exist, the key should be mapped to that (such as the heart symbol for Favourites) and others that don’t to Private Use Areas where they have no associated meaning or content. This isn’t a problem with the technique as much as the current implementation of the fonts. Its solvable, although doing so will add an extra layer of complexity in specifying the correct letter. There’s also not going to be many icons that can be mapped of course.

Drew Wilson has improved this situation with his release of Pictos Server – a typekit style hosted service where you can choose only the icons you want in the font, as well as what letter its mapped to. It also helps another issue with the technique – that of icon choice. Adding a new icon to a font is complex work, but with 650 to choose from, its less likely to be an issue.

Another option here is IcoMoon which allows icons to be mapped to Private Use Areas in Unicode, thereby avoiding odd content altogether.

See also:

• http://jontangerine.com/log/2010/08/web-fonts-dingbats-icons-and-unicode
• http://pictos.cc/articles/using-icon-fonts/
• http://filamentgroup.com/lab/dingbat_webfonts_accessibility_issues/

Screenreaders speak generated content

Using CSS to insert content has the side effect of the icon letter being read out by screenreaders. Not the worst accessibility issue, but confusing.

However Eric Eggert discovered that this can be avoided with the ARIA attribute: aria-hidden="true". This is required for every instance, but Eric also points out that this can be automated with a small snippet of javascript. Read Eric’s post A better way to use icon fonts. Not all screenreaders support ARIA, so it may be best avoiding the need altogether by using Private Use Areas mentioned above.

But…

For me, the biggest issue is pixel crispness. Unless you spend an awful lot of time hinting the font properly, you just won’t get the same crispness that you can achieve with a PNG.

Once everyone has high density screens this won’t be an issue, but in the meantime, I’m thinking more along the lines of SVG Sprites to implement my own icons and gain scalability.

The Icon Handbook is now available to buy. Here’s what it looks like:

This is a book that I’ve been wanting to write for a long time. Whenever I’ve looked for a book on this subject, the only available publications are reference guides that simply reproduce as many symbols as possible. Where books have gone into theory, they were published decades before desktop computers, and therefore miss the most relevant and active context of icon use. Sometimes the topic is covered as a part of a book about logo design, and amounts to little more than a page or two. So I’ve set out to create the manual, reference guide and coffee table book that I always desired.

It’s aimed at designers who already have basic vector and bitmap drawing skills. It could be that you only have to create a simple favicon, or perhaps you’ve been asked to work on a website or mobile app that requires icons. You might usually rely on a resource like a royalty-free icon set, which may provide common icons but probably doesn’t provide everything you need.

This book begins at the point when you need to create your own icons. Its purpose is to guide relatively inexperienced designers through an icon design workflow, starting with favicons and working up to application icons, as well as inspiring and providing a reference point for existing icon designers. It does not set out to teach you how to draw in a particular application. The aim is not to improve proficiency in particular applications but, rather, to show you how to create icons with the common toolset found in most of them, so you can be more versatile.

Here’s what you can find in the Icon Handbook:

Chapter 1: A Potted History of Icons

A short look at the history of icons, focussing on the the last century, and in particular how ‘icon’ came to mean more than religious painting.

Chapter 2: How we use icons

Looking at the uses for icons beyond simple decoration, how they help us navigate, give us feedback and express our mood. It also looks how not to use icons!

Chapter 3: Favicons

Starting with the simplest form of icons, looking at how to get crisp artwork at small sizes and the various ways favicons are used.

Chapter 4: The Metaphor

Working through the process of discovering if a metaphor already exists, and how to decide on the right one if there isn’t.

Chapter 5: Drawing Icons

Walking through the drawing process, working with simple pictograms and small colour icons, and looking at the pitfalls on the way.

Chapter 6: Icon formats and deployment

There are many different formats and deployment methods for icons, depending on the context, which can have a bearing on how we create the artwork. In particular I cover all the methods for displaying icons on websites.

Chapter 7: Application Icons

We finish on the largest and most complex of all the icons, which are more often than not, photorealistic works of art.

Appendix

Handy reference, including: Common icon badges, overview of drawing and creation tools and a comprehensive icon reference chart.

Along the way, I talk to icon designers such as Susan Kare, David Lanham and Gedeon Maheux of the Iconfactory and many more about their process behind well known icons.

On top of all that, there’s some jolly nice eye candy in there!

Thanks must go to many people (the acknowledgments is 2 pages) but I must particularly thank the team that put this together at Five Simple Steps, including Emma, Nick and Mark Boulton, Colin Kersley and Sarah Morris. Also to the words team: my project manager Chris Mills, copy editor Owen Gregory, and technical editors Gedeon Maheux of The Iconfactory and inimitable Andy Clarke.

You can purchase the digital edition and/or pre-order the paperback which will ship around 30th Jan 2012. There will also be an accompanying website at iconhandbook.co.uk which will contain reference and code examples from the the book, as well as a blog with bits that didn’t make it into the first edition!

The Icon Handbook is ready and will available to buy tomorrow (Tuesday December 20th), from Five Simple Steps 3pm GMT! You can purchase the digital edition or pre-order the paperback which will ship around 30th Jan 2012. A proper blog post will come tomorrow, in the meantime, I need a good sit down and a cup of tea…

…as we have a date! The Icon Handbook will be available to pre-order on December 20th!

More details will be released shortly, but the Five Simple Steps page has an introduction and table of contents to give you a flavour.

I’ve written my first book!

Its taken even more time and energy than I ever dreamed it would, but yesterday marked the very last chapter passing it’s final stages of being buffed and tweaked into a manuscript that people would actually want to read.

I started planning this book 5 years ago, and only the combination of Five Simple Steps, Chris Mills (A.K.A “Mills of Steel”), Owen Gregory and my technical editor, Gedeon Maheux of The Iconfactory has made it actually happen.

All the icon artists I contacted (bar one – but I shan’t name any names!) were enthusiastic and responsive, which made it a joy to organise. Many responses came with fantastic icon material that hasn’t been seen before – early ideas and process snapshots, as well some yet to be released.

More details of the book will follow soon, but for now, here’s a work in progress of the cover to (hopefully) whet your appetite!

I’ve been following the announcements of the new Windows 8 UI (and particularly ‘Metro’) this week with great interest. I think they’ve done a fantastic job with Metro, it really looks like a fresh start UI wise.

One detail stood out in particular. In the screenshots I noticed that they’ve adopted the Open Share Icon in their UI.

To fill you in, the Open Share Icon came about after the original share icon was purchased by the company that provides the ShareThis service. While still licensed for public use, some people felt this wasn’t in the spirit of the thing, and decided to create a completely open version instead. It’s this version that Microsoft has adopted.

So why is this newsworthy? Microsoft did the same back in 2005, when they adopted the RSS icon that Stephen Horlander created for Firefox 1.0. That adoption quickly established it as a standard, and standards are good for everyone. Before long we will think of share as this symbol, without thinking twice.

Working with Steve Pearce and Mark McLaughlin from Skype, and genius animator Julian Frost, Hicksdesign has updated the complete set of Emoticons for its desktop and mobile clients. Currently released in the Windows and Android versions, Mac and iOS will follow later.

The brief was simple, update the Emoticon set, providing multiple sizes (20,30,40,60,80px), but retain the style that is already familiar to millions of users worldwide. The original set was designed by Priidu Zilmer and only existed in one size – 19px. An odd numbered grid can allow you to centre elements better, but the decision was taken to start at 20px to allow more straightforward enlargement. This meant some of the basic proportions of the eyes to head had to be changed.

The 20px was the first to be drawn in each icon, followed by the 80px. For the new icons, the Photobooth Reference technique was employed a lot…

My favourite part of the project was seeing Julian give them life, and provide motion that I could never have achieved. That dance icon is a work of modern art. Emo is another personal favourite

In all, there are now 98 emoticons. It’s been a fantastic project to work on, and with superb clients to boot.

Let’s get straight to it! I’m busy writing a book called “The Icon Handbook” to be published by Five Simple Steps, hopefully at the latter end of this year. It will be ‘application-agnostic’, looking at the process of creating icons for web as well as software. It will be a manual, reference guide and coffee table book in one.

For the last 5 years I’ve been wanting to write this book – I keep looking around for other books of its type on the market, but never find any. Now the conditions are right – namely a decent publisher that cares about the quality of the printed book, and the right team of people to make it happen!

Follow Five Simple Steps on twitter (and myself if you like) if you’d like more information as it becomes available!

With the iPad and iPhone 4, there are as many, if not more, different size icons to create for iOS than there are for desktop apps. While there are plenty of templates and reference sheets for Photoshop users (see Cocoia) I prefer to use Illustrator CS5 to create mine. So I’ve made my own template, and it’s available here if you find it useful too!

Download the iOS icon template for Illustrator CS5

The top layer of the file contains labels and a mask to add the rounded corners of the icon. Don’t forget to hide these before you export.

Corner Radius

Something that Apple doesn’t include in it’s documentation are the various corner radius dimensions for all the icon sizes. This information has been compiled thanks to investigations of Sarah Parmenter and Tim Van Damme.

It’s best to create the artwork with 90° corners and let the OS round them off, but there is a mask layer to help you check how it would look. The mask also uses the appropriate colour for the context – white for the app store, black for the home screen and light grey for the spotlight results.

Also the icon that iOS uses for spotlight results on the iPad is trimmed by 1px around the edge. So while the artwork still needs to be supplied as 50px, the visible area is only 48px, and the guides reflect that, while the rounded corner mask stays at 50px.

Exporting

The icons are all set out on their own artboard, so when you’re ready to export check the ‘Use Artboards’ option to get each icon as an individual file:

Disclaimer

While I’ve worked hard to make sure this template is as accurate as possible, I can’t guarantee it’s completely error-free. Let me know if you find any bugs, and I’ll update it!

If you’re using CS4 or below, this template may well work for you, but hasn’t been tested and may explode leaving terrible stains. I target CS5 because of it’s the first version that has pixel snapping that actually works!

I’ve never over-run on a talk. Ever. Usually I embarrasingly finish around 10 mins early, leaving plenty of time for questions.

Until last week at Future of Web Design that is. When it came down to the last 5 minutes, I realised I had a lot more to go, and had to really hurry the last couple of sections. Thankfully the feedback so far has been positive, but I promise this will be (probably) be the last time I talk on this subject.

The Principles of Icon Design was originally based on the talk I gave at @Media last year, Icons for Interaction, but soon started taking a different form. This one focused more on the process of icon design, although they both share similar examples and concepts. It features new work too however, such as some of the work I’ve been doing with Jolicloud, my first freelance project after leaving Opera.

As promised, you an grab the slides (with notes) here: Download the Principles of Icon Design PDF (17.3mb)

Finally, I must mention how much I enjoyed the conference. As well as meeting old friends, I got to meet new ones, as well as finally meeting design heroes Joshua Davis and Brendan Dawes. When I was working as a print designer at an educational publishers in Oxford, it was these chaps who inspired me to design for online. I always get a bit awestruck meeting such people. (There’s only one other hero I’ve yet to meet – Jason Arber).

A BIG thankyou to Carsonified (and Cat Clark in particular) for organising the event so well.

This month’s .net magazine (#196 December) features my article ‘Design the perfect icon’. focussing on icon design for websites, rather than for software. It expands on the talk I gave at @media earlier this year Icons for Interaction

This is my first really big magazine article that I’ve written, and found 5500 words much harder than I thought, and probably won’t be writing another one in a hurry! However, I’m really pleased with result, and it’s given me an idea of how much harder it would be to write a book.

Last week I had the pleasure of attending @media 2009 in London, where it has to be said, I had the best conference experience I’ve had for a long time. I prefer the more cosy nature of the event – a single track, not too large and overwhelming quantity of people, and simply great talks. I can’t pick one favourite presentation, as I came away feeling really inspired and energised by everything.

It was also the last @media curated by Patrick Griffiths, who is moving on to follow other passions (from next year the conference will be in the able hands of the Web Directions Team). I want to take this opportunity to thank Patrick for encouraging me to talk, and giving the best possible environment to do it in.

After giving the presentation, I realised that there are 2 areas, only touched on briefly here, that should be expanded on: Icon Accessibility and Icon Usability Testing. Those are big topics for another day/talk/blog post, so until then here are my slides for my talk on ‘Icons for Interaction’:

Download the Icons for Interaction PDF (18mb). All links are available on my delicious account, tagged icondesigntalk. My speaking notes are also included in the PDF, hopefully this will be enough to make the slides meaningful.

The typeface I used for this was Comic Crafts Astronauts in Trouble.

Just over 2 years ago, I started work on what turned out to be my largest icon project to date, for the new version of Linotype’s FontExplorer app (or ‘FEX’ as it’s also known). It was great to be asked to work on an app that I use everyday, and as the project grew, over 280 new icons were created for it, and at several different sizes.

The first job was to look at the application icons for Pro and Server editions. Amongst the early sketches, I was very keen on an early idea that used a printers wooden draw of metal type:

However, the child’s block idea was chosen, as Linotype liked how it suggested using the app was ‘childs play’, so this idea was progressed into early vector roughs:

As you can see, the Linotype L logo was common theme to all ideas, some more subtle than others. At one point we considered a transparent version:

These were worked through until we arrived at the final icons. Both apps also have updaters that show them packaged in plastic and brown parcel tape:

One of the requirements of the brief was that the client needed original vector artwork, so for the first time, I used Illustrator to create all the icons, not just the larger application icons. There are pros and cons with this – Illustrator has handy features such as global colour and selecting elements by same stroke or fill, but when it comes to pixel perfect rendering it’s a pain. You end up using little workarounds (such as not making a stroke 1 pixel, but 0.8) in order to achieve crispness.

Finally, to be ready for Resolution Independence (and as no one has created vectors that can scaled down effectively as well as up), several versions were required. So for each of those 280 odd icons, the following sizes were required: 16, 32, 48, 128 px, with application icons requiring a further 256 and 512px version. As a lot of these interface icons are 16px at default, the 128px version didn’t need to be as detailed/photorealistic as an application icon would be at that size, but still look good at that size. Here are some examples:

It was not only a great project to work on, but also a great client to work with!

Update: I’ve had such a great response to this! It looks as if I’ve already got the job covered, but please do send in your details and samples. I promise I will look at each one and keep your details for future projects. Thanks!

I need help! Are you icon designer, experienced in creating application and interface icons for Mac OS X and Windows XP/Vista? Can create icons from 16px up to 512px? Yes? Now, are you free this month?!

I have an large-ish icon project for a software application (can’t say more than that at the moment) on with an urgent deadline of the end of April, and I need your help! If this sounds like you, please drop me an email (see the footer) and let me see your portfolio, either online, or as attached samples. Even if you’re not contracted on this project, I’m always looking for good designers to recommend clients to, and work with.

The new 1.1.3 firmware for the iPhone and iPodTouch brings with it the ability to add a ‘webclip’ from Safari to your home screen.

Thanks to this tip you can easily create a custom icon for people visiting your site, that works just like your favicon. Its just a shame you can’t add your own for other sites – I would love a custom Google Reader icon.

EXTRA : Having tried Nathans suggestion of 158×158px I can confirm that this size does indeed produce a crisper icon. Also, Drew has come come up with a way of using custom icons. I’ve put one up for Google Reader here

There has been a lot of requests for one of these, so I’ve finally made the PimpMySafari logo into a custom Safari icon!

Download this zip file to get the icon as an .icns file, iContainer and applied to a folder.

How To Install

There are 3 ways to install the new icon

• If you have Pixadex, import the iContainer, and apply the icon with Quick Drop
• Ctrl Click Safari.app and choose “Show Package Contents”. Drop the new compass.icns file into the /Contents/Resources/ folder.
• Select the folder with the PMS icon, choose Get Info from the Finder (Apple-I). Click the icon and copy (Apple-C). Do the same with the Safari.app but paste intead of copy.

Please note that due to lack of time this icon file does not include 48,32 or 16 pixel resolution components, but should be fine in most situations.

Enjoy!

Issue 2 of the excellent PDF magazine Design in Flight is now out, including my article on creating the interface icons for NetNewsWire 2. This is my first ‘proper’ article, and I found the process rather daunting, especially after reading the first issue, where the quality of the articles was so high.
The question I get asked the most is ‘How do you create icons?’, so hopefully the walk-through will be useful.

At $10 for a year’s subscription Design in Flight its a snip, and Issue 2 contains articles by Eric Meyer, Keith Robinson, Eris Free and many others.

The public beta of NetNewsWire 2 is finally available. Go and get yourself a copy, and enjoy new features like (amongst many others) the in-built tabbed browser, with rendering powered by the Safari webcore. Version 2 is also a free upgrade if you’re already a registered user.

With this release, NNW’s welog editor becomes a separate application called MarsEdit. While this doesn’t have the large feature set of Ecto, I prefer the way the interface is laid out and find it much more intuitive. In my last month or so of using Movable Type (before switching to Textpattern), I was using this to write to my journal. One important feature of Ecto’s it does have is the ability to assign your own stylesheet to the preview, to get a better idea of how the article will look. Textpattern is going to include MetaWeblog support soon, so I hope to be back using this when that happens.

For this version of NetNewsWire, Brent Simmons had asked me to redesign the interface icons. A new set was created, although later on in the beta cycle these were redrawn by Bryan Bell to keep them in a family feel with MarsEdit (which had already been finished by that point). So that my icons didn’t go to waste, Brent has added a way of swapping themes via Terminal:

1. Quit NetNewsWire if it’s running.
2. In the Terminal, type: defaults write com.ranchero.NetNewsWire toolbarTheme JonHicks (Hit return.)
3. Launch NetNewsWire.
4. To get back to the default set, step 2 should be: defaults write com.ranchero.NetNewsWire toolbarTheme default

Here are those icons:

I’ve had a lot of requests for a write up on how I go about creating icons, so I’ve written an article, using the process from designing the NNW icons from sketches to finals as the basis. This will hopefully be published soon, more on that later.