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

Ask Dr. Web with Jeffrey Zeldman

If Ever I Should Leave You: Job Hunting For Web Designers and Developers

At the start of your career, you’re excited to have any job—but at some point you wonder if there’s a better job out there for you. Is it youthful restlessness, or are you learning to recognize the warning signs of career stagnation? There’s no sure-fire way to tell—but if you’ve stopped growing or feeling any passion for the work, it’s probably time to let go. So how do you find a better job without making it worse with your current colleagues and in your bank account? Jeffrey Zeldman has some tried-and-true tips to make your transitions smoother.

From the Blog

Developing Empathy

Everyone talks a lot about empathy, but distilling that theory-driven talk into practices for our day-to-day work can seem daunting. Susan Robertson shows how she's been able to practice empathy for users as a developer.

On Our Radar: Four-and-a-Horse Stars

This week's recommended reading list has bad news for icon fonts: we learn from Seren Davies' presentation that they present accessibility issues for people with dyslexia. Plus: our favorite tech TinyLetter, the NYSE computer glitch, an animal gif, and more.