Couple tips for an easier mockup process

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!

Source: Responsive Comping: Obtaining Signoff Without Mockups

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 clean or clean? Speaking the same visual language clarifies aesthetic opinions before getting too far into the actual design of the site.

Source: Style Tiles as a Web Design Process Tool


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s