Jun 24, 2013

Responsive Design Workflow

Responsive Design Workflow

The Responsive Era has changed our mindset as professionals and users, and of course it has also changed our design workflow in the same way in order to be more efficient.

Stephen Hay a coherent and practical responsive web design process, which involves creating low-fi web-based wireframes beginning with “mobile-first” strategy and working up to bigger screen sizes and hi-fi approaches in a process of progressive enhancement. This method gives us the opportunity to get constructive feedback from the client during the process, and allows us to make agile changes throughout the site with few changes to the CSS, and without needing to make dozens of modifications to the photoshop templates.

He proposes a content-based approach, starting with plain text and thinking about accessibility and usability starting from the content, not from a pre-designed UI.

“One of the biggests problems in web accessibility is that many people start with the advanced user interface, take that as a given, and try to “add accessibility”. Many website are designed from the UI in rather than form the content out”.

The book suggests tools and describes processes like content inventories, how to create a design language, sketching, applying styles incrementally, using web-based interactive mockups or designing and documenting breakpoints and visualizing them through graphs.