LearnTouch icon goodness

Elliot
writes on January 21, 2008

Share with your friends










Submit

This week the interwebs have been alive with the sound of the so-called ‘touch icons’… a low hum possibly produced by them gently jiggling away on your homescreen.

Like many a designer looking for the frequent digital distraction, I’ve been creating some icons for the Carsonified sites. Earlier in the week, almost right after the iPhone / iPod Touch software update was announced, Dan was on the case and his walkthrough was a more extensive guide than the one on the Apple Developer Connection. Shortly after, Nathan experimented with larger image dimensions than the 57×57 recommended by Apple, and – after a few experiements from and on behalf of readers – found that 60×60 was the ideal size. Huzzah! Cue a lot of happy web designers, all making shiny new icons for their sites.

However, this was only the first stage. Drew came up with a bookmarlet to address the fact that we wouldn’t normally be able to edit icons for sites we don’t manage, only to have it improved upon by Rob to override websites’ existing icons (and then re-tweaked by Drew). Then, just when we thought we’d achieved the highest possible state of ecstatic icon-induced nirvana, Cameron modified the bookmarklet even further and made the whole process a doddle for the average user. (His article is also a rather nice summary of the work done by others.) Finally, we’re now seeing all kinds of sites pop up (such as Andy’s iclypso.com) that offer a number of icons ready for the end-user to install.

Phew! Now that I’ve worn myself out with a blow-by-blow account of that week – which will no doubt be out of date by tomorrow – I thought I’d show you the Carsonified icons (styled here so as to mimic their final rendering on the iPhone / iPod Touch) that I’m in the process of rolling out. They should be on all of the relevant sites by the end of the week.

Preview of touch icons

0 Responses to “Touch icon goodness”

  1. Lukethomasrichardson on December 14, 2010 at 2:04 pm said:

    Where did you get the icons you use on carsonified.com? I’ve been looking for a telephone icon like that for months and came across it by accident 🙂

  2. yeah.. 2.0 styles is in motion.
    i made one for one of my online apps the decision maker.

    Seems like MacOs is leading yet another trend in digital graphics.

  3. Sorry Jim,

    “To be completely honest, for someone of your talent Elliot, I think you could do ALOT better.”

    Better? How would you better the designs Jim, i notice you have no web link. Again anonymity strikes in comment fields.

    What you have here are nice strong graphic identity led sites. So why not use these strong graphics in the buttons? . . . Because people like Jim say they’re too simple. Surely simplicity and clarity are what your aiming for with projects of this nature. UI design is all about engaging simply and effectively.

    Great stuff Elliott, interesting stuff on the thought process as well dude. looking forward to FOWD!

  4. Gregor Mishem on January 22, 2008 at 3:35 pm said:

    At the bottom of this site we can find “Valid XHTML & CSS”.
    Does anyone take a look how this looks like when viewing with IE6, it’s not just important is it valid?

  5. Matt Munsey on January 22, 2008 at 5:28 am said:

    Very cool Elliot. I also like the one you did for you personal site as well.

  6. Scratch that, I just read the update on Nathan’s site. Sorry.

  7. Great icons Elliot, but I was under the impression that 158x158px icons presented a clearer crisper icon on the iPhone home screen!? Not that I can confirm this with my US model, the perils of wanting to be an early adopter.

  8. Being the large favicons/website identifiers that they are I don’t think they should be very “creative”, but more so make it immediately clear which website is behind the icon. So, excellent job! (Though I’d have a hard time matching the colours to their respective ‘future of…’)

    The iPhone launch here in the Netherlands is long overdue.

  9. To be completely honest, for someone of your talent Elliot, I think you could do ALOT better. They serve the purpose but lack in creativity. (Don’t get me wrong though I am a fan of your work).

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more