Blurred Lines

A workflow for responsive design

Created by Natalie MacLees / @nataliemac

1959

“Talking about jazz is like dancing about architecture”

Thelonious Monk
Kind of Blue by Miles Davis

?

PSD Grid Template
Responsive Design animation

There are no experts

Designers

vs.

Developers

Tools

What is responsive?

Devices

What is responsive?

Mobile First

Progressive Enhancement

PSD Grid Template
Typical 960 Workflow
Typical 960 Workflow

Responsive Workflow

Three Phases

  • Content, prioritization, and structure
  • Develop-y design work
  • Design-y development work

1. Identify tasks

2. Task-specific content

3. Group into pages

4. Priority Structure

5. Typography

6. Color Texture

7. Element Design

by Dan Mall

by Dan Mall

by Dan Mall

8. Module Design

9. Layouts

10. Interactivity

11. Review Refine

Challenges

Clients

The Future

Questions?

Resources