{"id":163008,"date":"2017-03-03T13:00:11","date_gmt":"2017-03-03T13:00:11","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=163008"},"modified":"2017-03-03T05:12:02","modified_gmt":"2017-03-03T05:12:02","slug":"illustration-inspired-wordpress-site","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/illustration-inspired-wordpress-site\/","title":{"rendered":"Resources for Building an Illustration-Inspired WordPress Site"},"content":{"rendered":"

Online users, designers, marketers, and business managers \u2013 we all expect a lot from websites these days. They need to look great. They should load within a couple seconds. They have to be responsive. They must convert. And UX always needs to be a priority.<\/p>\n

With all this energy spent on meeting expectations, it\u2019s easy to get caught up in ticking off checkboxes of the things we must<\/em> do in order to create a highly effective web design. But where is the checkbox for creativity and originality?<\/p>\n

One might argue that the whole reason WordPress themes<\/a>, plugins, productivity apps<\/a>, and other web development resources exist is so web designers have more time to dedicate to creating something unique. If you\u2019ve arrived at a point where your workflow is so streamlined that you do<\/em> have time to dabble in more creative efforts, then let\u2019s talk about illustration-inspired web design.<\/p>\n

While illustrative styles won\u2019t work well for every website, they will for some. They\u2019re a fantastic way to make your site stand out from the uniformity we so often find online and they also present an excellent opportunity to showcase your brand\u2019s fun and quirky personality.<\/p>\n

Get Inspired by These Illustration-Inspired Web Designs<\/h2>\n

Don\u2019t get me wrong: stock photography is not a bad thing. In fact, there are a number of ways you can creatively use photos to make your site stand out from the competition. That being said, you\u2019ve got to admit that there\u2019s something intriguing about an illustrative style website. It\u2019s different, it\u2019s exciting, and it takes a very special brand personality to pull it off.<\/p>\n

If you think your WordPress site could benefit from a unique touch, but worry that a fully illustrated site won\u2019t work for you, that\u2019s okay. Illustrative styles aren\u2019t always about creating a fully animated landscape. Sometimes they come in the form of illustrated elements that help guide users through a site. Sometimes it\u2019s just the font that looks hand-drawn. And sometimes illustrations are used to add engaging animations.<\/p>\n

Want to see how that works? Here are some ways other designers have made use of illustration in their web designs.<\/p>\n

Background Illustration and Heavy Reliance on Icons<\/h3>\n

The Evolve Wealth<\/a> website features a clean design with blue tones and simple illustrations.<\/p>\n

\n
\"Post
The Evolve Wealth homepage.<\/figcaption><\/figure>\n<\/div>\n

Dusty Photography-Meets-Colorful Branded Elements<\/h3>\n

Web developer Denise Chandler’s<\/a> portfolio features fun illustrations blended with photography and a generous dash of icons.<\/p>\n

\n
\"Post
Denise Chandler’s website and portfolio.<\/figcaption><\/figure>\n<\/div>\n

Storytelling Scroll<\/h3>\n

The Harvey Water Softeners website is an experience. It features a scrolling video of interior design through the decades, with simple illustrations of how homes have looked going back to 1950. [Editor’s note: this site has been redesign – the feature below is no longer available, but we’ve left it here for illustrative purposes.]<\/em><\/p>\n

\n
\"The
The Harvey Water Softeners website looks back at interior design over the past 70 years.<\/figcaption><\/figure>\n<\/div>\n

Illustrated Brand Mascots and Characters<\/h3>\n

The Animal Made<\/a> website is very in your face with its strange animations and bold colors and language.<\/p>\n

\n
\"The
The Animal Made website.<\/figcaption><\/figure>\n<\/div>\n

Professional Interactive Resume<\/h3>\n

Robby Leonardi<\/a> has taken resumes to a whole new, fun and very interactive level. When you vertically scroll through his website, you’re taken through his skills and previous work in a platform game-style experience.<\/p>\n

\n
\"Robby
Robby Leonardi’s platform game-style website.<\/figcaption><\/figure>\n<\/div>\n

Hand-Drawn Wording and Design Elements<\/h3>\n

Illustrations don’t have to be super polished. Take the Cantilever Fish & Chips<\/a> website, for example. It features simple drawings combined with retro graphics.<\/p>\n


\n
\"The
The Cantilever Fish & Chips website is fun and a little bit daggy.
<\/figcaption><\/figure>
\n<\/div>\n

Blog Imagery<\/h3>\n

It’s important to include great imagery in your blog posts, whether it’s your feature images or graphics you insert in-post. The Google Design<\/a> blog is a great example of stunning imagery done well.<\/p>\n

\n
\"The
The Google Design blog.<\/figcaption><\/figure>\n<\/div>\n

Tools and Resources for Creating an Illustration-Inspired WordPress Site<\/h2>\n

Clearly, an \u201cillustrated\u201d website doesn\u2019t always mean that each piece of your site is 100% illustrated. The best advice I could give here if you decide to go this route, is to start with a minimal base<\/a>. Then you can get creative and see how best to use illustrated elements to represent your brand\u2019s personality.<\/p>\n

When you\u2019re ready, check out the following list of WordPress tools and other resources to help get those creative juices flowing.<\/p>\n

Inspirational Resources<\/h3>\n

First place to start? Take a look around to see what sort of high-quality illustrations other designers have created. The following design resources will give you a sampling of everything from minor elements like icons to full-scale book illustrations.<\/p>\n