Patty Toland on DESIGN CONSISTENCY FOR THE RESPONSIVE WEB

One of our biggest challenges designing responsive websites and applications is articulating and documenting the design system so we and our client teams — developers, business, design/brand owners, and most especially QA — all understand it. Old-school pixel-perfect fixed-screen size style guides are too rigid to cover the changing world of screen sizes and device capabilities.

Still, we need artifacts to understand our goals and make sure our sites achieve them. How much design is enough to capture visual and functional characteristics? How do we best represent key interaction characteristics and behaviors? And what about distinguishing bugs from the many expected variations for the vast range of devices and platforms?

Through a range of client projects including news sites, e-commerce, and custom web applications, we’ll look at concrete examples of design deliverables, documentation and demonstrations that capture UI design patterns for delivering a coherent design system that works, and discuss a mental model for evaluating how to apply those rules optimally across the responsive spectrum.