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 Robertson34 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 Lanier16 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

I Don’t Like It

The most dreaded of all design feedback is the peremptory, “I don’t like it.” Rather than slinking back to the drawing board, it’s important to get clarity on what the client is reacting to. Guiding this conversation can turn a show-stopper into a mutual win.

From the Blog

Longform Content with Craft Matrix

Jason Santa Maria recently shared some thoughts about pacing content, and my developer brain couldn’t help but think about how I’d go about building the examples he talked about. The one fool-proof way to achieve heavily art-directed layouts like those is to write the HTML by hand. The problem is that content managers are not always developers, and the code can get complex pretty quickly. That’s why we use content management systems—to give content managers easier and more powerful control over content.

Ten Years Ago in ALA: Dynamic Text Replacement

Ten years ago this month in Issue 183, A List Apart published Stewart Rosenberger’s “Dynamic Text Replacement.” Stewart lamented text styling as a “dull headache of web design” with “only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML.” To help ease these pains, Stewart presented a technique for styling typography by dynamically replacing text with an image.