There are many of elements that go into enhancing a web design project. Typography, new technologies and UX design patterns are only some of them. One the most powerful is illustrations and vector graphics. They can be handy in a broad range of applications. Remember the cliché, a picture is worth a thousand words? In using them, we designers are able to do more while spending less.
Illustrations are a good way to make a design unique and memorable. When they are used appropriately, users will associate them with your website, thus enhancing your brand. They also make the page more attractive, and draw attention to particular parts of the layout. They can also be informative or directive, such as to show steps in a process or how to use a service.
While most designers will use illustrations to supplement their design (for example using them for characters, landscapes and so on), others go so far as to base their entire layout on them. This can lead to problems, such as SEO and page-loading time, but such designs do look fancier.
Also, illustrations are ideal for humor. It’s up to the designer to decide what kind of illustration fits their needs. But they can be used effectively in some way in almost every project.
Below are some examples of how designers out there use illustration in different contexts, from commercial to personal. Enjoy and get inspired!
htmlMafia uses appropriate illustrations (of mafia men) in the appropriate position (above the fold), just next to the list of prices and ordering button. The illustrations draw attention to the well-placed ordering button, the call to action on the website.
This is a good example of using illustration for branding. The focal point is the octopus, which catches the visitor’s eye right away. It also draws attention to the slogan just above it.
WPCoder’s website before they redesigned it was one the best examples of illustration in web design. The creative illustration made the company’s service the focus of the page, telling visitors everything they needed to know without the need for description. Also, the ordering button was subtly effective.
An example of a design based entirely on illustration. If you opt for this approach, make sure your design conveys exactly the personality that you want; not all users are interested in spending time on fancy websites. The style seems to be well suited to portfolios.
Great illustration like this could be the best case for convincing visitors to select you as their designer. It functions almost as a design sample, showing what we can do for others. Done properly, illustration is the most powerful demonstration of a designer’s abilities.
Another example showing off the designer’s ability in illustration. This person succinctly explains at the top what kind of work she likes to focus on, and the header beautifully shows the evidence of that.
This gentle and funny design puts appropriate illustration as the focal point. The design has symmetry and guides the eye to the call to action.
Illustrations could be confusing or distracting, too. Aka-Acid’s illustrations are cute, but the lack of good navigation or a focal point makes the website hard to use. Illustrations are only a means to an end and should be used where appropriate, or else they could be counterproductive or even seen as obnoxious.
The main illustration here is the center of attention and directs the visitor’s eye to the introductory text below and navigational items around it. This illustration adds a bit of fun to the design.
Here is an example of thoughtful usage of illustration in Web design. Through its artistic illustrations, Polecat shows its unique process of making applications. Another funny idea is to use illustrations for the team’s portraits.
Whenever possible, illustrations should be driven by some rationale. In this example, a chimp was chosen for the main illustration because of the tournament’s sponsor, MailChimp.
Illustrations could be used merely to add fun to the design. Sometimes there is no need for complex or instructive illustrations.
A simple and stripped down illustration in the header . The WordPress logo on the character’s t-shirt gives users an idea of what the product does at a glance. That is, this illustration works as a visual introduction.
The subtle illustrations tell users what they can do with the app and how to do it. It’s a beauty.
One common way that designers use illustration is to show action behind the scene. pixelGenio does this beautifully.
This design is almost entirely illustration-based. While the illustrations are beautiful, they are a bit overused and could create page-loading problems for some users. Also, the page is far longer than normal. Still, the illustrations are astonishing and show off the designer’s abilities.
Creative and interesting illustrations show the steps in HTML5 Lab’s service, serving as an introduction.
The absolutely beautiful illustration here serves different functions: it’s the main focus of the page, it adds fun to the page, and via it tells visitors what the website is about.
Alignment between illustrations and the company name comes in handy for branding and makes the design more memorable.
Logoman has a funny and creative illustration in the right spot. The illustration relates to the company’s service in a humorous way. Good idea, good execution.
Stop the Vom’s illustrations are based on scenes and characters from the game it is selling. And engaging and informative use of illustrations that could be used in other such situations.
Tentacle’s layout and design are relatively simple, the most notable part being the illustration, which enlivens the design with its color, position and size. The illustration is also the focal point of the page; without it, the design would be heavily degraded.
This design relies entirely on its illustrations. The landscape drawing looks like a tableau with some text embedded in it.
This illustration is not so much for fun or branding, but rather to map a real-life cityscape as a graphic. The design is fresh and brings the page to life.
Using powerful illustrations in an otherwise minimal design can have two major benefits. First, it can serve as the main visual hook and grab the user’s attention. Secondly, it can enrich the design and make it more compelling. The website for Theo Thermometer takes advantages of these benefits. Imagine the design without the illustrations: it would be weak.
While writing this article, it’s always a possibility that we missed some other great “Illustration in Webdesign” examples. Feel free to share it with us.