Designing web icons

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.

You can subscribe to new posts via RSS or by email, or follow me on Twitter.

Related articles

This article was posted on Thursday, March 8th, 2007 at 1:38 pm and is filed under Artwork, Design, Internet.
You can follow any responses to this article through the RSS 2.0 feed.

7 Responses to “Designing web icons”

  1. Marc Fiszman, on March 8th, 2007 at 3:01 pm, said:

    Look great, Rob! Thanks again.

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

  2. Rob Cubbon, on March 8th, 2007 at 4:00 pm, said:

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

  3. Marc Fiszman, on March 9th, 2007 at 2:48 pm, said:

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

  4. Anonymous, on March 9th, 2007 at 3:09 pm, said:

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

  5. Rob Cubbon, on March 9th, 2007 at 3:35 pm, said:

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

  6. Marc Fiszman, on March 9th, 2007 at 7:20 pm, said:

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

    Jelly could be good.

  7. Rob Cubbon, on March 10th, 2007 at 2:18 pm, said:

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

Leave a Reply