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.
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.