Designer to Developer: How to Go from Paper to Style Guide (and Still Remain Friends)

A presentation at DrupalCon Baltimore in in Baltimore, MD, USA by Carie Fisher

Designer to Developer How to Go from Paper to Style Guide (and Still Remain

Designer to Developer How to Go from Paper to Style Guide (and Still Remain

Chris Doherty Senior front end developer / designer

Chris Doherty Senior front end developer / designer

Carie Fisher Accessibility lead / Senior front end developer

Carie Fisher Accessibility lead / Senior front end developer

Introduction

Introduction

Building the Foundation

Building the Foundation

Create Failsafe Systems

Create Failsafe Systems

Our Client

Our Client

Track Progress

Track Progress

File Sharing

File Sharing

Client Nomenclature

Client Nomenclature

Initial Design Phase

Initial Design Phase

Effective Design Workflow

Effective Design Workflow

Homepage Wireframing

Homepage Wireframing

Naming Components

Naming Components

Asset & Component Lists

Asset & Component Lists

Component Functionality

Component Functionality

Design Handoff

Design Handoff

Translating Design into Code

Translating Design into Code

Homepage Mock-ups

Homepage Mock-ups

Design Specifications

Design Specifications

Component Behaviors

Component Behaviors

Know Your Assignments

Know Your Assignments

Component Driven Development

Component Driven Development

Using a Style Guide as a Design Tool

Using a Style Guide as a Design Tool

Homepage Style Guide

Homepage Style Guide

Components in the Style Guide

Components in the Style Guide

Component Functionality

Component Functionality

Sharing the Style Guide

Sharing the Style Guide

Design Adjustments

Design Adjustments

Design Updates

Design Updates

Something's not quite right...

Something's not quite right...

Adjust on the Fly

Adjust on the Fly

Test Responsive Designs

Test Responsive Designs

New Feature Request

New Feature Request

Summary

Summary

Thank you!

Thank you!

Even the best laid project plans can have gaps when the project shifts from ideation/design to front-end development. To smooth the journey from an idea to realization, designers and developers must work together to bridge these gaps. How can a UX designer anticipate the needs of a front-end developer? What sorts of questions should the front-end developer have for the designer? How can we bridge the gap between these two worlds in a way that is helpful to both, while keeping the client and project manager happy?

In this session, Chris and Carie will walk through the workflow of transforming an 'idea on paper' into a living style guide, how having a style guide benefits all involved in the process, from designer to client, from the beginning to the end of a project.

Session Outline Building the foundation: How can we get everyone on the same page from day one?

Initial design phase: Effective ways to convey design ideas to clients and the best tools for the job.

Design handoff: The initial design is complete. So what now? What does the front-end developer need from the designer in terms of design direction, assets, documentation?

Component driven development: It’s all the rage, but why is the style guide development approach useful? How can it save time, increase accessibility and improve the development process while also benefiting the client?

Design adjustments: While the initial design phase is complete, the job of a designer is not. This might mean reviewing the style guide, answering a developer’s questions as they arise or even identifying components that were not addressed in the design phase.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.