Link tags: design

Design Engineer / Front-end Developer | Clearleft

Are you a web dev that’s into progressive enhancement, accessibility, design systems, and all that good stuff?

You should come and work with me at Clearleft.

HTML Emails: A Rant - Jim Nielsen’s Blog

The day we started to allow email clients to be full-blown web browsers (but without the protections of browsers) was the day we lost — time, security, privacy, and effectiveness. Now we spend all our time fighting with the materials of an email (i.e. color and layout) rather than refining its substance (i.e. story and language).

How Florence Nightingale Changed Data Visualization Forever - Scientific American

The design process in action in Victorian England:

Recognizing that few people actually read statistical tables, Nightingale and her team designed graphics to attract attention and engage readers in ways that other media could not. Their diagram designs evolved over two batches of publications, giving them opportunities to react to the efforts of other parties also jockeying for influence. These competitors buried stuffy graphic analysis inside thick books. In contrast, Nightingale packaged her charts in attractive slim folios, integrating diagrams with witty prose. Her charts were accessible and punchy. Instead of building complex arguments that required heavy work from the audience, she focused her narrative lens on specific claims. It was more than data visualization—it was data storytelling.

Open Lecture at CIID: “Keeping up with the Kardashevians” – Petafloptimism

A terrfic presentation from Matt Jones (with the best talk title ever). Pace layers, seamful design, solarpunk, and more.

An Archeology for the Future in Space

I really enjoyed this deep dive into some design fiction work done by Fabien Girardin, Simone Rebaudengo, and Fred Scharmen.

(Remember when Simone spoke at dConstruct about toasters? That was great!)

When animation is an accessibility problem - The Verge

This is why prefers-reduced-motion matters.

WWC22 - Design Principles For The Web - YouTube

Here’s the video of the talk I gave in front of an enormous audience at the We Are Developers conference …using a backup slidedeck.

Fun Parallax Scrolling CSS for Matterday

This is such a great clear explanation from Lynn on how to add some tasteful parallax depth to scrolling pages.

Utopian project kickstarter — Figma

Do you like the ideas behind Utopia? Do you use Figma?

If the answer to both those questions is “yes”, then James has made a very handy Figma community file for you:

This work-in-progress is intended as a starting point for designers to start exploring the Utopia approach, thinking about type and space in fluid scales rather than device-based breakpoints.

The Demo → Demo Loop - daverupert.com

I’m 100% convinced that working demo-to-demo is the secret formula to making successful creative products.

Bjørn Karmann › Occlusion Grotesque

A typeface co-designed with a tree over the course of five years.

Yes, a tree.

Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually.

The cost of convenience — surma.dev

I believe that we haven’t figured out when and how to give a developer access to an abstraction or how to evaluate when an abstraction is worth using. Abstractions are usually designed for a set of specific use-cases. The problems, however, start when a developer wants to do something that the abstraction did not anticipate.

Smart thoughts from Surma on the design of libraries, frameworks, and other abstractions:

Abstractions that take work off of developers are valuable! Of course, they are. The problems only occur when a developer feels chained to the abstractions in a situation where they’d rather do something differently. The important part is to not force patterns onto them.

This really resonated with parts of my recent talk at CSS Day when I was talking about Sass and jQuery:

If you care about DX and the adoption of your abstraction, it is much more beneficial to let developers use as much of their existing skills as possible and introduce new concepts one at a time.

Patterns | APG | WAI | W3C

This is a terrific resource! A pattern library of interactive components: tabs, switches, dialogs, carousels …all the usual suspects.

Each component has an example implementation along with advice and a checklist for ensuring its accessible.

It’s so great to have these all gathered together in one place!

Reflections on Design Systems and Boundaries - Jim Nielsen’s Blog

Jim shares his thoughts on my recent post about declarative design systems. He picks up on the way I described a declarative design systems as “a predefined set of boundary conditions that can be used to generate components”:

I like this definition of a design system: a set of boundaries. It’s about saying “don’t go there” rather than “you can only go here”. This embraces the idea of constraints as the mother of invention: it opens the door to creativity while keeping things bounded.

Paper Prototype CSS

A stylesheet to imitate paper—perfect for low-fidelity prototypes that you want to test.

The Art of Penguin Science Fiction

A century of sci-fi book covers.

The Case for Design Engineers - Jim Nielsen’s Blog

This is really interesting. I hadn’t thought too much about the connection between design engineering and declarative design before now, but Jim’s post makes the overlap very clear indeed.

Cardigan Sci-fi • Robin Rendle

Cardigans are not entirely necessary for a show or a film to fit within the Cardigan sci-fi subgenre (although they certainly help). It’s the lack of polish in the world, it’s the absence of technological fetishism in the science fiction itself. The science or the tools or the spaceships do not sit at the heart of Cardigan sci-fi — it’s all about the people that wear the cardigans instead.

What serif typeface would go well with Proxima Nova?

Mark Simonson goes into the details of his lovely new typeface Proxima Sera.

Min-Max-Value Interpolation

Here’s a really nice little tool inspired by Utopia for generating one-off clamp() values for fluid type or spacing.