While away at the New Adventures Conference in January this year, I had the news that my mum had been diagnosed with a tumor. It was localised, and there was a good chance of success, but as it was on her tongue and throat, which made speaking (and understanding) increasingly difficult.

The following months were a tough slog of various preparatory operations, before 5 weeks of radiotherapy. It wasn’t pleasant, but the treatment ended with a feeling of optimism. She was however, left feeling very weak from it all. Just a week later she contracted pneumonia, and was rushed into Warwick hospital to be treated.

My two older brothers and I dashed up to see her, and got a shock. Compared to her condition just two weeks previously, she was even more fragile, as if she’d aged another 10 years. In the few days that followed, she came in and out of consciousness. On occasions we were able to communicate a little.

On the morning of Thursday 10th May morning she seemed stable, to the extent where I started to believe that recovery was possible, even if it meant a long term recovery. Within a few hours we learned that it wasn’t to be, and were told this was it.

Whatever horrible things she had to endure in the last 4 months, in the end, she died very peacefully in a calm private ward, with her three sons and brother with her. The nursing staff of Warwick Hospital who looked after her (and us!) were nothing short of fantastic. We really couldn’t have asked for more of them.

(Mr Chuckles at the front there is me)

My mum’s name was Dorothy, and was known to her many friends as Dot. Her brother always called her Fred, while her sons decided in the early 80’s that they were going to use ‘Ada and Bert’ instead of ‘Mum and Dad’, and the name stuck. Whatever she was called, everyone had the same impression of her: an exceptionally kind and caring lady. She was also exceptionally stubborn and strongly refused a lot of help. I really wish she hadn’t.

My mum gave me so much, she was the best you could ever hope for. Our family have lost our rock, and now there is a painful void. I just hope that the memories of the last few months disappear, leaving the rest intact.

Goodbye mum, I love you and miss you so, so much.

Tagged: mum

Riding a singlespeed can help bring back the unfettered joy you experienced riding your bike as a child. You don’t realize how much mental energy you devote to shifting until you relinquish your derailers, and discover that a whole corner of your brain that was formerly wondering when to shift is now free to enjoy your surroundings and sensations.

Sheldon Brown

After buying a new road bike last summer, I was pondering what to do with the now-redundant Peugeot. I really fancied a retro/modern project bike to work on, and after seeing pictures of a Charge Plug (below – a bike with exactly the aesthetics I was after) I set about converting the Peugeot to a Plug-style singlespeed to use on the commute to the office.

The Charge Plug

The first stage was quite cathartic – remove all the surplus components from the bike, stripping it back to just what it needed. Off came the front and rear derailleur, cogs, large chainring, bottle cage and brake levers/shifters. Once the relevant cables were cut, this was all very straightforward.

I loved the process of sourcing parts and learning how to put them together myself. From the original Peugeot, I kept the frame, cranks, calipers and seatpost along with pedals I’d bought for my Globe Daily (now sold to a new owner). Then off ebay I got the following:

• ‘New’ Rigida wheels: These weren’t necessary, but I liked the style of the deeper rims, and silver colour, as opposed to the skinny black ones that came with the Peugeot originally. They were also a complete bargain at £30!
• Charge Spoon saddle: My favourite bottom perch
• Charge Slice Bullhorn Bars: Bullhorns give more hand positions than a standard flat bar, and the extensions are great for extra leverage when you need more power going up hill. Its great to ride. They’re only £20 brand new anyway.
• Chain tensioner: Because the length of the chain is restricted by the width of the links, you’ll most likely end up with a bit of slack. ‘Proper’ singlespeed/track/internal hub frames have horizontal dropouts at the rear, so you can just adjust the position in the dropout to take up the slack. However as I wanted to use my road bike frame, it has vertical dropouts, so I needed a chain tensioner. More on that later…
• Velo Orange stem: Used, but was immaculate! Shinnnnyyyy!

And then the parts I had to buy new:

