Topic: Behind the Scenes
Designing PUMA
Over the past year and a half I've had the opportunity and pleasure to run as lead designer and art director for Viget's engagement with PUMA. When we started the project many moons ago we had a very singular focus, the PUMA Running site. Over the course of the engagement our focus has expanded to include over a dozen category (sub-brand) sites and other micro-sites in collaboration with PUMA's internal team. Recently we tied them all together with the launch of the new PUMA.com (an exciting day for our team). I've been a long-term fan and consumer of PUMA products and they have been on the top of my "dream client" list for a long time so this project has been especially rewarding for me.
Our role on the design side of things has spanned from design production and illustration all the way up to photo/video-shoots direction and high level creative concepting. Many hours of collaboration between our departments (marketing, design, fed, UX, dev) and PUMA's internal team have resulted in a PUMA brand with a stronger, more cohesive, and consistent story in the online space. The content and visuals of PUMA's sub-brands can now live harmoniously together, working together to tell the bigger PUMA story, while the awesome offline PUMA campaigns have more room to come to life and stretch their legs online.
Behind the Scenes: Mood Boards
As web sites become more complex, the process that leads us to successfully plan and build a site has evolved. Having multiple designers spend a lot of time creating complete homepage designs with the hope that the client will magically like one is time consuming and risky. Many client budgets can't support this type of overhead, so there has to be a better way.
The Answer: Mood Boards
A few years ago, Tom gave a great primer on mood boards. Since then, they have become an essential part of our process. We typically design three mood boards for each new project. This number can vary based on the budget, how rigid the client's brand guidelines are, or how open-ended the design direction is that they provide. We've found that three is the magic number that allows us to show clients a good mix of styles without going overboard.
I think that it's worth taking a quick timeout to explain how we mentally approach mood boards. For lack of a better way to say it, these are throw-away design pieces. Most are never seen by anyone beyond the client presentation, and only one is picked as the direction for the final design. We do our best to create style elements that can be carried into the design comps, but sometimes only a small percentage of these make the cut.
"So why do them?," you ask. Because they dramatically reduce the risk that we incur when beginning a new design. Narrowing down what a client wants takes less than half the time than it did in the past. This gives us a high degree of confidence that we're headed in the right direction, and the client isn't surprised when we deliver a homepage design that mimics the look-and-feel of the mood board. It's a win, win!
Behind the Scenes: Mosaic Security
Viget loves working with start-ups, and we have a lot of experience helping navigate the unique challenges they face. When it comes to designing for start-ups, the challenges are often two-fold. First, there's typically no branding of any kind to draw inspiration from. Second, tight deadlines and lean budgets require that the design phase be fast and extremely efficient. The main goal is to get a quality product out the door. Design is important, but spending months developing an identity and style guide for a product without any users base or momentum just doesn't make sense.
Designing Vigegram: A Handmade Project
Each year, Viget joins together around the holidays to create something completely different. We do a project that is almost entirely hand-made and non-web. This year's gift was called Vigegram, a sort of spin off of your old-fashioned telegram, with a twist. If you didn't get the chance to check it out, take a quick look here, and then read on to hear some behind-the-scenes info on how we designed it all.
After the initial overview discussion about designing Vigegram, one of the first things I did was pull together a quick inspiration board (above) in order to start thinking about a visual style. Only a portion of this directly influenced the final design but it was a good conversational piece early on to help me figure out what the vision would be for this project. The next thing I did was crack open my sketch book and work out some rough design ideas (below). Through this and some conversations with Owen, we decided that we'd include big type and also some hand-drawn elements.
Knocking It Out
This past weekend, I was holed up in the Viget Labs offices with three super talented developers - Chris Jones, David Eisinger and Ben Scofield - competing in the Node.js Knockout. Similar to other programming contests like the Rails Rumble, the Knockout takes place over a single weekend. 48 hours, to be exact. The goal is to use Node.js in a project, and get that project completed (or at least functional) before time runs out. You're not allowed to touch any digital files before or after the 48-hour window. The submissions are judged by peers and industry leaders, and some pretty cool prizes are up for grabs.
In the weeks leading up to the knockout, we sketched out a basic - but very ambitious - plan. We wanted to make a RPG game. We wanted it to do about thirty awesome things. We wanted multi-player, onlookers, bosses and mini-bosses, leveling up, Tweeting results and taunts... In short, we wanted to create a feature-rich game in less time than we usually spend brainstorming. But as the weekend grew closer, reality set in and things started falling off the list. Priorities emerged.
This being my first weekend contest, I was nervous. The planner in me ached to start something, anything... even a simple template or color palette. Holding off on preparation is against my nature! But when Friday 8pm rolled around and we jumped in, I was glad I hadn't wasted time in prep. With the pace we were working at, things changed constantly. Trying to plan details would have been a waste. It also would have taken some of the fun out of watching the team build something out of nothing in two days flat.
What we ended up with is a pretty cool little Zelda-esque game called Tweetquest. It loads in your Twitter avatar and turns the people you follow into viscious rat enemies. You fight your way through boards and are given three different weapons - a sword, a bow, and fireballs. The weekend wasn't as intense as I feared it would be. I had a blast with the Viget devs, and only wish I would have spent a few more hours on the UX and design details. Having to look at a "finished product" that was cranked out in one weekend can be a little depressing for a designer who is used to perfecting every detail.
Was it worth a little lost sleep and burnout? Techcrunch seems to think so.
Edited: The site (and all other non-winning entries) were taken down by Joyent, who were hosting us for free during the event. No more TweetQuest. ;(
Behind the Scenes: Lafayette College
Back around the time of the first and second North American blizzards of 2010 (more popularly referred to as the Snowpocalypse and/or Snowmageddon) we started working with Easton, PA based Lafayette College on a redesign of their Lafayette.edu website. It had been years (many years) since the site had a major overhaul so when we sat down with the varsity team of Lafayette stakeholders we knew this was going to be a fun project. Six months later on the heels of a new academic year the shiny new website was ready for primetime.
Is this form field taken? A jQuery placeholder-enabling plugin
Not too long ago, Trevor wrote a great article on better in-field labels using a handy jQuery plugin. In the course of the article, Trevor points out the new-to-HTML5 placeholder attribute which is available on textual inputs (the input and textarea elements).
As the spec defines it, the placeholder attribute "represents a short hint (a word or short phrase) intended to aid the user with data entry." Seems pretty straight forward, right? If you've filled out a form on the web (and who hasn't?), you've likely seen placeholder text in forms fields. Sadly, they may often be used instead of labels. Placeholder text should work in concert with the label element to provide the user with context, formatting information, or other helpful aid.
So! Now that we know what the attribute is for, I'm here to tell you that you can start using it today in your HTML5-doctype'd web pages. Browser support is still spotty, but you can enjoy the goodness of the placeholder attribute in Firefox 3.7+, Safari 4.0+, and Chrome 4.0+.
For our not-quite-bleeding-edge browsers, I present to you a short jQuery plugin that utilizes the placeholder attribute and enables it (in a manner of speaking) in non-supporting user agents.
Continue reading "Is this form field taken? A jQuery placeholder-enabling plugin"
2011