Digital Style Guide: Tools for a Lean Design Process

Adapting a PDF format style guide to the digital realm is nothing fundamentally new. However, the last couple of years have seen new approaches to a digital style guide in order to optimize the design and development process. A digital style guide inherits all the systematic design solutions that a static set of guidelines communicates, but it has evolved into a much more powerful tool to aid a product development process.

In 2013 Method, in collaboration with the development partner iKos, created a digital style guide while working on the responsive e-commerce website for Lush, a UK-based cosmetics brand specializing in fresh handmade cosmetics. Because of the compressed timeline, the project was a massive undertaking. By utilizing the style guide in the design and development process as a collaboration tool, it took only six months to deliver the whole site from the project kickoff to the beta launch.

Since the successful launch of the Lush responsive e-commerce website, creating a digital style guide as a part of the design process has become a common practice at Method’s London studio.

Here are eleven benefits of incorporating a digital style guide into a design process.

1. It helps designers think in systems.

Working as a platform to construct design patterns, a digital style guide helps designers translate a design solution from a page to a system level and provides a path for consistency across the system.

2. It helps rationalize the foundations of responsive websites.

Designing and building responsive websites is a complex task and there isn't yet an ecosystem of quality tools. A responsive style guide is invaluable for both helping designers ensure that their ideas work across all breakpoints, as well as communicating these complex behaviors to the development team and clients.

3. It accelerates the lean design process.

At Method London, we’ve been implementing and refining a lean and iterative design process over the past few years. One of the core approaches to this process is to exit Photoshop and to transition to 'design in the browser' phase as quickly as possible. Once the design system is set up in the digital style guide, there is no need for crafting pixel perfect design for every single screen. The design team works to 80% fidelity, and they then work with developers to achieve the final fidelity with code instead.

4. It validates design assumptions.

A digital style guide provides the ability to “play with the real thing.” The design team and clients can validate the designs in the browser or on required devices quickly and easily.

5. It effectively communicates interaction patterns and animations to developers.

Providing a development team with a reference implementation of complex interaction patterns and animations is critical. At Method we have the role of “Design Technologist” who works closely with designers to iteratively refine and finesse these details. It is important that this attention to detail is reflected in the end product once it has been through a development team. The style guide is essential both for showing the developers what we want to achieve as well as providing a reference to which the final implementation can be compared.

6. It helps designers and developers collaborate more closely.

When a design stream is running in parallel with development, a digital style guide works as a channel for communication between the design and development teams to find and share solutions.

7. It minimizes documentation.

No one likes red line comps. Designers find them as tedious production; developers don’t like working from them. So why do we continue producing them?

If design solutions are rationalized and shared with developers throughout the project, there’s little need for this inefficient deliverable at the end of the design process.

Our latest experiment with a style guide includes a feature that automatically plugs in prototypes as design deliverables. We have learned that seeing the behavior "live" is much clearer and more powerful than any mechanism for describing it.

8. It serves as a communication tool for different parts of the team.

A digital style guide helps various teams and stakeholders align with the project progress and outcome. We’ve recently been working on a very large-scale project as a part of a client UX team. The digital style guide has been the primary communication tool and hand-off platform for the various project teams, including UX, development, marketing, QA and product owners. It is one single place where people can get up to speed on the project overall, including the project vision, progress and outcomes.

9. It is a central repository for files and information.

Sharing files across multiple teams, clients and offices can be a real challenge. A digital style guide can work as a central hub for designers and developers, containing resources such as design files, assets and templates.

10. It can also serve as a testing platform.

Usually browser and device testing involves robust preparation and strategy. Using a digital style guide as a platform for browser and device testing means there’s little to no extra work required to create testing materials. Testing results can also be captured in the style guide and easily shared with the design and development teams.

11. It ensures that the client is brought into the evolution of the product.

A digital style guide is a living document that constantly evolves to reflect the most up-to-date work. It can be continuously updated, even after a product is released, to accommodate new learnings and changes. It ultimately gives the client full ownership of the project deliverables by ensuring that it serves as a valuable and dynamic tool, rather than a static set of rules gathering dust on someone’s desk over time.