• Short chainring bolts: The inner chainring needed remounting onto the front, with shorter bolts. A few pounds from Charlie the Bikemonger
• The gaps left by the removed rear cogs was filled with nice polished alloy Hub Spacers from Velosolo.
• 25mm Schwalbe Marathon tyres: I wanted slightly wider tyres, with more tread than my road bike, and found these with a reflective wall – ideal for commuting!
• Cyclo cross style Tektro brake levers: These were a Christmas present :)
• Fizik bar tape in brown to match the Charge spoon saddle

And here’s the end result:

The hardest parts of the process were getting the chainline dead straight (a lot of fiddling but got there in the end!), and setting up the chain tensioner correctly. I tried all sorts of fettling with it, but it was always too noisy once engaged with the chain. The chainline was definitely straight, and ran smoothly without it (just a bit loosely) so in the end I got a Charge Masher ‘half-link’ chain which did away with the need for a tensioner altogether. No noise, the right tension, and no extra gubbins needed!

I’m really pleased with how it turned out! Its fun to ride and ideal for commuting, keeping my proper road bike (currently a Canyon Ultimate AL self-build) setup for my jaunts around the countryside.

Tagged: cycling, projects

When designing app icons for iOS it’s useful to know the corner radius for each size to preview it correctly – even though the exported png needs to have sharp corners. This is why I include the radius size on the Icon Reference Chart and a mask layer on the OS Illustrator Template.

These sizes are rounded up to the nearest pixel though, and when David Barnard of AppCubby consulted Louie Mantia (former Apple, Square, and Iconfactory designer) he found the true sizes:

Apple starts with the 57px icon and a radius of 10 then scales up or down from there. Thus you can calculate the radius for any icon size using 10/57 x new size (for example 10/57 × 114 gives 20, which is the proper radius for a 114px icon). Here is a list of the most commonly used icons, proper naming conventions, pixel dimensions, and corner radii.

This means that the correct radius measurements are as follows:

If your design doesn’t have any visual elements that follow or echo the corner radius, then you can safely ignore these measurements, and I would normally do just that. Occasionally though, you may find that the right solution requires it, and therefore the more accurate may be useful. Icons like Camera Genius use the corner radius as part of the design:

Obviously, at a pixel level, the difference really is minute, but may be just enough to make it feel as if it’s not sitting right:

Compare the 2 corners in this image, and you can see that it is different. I created this in Illustrator, which does allow you to use radii with a decimal point – your mileage in other apps may vary. For now I’m not sure if adding these to the Icon Handbooks iOS Reference Chart is over-complicating matters – I’d love to know your thoughts via Twitter!

Tagged: icons, ios

MK Geek Night is a free Milton Keynes based meet up for people to meet up over a few beers and chat about web design, development, UX, technology, creative stuff, photography and general geekery. I shall be speaking about Icon Design at the inaugural event on the evening of Thursday 21st June 2012 at Buszy in Central Milton Keynes.

Visit MK Geek Night for more information.

Firefox will be joining Chrome and Opera by removing favicons in the address bar. The main issue is that sites can make their favicon a padlock icon, thereby making it ‘appear’ secure (when in fact its a bit naughty). I think its just IE and Safari left now.

Comment on this

My model of management is the Beatles. The reason I say that is because each of the key people in the Beatles kept the others from going off in the directions of their bad tendencies. They sort of kept each other in check. And then when they split up, they never did anything as good… so John kept Paul from being a teenybopper and Paul kept John from drifting out into the cosmos, and it was magic. And George, in the end, I think provided a tremendous amount of soul to the group.

I don’t know what Ringo did.

Steve Jobs in an interview from 2004

Tagged: apple, beatles, stevejobs

Whenever I’m asked what app I use to draw icons, I’ve always recommended Illustrator. However, I recently discovered an important drawback though when creating large icon sets – there is a limit of 100 artboards per document.

Artboards are a great way of defining areas to export – you can keep all the icons for a project in one file, work on them in company and context, and use export scripts to create individual files. When I moved from Fireworks to illustrator, it was artboards that replaced the pages/states feature in FW. I think the arbitrary limit was set to avoid performance issues, but when you’re dealing with simple monochrome icons, that would surely never be an issue.

This is one of the reasons that Mordy Golding prefers Slices (with other good reasons), but export scripts certainly get around at least three of the artboard issues he mentions, and there are some drawbacks with slices:

