Illustrating for a website is one of the best ways to give your website a unique look. Whether you’re looking to sketch a new font, add an illustrated background or incorporate a hand-drawn logo, website illustrations give character, personality and custom-designed elements to your site.
I recently had the extraordinary opportunity to work on the site for The 11 Day Power Play. I thought it’d be great to share some of the details of the creative process. Here are some things to consider:
The website requires a quick turnaround time. Should we spend the time creating detailed drawings or try a simplified approach?
When it comes to illustrating for a website, there won’t always be a right or wrong answer. How much can you accomplish in the time you’re given? Will the client appreciate detailed illustrations throughout the site or is timeliness more of an important factor at this point? Best case scenario would obviously be to take your time with detailed and custom web illustrations, but that isn’t always possible.
After taking the project timeline and requirements into consideration for The 11 Day Power Play, we found a healthy balance between the two. We developed an efficient way to produce the graphics and spent a large chunk of our time on user interface and user experience.
In terms of quality and resolution, which techniques would work best for illustrating for a website?
Sometimes it’s tough to find a balance between copy/messaging and design/illustration. For our project, we needed to make sure the web illustrations conveyed the right amount of energy next to the messaging on the page. We started by creating full color illustrations throughout the site. However, we quickly realized that these took away from messaging on the page (which was much more important). To tone down the graphic, we decided to turn it black and white, which worked perfectly with the surrounding messaging and design.
While designing the illustrations, we wanted to keep them loose using large brush strokes. The goal was to create digital artwork that had a traditionally rooted, authentic quality.
How do you figure out where to place illustrations within the website?
When you’re figuring out where to place your website illustrations, there are many factors to keep in mind. Will it be a simple illustration or complex? Is it supposed to be located in the background of a busy environment or is it supposed to symbolize an important action? Before working on an illustration, I like to make sure I understand its purpose and the context of where it’s going to live.
In our case, we wanted to relay a clear idea so users could focus on the important part. The only factor we had to work off of in the beginning was a copy deck to reference. Since we knew the illustrations would be critical in conveying our message, we decided to move forward with them. We then worried about incorporating them into each page of the site after the fact.
Are website illustrations going to be printed and used outside of the website?
The answer in a nutshell? It depends. With the 11 Day Power Play, this was a major possibility. We kept that in mind when we developed our assets. By the time the event was finished, the illustrations were found on the web, billboards, playbooks, calendars and more.
The file was constructed to be large enough to be printed while allowing us the resolution needed to be incorporated into the website. The dimensions of the finished file ended up being 28′ x 28.’
How can website illustrators leverage existing branding?
Since clevermethod was provided a style guide, font selection and logo mark to begin the project, we focused on keeping inline with these assets. I found a grungy looking logo mark that provided tons of inspiration for the overall look/feel of the website.
Whichever route you decide when illustrating for your website, make sure you take the necessary time to evaluate if it all works cohesively together. While your design options are endless, not everything will end up the way you thought it would. Take risks, find what works and keep on improving your intuition.
What are some rules you follow when illustrating for a website? What have you learned? Connect with us on Twitter @clevermethod.