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

Columnists

Rian van der Merwe on A View from a Different Valley

The Distance to Here

The people who determine product strategy move through a world of analysts, media, division leads, shareholders, stakeholders, monetization, and marketability. They seldom get a chance to come back to the corner where users and designers mingle. Rian van der Merwe suspects that increasing the communication distance between the decision makers and the product’s builders and users leads to a loss of perspective—and the results are products with marketable features that no one really needs.

From the Blog

On Our Radar: Faux-Naïve

On our radar these days: Google rebrands. A web animation expert refuses to speak at your conference if it doesn’t have a code of conduct. Preload hints can help you load your web fonts faster. A new site launches that hopes to bridge the gender gap in communication design. Your weekend reading awaits!

On Our Radar: Pretty Advanced Machine Learning

Between bots and blogging, newsrooms are getting into Slack in some very cool ways (take some inspiration and apply for a Knight-Mozilla Fellowship!). Plus more recommended reading: revisiting Cameron’s World; the joy of generalists; the finer points of faving; and one really excellent gif of cats.