Responsive Web Design with Adobe Photoshop

by Rose, Dan

• ISBN13: 9780134035635
• ISBN10: 0134035631
• Edition: 1st
• Format: Paperback
• Copyright: 2015-01-15
• Publisher: Adobe Press

Summary

For a couple of decades now, designers have used Photoshop to mock up Web page designs. However, that work generally results in a static graphic of the page, which has to be translated by a developer into the components of a Web page: HTML files and Web-compatible image files.

Our multi-device world has shown us that this approach to web design, including full-page comps done in Photoshop, is increasingly problematic. Modern web designers are adopting a new approach: creating flexible web pages whose layout can adapt to suit the screen on which they are displayed. This is “Responsive Web Design” [RWD].

Until now, books on designing responsive Web sites have focused on HTML and CSS – in other words, they've been very code-centric, and visual creativity seems to take a back seat.
This new book is aimed at the visual Web designer who’s accustomed to working in Photoshop. Adobe Photoshop CC contains many new features that help streamline the process of converting a static page design to a set of components for a responsive web page.

Dan Rose is one of the best-known advocates of this new way of working in Photoshop. He’s observed that only a few people are talking about Photoshop for RWD constructively, yet a majority (63% as of his last informal poll) of web designers are using Photoshop for more than simple asset creation. This transition is a pain point for many designers.

His new book will balance coverage of conceptual issues (how to fit tools like Photoshop to the design workflow rather than fitting a workflow to the tools) with practical design exercises tailored to help communicate the overall design direction of the page while respecting the needs of the fluid Web. In addition, he will introduce methods for taking HTML back into Photoshop for further refinement.

 

Author Biography

Dan Rose is an interface designer, speaker, and writer who lives in Syracuse, NY. His affinity for workflow and Photoshoppery led him to create Photoshop Etiquette, a guide to discernible web design. Dan serves as the Graphics section editor for Smashing Magazine, and is the pioneer of events such as Syracuse Sync and Create Upstate. On Twitter he's @dblizzy.

Table of Contents

Introduction: Photoshop’s New Groove (intent for book explained)
How did we get here? Photoshop Pre-RWD
The Case for Designing in Browser (where Photoshop fails post-RWD)
A Plea for Photoshop/Browser Harmony
Better discussions with Visual Inventories
Smaller Comps: Element Collages
Completing the Direction with Style & Component Guides
Breaking through “Browser Block” (when designing in the browser fails)
Fixing RWD in Photoshop with Page Layers
Extending Photoshop (plugins, extensions, Generator)
Remembering Etiquette (Photoshop Etiquette overview, discernible workflow)
Moving Forward: adjusting our perspective on tools