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 · 35 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

Ask Dr. Web with Jeffrey Zeldman

Help! My Portfolio Sucks

What if a lot of your past work reflects times when you satisfied the client, but couldn’t sell them on your best ideas? How do you build a portfolio out of choices you wouldn’t have made? Our very own Jeffrey Zeldman answers your toughest career questions.

From the Blog

The Couch Cone of Silence

About five years ago, I bought a cushy couch for my office. (Okay, yes, I did get the model that could flatten into an emergency nap station, but let’s just say that I plan for contingencies—it sounds more professional that way.) Our projects required a lot of office-to-office visiting to discuss situations in person, and eventually, said couch (and therefore, my office) became a veritable beacon, attracting anyone looking for an excuse to decompress. Such is the life of a one-couch, 50-chair business.

Learning to Be Flexible

As a freelancer, I work in a lot of different code repos. Almost every team I work with has different ideas of how code should be organized, maintained, and structured. Now, I’m not here to start a battle about tabs versus spaces or alphabetical order of CSS properties versus organizing in terms of concerns (positioning styles, then element layout styles, then whatever else), because I’m honestly not attached to any one system anymore.