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
3

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
5

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 Pieters, veerle.duoh.com
16

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

Illustration is Fun
www.google.com
18

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

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

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

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

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

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

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

Illustration is Silly
twitter.com
26

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

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

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

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

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

Illustration is an Explanation
www.resemble.com
32

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

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

Illustration is Wearable
www.threadless.com
35

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

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

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