Last week I was chatting with a friend in the web design and development business about Responsive Web Design, developing for multiple devices, and the dramatic shift in workflow that is needed to adequately handle all this change. One thing he reminded me of was that the areas of client sign off and deliverables are especially murky.
In the old workflow, the deliverables and sign off points were clear: the final design as PSDs or JPGs could be approved and signed off, then the site would be coded, signed off, and launched. Recently, with the design and development spheres overlapping and the more explicitly iterative nature of the work, it's less clear what we should be providing, and when.
Drew Clemen's "Design Process In The Responsive Age" on Smashing Magazine some weeks ago, and the more recent "Single or Multiple Design Deliverables" on Sparkbox's own Foundry both talk about Priority Guides (roughly speaking: a mobile first wireframe using (draft) real content, annotated with hierarchy and interactions). Combining Priority Guides and a static image of a desktop version of the site could be a good bridging set of deliverables. Add Style Tiles and Guides into the mix and you have an excellent set of reference documents that achieve a good balance between the traditional static visuals (that people are familiar with, but doesn't quite represent the reality of a responsive web site) and a fluid, evolving, prototype (that essentially is the web site, but feels unfamiliar as a process).
I'm revising my workflow to look something more like this:
- User and Client Research
- Content Strategy, Information Architecture
- Sketches
- Client deliverables
- Priority Guides (either in Keynote, Powerpoint, or in HTML & CSS)
- Style Tiles, Style Guides
- PSD / JPG of desktop version
- Iterate over screen sizes
- Sketches
- HTML prototypes. (Structured content, using the deliverables as building blocks.)
- Test