Responsive Design: Stop Designing Print for the Web

You know the print design drill cold: do sketches, show the client mockups, refine, refine, refine, get approval, send it to production. It worked for print, and it worked for the web (for a while). However, with the advent of Responsive Design and the ever-evolving range of screen sizes we need to overhaul the process of creating a website.

Here are a couple of tools to help change your process for the better and overlap design and development in new, exciting — and more efficient and successful — ways.

Style Tiles

The style tile concept goes one step further than mood boards but stops short of a full (fixed-width) design comp. You get the look/feel without sweating the nitty-gritty details of page layouts. Big time-saver! The styles can even be applied to code modules that can be tested in various sized browsers. Check out the Style Tiles site with a downloadable Photoshop template and workflow tips.

Responsive Interactive Wireframing

Rapid prototyping provides a springboard on the full development of the website. The Foundation framework will help you (or your favorite code nerd) create interactive wireframes with responsive layouts so you can iterate layout and functionality before investing tons of time in creating Photoshop mockups. How often have you finished a site only to realize the “working” version didn’t meet expectations? This step goes a long way to isolating those issues when it’s far less expensive to fix them.

By combining the two ideas that these tools provide you’ll be well on your way to building a better process for creating a website that works well and looks good across a variety of devices.

See you in the future!