A List Apart

Menu
Issue № 393

Documenting design patterns with a style guide and creating new ones with the z-axis.

Creating Style Guides

by Susan Robertson · 37 Comments

A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site’s visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.

The Z-Axis: Designing for the Future

by Wren Lanier · 19 Comments

For years we’ve seen the web as a two-dimensional space filled with pages that sit side by side on a flat, infinite plane. But as the devices we design for take on an increasingly diverse array of shapes and sizes, we must embrace new ways of designing up and down. Designing on the z-axis means incorporating three-dimensional physics into our interface designs. Wren Lanier explains how, by using the z-axis to place interface elements above or below one another, we can create better design systems that are more flexible and intuitive to use—and create new patterns that point the way to future interactions.

More from A List Apart

Columnists

Rian van der Merwe on A View from a Different Valley

Why?

Little kids have an endless supply of Why! Why is everything the way it is? Why do people do the things they do? We grownups don’t pester each other with a relentless stream of why?, and that’s mostly good. But kids could teach us to ask why when it needs to be asked: why are only some people able to build lives they love and find fulfilling work? Does everyone truly have the same chance, or do some of us start the game already a few rolls of the dice ahead? In order to grow, we have to ask the hard questions.

From the Blog

Context Makes Our Devices

When it comes to new devices, context is everything. Smartphones and tablets gained popularity because they were useful in situations where our laptops weren't. Will smartwatches do the same? Anthony Colangelo looks at the context of these new devices and how they might reach their full potential.

Accepting Our Lack of Control

Accepting the “ebb and flow of things” is as challenging today as it was 15 years ago. Susan Robertson explores what it means to accept our lack of control on the web and shares how she acknowledges this in her work—from the CSS she writes, to the conversations she has with team members.