The Trend of Simple, Vector Art Web Designs

Written by Kevin Liew on 28 Oct 2012
15,699 Views • Web Design

From the ashes of the grungy, textural web design trend, has risen a new look; clean and simple vector art designs have taken over the web. And with good reason; there's a lot to be said for the versatility and appeal of the vector illustration.

Why Try It Out?

Vector graphics lend themselves to a clean look. Bright or pastel colors and a light-hearted, cartoony style are also regular occurrences in this type of artwork. Yet, despite these similarities, the unique experience of each site's illustration is what really makes the trend work. So don't shy away from trying out the style. Some websites are incredibly individualistic and effective with vector illustrations. With vector-heavy sites, the only thing you know you can count on is a feast for the eyes. There's tones of free resouces available and you don't even need to create your own vector files.

Mailchimp

What It Is

Mailchimp makes a statement with its artwork, by using just one oversized, textural vector graphic to get its point across. The cool blue color palette of the rest of the site is warmed up by the brown tones and friendly expression of the chimp.

Why It Works

In this context, the animal works as a punchy graphic reminder of the name Mailchimp. It's a handy way to get people to remember both the name and function of the site.

2012 Inspire Conference

What It Is

This website, in direct contrast to the simplicity of Mailchimp, takes a layered approach in its design. In fact, the three major illustration components look like they might have been made by different artists; one a very simple silhouette, the next complex and line-driven, the third textural and primitive.

Why It Works

This combination could have ended up looking messy and unrefined, but it works because each illustration is given enough room to breathe. The effect is collaborative and multidimensional, which helps to convey the theme of the conference.

Fail-ure

What It Is

An edgy take on the vector trend, Fail-ure's homepage combines extremely simple and streamlined vectors with punchy, graphic photos in a restricted color palette.

Why It Works

It barely matters that the headline text is almost completely illegible; you don't need to read it to pick up on the cool, fashionable vibe that is the design's intent.

Skycog

What It Is

Skycog's site differs from the other examples in that it has hardly any illustration; the style is transformed to the point where only the simplest icons are in evidence. This is vector illustration at its cleanest; shapes, colors, and content are all stripped down to a minimum.

Why It Works

The cool color palette and generous spacing make the site feel restful and reassuring. But the effect would have been a little sterile if it weren't for the touches of fun that the icons bring in.

These Are Things

What It Is

The members of this design and illustration studio do well to show off their skills in this beautiful design. But they go a step further and add fun scrolling navigation (that has had a lot of success of lately, and for good reason), which really takes it to the next level.

Why It Works

Vector illustrations give you the freedom to play around, and move elements in ways that would be very difficult to reproduce with photos. Obviously, this can inject a ton of personality into a site, making the user's experience that much more enjoyable.

The Great Bearded Reef

What It Is

This site provides a good example of how vector graphics can still incorporate a bit of the grungy, organic feel that people know and love. Roughing up the text and adding lots of texture can make a big difference if you're looking to change up the streamlined look that vector illustrators often default to.

Why It Works

The cute characters, tropical colors, and interesting textures make this site a pleasure to look at; as usual, the vectors make the site more charming and engaging than any photograph could.

All of these examples use vectors in different ways to enhance their brand and their message. There are so many ways to reinvent the style that there is endless room for creativity and reapplication.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

1 comment
Spinx Inc. 11 years ago
The vector art web design gives an enjoyable experience to the users on the website which engages the users on the website for a longer time. These web design easily grab the attention of the user towards it if it is designed in a simple way. Here listed examples of vector based website design within the description are helping users and the web designers to understand what’s new in each web design and why it is in demand in the market.
Reply