At An Event Apart in Austin 2012, Andy Clarke talked about the changing processes in web design and shared a number of tools and techniques that can help designers make transition to a more modern workflow. Here's my notes from his talk:
- Most people's workflow is: plan, design, develop, deploy. The process has been with us for a really long time. But responsive design is having a major impact on the processes and tools we have used to date. We need new approaches and tools.
- How and why we use tools is more important than the tools we use.
- Photoshop doesn't take browser capabilities into account. It primarily creates static visuals. Its a drawing tool and drawing tools are not equipped to handle the needs of Web design today.
- We need our tools to help us: experiment creatively, produce assets, communicate design.
- Why are we still using drawing tools for web design? We wanted to preserve the control and processes we had in previous forms of media like print. Drawing tools start with a canvas of a fixed size: 800x600, 1024x768. This is canvas in thinking: starting from the edges and adding stuff.
- We've been thinking about the Web the wrong way. The Web is fluid but we keep trying to fit it into rectangles.
Layout & Atmosphere
- Layout is only one component of a design. We need to separate out layout from atmosphere. It's only a small part of a site's overall personality. The atmosphere of a design plays a much larger role.
- The personality of a site can come through without any reference to layout. You can use small visuals, style tiles, mood boards, etc. to work out a visual style.
- You can design a pattern library of layouts, ui elements, and components.
- Atmosphere: type(faces, treatments, whitespace) color(emotion and interaction), texture (background, borders, patterns).
- Style inventory: list out all design elements and classifications that can be applied to each of these elements. This helps dissemble aside and focus on atmosphere I stead of layout.
- We can dissemble a site to get its atmospheric elements established, then we can place these elements onto a page to create layouts. This makes layout the second part of a design process. Not the first.
New Tools
- Setting web type in Photoshop is a waste of time. It won't match what you see in the browser and it can't simulate the impact of different screen widths.
- Instead start with a blank HTML page of the text you want to use in a design and include rules for adaptation.
- Typecast is a tool that allows you to set web type using real content and even output a style guide. It also supports open type features like ligatures, etc.
- Type informs other design decisions like layout.
- Designers who can't code, need to at least get into writing CSS.
- CSS Toolkit is an app for making CSS code visually on the desktop.
- Responsive pixels is a tool that loads HTML, CSS and allows you to see where you might want to include responsive design breakpoints.
- Grid set is an upcoming tool that allows you to play with dynamic, responsive grids. It builds on deep grid theory and proportions.
- Static drawing tools don't make it easy to experiment with grid layouts like this. Static visuals are the currency of the Web but they set the wrong expectations about browsers, layouts, and more.
- Aptus allows you to set a range of widths and take screenshots of each automatically.
- Adobe Shadow allows you to control the browser on multiple devices from one central location. It enables a more dynamic cross device design process.
- Our tools need to help us move us from a structured waterfall process to today's workflow. Experimentation, asset production, and communicating design are all needed and may require different tools.
- Today's drawing tools are now only relevant for creative experimentation.
- Design doesn't work when it's separate from development.
- In the browser and on the device is the only way to communicate design. Not static visuals.
- It's going to be really exciting to see what new tools get made over the next few years.