When working with responsive designs, my old workflow wasn't working any more, so a new one was needed to match my new way of thinking about content, structure and navigation. I needed something more robust to help explain to clients how responsive design would benefit them and their users. Here is what I've come up with so far:
- I still like to start with rough sketches to work out basic layout ideas. Two great tools that help me organize my thoughts are Sneakpeekit (www.sneakpeekit.com) and the Responsive Design Sketchbook (http://appsketchbook.com/products/responsive-design-sketchbook).
- For wireframing, I use Wirefy. it enables me to build a solid foundation for the content and get a sense of how users will navigate the site quickly. I'm also able to test out my ideas without any hassle. I compliment my responsive wireframes with Style Tiles (www.styletil.es). Since I'm working within the browser, a strong presentation layout here that I use is the Sparkbox Style Prototype (http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype).
- Finally, to design. I've moved away from working in static form, and now mostly use Photoshop to test colour palettes or design specialized icons. Most designs are coded directly into the browser. I use TextMate and Chrome while building and testing styles on top of my wireframes.
This is the flow I've been able to use when working on client projects. Going through this flow helps me articulate solutions to clients, and get faster sign off with minimal back and forth, but this might not always work best for your way of thinking. Working with a range of tools and testing options will help make you create smarter solutions, because you will discover new methods of thinking.
Posts
