Presented by Ben Callahan.
Before RWD, we pretended like things were pretty simple.
- The fixed width consensual hallucination has really constricted us.
- The linear workflow held together for quite a while. Then responsive web design came along.
Responsive web design is about a whole lot more than layout.
“1 Deliverable” Workflow
- Content, UX, Design, Front-End, and Back-End are all equal parts of the same pie.
- Imagine a spiral circling out from the center of the pie with touchpoints across the various disciplines at different points throughout the project timeline.
Advancing Design through a “1 Designer” Workflow
Establish the Aesthetic
- Style Comparisons: Using a tool like a Pinterest board to convey a mood, idea, or feeling. (Light or Dark? Flat or Texture? Illustration or Photography?)
- Style Tiles: “mood boards for the web”, used to define a visual language for the web.
- Style Prototypes: Taking the idea of a style tile and building it quickly in the browser. Very simple, but responsive. Using browser-based techniques can quickly bring up the conversation of browser support with a client.
Use tools you are comfortable with to establish the aesthetic.
Solve the Problem
- Static Design Tools: Photoshop, Sketch, pencil and paper
- Responsive Design Tools: Adobe Edge Reflow, Froont, Macaw
- Brad Frost’s Atomic Design
We’re not designing pages, we’re designing systems of components — Stephen Hay
You best solve problems using tools you are fluent with.
- “The Dip” and the Four Stages of Learning: Unconscious Incompetence, Conscious Incompetence, Conscious Competence, and Unconscious Competence
- The last stage, Unconscious Competence, is fluency. This is the level of skill we must strive for in order to solve problems in our medium.
Refine the Solution
- Don’t use static design tools during this refining period.
- Instead of doing design hand-offs, consider design pairing.
- At Sparkbox, the Creative Director sets the creative direction for a project. Front-End Developers then work closely with the Creative Director to bring the vision to life in the browser.
You don’t want to do the long tail of refining more than once.
- Mentally switching from solving the problem to refining the solution is when you should switch to working in the browser.
Efficiency is key when you’re refining a design solution.
- Establishing the problem: Comfort
- Solving the problem: Fluency
- Refining the solution: Efficiency
Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. — Bill Evans on Kind of Blue
If you can’t say no, it’s not collaboration.
- Create guidelines instead of rigid process. The amount of process required is inversely proportional to the skill and experience of your team.
We could create a rigid process or we could chill out and develop our people. Invest in people over process.