16/03/2010 - Blogger.Iconshock

How to use icons to enhance your designs

It’s incredible how icons, these tiny, sometimes elusive cute illustrations can do so much for your work. Icon creation has become a giant industry because of the many, many advantages they can bring to any design. They add visual cues to your headings, work as buttons, separate your website sections, and overall give polish and professionalism to your web or application.
Iconshock Icons
Icons to enhance content Icons can be decisive elements in your web design, as they can function as a “breather” for your content as the same way paragraphs give flow to a text. Icons break up your content into sections and serve as visual guide to the reader. There are tons of studies that say that the common visitor first skims around the content and only then decides what to read. Sometimes, (most of the time really) visitors just press on a link and go away, leaving your content unread. Icons bring attention to certain areas of your text and act as a hook for your ideas. Killer content is just not enough, it needs to be accessible. Do you imagine how painful would it be to read the “Iliad” if it was written continuously without breaks?
Iliad
Notice any difference?
Icons make your layout less intimidating, and divides content so your brain assimilates it as blocks and not as a whole. Also, icons make your small content appear as if it where more substantial and makes your long text appear easier to read and more appealing. Always remember to use icons as a tool to augment your text, not to distract the attention form it. Choose a relevant icon to your content in both style and meaning. Using an icon of a glossy cleavage might be too distracting for your Jewish cooking blog. Although this is just a suggestion here, you never now. Icons to embellish your lists A bad designed list looks terribly awful. It ruins the general layout, distracts the attention away from your content and acts like a white hole that sucks the life out of your website. Icons are an excellent aid to design engaging and consistent layouts all the way through. Within our stock you can find an insane plethora of elements to enhance your lists, from bullets, checks and crosses to beautiful illustrations.
Lists
Beautiful cooking recipe using 128x128 icons from our Real Vista food collection
Icons to point out the new features of your applications An excellent way to highlight the positive elements of your application is to relate each feature with an icon. That way, your potential clients have an attractive visual cue to what are they going to find in your app. A gorgeous icon can be the perfect candy for your visitors to get interested in something that otherwise could have been gone unnoticed.
Apps-icons-iconshock
Icons to support your main links Huge headers are a real visual treat for your first time visitor. A great tag line with eye popping visuals will maintain your clicks steady. 512x512 icons can aid your main links with punch and give them some visual boost.
links
Icons to visualize your product lists A well designed icon can be the most attractive way to display your products. Put a custom icon of your product besides your links and it will give your clients a pretty good idea of what you are offering even clicks before they see it. This way you can generate some anxiety and expectation. The idea is to effectively associate the product you are offering with a distinctive icon almost as if was a logo.
Products
Icons to list your services Icons make your website friendly, inviting and professional, showing that you care for everything, even about the smallest details. Even more if you are a designer or offer design related services. Relating a service with a unique icon will help your client remember you among others and can be by itself an example of your finesse and style.
Services-noicons-iconshock
Services-icons-iconshock
Which one is easier to remember?
Favicons Favicons are those 16×16 pixel icons used on the address bar to graphically identify your domain name. They also appear beside the title of the websites you bookmark or on the tabs on your browser. Although not entirely necessary, they do add up to complete a neat and professional look to your websites.
favicongenerator-articles
Favicons are not utterly essential, but the lack of one might be interpreted by your potential clients as a sign that you aren't a reliable and trustworthy provider, or when bookmarked, the absence of graphical ID will leave your web page invisible beside other websites that do have attractive favicons to identify them. Icons for social networking Social networks are one of the biggest keys to your website’s exposure. Icons help you give visibility to the links your visitors are going to use to befriend you and get the news rolling.
cutetwitter_social--best-icons
A consistent and ingenious set of social icons undoubtedly gives personality and uniqueness. Icons as Web Header illustrations Now days Web design has a trend going for huge headers. And when I refer as huge, I mean… huge. These ultra detailed icons at their biggest size can really make the difference and add charm and personality to any website.
Headers
Headers-icons-iconshock
Icons to identify sections A good way to organize and make your users identify each section of your layout is to head them with a distinctive icon. This can give you consistency and improve your usability in ways your clients will thank you.
Sections-icons-iconshock
Sections2-icons-Iconshock
Icons on menus Sometimes it might be useful to display a smaller (or bigger) image in a sub menu replacing or accompanying your links. Visitors will recognize easier your options giving more usability to your site.
Icons-menus-iconshock
Use icons to add dynamics to your design Imagine what a well designed site with a bit of movement can do. You can use animated icons for link transitions, rollovers, banners and plenty more.
Go crazy! Play with size, rotation and placement! You might want to use the humongous eye popping bigger icons for headers, and the smaller un distracting ones for breaking up your text. You can make two identical icons look different or accomplish different objectives just by changing their placement or rotation. All you have to be is creative and be fearless.
icons-iconshock_2
Ok, don’t go so crazy. Be consistent! The only risk you take when using Icons is to deviate from your original style. Mixing styles can turn out to be a real mess. Aim to be effective. We have plenty of styles for you to choose, and they almost blend with any designing aesthetics you are pursuing. But, if you are not at all sure, you can always use our custom services. If your design is supposed to be unique, then original icons are good. Remember, icons are used to enhance your content and design, so it is especially important to pay attention to how your icons match the rest of your website or application. Don't just purchase any cool-looking set of icons from our collections. Take a good look into the style you are diving in and aim to be consistent all the way.
icons-iconshock_1
If you fall in love with one particular icon, you have to pick up the rest of your icons from the same collection. Placing mismatching icons is a great telling card of unprofessionalism. More examples Check out these examples of Iconshock icons on various website templates.
brilliant_13
brilliant_16
real_vista_1b
brilliant_1
brilliant_5

