Updated the presentation I did for FOWD Nov 2007.

1. Beautifying the web
with illustration
October 23, 2008
© Cindy Li | www.cindyli.com
1

2. Illustration...
“A picture is worth a
thousand words.”
2

3. Illustration is a Work of Art
© Alberto Seveso, www.recycledarea.co.uk
3

4. Illustration Beautifies the Web
“It’s pretty!”
4

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

6. Illustration...
“No really, it really is
pretty!”
6

7. Illustration is Business
7

8. Illustration is Personal
8

9. Illustration is Social
www.e-hobo.com
9

10. Illustration is Social
10

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

12. Illustration is Social
www.facebook.com
12

13. Illustration is Social
www.facebook.com
13

14. Illustration is Iconic
www.joyent.com
14

15. Illustration is Iconic
15

16. Illustration is Iconic
15

17. Illustration vs. Photography
Different perspective to a website using illustration
© Veerle Pieters, veerle.duoh.com
16

18. Illustration vs. Photography
© Veerle Pieters, veerle.duoh.com
17

19. Illustration is Fun
www.google.com
18

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

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

22. Illustration is Fun
Adds personality to corporate logos
www.yahoo.com
21

23. Illustration is Current
Localization for each illustration
www.google.com
22

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

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

26. Illustration eases the pain of an error
blog.mozilla.com/error.html
25

27. Illustration is Silly
twitter.com
26

28. Illustration is Instructional
A collection of images to explain directions
www.mezzoblue.com/archives/2007/08/27/reduce/
27

29. Illustration is Instructional
A collection of images to explain directions
www.mezzoblue.com/archives/2007/08/27/reduce/
28

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

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

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

33. Illustration is an Explanation
www.resemble.com
32

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

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

36. Illustration is Wearable
www.threadless.com
35

37. Illustration is a Guide
www.threadless.com/sizechart
36

38. Illustration is Personalization
37

39. Illustration is Personalization
37

40. Illustration is Personalization
38

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. 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