A List Apart

Issue № 393

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

Creating Style Guides

by Susan Robertson · 38 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


Rian van der Merwe on A View from a Different Valley

The Analog Revolution

Back in the day, when software was released (on physical media), it was considered done. In the present, some products could benefit from a limitation like that. To tie development to something immutable, such as a physical thing or a hard deadline, might just foster a sense of responsibility to design our product so it has what it takes to last a few years.

From the Blog

URLs Beyond the Web

As the newest operating systems for Android and iOS enable deep-linking directly into third-party apps, Anthony Colangelo sees an expanding definition of “the web” and an opportunity to better serve our users.

It’s Time We #FEDtalk

One person focuses on HTML, CSS, and JavaScript. Another writes JavaScript tests all day. And they both have the same job title: front-end developer. Mat Marquis talks about why that’s okay, and introduces our latest event, "The State of Front-End Dev."