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

From Professional Development to Product Development

There are many things to love about working at Viget, but one thing has stuck out to me as especially valuable and unique: professional development.

Professional development is a category that every Viget is required to put some time into. We talk about it in our one-on-ones with our directors and in our discussions within our respective labs. We also hear about our talented co-workers’ side projects via slack or at Free Lunch Friday. There’s no strict definition of what counts as “professional development” but it can include anything from writing blog posts, reading up on our industry, learning a new skill, and attending events. I’d like to talk about why that’s been valuable for me — and how it led to an attempt at launching a product!

The Project

Over a year ago, I decided I wanted to embark on a design challenge — to illustrate and design a deck of cards. This was an important goal for me in a few ways:

  1. I’m an avid card collector.
  2. I wanted to get better at illustration.
  3. I wanted to try launching a product on my own.

Now — this was a traditional ‘art’ project, one that I hoped to get printed. That’s not really in line with the digital focus we maintain at Viget. Not surprisingly, though, my director and team encouraged me to pursue my project. I found this directive and support to be incredibly helpful for me in a variety of ways.

Stronger Technique

Learn by doing right? I picked up so many handy tips and tools along the way due to the restrictions of working in an Illustrator-only environment. (The cards are offset printed, so colors needed to be divided, artwork should ideally be vector, etc.) It’s really surprising to me how much I learned about Illustrator on this project, and how many of the techniques and tools I wasn’t familiar with at the outset.

By the end, I was zipping around with all kinds of new shortcuts. Two huge time savers for me:

  1. Quickly selecting specific pieces based on artwork attributes via Select > Same > Fill & Stroke (I have this mapped to Command + F)
  2. Pathfinder’s Divide functionality - the holy grail to getting artwork print ready, and separating your colors.

Illustrating More Often

When and where it’s appropriate, illustration can elevate a product and set it apart from every other experience. Illustration has been a topic for many of our designers here over the past few months, and we’ve been working it more and more into our projects with great success. (Just look at Blair’s amazing work for the Lupus Foundation!) The playing card project solidified my love for illustration and has unlocked a part of my skillset I was afraid to use in the past.

Professional Development Is Personal Development

By the end of the project, I had a great portfolio piece, a new set of skills, and renewed energy as a designer. Taking the time to dedicate myself to a specific design goal brought new life to my work, to my job, and to myself as an individual.

Other aspects outside the traditional design role included marketing, financial planning, and strategy. I’ve chosen to launch Bloodlines on Kickstarter — and with that comes a lot of work to understand how to market, sell, and ship a product (all while balancing the cost of the endeavour!) These are not traditional parts of my day-to-day job, and it’s been exciting to gain exposure to these new fields.

In Conclusion

I think it goes without saying that professional development is a positive thing that all companies should embrace. By making it a part of my overall evaluation at the company, it pushed me to explore pieces of my skillset that I had not previously tapped into, taught me valuable lessons, and helped me grow as both a designer and a person. Most exciting—the idea of this project actually becoming a real, tangible thing!

To see more...
Check out the Kickstarter!

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.