ThemeShock

19 Responses to “How to use icons to enhance your designs”

  1. SherwoodNo Gravatar
    February 27th

    Great sales pitch G, and an awesome article on using icons…Really love the animated icons…great job!

  2. SherwoodNo Gravatar
    February 27th

    Oh 2 cute – I love the icon that popped up….thanks for the treat!

  3. Thanks for the tips

  4. very, very nice

  5. Blogger.IconshockNo Gravatar
    March 16th

    Thanks everybody for your kind comments! I’m glad the article can be useful for you.

  6. Yroslav_TiNo Gravatar
    March 17th

    Very very good icons.

  7. MarcNo Gravatar
    March 17th

    Thanks! Some nice examples there

  8. JanKNo Gravatar
    March 17th

    Bueno, no hay mucho que decir y si mucho que ver, que seria de Internet sin los iconos, mas si son de esta calidad que es incomparable, Internet seria un cumulo de interfaces y estructuras que nos arrancarían mas de un bostezo

  9. iconshockNo Gravatar
    March 18th

    JanK, totalmente deacuerdo, de hehco, asi era, cuando lo unico que hab;ia eran comandos y comandos.. DOS age !

  10. luis e remus, iii, phd, mdNo Gravatar
    March 18th

    oh the ideas that came flooding in…wonderful ideas and techniques to enhance a lecture/presentation.

  11. SMITHNo Gravatar
    March 18th

    Good work, I love your icons

  12. lukeNo Gravatar
    March 23rd

    This is very neat and detailed. Expect more from you! :D

  13. Jjay
    March 25th

    I knew my happy lil world was surrounded by graphics but i didnt realize just how much so til i read this. I’m surrounded in them! Joy and sunshine abound!

  14. monica a.No Gravatar
    June 23rd

    great post! I’m learning web design and this is very useful! thanks.

  15. Blogger.IconshockNo Gravatar
    June 24th

    @Monica Thanks Monica for coming by! Glad this post can be useful for the designer community. Your portfolio site is pretty awesome you know? Congrats!

  16. adminNo Gravatar
    July 15th

    Hi monica, if u want to learn more go to http://www.tutorialshock.com our latest blog :)

  17. VimaxNo Gravatar
    October 3rd

    Thank you for another essential article. Where else could anyone get that kind of information in such a complete way of writing? I have a presentation incoming week, and I am on the lookout for such information.
    http://www.kiddopages.com/elgg/pg/blog/acaiberry6iz

Leave a Reply

*