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.

Did you enjoy the article? If so, please share!

Download the free e-books "How to Market Yourself Online" & "Starting An Online Business"

How to get clients online and advice on starting up online!

  • Creating websites
  • Setting up WordPress
  • Writing blog posts
  • Getting links
  • Driving traffic to your site
  • Using social media
  • Getting clients
  • Getting found on Google
download icon
download button

Comments

  1. Look great, Rob! Thanks again.

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

  2. Rob Cubbon says:

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

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

  4. Anonymous says:

    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 says:

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

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

    Jelly could be good.

  7. Rob Cubbon says:

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

Speak Your Mind

Notify me of followup comments via e-mail. You can also subscribe without commenting.