does it make sense to create UX deliverables about wireframing information design, when nowadays we are evolving to adaptive web design, with more than 2 or 3 different layouts for different devices? how is your approach for deliverables?
-
1In the end you have X distinct states and you need to show them all to the client. If you create static wireframes, you can deliver one wireframe per state. If your deliverables are dynamic, you can have the wireframe itself change as you let the client navigate between a number of views.– Vitaly MijiritskyCommented Mar 23, 2012 at 14:17
3 Answers
One approach is to build a complete set of wireframes using the "default" - or most highly-trafficked - screen size, then show representative examples in the other screen sizes you have designed for.
If you have a few common screen patterns, you can probably get away with showing an example (or two) of each pattern. For any interesting one-off screens, you should probably also show these at multiple screen sizes.
All of these decisions depend on the desired fidelity-level. Early in designs, when you are getting initial feedback and expect to change things quite a bit, I would lean towards fleshing out fewer screens and leaving more "undesigned" details in the interest of faster iterations. The more final these are, the more you need to pin down the details.
Firstly, I just want to say that adaptive and responsive web design are two different things. Adaptive design is essentially responsive design without a fluid grid/images.
At my shop, when we build responsive sites, we build the wireframes in HTML/CSS/JS with the actual breakpoints, then move onto visual mock-ups (6-10 JPGs for review: two pages of the site with all breakpoints), and then into dev.
We charge more for responsive design because it takes longer, requires much more thought, and is generally much more difficult to design. When comparing to a fixed-width design, typically we charge about 1.5x more for responsive design.
The purpose and value in each deliverable doesn't change whether you'd doing a fixed-width or responsive/adaptive site. They're still communication tools and clients expect to see them. Responsive design is but one approach to designing for mobile experiences. It is (in my opinion) the best approach and therefore the client should expect a markup.
Build your wireframe in HTML, and make it responsive.
Then you're set.
-
1That's all well and good, but it takes time to build the wireframes responsively in HTML. It's much faster (and therefore cheaper) to mock up designs on paper before you get anywhere near HTML. Are you going to charge your client for the time it takes to build each responsive wireframe that they then reject for various business reasons?– JonW ♦Commented Mar 23, 2012 at 15:11
-
@Jon W Paper (or digital mockup) is not always faster. If the designer is a strong enough coder (and the number of screens at play is higher) JS/HTML/CSS can be faster to iterate on than paper/electric-paper. (When you need three layouts of the same pages, a centralized stylesheet is suddenly very much worth the effort.) That skillset is certainly not the norm, and given that the OP used the term "deliverable", probably not assumed with this question, but seems worth saying. Commented Mar 23, 2012 at 18:06
-
Even HTML wireframes need some low-level pencil'n'paper sketches.– dnbrvCommented Mar 24, 2012 at 0:05