eyelearn

a look at design for the web & all it entails

· view menu ·

icons & SVG

Icons are the small little details with such high importance that they deserve as much TLC as the rest of your design. If you search for icon sets online, you will find an ever growing number of beautiful sets to choose from. However, it will be worth your while to at least explore icon design, if not learn the craft in depth.

Icon design is challenging but fun ~ so take some time to dive into it and you'll soon have beautiful icons making your site designs shine ;)

SVG ~ heaven and hell

One of the most exciting developments regarding icons, and more, is the possibility of finally using SVG for our vector work. Though you still need to be cautious, considering older browsers and required fallbacks. There is plenty of documentation out there by now, and you should take time to do some reading and plenty of experimentation and testing before you commit to SVGs for your web project. But it is worth your time and attention - support from browsers is already pretty good for the latest versions, and is only set to grow :)

eyedea studio, graphic

Though not quite 100% ready yet - I'd like to show you the site for my own web work, and I'll tell you all about the process of implementing the SVG graphics: eyedea studio
The list of references, articles and tools below is what we went through when figuring out how to best use SVG, combined with the CSS animations.

a few notes on what we've learnt:

  • make sure your vector shape is as clean as possible (I’m using pathfinders a lot, keeping original shapes – best expanded for lessor points, cleaner shape = less code, less weight)
  • always apply transformation to <svg> element, not <g> element
  • ideally, place SVG into source code for fewer calls to server
  • major differences in SVG rendering between Chrome/Safari/Opera and Firefox - work/test across all to ensure solid display
  • check across vector apps for SVG output - compare / always optimise for less code

In regards to the different SVG outputs - have a look at the difference between the code from Illustrator (left) and Inkscape (right).

SVG code comparison

TASK
Considering your time on the MA - create a sequence of icons to show your progress. Start from how you began, show where you are now and where you'd like to be at end.

useful links

icons / symbols

tutorials

icon interface

mini project - part #1

The aim of this project is to experiment with an icon-based interface. The focus should be on 3 icons which will lead to 3 different site sections. This might not be your typical interface but this premise will allow you time and space to experiment with your icons.

Consider the interface of WorkFu as an example :)

This project will span over 2 weeks to be extended next week with your own branding. So do bear that in mind as you design your icons and decide on a visual style. You could either work on an early version of a branded look and revise later; or consider this an experimental stage - to be finalised after next week's session.

to do list

  1. decide on 3 sections for your website
  2. research conventions
  3. sketch out your ideas in your sketchbook
  4. produce a digital version of your icons
  5. implement the icons on a single webpage
 

working files

As starting point, I thought I could give you a few templates :)

download source files - contains:

  1. "prep" folder: icon size templates and background image
  2. "site" folder: basic webpage showing with of 3 large links (HTML/CSS)

Please feel free to comment below if you have any questions :)

12 Comments

  1. Tony
    12
    12/02/2014

    Hi Prisca,

    I’ve designed these icons for the three main sections of my thesis application (hence their smaller size).

    I’ll email you my project files in a moment.

    See you soon,
    Tony

    http://tonyjamesball.co.uk/university/icons-mini-project/index.html

  2. Natalie Bent
    11
    11/02/2014

    Hi Prisca,

    My final Icons can be found here: http://grebena.users39.interdns.co.uk/icon/

    I have also emailed my files over to you.

    Natalie

  3. Justeen
    10
    10/02/2014

    Hi Prisca,

    Here’s my effort, Cheers

    http://greclju.users39.interdns.co.uk/icon_design/site/index.html

  4. Barbara
    9
    03/02/2014

    Not sure if we have to post the final ones here or to the new post, but here is mine – finally sorted – thank you for your help :)

    http://design.barbasboth.com/applied-art/icons/

  5. Daniel Jackson
    8
    22/01/2014

    Hi Prisca, here are my icon ideas.

    http://danielmjackson.co.uk/coursework/icons/

  6. Sonata
    7
    22/01/2014

    Morning Prisca,

    Here are my icons :
    http://www.sonataweb.co.uk/icons/

    See you in a bit :)

  7. Kate
    6
    22/01/2014

    Hi Prisca,

    Here are my icons to date – http://grelawtk.users37.interdns.co.uk/icons/

    Thanks,
    Kate

  8. Catia Gomes
    5
    22/01/2014

    Hello Prisca,

    here it is my icons: http://grelaca.users39.interdns.co.uk/coursework-projects/applied-art/icon/index.html.

    See you tommorrow,
    Catia

  9. James
    4
    21/01/2014

    Hi Prisca…

    I’ve done a representation of icons which would be easily recongisable if it was used for a motorcycle club that I’m a member of.

    http://greloja.users39.interdns.co.uk/applied-art-for-the-web/icons-branding/

  10. Natalie Bent
    3
    21/01/2014

    Hi Prisca,

    My Icon design so far, can be found here:
    http://grebena.users39.interdns.co.uk/icon/

    Natalie

  11. Duncan Struthers
    2
    20/01/2014

    Hi Prisca,

    Here is the link to my 3 icon designs.
    http://grestrudun.users36.interdns.co.uk/icons/

    See you Wednesday,
    Duncan