Recently I have been working on a redesign for a large media web site that needs to be responsive using a 3rd party Content Management System. Through some good research I found some great work processes I want share and build upon.
If you are a designer who has experience in systems then this should be a piece of cake but if you only have designed PSDs for a web site then you may have some old habits you need to break.
PSD-to-HTML is dead.
While this workflow served a purpose in the past it will not stand up with the complexities of responsive web design. This also changes agency/designer billing from a per page pricing to billable items accompanied with demo-able code.
The Responsive Process
Global Moxie recently redesigned Entertainment Weekly's responsive mobile website and their process was the most streamline I have seen. They avoided formal wire frames and emphasized blocks of content at very high levels of abstraction. The "big-picture" sketches evolved into defined repeating patterns across screens. The patterns were then converted to HTML prototypes.
Create Building Blocks (patterns not pages)
A true "Global Experience Language" includes building blocks that creates a system to render a "screen" on any device. Brad Frost has a great tool, "Pattern Lab" that allows you to collect & define core components.
Also check out his process. The idea here is to create global atoms, molecules, organisms & templates. This is the header/footer, headings/sub headings typography, lists, block quotes and all those things on a screen including social sharing etc.
The BBC did a great job defining & documenting their Global Experience Language. I reference this on numerous projects because it is a very comprehensive guide to designing across devices.
Constructed UI Widgets (IA sketches & visual design happen parallel)
Color, typography, texture, look & feel, are used to create "Element Collages" to help define the design direction without doing full PSD designs. You then apply these visual aspects of the design into the prototype. The key here is to see how things actually play out on different devices (widths). Dan Mall details the process on his blog.
The advantage is to get out of the deliverables business
Practice Lean UX - Act like a start-up "Build, Measure, & Learn". The process is as follows: Concept/Prototype/Validate Internally/Test Externally/Learn from User Behavior/Iterate.
Involve stakeholders sooner by getting into the browser quickly
Demonstrate designs across different screen resolutions. Let the client get a good sense of the feel of the design. Fix usability & how type renders on different devices quicker.
How do you make the next project into living code samples that are self-documenting style guides to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web?
Below is a list of a great starter list of responsive deliverables from Dave Rupert. Also check out this great PDF from the BBC it follows a similar methodology,
* Flexible grid
* Accessible form controls
* Tabbed navigation
* Responsive tables
* Media lists
* Data tables
* Icon fonts
* Responsive images
* Responsive typography
* Accessibility architecture
* Legacy browser support
* i18n/l10n tolerance
* Performance budget
* Responsive advertising
* Homepage layout
* Subpage layout
* Article index layout
* Article layout
* Product index layout
* Product detail layout
* Sign up flow
* Checkout flow