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

Rachel Andrew on the Business of Web Dev

Software Audits for the Tiny Business

Routine software audits sound like just about the most boring thing in the world. But losing access to a DNS server, missing important alerts from a developer, or paying for a forgotten service are adventures nobody needs. Often, a contractor or an employee sets up an account or buys software for company use. When that person moves to another role, important license or login information can get lost in the shuffle. Rachel Andrew wants you to love the drab old software audit. It’s your best ally for preventing nasty surprises.

From the Blog

On Our Radar: Precious Humans

There are plenty of links and a minimum of one (1) gif awaiting you, as always, in this week's On Our Radar. But first, we want to talk about someone who has inspired all of us: Molly Holzschlag, an influential web standards champion and dear friend.

Learning New Tricks

Going back to basics is never easy. Anthony Colangelo reminds us that sometimes the knowledge we've gained and best practices we've learned can work against us. If you're taking on something new, be ready to learn some new tricks.