Tags: design

1049

sparkline

Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh

A quick visual guide to CSS Grid properties and values.

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

Nick Jones - Interface Prototyper / Designer

A really interesting and well-executed portfolio site, utterly let down by the tone of this demeaning and insulting piece of copy:

WARNING: Do not proceed if you suffer from vertigo or if you find experimental interfaces offensive.

(Pssst: copy is also interface.)

Programming Design Systems

This is a really intriguing book that combines design theory and programming—learn about contrast, colour, and shapes, with each lesson supported by code examples.

It’s still a work in progress but the whole thing is online for free. Yay for web books!

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

Introducing Fractal and Federalist | U.S. Web Design Standards

Another instance of Fractal in the wild, this time for the Federalist design system.

Why Fractal?

  • It’s open source.
  • It’s easy to use.
  • It generates standalone HTML previews of each component.
  • It uses or supports many of the technologies we use already.
  • Fractal offers a customizable theme engine.

Painting with Code : Airbnb Design

Very clever stuff here from Jon in the tradition of Bret Victor—alter Sketch files by directly manipulating code (React, in this case).

I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.

Stark

A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.

The work I like. — Ethan Marcotte

Ethan’s been thinking about the trends he’s noticed in the work he’s doing:

  • prototypes over mockups,
  • preserving patterns at scale, and
  • thinking about a design’s layers.

On that last point…

The web’s evolution has never been charted along a straight line: it’s simultaneously getting slower and faster, with devices new and old coming online every day.

That’s why I’ve realized just how much I like designing in layers. I love looking at the design of a page, a pattern, whatever, and thinking about how it’ll change if, say, fonts aren’t available, or JavaScript doesn’t work, or if someone doesn’t see the design as you and I might, and is having the page read aloud to them.

IF Data Permissions Catalogue

A collection of interface patterns for granting or denying permissions.

A Todo List

A great step-by-step walkthrough by Heydon of making an accessible to-do list, the “Hello World” of JavaScript frameworks.

There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.

Reflections on Resilient Web Design - Scott Dawson

I’m genuinely touched that my little web book could inspire someone like this. I absolutely love reading about what people thought of the book, especially when they post on their own site like this.

This book has inspired me to approach web site building in a new way. By focusing on the core functionality and expanding it based on available features, I’ll ensure the most accessible site I can. Resilient web sites can give a core experience that’s meaningful, but progressively enhance that experience based on technical capabilities.

The full stack design system - Inside Intercom

A look at the history of design systems and how they differ from pattern libraries. Or, to put it another way, a pattern library is one part of a design system.

Recommended Reading: Resilient Web Design, a Free e-Book from Jeremy Keith – WordPress Tavern

A jolly nice review of Resilient Web Design.

After just a few pages in, I could see why so many have read Resilient Web Design all in one go. It lives up to all the excellent reviews.

Container Query Discussion | CSS-Tricks

Chris rounds up the discussion that’s been happening around container queries, for and against.

Personally, I’d like to see about 100 different use cases fleshed out. If it turns out some of them can be done sans container queries, awesome, but it still seems highly likely to me that having container queries available to us would be mighty handy.

A bit more on container queries. — Ethan Marcotte

Ethan wrote about container queries on his website. Paul wrote his counter-argument on his website. Now Ethan responds. It’s fun to watch two gentlemen engage in civilised discourse.

Blogs, man. They’re gonna big, I tells ya.

The Most Exciting Design Systems Are Boring | Big Medium

Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.

The job is not to invent, but to curate.

Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.

When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.

Questioning Container Queries / Paul Robert Lloyd

Paul’s being contrary again.

Seriously though, this is a good well-reasoned post about why container queries might not be the the all-healing solution for our responsive design problems. Thing is, I don’t think container queries are trying to be an all-encompassing solution, but rather a very useful solution for one particular class of problem.

So I don’t really see container queries competing with, say, grid layout (any more than grid layout is competing with flexbox), but rather one more tool that would be really useful to have in our arsenal.

Plainness and Sweetness – Frank Chimero

I adore the thoughtfulness and lack of ego that Frank presents here. I hope that every designer reads this and thinks upon it.

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.