Your friends at Viget present Inspire, a Design & Interaction Blog

Illustrating for Online: Find Your Inner Animal

It's time for yet another inside look at the thinking, process, and work that went into some of our illustration work at Viget! This time I'll be diving into the WWF quiz, Find Your Inner Animal

Find Your Inner Animal

Find Your Inner Animal quizzes you on your personality traits, then tells you based on your answers what your true inner animal spirit is. WWF already had a popular version of this game up on their site, but it was several years old and Flash-based. Our mission was to spruce it up, refresh the illustrations, and make it a fun, responsive experience that could be enjoyed on mobile, tablet, and the desktop. 

Illustrating for Online: Know Lupus

Illustration is often a big aspect of our work as designers. More and more illustrations – big and small, elaborate or simple, as primary features or supporting roles – are seamlessly integrated into sites and apps. Whenever possible, I like to share the thinking, process, and work that went into some of our illustration work at Viget.

Know Lupus

We were thrilled to work with the Lupus Foundation of America on their Know Lupus campaign. Our small part of the larger campaign: create a game that would educate people about lupus while keeping them entertained and engaged. We came up with a card game that tests what you know and educates you on what you don’t. Highly interactive, illustrated cards for each lupus fact make the game enjoyable and memorable to play, and hopefully fun enough you'll even want to share it and spread awareness about lupus to family and friends.

Responsive Logos, Part 2: Making Logos Truly Responsive with Inline SVG

In Responsive Logos - Part 1, I made the case that applying responsive design thinking to logos and allowing for subtle flexibility can actually support and enhance a brand’s identity. Several tips were then presented, on how logos can be adapted to better fit small screen constraints.

This post shows how to efficiently implement responsive logos on the front-end, using the examples from part 1.

Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens

From what I’ve seen, logos typically receive the short end of the stick when it comes to responsive web design practices. Take a look through responsive galleries, and you’ll see that, in most examples, the logo is just shrunk to fit within available space.

For rectangular logos with simple and minimal details, this approach can work just fine. But if the composition or proportion of a logo is anything else, simply reducing its size for small screens may make small details unrecognizable, and small type unreadable. Fortunately, it doesn’t have to be this way.

Color Contrast for Better Readability

article introduction image contains the words 'color contrast'

When you create color palettes for your web design projects, are you testing the color combinations for contrast? If you're not, you might not be considering the eventual readability of the design and thus losing potential audience. 

I’ve been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too. 

I should mention that I’m far from an accessibility expert. My goal here is to simply show that a little bit of effort can go a long way when it comes to selecting colors with optimal readability in mind. Check out W3C for a more thorough explanation. Also, check out Contrast Rebellion for an interesting look at the contrast problem.