• Slices can’t overlap, whereas artboards can. This is useful for the ability to export individual files as well as one large sprite.
• Slices are more hassle to name. Artboards aren’t particularly easy either, but at least you can hit Shift + O to enter artboard mode, or double click the artboard name in the list.
• You can’t align objects to slices, only selections and artboards.

But of course, you can have an unlimited amount of slices! In general though, I find slices in Illustrator a rather fiddly way of managing multiple exports.

In Sketch however, (and particularly Sketch 2) slices are great. They can be place anywhere, named easily and have the option to export final files without a specific layer – handy if you’re drawing icons on top of a background colour (such as dark toolbar) that you don’t want exported.

Adobe are currently gearing up for CS6, and maybe the artboard limit has been relaxed, but keep an eye out for Sketch 2. I’ve been very excited playing with the beta version, its got bags of potential!

Tagged: icons, illustrator

In 1954, Cycling Magazine ran a competition asking readers what they thought the bicycle would be like in the year 2000. They weren’t that far off either (click the image to view larger) – frames made of plastic, cables concealed in tubing and electrically welded frames. There was however, no explanation of the ‘Twin Top Tubes’. As reader John Caine, astutely guessed:

Our old friend the bicycle will remain essentially the same…

Tagged: cycling

Bell (Taken with instagram)

This man, so rough in appearance, with hands like hams, was an artist, producing the most delicate wistfull pen and ink drawings to a standard that has seldom been equalled

Frank Peterson, “Englands best known, unknown artist” is a very recent discovery for me. Through his published work in periodicals such as Cycling magazine he captured the romance of cycle touring in the UK with pen and ink. His first work for Cycling was in 1893, but I tracked down some copies from 1937-39 which as some excellent examples of his work. The majority have the running theme of picturesque landscape, with the bike that bought him there in the foreground.

For more information, visit The Frank Peterson Society, and
The Ride Journal Issue 6 has a feature on Frank Peterson.

Tagged: art, cycling

My friend Simon at Goo Software recently needed to open a zip file on his iPhone, view it contents and send one of the files to someone else. A simple task you would think, but upon finding that there were no decent solutions available on the App Store, he did what any self-respecting iOS developer would do – made one himself!

The result is Zippity, the easiest way to handle zip files on your iPhone!
Preview contents, send via email, open in other apps on your iPhone. For a mere 69p it also supports .tar, .tar.gz, .gz as well as .zip.

Buy Zippity on the App Store

Tagged: apps, ios, zip

Tattly, the arty temporary tattoo people have launched a new collection of bike tattoos! I love the ‘Lets Ride’ and ‘Pug on a Bike’ ones particularly:

Tagged: art, cycling, tattoos

Cleeve Hill Climb ©circuitofthecotswolds.org

This coming June, I’ll be riding my first sportive, the annual Circuit of the Cotswolds, and in doing so, raising money for Helen and Douglas House.

The Ride

I’m someone who has spent the last 10 years at a desk, not doing any sports or exercise bar the occasional walk. Most days my exercise was walking from a car park to an office. As such, I’ve been unfit, and very overweight.

This all changed last year when I discovered cycling. I’ve lost over a stone and a half now, and I’m ready to take on my first sportive! Well, actually, I don’t feel quite ready yet to cycle 70 miles over Cotswold hills, but I’m training as regularly as possible to be as ready as I can be. While 70 isn’t a big deal for some, it definitely won’t be an easy one for me.

As well as bit of suffering, the aim of this ride will be to raise money for Helen and Douglas House.

About Helen and Douglas House

Helen & Douglas House is a registered charity providing respite and end of life care for children and young adults with life-shortening conditions, as well as support and friendship for the whole family. The two hospice houses are bright, vibrant and positive places, where the emphasis is on living life to the full, even when that life may be short.

Children can stay at Helen House and young adults can stay at Douglas House, along with their families, for short periods of time for rest and recuperation, treatment of distressing symptoms and end of life care and support. In any one year we support over 250 children, young adults and their families.

