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

Icon Handbook Site Updates

When the Icon Handbook was first released, back in 2012, it coincided with some rather more important life priorities and as such I didn’t market it as well as I might. In particular, the website was left half-finished, lacking a mobile view, SVG icons and a icon size reference chart that was rapidly going out of date. I’ve since not found the motivation to go back to it…until now. Smashing Conference in Oxford this week (more on that next) gave me a kick

I still have more plans for the site, but at least for now I’m not so embarrassed about the stylesheets, or outdated information. ALL the icon reference charts have been updated to reflect the missing new changes (Android xxhdpi and xxxhdpi, iOS7, Blackberry 10, Windows 8), and charts for Symbian, Meego and Ubuntu have been removed. Ubuntu will be back as soon as they send me the new info! I’ve also updated the Favicons page to add new sizes like Windows 8 Pinned Tiles, and remove things like Opera Speed Dial images that are no longer applicable.

If you haven’t bought a copy yet it’s on sale until the end of March, so now is a good time!

20% off all Five Simple Steps books!

This is a great opportunity to add more colour to your bookshelf with 20% off all Five Simple Steps books throughout July. Not only my own Icon Handbook, but also my current favourite Designing the Invisible by Robert Mills, and Andy Clarke’s labour of love Hardboiled Web Design. Then again, I can’t single out those when there’s Brian Suda’s Designing with Data and Mark Boultons classic Designing for the Web.

If you’re missing these titles in your library, now is your chance to see why I approached them to publish my book!

Celebrating 10 years of Hicksdesign with The Icon Handbook!

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!

Icon Fonts Follow up

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:

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

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!

Available tomorrow!

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…

It's been quiet around here, but not for much longer…

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!

Announcing The Icon Handbook

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!

Archives by tag:

2006, 2007, 2012, 2013, accessibility, acoustic, actionscript, adobe, advert, adverts, advice, air, alternative, ambient, analog, apple, applecare, appletv, apps, appstore, art, articles, atmedia, attap, audio, australia, authenticjobs, awards, ban, basecamp, bbc, beatles, belkin, bikes, bikeshops, bitmap, blackhole, blog, blogs, bluetooth, boardman, bonecho, books, boxee, boxeebox, boxmodel, braindump, breakfastbaps, britain, british, browser, browsers, browsers.mozilla, bug, bugs, cairo, cakes, calendar, camera, camino, casestudies, cbbc, cc, chap, chaps, charity, cheerup, cheese, childreninneed, christmas, cinelli, classics, cms, cocoalicious, coda, code, collections, colnago, colour, colourblind, colourblindness, comedy, comments, competition, comps, conferences, copywriting, cotswolds, country, covers, craft, crafts, creativity, cs5, css, css.webstandards, cycling, danielsmonsters, delicious, dell, design, design.colourblindness, desktops, development, digital, discovery, discussion, diy, dock, doctorwho, dogs, drawing, dream, dreams, dropbox, drwho, education, electronica, email, emoticons, endofyear, england, events, evernote, expressionengine, eyetv, family, favicons, feedback, femalevocal, figures, film, films, firefox, fireworks, firstworldproblems, flash, flexible, flickr, flock, fonts, found, foundries, foundsounds, fowd, free, freelancing, frontrow, ftp, g5, games, gaming, gardening, garlic, geek, geekends, geekery, geekmediabox, genesis, genius, gentleman, gifs, gigs, google, googlereader, grammys, graphics, greader, grids, gtd, guvnor, hacks, handbag, handbags, hardware, harrypotter, helvetica, helvetireader, heros, hicksdesign, history, holiday, hosting, howto, hp, html5, humanrights, icab, ical, ichat, icon, icon design, icondesign, iconhandbook, icons, ideas, illustration, illustrator, illustrators, im, images, indesign, infographics, inspiration, installation, intel, interface, interfaces, internet, internetexplorer, interview, interviews, inventions, ios, ios7, ipad, iphone, iplayer, ipod, itsmyblogandillbangonifiwantto, itunes, javascript, jobs, journal, justabitoffun, knitting, koken, leaflets, lego, leigh, less, lifecraft, lifeio, links, list, listening, lists, littlebigplanet, logo, logo design, logos, london, londonbombing, mac, macbook, macmediacentre, macmini, macs, macworld, magazine, magazines, magazines.illustration, making, maps, mechanics, mediacenter, mediacentre, mediacentres, mellow, memes, memories, menus, merchandise, messages, metal, metro, microformats, microsoft, mkgn, mobile, modernart, moleskine, monkeybutler, moon, movabletype, movies, mozilla, mum, music, myob, natural, nerdery, newmusic, news, nintendo, nostalgia, nostradamus, notes, obituaries, offers, office, offscreen, omniweb, opacity, opensource, opera, organisation, os, osx, oxford, oxfordgeeknight, packaging, panic, panther, paper, parallels, pashley, penguin, people, personal, phantogram, photo, photography, photos, piecharts, pimp, pipes, plex, plugins, png, podcast, polygamy, posters, powerbook, practice, presentation, presentations, presents, press, print, printmaking, productivity, products, projects, propoganda, ps3, published, punditry, puppetry, questions, quicksilver, quotes, radio, radiohead, raf, railway, rants, rapha, recentwork, repair, resources, responsive, retorts, retro, review, reviews, riffs, righteousindignation, rip, ripoffs, rissington, rss, safari, saft, sage, samantha, sass, sauce, science, scifi, scrapbook, scripts, security, server, shelf, shiira, sideprojects, signage, simplenote, sites, siteskin, siteskins, sixties, skinning, skype, slides, slowcore, software, solutions, songbird, sony, sound, spam, speakers, speaking, sponge, spotify, spotlight, starflyer59, startrek, starwars, stationery, steel, stevejobs, store, stories, summerboard, surveys, svg, sxsw, syncing, tagging, talks, tasks, tattoos, tea, teasing, templates, ten, texpattern, text, texteditor, texteditors, textile, textpattern, thebeatles, theme, themes, theming, thenational, theory, tiger, time, timeline, tips, toys, tumblr, tv, tweed, typefaces, typography, ui, updates, updtes, userstyles, vans, vector, veer, versions, video, videos, vinyl, vw, wallpaper, web, webapp, webapps, webbies, web design, webfonts, webkit, website and logo design, webstandards, whitenoise, why, widgets, wifi, wii, windows, windows8, winter, wireframing, wishlists, wordpress, work, working, workshops, xhtml, xul, yojimbo, youtube, zengarden, zip

The Hickensian is the journal of Jon Hicks, one half of the creative partnership Hicksdesign. Take a look at the work we do.

Upcoming Talks

I sometimes pop up at conferences and waffle about design, icon creation in particular. Here's where I'll be next:

An Event Apart Chicago- "Icon Design Process" - 25-26th August 2014

Web Expo Guildford- "Icon Design Process" - 26th September 2014

Beyond Tellerrand Berlin – 3rd-5th November 2014

playlist

See more on last.fm

Contact

Hicksdesign

73a High Street

Witney

Oxfordshire, UK

OX28 6JA

+44 (0)7917 391 536

Download vCard

Engine Room:

Hicksdesign is powered by Textpattern and hosted by the lovely boffins at Engine Hosting

Engine Hosting