Responsive web now means making multiple mockups of the same page. This can mean 3x the Potatoshop effort and sore shoulders. Boo.
Here are a couple tips from around the web on how to make life easier for client-agnostic design:
Tip #1: Make your mockups in code.
Once we understand the site’s content and priorities, our first visual step is to create wireframes. But as you may have already noticed, shuffling text around a Photoshop file can be time-consuming and frustrating.
But you know what’s really great for laying out content in a way that accurately expresses its hierarchy? You guessed it: HTML and CSS!
Tip #2: Use ‘style tiles’ instead of static mockups.
Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout. They work well for clients who have established brands and need them to translate smoothly to the web. Whereas the word “mood” is often associated with brand and identity design, the word “style” was chosen to mirror “cascading stylesheets” and reinforce that Style Tiles are specific to Web design.
The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language. When a client says “clean,” does she mean Apple.com clean or NYTimes.com clean? Speaking the same visual language clarifies aesthetic opinions before getting too far into the actual design of the site.