It costs over £4.5 million every year to run Helen & Douglas House, most of which comes from voluntary contributions – your support means a great deal!

I hope you’ll consider supporting me – I’ve set a very modest fundraising target, but I’m sure with the power of the interwebs, we can beat that into a cocked hat!

So, here we go: Please sponsor me!

Tagged: charity, cotswolds, cycling

jakenickell:

aledlewis:

I like the new icons on the dashboard, but why does is there still a ‘Photo’ icon? Illustration, typography, fine art, animated gifs, etc aren’t ‘Photo’. It should simply be ‘Image’. 

Amirite? Reblog for justice.

Reblogging in the name of justice

Release notes can be found at Bug 725812. See the full article for the usual status matrix.

Please note that there will be one and only one release of any localized version of Camino. Therefore, it's very important that release notes translations are produced and sent as soon as possible.

The translations are expected to be sent by Sat, Feb 18

I loved bike shops as a kid (especially the smell of them!) but we didn’t, and still don’t, have anything quite like this. 718 Cyclery is not only a great retail space, but the whole attitude to building bikes and access to the process is unique and just plain brilliant. I found myself nodding in agreement to everything Joe says.

As for the bike they build in video – gorgeous!

Via twinfish on twitter.

Tagged: bikeshops, cycling, videos

When I was writing The Icon Handbook, I had my list of first choices for people I wanted to work with. Chris Mills and Owen Gregory for Project Manager and Copy Editor, Gedeon Maheux from the Iconfactory for Technical Editor, and for the foreword… The Noun Project. All of which said yes! I absolutely love what The Noun Project are doing, there isn’t a comparable site for the quality of it’s curated collection of pictograms.

So when I was asked to write a guest post for The Noun Project blog, I was chuffed to bits! The post I’ve written, ‘Insights on Symbol Design’ contains portions from The Icon Handbook (and as such It’s another taster for the book), but was still written more or less from scratch, looking at considerations of pictogram design in particular.

Comment on this

Last Autumn I borrowed a friend’s Turbo Trainer, an odd looking device that allows you to use your bike indoors for training. With the nights getting longer and the weather getting worse, it seemed like a good way of retaining the fitness gains and weight loss from the summer.

My first experience wasn’t that great, rather uninspiring in fact. The bike is locked into a rigid position, there was a fair bit of noise (even though this was one of the quietest ones) and it felt nothing like cycling on a road. For my second session, to a proper structure and keep up the interest, I played a Sufferfest video, which helped a lot. Here’s the trailer for the one I bought, ‘The Downward Spiral‘…

If you’re watching this trailer sitting on a sofa, rather than a turbo trainer and bike, you might chuckle at the music and captions feeling a bit overdramatic. Believe me, it doesn’t once you’re on the bike and you get the instruction to ‘close the gap!’ you go for it. 25 mins later however, there was the strong smell of burning rubber, and lo, I had melted the rear tyre, and the floor was littered with rubber shavings. I’d love to claim this was because I was doing such an intense workout, but I think I’d just set it up with the wrong resistance.

The way around this is to use a special turbo trainer tyre, made of a much harder compound, and the easiest way to do that is to have a separate wheel setup ready and change it over for a turbo session. That means getting another tyre, wheel and cassette! But that’s not all you need, as the you also have to prop the front wheel up, have a fan on to keep cool and protect your bike from the corrosive sweat that drips off you in bucket loads.

It’s an awful lot of faff!

However, it wasn’t until the next ride that I felt the benefit. Just doing two short sessions during the week made the Friday ride much better. In the end though, I decided that getting a turbo trainer was the equivalent of a sandwich toaster – a dust-gatherer after the first couple of uses.

Now we’re in February, and the UK is having an extended cold snap where my usual routes have layers of compacted frozen snow. After falling off my bike last November, which made my ribs sore for weeks afterwards, I don’t fancy the risk, and I’ve finally caved in and got one. It’s always going to be better to riding outside, but for the times I can’t, I can at least do a hamster in a wheel impression.

Tagged: cycling

