Tags: guide

112

sparkline

Design Guidelines — The way products are built.

A collection of publicly available design systems, pattern libraries, and interface guidelines.

Distilling How We Think About Design Systems

Advice on building design systems:

  • If you can avoid being ambiguous, please do.
  • Favor common understanding over dictionary correctness.
  • Make great operations a priority.
  • Don’t get trapped in defining things instead of explaining things.

Voice Guidelines | Clearleft

I love what Ben is doing with this single-serving site (similar to my design principles collection)—it’s a collection of handy links and resources around voice UI:

Designing a voice interface? Here’s a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer @bensauer.

BONUS ITEM: Have him run a voice workshop for you!

Design Systems | susan jean robertson

Susan reviews Alla’s superb book on design systems:

If you’re interested in or wanting to create a design system or improve the one you have or get buy in to take your side project at work and make it part of the normal work flow, read this book. And even better, get your colleagues to do the same, so you’ll have a shared understanding before you begin the hard work to build your own system.

Susan also published her highlights from the book. I really like that!

18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government

Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.

When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.

There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.

The lessons learned make for good design principles:

  • Talk to the people
  • Look for duplication of efforts
  • Know your values
  • Empower your team
  • Start small and iterate
  • Don’t work in a vacuum
  • Reuse and specialize
  • Promote your system
  • Be flexible

Photon Design System

Most design systems I link to are for websites, so interesting to see this one for a web browser: Firefox.

There are guidelines for tone of voice and motion design as well as the usual guidelines for typography, colour, and interface elements.

Integrating Animation into a Design System · An A List Apart Article

Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!

10 guidelines to improve your web accessibility | Aerolab

  1. Do not depend on color
  2. Do not block zoom
  3. Rediscover the alt attribute
  4. Add subtitles and captions to your videos
  5. Semantics = accessibility
  6. Use the right mark-up
  7. Use roles when necessary
  8. On hiding elements
  9. Follow web accessibility standards
  10. Audit and review

I made a style guide for my personal web site and you should too.—zachleat.com

Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:

As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.

Patterns Day 2017: Paul Lloyd on Vimeo

Paul pulls no punches in this rousing talk from Patterns Day.

The transcript is on his site.

Another Lens - News Deeply x Airbnb.Design

A series of questions to ask on any design project:

  • What are my lenses?
  • Am I just confirming my assumptions, or am I challenging them?
  • What details here are unfair? Unverified? Unused?
  • Am I holding onto something that I need to let go of?
  • What’s here that I designed for me? What’s here that I designed for other people?
  • What would the world look like if my assumptions were wrong?
  • Who might disagree with what I’m designing?
  • Who might be impacted by what I’m designing?
  • What do I believe?
  • Who’s someone I’m nervous to talk to about this?
  • Is my audience open to change?
  • What am I challenging as I create this?
  • How can I reframe a mistake in a way that helps me learn?
  • How does my approach to this problem today compare to how I might have approached this one year ago?
  • If I could learn one thing to help me on this project, what would that one thing be?
  • Do I need to slow down?

Patterns Day 2017: Alice Bartlett on Vimeo

At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.

Patterns Day 2017: Jina Anne on Vimeo

Jina invented an entirely new genre for her Patterns Day talk—autobiographical fantasy.

Patterns Day 2017: Rachel Andrew on Vimeo

Rachel’s fantastic talk from Patterns Day. There’s a lot of love for Fractal specifically, but there are also some great points about keeping a pattern library in sync with a live site, and treating individual components as reduced test-cases.

Patterns Day 2017: Laura Elizabeth on Vimeo

The videos are coming! The videos are coming!

Here’s the first one: Laura Elizabeth opening the show at Patterns Day.

What’s the difference between style guides, pattern libraries, and design systems? – Joseph Fitzsimmons

Ah, the age-old question!

The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.

Fantasies of the Future / Paul Robert Lloyd

Paul has published the slides and transcript of his knock-out talk at Patterns Day. This a must-read: superb stuff!

Design systems are an attempt to add a layer of logic and reasoning over a series decisions made by complex, irrational, emotional human beings. As such, they are subject to individual perspectives, biases, and aspirations.

How does the culture in which they are made effect the resulting design?

Meet “Design Systems”, A New Smashing Book (Pre-Release) – Smashing Magazine

Alla’s book is going to be a must-have (I know because I’ve been reviewing it as she’s been writing it). Pre-order it now. It’s out in September.

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

Beautifully designed and typeset eBooks of royalty-free works—yours for the taking and reading.

There’s a styleguide if you want to get involved on the production side too.