17 June 2010
No Love for the Illustrator? Skool’d on How to do Handmade Web Design
Integrating Illustration Into Interface Design
Illustration in web design is the “handmade” of our industry and it’s taking us to exciting places, but my journey into integrating it into design started with a glorious guffaw!
A few minutes after publishing an article on DesignSwap, I had a forehead-smackworthy moment. Among the accolades I had inadvertently forgotten to give credit to the illustrator. Embarrassment aside (forgiveness was granted), my oversight struck me as a perfect article topic.
Over the past two years, illustration has emerged as a hot trend in web design, but how a web designer partners with an illustrator in web design isn’t necessarily clear.
The trend towards hand-drawn stands out to me, because after an era of rounded corners and polished presentation, I think illustration is revealing that both consumers and makers of web design crave original, personal, and humanized content.
@stickybits’s “Zephyr” is a gorgeous handsome adorable brand ambassador
History & Power of Handmade Web Design
In the early days of web design, drawing, scanning, and posting an image online was great success! (True fact: if you owned a scanner in 1996, you were one step from godliness.)
@bradcolbow, also creator of highly entertaining web comic “The 2 Brads”
Limited by earlier versions of CSS and HTML (you kids and your fancy HTML5, CSS3!), web friendly fonts (ehm’ comic sans), modem speeds, browser bonkiness, and lower resolution monitors, designers were challenged to add touches of personal character to website designs to make it obvious that there were indeed humans behind all of the interweb wonder, created a feeling of connectedness between users and content.
When we adopted those sexy rounded corners (look mom! all CSS, no images!), opened up to the world of white space, and refined our 8-bit roughness into smoother presentation styles, I think we lost a little bit of that clumsy humanity that web 1.0 unabashedly and proudly owned.
Is there an Illustrator in the House?
If illustration is merged seamlessly within a larger design direction, a user might never see the difference between the two, meaning illustrators’ contributions don’t always stand out.
Subtly is brilliant and awesome for users, in fact it depicts a level of success that many people can be a part of something that looks like one person produced it, but there’s a lot for designers to learn about how to work with an illustrator to create a tip-to-tail concept or add smaller touches to an overarching design.
David Lanham or @dlanham‘s illustrations make the web a better to place to be!
Web designers can draw and trace, but that doesn’t make them illustrators. Rather, illustrators get off the web to make the web a more human experience.
As an exercise, Kyle encourages web designers to remove themselves from rasterized assets, shut down Photoshop (or wait for it to crash as it surely will), close out your HTML editor, pick up pen and paper and get doodling. Doodling is an impressively personal exercise that will take you far far outside of your comfort zone, it truly is the epitome of handmade web design.
@kylesteed‘s ongoing project “52 Profiles” (could make you famous awesome)
A simple doodle on a Post-It note however, can become an album or book cover, poster, branded identity logo, background, and much more. You don’t need much more than a scanner (a simple 5 bit), 300 dpi version, an editing tool like Illustrator, and once you set parameters into a template, size, adjust proportions, refine the layout, and scale up and down.
Let’s Build Something Cool Together!
Communities like Dribbble, Behance, and Forrst, offer an experience akin to meeting, sharing, and getting and giving feedback similar to what you’d expect at art school, only without the crazy tuition and oppressive student loans.
These communities have also begin to connect web designers with illustrators, and the results are nothing short of gorgeous, playful, modern, classic, elegant, and downright fun!
a fun little illustration & idea by @kylesteed for @dribbble playahs’
Kyle Steed’s Favorite Illustrators
- David Lanham – @dlanham
- Brad Colbow – @bradcolbow
- Reagan Ray – @raygunray
- Pasquale D’Silva – @pasql
- Mike Kus – @mikekus (of @carsonified!)
Written with love to “the illustrator!”
- Chrissie
Special Thanks to Kyle Steed, give him a follow, download his free fun font, & show some love out there to 52 Profiles!
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 45 percent on your subscription.
Klaus Shmidheiser
# June 17, 2010 - 3:42 pm
RIGHT ON! As a professional Web Designer & Illustrator, this article really hit home. I’m glad to see there are folks out there who appreciate the value of illustration. Now if bring in the narrative illustration to tell the story of a company on the web, then you REALLY will have something special.
keep up the great articles!
Jordan Koschei
# June 17, 2010 - 4:15 pm
I think the handmade look is a reaction to the pixel-perfection we’ve seen recently. Everything became so glossy and overproduced, it lost any sense that there were human beings behind it.
It looks like this trend is influencing other fields of design as well; take a look at this trailer from E3 2010: http://www.youtube.com/watch?v=o_Qhhf-FsPA
Kyle Steed
# June 17, 2010 - 4:57 pm
@Jordan – I think you hit the nail on the head. I’ve always been more drawn to the “DIY” mentality, and so I like to carry that over to the web. I think shiny pixels definitely have their place on the web and in applications, just look at Apple (geez), but I think when the masses get a hold of a new trend they just run it in to the ground.
Thanks for sharing your insight. Rock on!
Brad C
# June 17, 2010 - 6:07 pm
Thanks for including me in this fine collection of illustrators. And for the record I got my first scanner in 1996, It was an HP, weighed more than a small dog and I got it used for $500.
Todd Gail
# June 17, 2010 - 8:56 pm
Ditto on the scanner. Only I think it was in ’94 or ’95 and weighed slightly more an a Yugo…
Tuhin Kumar
# June 18, 2010 - 4:36 am
Been following all the designers mentioned at the end of the list. What I would love to know more is probably some nice resources to get started. I know the web is full of them, but I would love to know how the designers mentioned here, got it. Was it simply sketching the ideas and then converting it into vectors or practicing stuff from tutorials?
Also as Jordan mentioned, the idea of illustrations being used to step out of the shiny pixelated world is more of yet another trend for now but yes illustrations definitely have a great storytelling power in them.
Jarkko Sibenberg
# June 18, 2010 - 8:24 am
Well made and personalized illustrations can be so much more powerful than stock images. I really enjoy the work of creative individuals who have genuine imagination, and their portfolio consists of more than just re-traced photos.
I’m also a fan of rough look in illustrations. You can’t do everything with vectors and gradients (well, maybe you can if you are really stubborn and have too much time on your hands), so I don’t think Illustrator shouldn’t be THE place to jump in straight away when you’re thinking of making an illustration.
Izzat Aziz
# June 18, 2010 - 12:06 pm
well, illustrator sure make the web look awesomely better.
but i have no talent in it, so what the best i can do just, enjoy the beauty
of other people work.
and i just stay design the ‘old’ design :)
Kyle Steed
# June 18, 2010 - 1:02 pm
@Tuhin – For me, I have always drawn. It’s just a part of who I am. So as I started learning about graphic design and eventually web design, I wanted to merge those together. My process is a simple one, where I sketch everything out in a journal or something, followed by scanning it in and then going back over it in illustrator. I think the last part in illustrator is what takes the longest time.
And regarding illustration as “yet another trend for now” I would respectfully disagree. Illustrations have been popular well over a thousand years. Sure it may seem like more people are catching on to the use of it in modern web design, but I don’t think that changes the history of the importance/popularity of illustrations.
blogging tips
# June 18, 2010 - 4:11 pm
Hello… You’re right Illustration is the best key to understand the object or picture specially the young ones and even the older…
Pasquale
# June 18, 2010 - 7:23 pm
Word dude. Illustration is where the heck it is at.
Michael Grills
# June 18, 2010 - 8:06 pm
As a games artist (And I have to put “artist” in the name because that is what they call us even though we are illustrators), this article is really exciting to me.
If designers are starting to see the value of illustration as a part of their websites then guys like me have a real chance of getting to partner with folks who have a different problem to solve.
I have been solving the problem of interactive entertainment for 10 years. I want to get a bigger presence on the web. Hopefully this trend really takes off and illustrators everywhere get to take part.
laryedwards
# June 21, 2010 - 6:56 am
great article.illustrator sure make the web look awesomely better