I’m getting a lot of ‘Are you still using Fireworks?’ questions recently, and my answer is ‘Not for almost 2 years now…’. I’ve been using Illustrator CS5 solidly ever since, but part of the transition is going from Fireworks Pages/States to Illustrators multiple artboards. Artboards are more flexible, and allow you to have see everything at once, but the built-in options for exporting artboards are limited.

I use this wonderful script, which provides all the settings I could desire, from format to filenaming. Top work!

Comment on this

There are a few apps that I’m particularly enjoying using at the moment, so I thought I’d share in case any of them are news to you:

Choosy

Choosy does a seemingly simple task, and does it very well. For a start, it provides a central preference pane to choose your default browser, but its main thrust is letting you choose which browser to open a link in. You can do this either manually via a chooser display (right), or automatically depending on order of preference.

My favourite feature is ‘behaviour rules’. For example, I get emails from Opera’s internal bug tracking system, and I always want to open these in Opera, no matter what my default browser is at the time. I can now do that with one simple rule set up in Choosy!

For someone like me who still uses several browsers (mainly, but not exclusively, Safari, Chrome and Opera) it doesn’t ‘arf make life easier.

Fantastical

Quite simply, the best calendar app I’ve ever used. Its always handy (sits in the menubar), doesn’t have the vulgar leather stitched interface of iCal (yes I know about Busycal) but is small, neat, and made for humans. Yes, it still has an element of skeumorphism, but in my view its done right – just enough to make it feel warm with the distracting superflous details. As well as the mix of traditional calendar and agenda views, it allows events to be added using human language, with the calendar view filtering live as you type, and adding people and locations. Its a joy to use, and I use it as my one and only desktop calendar app.

And then, two well known apps that I continue to enjoy…

Evernote

This is still my central collection source. I’ve tried all sorts of ways over the years, but the Evernote ecosystem of desktop-web-mobile is still the winner for me. Shared notebooks works brilliantly, and they are constantly evolving the UI (such as the recent subtle Notes redesign). It all goes in here – images, PDFs, notes, draft blog posts, anything I want to remember or keep for later. Its my travel diary, design scrapbook, UI library, recipe and notes book. It was invaluable in writing The Icon Handbook:

There’s still a few niggles with Evernote – for example you can now drag a thumbnail out of the app to export it, but it does so in a format that only Evernote can read. Not really export is it? Despite a few niggles like this, I remain a big fan.

Spotify

I’ve had a on-off relationship with Spotify. In general, I treat it as a way of previewing whole albums before deciding whether to buy them, creating collaborative playlists and getting access to a large music library on my iPhone without any syncing woes.

They’ve done a few wonky things recently (such as requiring Facebook to sign up, sharing everything with Facebook by default) and since joining iTunes match (a service that I’m greatly impressed with) the latter reason is less important. However I’m enjoying a great new Spotify feature: Apps. I love the last.fm and Guardian reviews apps particularly, making it an even better place to discover new music.

Tagged: apps, osx

Earlier this week I recorded an interview with Chris Bowler for his Creatiplicity podcast. Chris has a very genial style and the whole affair felt very relaxed and enjoyable! Its not just about The Icon Handbook either, we discussed everything from parenting to cheese.

Pop along for a listen!

Comment on this

Stack #videogames #snes (Taken with instagram)

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!

Tagged: hicksdesign, iconhandbook, icons

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.

Tagged: iconhandbook, icons

Aw yeah. (Taken with instagram)

Tagged: photos

‘The Bacon and Cheese Machine’ is a collaboration between Illustrative genius McBess and P-G Bikes for Dudes Factory I’m a sucker for art projects like this, and really fancy having a go myself!

This video shows the intricate painting process unfold:

2011 was the year that cycling replaced the “search for the right media centre” as the main blog topic at The Hickensian. I’ve been pretty much starting from scratch in terms of knowledge, and gleaning information from all sorts of sources.

Here are just some of things I’ve learnt this year:

