Beautifying the web
with illustration




October 23, 2008
© Cindy Li | www.cindyli.com
                               1
Illustration...



    “A picture is worth a
     thousand words.”


                            2
Illustration is a Work of Art




                 © Alberto Seveso, www.recycledarea.co.uk
                              ...
Illustration Beautifies the Web




          “It’s pretty!”


                                  4
homage to “geocities 1996” by Bruce Lawson | www.csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
    ...
Illustration...



    “No really, it really is
          pretty!”


                               6
Illustration is Business




                           7
Illustration is Personal




                           8
Illustration is Social




                    www.e-hobo.com
                                     9
Illustration is Social




                         10
Illustration is Social




                   www.700molemen.com/list
                                             11
Illustration is Social




                   www.facebook.com
                                      12
Illustration is Social




                   www.facebook.com
                                      13
Illustration is Iconic




                    www.joyent.com
                                     14
Illustration is Iconic




                         15
Illustration is Iconic




                         15
Illustration vs. Photography
  Different perspective to a website using illustration




                         © Veerle...
Illustration vs. Photography




                © Veerle Pieters, veerle.duoh.com
                                       ...
Illustration is Fun




                      www.google.com
                                       18
Illustration is Fun
  Adds personality to corporate logos




                       www.google.com/holidaylogos.html
    ...
Illustration is Fun
  Adds personality to corporate logos




                         Courtesy of AOL.com
               ...
Illustration is Fun
  Adds personality to corporate logos




                          www.yahoo.com
                    ...
Illustration is Current
  Localization for each illustration




                             www.google.com
             ...
Illustration eases the pain of a 404




                  www.mixx.com/404.html
                                         ...
Illustration eases the pain of a 404




                  www.mixx.com/404.html
                                         ...
Illustration eases the pain of an error




                  blog.mozilla.com/error.html
                                ...
Illustration is Silly




                        twitter.com
                                      26
Illustration is Instructional
  A collection of images to explain directions




                     www.mezzoblue.com/ar...
Illustration is Instructional
  A collection of images to explain directions




                     www.mezzoblue.com/ar...
Illustration is Multi-lingual
  No matter what language




                  www.ms-centrum.be/nl/zorgaspecten/voeding.ht...
Illustration is Multi-lingual
  No matter what language




                  www.ms-centrum.be/nl/zorgaspecten/voeding.ht...
Illustration is Multi-lingual
  No matter what language




                  www.ms-centrum.be/nl/zorgaspecten/voeding.ht...
Illustration is an Explanation




                   www.resemble.com
                                      32
Illustration is an Explanation
  New concepts are harder to grasp




                        www.resemble.com
           ...
Illustration is an Explanation
  New concepts are harder to grasp




                        www.resemble.com
           ...
Illustration is Wearable




                   www.threadless.com
                                        35
Illustration is a Guide




                   www.threadless.com/sizechart
                                              ...
Illustration is Personalization




                                  37
Illustration is Personalization




                                  37
Illustration is Personalization




                                  38
Sites to check out
  Slide 7:                          Slide 8:
  www.silverbackapp.com             www.alifelski.com
  ww...
Reference sites:
                               AmateurIllustrator.com
                               Deviant Art

       ...
Upcoming SlideShare
Loading in...5
×

conference: Beautifying the web

587

Published on

Updated the presentation I did for FOWD Nov 2007.

Published in: Design, Art & Photos, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
587
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

