I've been looking into Icon design and trying to work out what is most successful and what doesn't really work. All across the web there are freebie sites that give away packs of useful graphic design elements, and a lot of them give away icons. I've had a lot of these for a very long time - just as a resource - but never really properly looked into them. Below are some that I find successful and am considering implementing something of a similar style in my own website.
These are from Pixeden. I also looked on Icony.
In the design for my iBook I was heavily inspired by the 'Flat UI' design style. I didn't run with it entirely and deviated from it slightly, but it's something I would like to bring back into my site whilst still having my iBook and Website tie into each other.
I love this sort of stye, and it's a style that goes well with my main elements of ribbons.
I've also found this article.
The article is an entire page of resources for Flat UI designs that can be used on websites. Here are the icons featured on it:
These are sorts of icons that replace just typing the word or title for something. They wouldn't be featured in a navigation menu, but would be used mores to head sections within a page or help someone visually recognise and understand an element on the page.
When I've been analysing the 2 previous websites in my 2 previous blog posts, they have both featured a specific type of icon - a menu icon. They both feature the same thing, three horizontal lines. Upon clicking them - in both mobile versions and desktop versions of a site - they bring up a hidden menu bar. I really like this idea. It enables me to tuck the menu bar to a certain portion of the page and keep it there without it.
Good Uses of Icons on Websites
This website seems pretty reliant on icons. The three main features of the site are icons, and they're featured pretty big as well. Just 1 word is featured alongside them to give a bit of a hint, but they're the main element relied on to provide understanding. They're also featured quite prominently on the left hand sidebar, and are the same colour as the subheading text which helps to draw the user over. This is useful as they're more pleasing to look at than just plain text, giving some enhancement to the users experience. At the very bottom in the sidebar there is 6 icons representing social sites, which are easily recognisable as they're well known sites.
What interests me is how, without any prompts, I (and probably the majority of other users) understood straight away that the social icons at the bottom of the sidebar are buttons and can be clicked on. They're blended quite nicely against the grey background, so it's not as if they stand out.
The icons on this site have also been turned into somewhat of a feature. A mouse hovering over them starts a little animation and the icons start to spin. This is a fun feature, and I'm now interested in using icons to turn them into a feature of my site.
This website features a row of icons at the fold of the page that visually demonstrates the different services that the company provides.
What I noticed mainly about these icons is that they perfectly match the design style of the website. They stand out, but for good reason. They complement the colours and visual style of the website, even down to the illustration drawing style and the thickness of the strokes around them. This has lead me to think about the designs of the icons for my own site - I'm probably going to have to design them myself. I feel like Icons are most successful when they complement and mimic the design of their surroundings, and as I have essential got my own style (in my iBook) with my own set of colours, it would be hard for me to find icons that are appropriate. If I give myself the responsibility of designing them I can ensure that they will tie in successfully with my design and enhance the experience the user has on my site.
No comments:
Post a Comment