12 Resources for Building an Illustration-Inspired WordPress Site

12 Resources for Building an Illustration-Inspired WordPress Site

Online users, designers, marketers, and business managers – 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.

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

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

While illustrative styles won’t work well for every website, they will for some. They’re 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’s fun and quirky personality.

Get Inspired by These Illustration-Inspired Web Designs

Don’t 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’ve got to admit that there’s something intriguing about an illustrative style website. It’s different, it’s exciting, and it takes a very special brand personality to pull it off.

If you think your WordPress site could benefit from a unique touch, but worry that a fully illustrated site won’t work for you, that’s okay. Illustrative styles aren’t 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’s just the font that looks hand-drawn. And sometimes illustrations are used to add engaging animations.

Want to see how that works? Here are some ways other designers have made use of illustration in their web designs.

Background Illustration and Heavy Reliance on Icons

The Evolve Wealth website features a clean design with blue tones and simple illustrations.

The Evolve Wealth homepage.

Minimalism at Its Best

Cute animations of books being made feature in the header of the [email protected] website, along with line-drawn illustrations.

The Books@Work website.
The [email protected] website.

Dusty Photography-Meets-Colorful Branded Elements

Web developer Denise Chandler’s portfolio features fun illustrations blended with photography and a generous dash of icons.

Denise Chandler’s website and portfolio.

Storytelling Scroll

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. Click through to the website to see it in action.

The Harvey Water Softeners website looks back at interior design over the past 70 years.
The Harvey Water Softeners website looks back at interior design over the past 70 years.

Illustrative Design, Animations, and Transitions

The Keep Portland Weird website is, well, weird. The homepage features a post-apocalyptic animation of the city and an ABC of colorful illustrations.

The Keep Earthquakes Weird website is definitely weird!

Illustrated Brand Mascots and Characters

The Animal Made website is very in your face with its strange animations and bold colors and language.

The Animal Made website.
The Animal Made website.

Infographic-Style Web Design

UnLtd’s Live to Change the World website offers an interactive one-page scrolling experience designed to educate visitors about how social entrepreneurship can unleash the potential of young people.

The Change the World website.

Professional Interactive Resume

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

Robby Leonardi's platform game-style website.
Robby Leonardi’s platform game-style website.

Hand-Drawn Wording and Design Elements

Illustrations don’t have to be super polished. Take the Bar Camp Omaha website, for example. It features simple drawings combined with retro graphics.

The Bar Camp Omaha website is fun and a little bit daggy.

Blog Imagery

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 blog is a great example of stunning imagery done well.

The Google Design blog.

Tools and Resources for Creating an Illustration-Inspired WordPress Site

Clearly, an “illustrated” website doesn’t 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. Then you can get creative and see how best to use illustrated elements to represent your brand’s personality.

When you’re ready, check out the following list of WordPress tools and other resources to help get those creative juices flowing.

Inspirational Resources

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.

  • Dribbble

    All in all, Dribbble is a fantastic resource for design inspiration. If you’re still unsure of how to make illustrations work for your website, start here. Designers have submitted a wide range of illustration samples, from “magic bacon” mascots to trippy meteor backgrounds.

  • Illustration Age

    Illustration Age is a digital publication that focuses solely on providing resources and inspiration to illustrators. That being the case, this isn’t the sort of resource where you’ll find on-site design inspiration. The illustrations here are more like full-scale illustrations you’d find in comic books. If that’s the sort of styling you envision for your site or the kind of inspiration you seek, be sure to check this one out.

    Interested in Illustration Age?

WordPress Themes

Many WordPress themes aren’t built with illustrative stylings in mind, which makes sense when you look at the majority of websites nowadays. But just because stock photography sites rank in the majority, doesn’t mean they rule. Check out these illustration-friendly WordPress themes.

  • Upfront

    Our stunning Upfront starter themes are ready out-of-the-box and are completely customizable.

    When you need the flexibility to be more creative with your design, you’ll want a theme and website builder that’ll work with you and doesn’t require a number of plugin downloads to achieve the desired effects. Upfront makes creating new designs as well as customizing pre-built themes with illustrations a cinch.

  • X | The Theme

    The X WordPress theme calls itself “endlessly customizable” and that’s exactly what you need if you’re going to add illustrative designs to your site. In addition, X comes with a number of features that enable users to add different illustrated elements, like icons, typography, one-page site transitions, and more.

    Interested in X | The Theme?

  • Jarvis

    The Jarvis theme specializes in single-page WordPress site layouts. The best thing about this is that, with the design being as simple as it is, users have much more creative freedom to customize everything else, from the layout to section transitions. If you’re looking to add a hint of illustration to their website or want to keep it minimal like in the Books at Work example above, this is a good theme to start with.

  • TheGem

    This next theme should be one you’re already familiar with as it often gets mentioned in WordPress theme roundups due to its versatility. A true multipurpose theme, TheGem has over 50 concepts, many of which include a heavy illustrative element, like the Main Landing PageSplash Portfolio Light, and Splash Creative Light.

Illustration Tools

A WordPress theme is a good place to start when designing an illustrative-inspired site. Short of drawing out illustrations yourself or hiring someone to do it for you, you’ll need assistance in creating those designs for your website. These tools can help.

  • bypeople Handwriting Fonts

    Sometimes a well-selected font is all a website needs to wow its visitors. Specifically, handwritten fonts are a unique way to give both illustrative and non-illustrative websites a hint of attitude and fun. This collection of handwriting fonts is worth looking into if your theme’s default font options just aren’t cutting it.

    Interested in bypeople Handwriting Fonts?

  • Creative Market

    Creative Market is similar to any resource repository you’d find online. All of the illustration kits and handcrafted designs have been made by designers, so you’ll have to pay before you can use them. For the most part, each of these kits and bundles come complete with everything you’d need to construct your own illustrated website, so the premium is worth it in time savings alone.

    Interested in Creative Market?

  • FreePik

    FreePik is a fantastic resource for finding free graphic design resources. Their collection of illustrated resources is by no means small (there are currently 20,000 of them), so you’re bound to find something here to either inspire your own creations or to snag up for integration into your site’s design.

  • Pixel Buddha

    Another great free illustration resource is Pixel Buddha. When you visit the website, be sure to click on Freebies at the top, and then locate the type of design element you’re looking for. They have icons, UI kits, animations, vector textures, script fonts, and much more to choose from.

  • Adobe Illustrator

    For those of you wanting to create your own illustrations, Illustrator is typically the platform of choice. It’s similar in functionality to all of Adobe’s other design software, so if you’re comfortable with those, this one will be a breeze. In addition to being intuitive, it also integrates with Adobe Stock for when you want to tap into their illustration resources and also includes pre-made templates you can work from.

    Interested in Adobe Illustrator?

  • Sketch

    If all you want is to add a touch of illustration to a website through vector images, Sketch is the tool to use. It’s easy to work with and keeps everything simple. So, if your website falls more in line with minimal sytling, sharp colors, and funky icons and other shapes, then give Sketch a shot.

Wrapping Up

You know what current web design trends look like: full-screen photographs, brightly colored CTAs, and long scrolls. That look works for a lot of websites, but it’s not for everyone. If your brand deserves to stand above the oversaturation of lookalike websites, an illustrative twist may be exactly what you need.

Brenda Barron
Over to you: Has there ever been a time when you had to talk a client out of using illustration on their website? If so, why? Did we miss your favorite resource? Feel free to share where you get your illustrative inspiration in the comments section below.