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 · 36 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 · 17 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

Laura Kalbag on Freelance Design

How Big is Big Enough to Pick On?

Businesses aren't all faceless juggernauts. Some are just one or two people. Yet when we interact with them through reviews or social media, we fall into the notion that there's no real individual in the other side whose feelings can be hurt. Laura Kalbag asks us to be sure to criticize the work and not the person.

From the Blog

Thoughtful Modularity

What can we learn from the Mars rover about building the web? Anthony Colangelo describes NASA's new modular approach to mission planning, and suggests a similar strategy for our work on the web. The details of our work may change, but building with thoughtful modularity can help us reap the benefits of the future.

Pinpointing Expectations

In my work as a front-end developer, I’ve come to realize that expectations, and how you handle them, are one of the most integral parts of a project. Expectations are tricky things, especially because we don’t talk about them very much.