Designing web icons

March 8, 2007 – 1:38 pm

Sample web icons

Here are some icons I designed for a friend’s website. He asked me to make them at three sizes: 20 pixels wide, 80 pixels wide and 300 pixels wide.

There’s a real skill to designing icons. You have to make them simple enough to be understandable at small sizes but interesting enough to be beautiful when bigger.

I used a well-known aqua or jelly technique for the background. Basically it is a gradient with a series of superimposed arcs to give an impression of translucent 3d shape. The arcs are intersections of two circles, squeeze or stretched slightly where appropriate. I blurred the arcs at the top but at the bottom they remain sharp to give an ultra-modern feel.

Related articles

  1. 7 Responses to “Designing web icons”

  2. Look great, Rob! Thanks again.

    You get a nice mention in the show coming out tomorrow :)

    By Marc Fiszman on Mar 8, 2007

  3. Wow! Thanks for the mention in the show. Let me know if you want anything else doing!

    By Rob Cubbon on Mar 8, 2007

  4. Well… I am wondering if the Nearthwort logo needs to be jazzed up a bit. What do you think?

    By Marc Fiszman on Mar 9, 2007

  5. I could look at it over the weekend if you like. Maybe staying with the Helvetica Neue but with the aqua/jelly effect?

    By Anonymous on Mar 9, 2007

  6. Sorry, that was me. I forgot to log in!

    By Rob Cubbon on Mar 9, 2007

  7. Thanks, Rob — would be great if you’d try some stuff out :)

    Jelly could be good.

    By Marc Fiszman on Mar 9, 2007

  8. Can’t really do jelly as it’s thin type on a white background. It’s a tricky one …

    By Rob Cubbon on Mar 10, 2007

Post a Comment