Link tags: design

GrilloPress - Don’t let your design system seem complete

The level of authority and professionalism in a design system helps sell it so teams use it. But increases the perception things are fixed. Done. And not open to change.

Swipey image grids.

This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.

National Security Agency (NSA) security/motivational posters from the 1950s and 1960s [PDF]

This responds to your Freedom of Information Act (FOIA) request, which was received by this office on 5 February 2016 for “A digital/electronic copy of the NSA old security posters from the 1950s and 1960s.”

The graphic design is …um, mixed.

Guarding Against Disposable Design — Smashing Magazine

Always refreshing to see some long-term thinking applied to the web.

Meet Utopia: Designing And Building With Fluid Type And Space Scales — Smashing Magazine

An excellent explainer from Trys and James of their supersmart Utopia approach:

Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.

Design as (un)ethical illusion

Many, if not all, of our world’s most wicked problems are rooted in the excessive hiding of complexity behind illusions of simplicity—the relentless shielding of messy details in favor of easy-to-use interfaces.

Seams.

But there’s always a tradeoff between complexity, truth, and control. The more details are hidden, the harder it is to understand how the system actually works. (And the harder it is to control). The map becomes less and less representative of the territory. We often trade completeness and control for simplicity. We’d rather have a map that’s easy to navigate than a map that shows us every single detail about the territory. We’d rather have a simple user interface than an infinitely flexible one that exposes a bunch of switches and settings. We don’t want to have to think too hard. We just want to get where we’re going.

Seamful and seamless design are reframed here as ethical and deceptive design:

Ethical design is like a glove. It obscures the underlying structure (i.e. your hand) but preserves some truth about its shape and how it works. Deceptive design is like a mitten. It obscures the underlying structure and also hides a lot about its shape and how it works.

Content Design Basics by Giles Turnbull - YouTube

This is a great series of short videos all about content design. The one on writing for humans is particularly good.

Middle Management — Real Life

The introduction to this critique of Keller Easterling’s Medium Design is all about seams:

Imagine the tech utopia of mainstream science fiction. The bustle of self-driving cars, helpful robot assistants, and holograms throughout the sparkling city square immediately marks this world apart from ours, but something else is different, something that can only be described in terms of ambiance. Everything is frictionless here: The streets are filled with commuters, as is the sky, but the vehicles attune their choreography to one another so precisely that there is never any traffic, only an endless smooth procession through space. The people radiate a sense of purpose; they are all on their way somewhere, or else, they have already arrived. There’s an overwhelming amount of activity on display at every corner, but it does not feel chaotic, because there is no visible strife or deprivation. We might appreciate its otherworldly beauty, but we need not question the underlying mechanics of this utopia — everything works because it was designed to work, and in this world, design governs the space we inhabit as surely and exactly as the laws of physics.

prefers-reduced-motion: Taking a no-motion-first approach to animations

Given the widespread browser support for prefers-reduced-motion now, this approach makes a lot of sense.

Fluid Space Calculator | Utopia

Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!

Building Dark Mode | Product Blog • Sentry

Robin makes a good point here about using dark mode thinking as a way to uncover any assumptions you might have unwittingly baked into your design:

Given its recent popularity, you might believe dark mode is a fad. But from a design perspective, dark mode is exceptionally useful. That’s because a big part of design is about building relationships between colors. And so implementing dark mode essentially forced everyone on the team to think long, hard, and consistently about our front-end design components. In short, dark mode helped our design system not only look good, but make sense.

So even if you don’t actually implement dark mode, acting as though it’s there will give you a solid base to build in.

I did something similar with the back end of Huffduffer and The Session—from day one, I built them as though the interface would be available in multiple languages. I never implemented multi-language support, but just the awareness of it saved me from baking in any shortcuts or assumptions, and enforced a good model/view/controller separation.

For most front-end codebases, the design of your color system shows you where your radioactive styles are. It shows you how things are tied together, and what depends on what.

System fonts don’t have to be ugly /// Iain Bean

You don’t have to use web fonts—there are some pretty nice options if you stick to system fonts (like Georgia, Charter, and Palatino).

Proxima Vara by Mark Simonson

Oh, nice! A version of the classic Proxima Nova that’s a variable font that allows you to vary weight, width, and slant.

CSS transitions and hover animations, an interactive guide

This is a really nice introduction to CSS transitions with interactive demos you can tinker with.

239: New CSS Tricks and Design Engineers | CSS-Tricks

We need engineers, we need designers, and we absolutely need design engineers to make that connection across the great divide between the front-of-the-front-end and the back-of-the-front-end. It’s only then that we can make truly great things together.

Design Engineering - Snook.ca

Here’s a seven-year old post by Snook—this design engineer thing is not new.

Creative Good: Why I’m losing faith in UX

Increasingly, I think UX doesn’t live up to its original meaning of “user experience.” Instead, much of the discpline today, as it’s practiced in Big Tech firms, is better described by a new name.

UX is now “user exploitation.”

Continuous Typography / MK

Sounds like some convergent thinking with the ideas behind Utopia.

I think that the idea that that any typographic attribute (including variable font parameters) can be a function (linear, exponential, stepped, Bezier, random, or otherwise) of any given input variable (user preference, screen dimensions, connection speed, time of day, display language, or whatever else) is an incredibly powerful one, and worth exploring as an aesthetic as well as a technical proposition.

Here’s a demo you can play with.

archives.design

All of these graphic design books, magazines, and type specimens are available for perusal on the Internet Archive.

Responsible Web Applications

An excellent collection of advice and examples for making websites responsive and accessibile (responsive + accessible = responsible).