conference: Beautifying the web

  1. 1. Beautifying the web with illustration October 23, 2008 © Cindy Li | www.cindyli.com 1
  2. 2. Illustration... “A picture is worth a thousand words.” 2
  3. 3. Illustration is a Work of Art © Alberto Seveso, www.recycledarea.co.uk 3
  4. 4. Illustration Beautifies the Web “It’s pretty!” 4
  5. 5. homage to “geocities 1996” by Bruce Lawson | www.csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css 5
  6. 6. Illustration... “No really, it really is pretty!” 6
  7. 7. Illustration is Business 7
  8. 8. Illustration is Personal 8
  9. 9. Illustration is Social www.e-hobo.com 9
  10. 10. Illustration is Social 10
  11. 11. Illustration is Social www.700molemen.com/list 11
  12. 12. Illustration is Social www.facebook.com 12
  13. 13. Illustration is Social www.facebook.com 13
  14. 14. Illustration is Iconic www.joyent.com 14
  15. 15. Illustration is Iconic 15
  16. 16. Illustration is Iconic 15
  17. 17. Illustration vs. Photography Different perspective to a website using illustration © Veerle Pieters, veerle.duoh.com 16
  18. 18. Illustration vs. Photography © Veerle Pieters, veerle.duoh.com 17
  19. 19. Illustration is Fun www.google.com 18
  20. 20. Illustration is Fun Adds personality to corporate logos www.google.com/holidaylogos.html 19
  21. 21. Illustration is Fun Adds personality to corporate logos Courtesy of AOL.com 20
  22. 22. Illustration is Fun Adds personality to corporate logos www.yahoo.com 21
  23. 23. Illustration is Current Localization for each illustration www.google.com 22
  24. 24. Illustration eases the pain of a 404 www.mixx.com/404.html 23
  25. 25. Illustration eases the pain of a 404 www.mixx.com/404.html 24
  26. 26. Illustration eases the pain of an error blog.mozilla.com/error.html 25
  27. 27. Illustration is Silly twitter.com 26
  28. 28. Illustration is Instructional A collection of images to explain directions www.mezzoblue.com/archives/2007/08/27/reduce/ 27
  29. 29. Illustration is Instructional A collection of images to explain directions www.mezzoblue.com/archives/2007/08/27/reduce/ 28
  30. 30. Illustration is Multi-lingual No matter what language www.ms-centrum.be/nl/zorgaspecten/voeding.html 29
  31. 31. Illustration is Multi-lingual No matter what language www.ms-centrum.be/nl/zorgaspecten/voeding.html 30
  32. 32. Illustration is Multi-lingual No matter what language www.ms-centrum.be/nl/zorgaspecten/voeding.html 31
  33. 33. Illustration is an Explanation www.resemble.com 32
  34. 34. Illustration is an Explanation New concepts are harder to grasp www.resemble.com 33
  35. 35. Illustration is an Explanation New concepts are harder to grasp www.resemble.com 34
  36. 36. Illustration is Wearable www.threadless.com 35
  37. 37. Illustration is a Guide www.threadless.com/sizechart 36
  38. 38. Illustration is Personalization 37
  39. 39. Illustration is Personalization 37
  40. 40. Illustration is Personalization 38
  41. 41. Sites to check out Slide 7: Slide 8: www.silverbackapp.com www.alifelski.com www.flickr.com/explore/panda www.ma.tt www.strawpollnow.com www.meomi.com www.voteforchange.com www.nikdaum.com www.brightkite.com www.handmademonsters.com www.theadnostic.com www.eyeswideapart.blogspot.com Slide 32: Whatnot: www.flickr.com/photos/whatnot/2761052573/ Emily Chang: www.flickr.com/photos/emilychang/2764290285/ Ariel Waldman: www.flickr.com/photos/arielwaldman/2762423030/ RellyAB: www.flickr.com/photos/fizzkitten/2760400091/ James J. Malcom: www.flickr.com/photos/akaxaka/2765840140/ Cindy Li: www.flickr.com/photos/cindyli/2763586784/ TheMattHarris: www.themattharris.com Caleb Keiter: www.flickr.com/photos/calebkeiter/2763301347/ Mark Casias: www.flickr.com/photos/teampoop/2765518131/ Wordridden: www.flickr.com/photos/wordridden/2764235572/ TheAdnostic: www.flickr.com/photos/theadnostic/2764510898/ DrewVigal: www.flickr.com/photos/drewvigal/2774245997/
  42. 42. Reference sites: AmateurIllustrator.com Deviant Art CSSbeauty.com Screenfluent.com Thanks to: Craig Cook Geert Leyseele Jason Garber Chris Moeller Cinzia Gavelanv Veerle Pieters Matt Harris Jody Thomas Brian Ivanovich Shannyn Timrott October 23, 2008 © Cindy Li | www.cindyli.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×