(Note: Originally published on Carsonified’s Think Vitamin)
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!