• There are Rules. 87 of them in fact.
• When mucking about with the stem height on the headset (for the purposes of slamming) you need to tighten the top cap before the stem bolts. If you do the stem first, you can’t tighten the top bolt properly and everything rattles. As I find out once, going downhill.
• The quick release on brakes is great for whipping the wheel off that bit quicker, just remember to put it down again afterwards. As I find out once, going downhill.
• Cream tyres look great on a retro build, but after a few short rides they look like you’ve wiped your bottom on them.
• Mudguards and chainguards protect you from muck, but metal ones are a constant source of annoying rattles.
• When changing tyres or inner tubes, you need just enough puff in the inner tube to give it some shape. Otherwise it gets pinched by the tyre and you get through quite a few inner tubes. I learnt eventuallly
• You need a good hard tyre to resist punctures, at least 90-100 psi.
• Just because a saddle is expensive, it doesn’t mean its right for you. Of everything I’ve tried sitting on this year, from Brooks to Fizik, the ones that suit my bottom best are by Charge: the Spoon and Knife saddles. They can be picked up for less than £20, look good and feel great.
• The day I made my saddle properly level (with a spirit level) was the day I stopped suffering from numb hands on a ride.
• The most important accessory/thing to take with you is water.
• Steel may be heavier, but it gives you a nicer, smoothed out ride compared to Aluminium.
• There are 2 types of SPD cleats/pedals – SPD‘s are small, metal and are intended for Mountain Bike use, whereas SPD-SL‘s are larger, plastic and intended for road bike use.
• I just love farting around with bikes. Which is why my Peugeot Project from earlier this year is now becoming a Charge Plug inspired single speed project. When thats finished there’ll be another bike project…

I still can’t wrap Bar Tape properly though…

Tagged: cycling

Tweaking.

Here’s a great find from the dusty depths of YouTube – a British Transport promotional film from 1955. Not only does this feature Tweed (plus fours much in attendance), cycling, a fantastic soundtrack, railways and country pubs, it’s also filmed around the area I grew up in Warwickshire.

So if you need an antidote to haggard looking men or hipsters doing trackstands on their fixies*, this is it!

Part One

Part Two

Via the Tweed Cycling Club

*I do love Rapha and fixie videos too, its just that, well, this is the complete opposite.

Tagged: britain, cycling, films, retro

Implosion.

Autocomplete WIP

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!

Tagged: iconhandbook, icons

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…

Tagged: iconhandbook, icons

Tagged: discovery, science

Todays 24ways article is Displaying Icons with Fonts and Data- Attributes, taken partly from Chapter 6 of the upcoming Icon Handbook, but rewritten to fit to the 24ways format. Instead of using the traditional route of PNGs, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique.

Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research.

Comment on this

…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.

Tagged: iconhandbook, icons

User agent preference

Paparazzi! error display WIP.

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!

Tagged: iconhandbook, icons

We’re having a truly Indian Summer here in the UK, and it looks set to continue over the weekend. It gets dark by 7pm at this time of year, so I had to get out early tonight to enjoy the warm rays while they lasted.

This image sums it up for me – riding through pretty countryside, with long shadows and village names that make giggle like a schoolboy.

Tagged: cotswolds, cycling

As the Apple TV doesn’t let you connect a drive directly with your content (it requires a ‘middle man’ of iTunes) getting your content to show up can be a little trying at times. Some of the reasons why it goes wrong are:

1. The Mac serving the content isn’t on
2. The Mac serving the content has dropped off the wifi network (happening a lot in Lion)
3. The Mac serving the content doesn’t have iTunes open
4. The Mac serving the content has iTunes open, but Home Sharing isn’t turned on (or using the same login as the one specified on Apple TV)
5. The drive where all the content is stored has become unmounted, so iTunes can’t access it
6. You’ve remounted the drive, but there’s a bug where if iTunes has tried to play content stored on the network drive, it corrupts the file path data, replacing it with some other obscure file (in my case, it seems to be a photo folder bizarrely)

In short, there’s too much to go wrong, and Apple TV is on the naughty step until these steps can be bypassed without hacks. Rant over.

Tagged: appletv, mediacentre

Most people think that the opposite of play is work (especially in the corporate world) but the opposite is boredom or even depression.

Great article about the design consultancy IDEO, and how they use a culture of play to support creativity.

Comment on this

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.

Tagged: icons, microsoft