Recently, I tweeted to Dan Mall (superstar designer and professional nice guy) to let him know how much a blog post of his helped my design process. I was honored when he reached back out and asked if I'd share what I'd been doing.
@DavidSkorepa: awesome! I'd love to see what you put together. Possible to share?— Dan Mall (@danielmall) March 14, 2014
Dan's blog post helped solve an issue we'd been wrestling with since making the transition to responsive web design; how to communicate visual direction.
For years the web design industry relied on time consuming and overly-specific things called "full comps" (also referred to as "concept designs", or "Photoshop mockups"). No matter what you called them, they all amounted to the same thing: a elaborate set of full web pages designed to the last excruciating pixel in Photoshop. Ones that the client then also expected the final website to match...to the last excruciating pixel.
Not only is this time consuming and a poor use of a client's budget; but it sets the wrong expectation. Especially when doing a responsive website where hundreds of devices and screen sizes might display the website. A fixed pixel painting of a "full" or "desktop sized" website just isn't adequate anymore.
Lots of other smart folks have been trying to solve this issue of the design artifact (the thing we give to the client to communicate the design part). Samantha Warren's concept of "Style Tiles" (http://styletil.es/) were a huge step in the right direction, but we found them to still be a bit too loose and vague. Not only for our client, but also for our design process (Designers can be specific, control freak types). Even as I tried to embrace the changes necessary to be a good responsive web design practitioner, most of these new techniques left me longing in my own process.
Dan Mall to the rescue.
Dan published an article describing something called an "element collage" that struck the "Goldilocks Zone" for me as a designer who grew up making full comps. Not too specific, not too vague. Just the right amount of detail to establish a design language that could carry us forward in the project no matter the break points, no matter the device.
So we've started using them and the results so far have been tremendous.
- We can iterate quickly, conserving valuable hours in the project budget
- Clients understand what they are looking at. There is enough recognizable detail for them to complete a mental picture of what their responsive website might look and feel like, even early in the process
- As designers the process is a more natural transition for how our brains work.
So Dan, here are two of my favorite recent "element collages". Those of you not familiar with element collages, notice that all the elements are recognizable "web page stuff" without being specific pages per se'. Just a proposal of visual styles and elements for the site.
So far, so good.