Also written by Uy Tieu
Whether through sketches on a whiteboard or grids in your favorite Adobe product, the design of brand experiences for the web traditionally begins in an environment outside the browser. In the world of responsive design, this feels increasingly strange.
Proper design exploration takes many many hours - and we love every minute of it. When you are defining both a web experience and the overall style of brand, an attractive visual presentation is the knot that ties everything together.
Polygon Exploratory Phase
SB Nation Exploratory Phase
In the past when we presented visual design directions, we presented in a static, traditional fashion. Our Peek at Polygon design earlier this year takes a deeper look at this approach.
While it often served us well, this process was somewhat insulated from reality. Mood boards are an outstanding tool for presenting the core of a design direction; they help all the parties involved understand the overall vibe of a project. Static images, however, are a poor representation of what a design will actually feel like in a browser because it does not account for the interactive elements of the web. Most of the design we now do at Vox is responsive— with type and other elements that change across different types devices. Static images do not provide the information needed to make a good decision on that particular direction.
Additionally, our discovery process hadn’t historically included a Front-End Designer in the mix. So there was a clear cost: design direction was visually strong, but not immersive. And when buildout began, we’d find reasons to change things anyway. For any brand on the web (and certainly for ours), well-designed user interactions are just as important as beautiful visuals, if not more so.
Our main adjustment: get design into code much, much faster. Enter Responsive Mood Boards.
Over the past 18 months, we have launched some big things (The Verge and Polygon) and relaunched some bigger things (SB Nation). With this flurry of activity, we haven’t spent much time on our Vox Media site and brand. With the VoxMedia.com project, we wanted to take all the things we learned as we matured and put those experiences in refining our parent company’s brand voice and appearance.
So, this sounds great in theory - but how did we execute this plan? Simple - we came up with a framework to sketch our design directions, then quickly moved them into code:
What do responsive mood boards get us?
- The idea that Photoshop & InDesign can be sketching tools rather than layout tools.
- A better understanding by stakeholders of how design options will hold up across devices.
- The ability to make important decisions in the browser. We don’t necessarily design in the browser, but we *decide* in the browser.
- A cursory understanding of how individual elements act across devices.
- The beginnings of a reusable styleguide for design elements: typography, interaction and visual.
- Into code quickly, for a Getting Real, mindset.
- A stronger cross-functional team, with empowered front-end developers.
Again, we haven’t abandoned Photoshop or InDesign, but we’re not confined to them, either. There’s a middle path, where design and code have a healthy conversation that’s good for the design, the product, and the team. Our plan is to lean on this process for projects where big new design is needed, and keep refining.
We’ve developed this approach with a little trial-and-error, and with a lot of inspiration from other folks doing some cool things.
- Style Tiles - A very cool system developed by Samantha Warren.
- http://building.seesparkbox.com/style-prototype/ - A cool responsive style framework