Tags: design



Hudl Uniform

This design system takes an interesting approach, splitting the documentation between designing and coding.

Vox Product Accessibility Guidelines

Accessibility isn’t a checklist …but this checklist is a pretty damn good starting point. I really like that it’s organised by audience: designers, engineers, project managers, QA, and editorial. You can use this list as a starting point for creating your own—tick whichever items you want to include, and a handy copy/paste-able version will be generated for you.

The first visual identity for UK Parliament

Some lovely branding work for the UK Parliament, presented very nicely.


A handy browser-based tool for examining font files to see which features they support.

90 Minutes | Type Supply

Tal Leming’s thoroughly delightful (and obsessive) account of designing the 90 Minutes typeface for U.S. Soccer.

FIFA has strict regulations that govern the size and stroke weight of numbers and letters used on official match uniforms. This made me unbelievably paranoid. I had a nightmare that one of the national teams would be set for kickoff of an important match and the referee would suddenly blow the whistle and say, “Hey, hey, hey! The bottom stroke of that 2 is 1 mm too light. The United States must forfeit this match!”

The Design Genome Project | InVision

A beautiful looking site from InVision collecting case studies of design-led companies (although this site is weirdly over-engineered and entirely dependent on JavaScript for rendering some text on a screen—prepare yourself for janky scrolling).

Documenting Components – EightShapes – Medium

Part one of a deep dive by Nathan into structuring design system documentation, published on Ev’s blog.

Useful accessibility resources

A whoooole bunch of links about inclusive design, gathered together from a presentation.

Boxy SVG

This is impressive—a fully featured graphics app for creating SVGS right in your browser.

Parallax scrolling with CSS variables | basicScroll

Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)

Australian Government Open Language for Design

The design system for the Australian government is a work in progress but it looks very impressive. The components are nicely organised and documented.

(I’ve contributed a suggestion for the documentation in line with what I wrote about recently.)

The People Part of Design Systems – Related Works – Medium

I like the idea of “design bugs”:

Every two weeks or so, a group of designers would get together for a couple of hours to fix what we called “design bugs.” These were things that didn’t hinder functionality and wouldn’t have been filed as an engineering bug, but were places where we were using an old component, an existing one incorrectly, or a one-off alteration.

Futurists & realists – The Man in Blue

Cameron contrasts Syd Mead with Frank Lloyd Wright.

Mastery of materials is a valuable thing to have. It will help you build what’s needed now and forge ahead into the near future. But vision is also valuable – it helps inspire and drive teams, and lays out a longer term future that can alter the path of humanity. What I take from the futurists and the realists is that there’s a place for every person and every process; what you need to do is find your own place, get comfortable, and own it.

CodePen - Instagram.exe

I’m not sure why but I genuinely love this Windows 95 style interface for Instagram coded up by Gabrielle Wee.

Accessible By Design | Sparkbox | Web Design and Development

A primer on accessible colour contrast with links to some handy tools for testing.

Questions To Ask Before Building a Component Library | Chromatic

  • What problems will a component library solve?
  • Is everyone on the project behind the component library?
  • How will the component library be used?
  • What tool(s) will be used to build the component library?
  • Where should the component library live?
  • How granular should the library be? How should it be organized?
  • How will component code be scoped? What about page layout?
  • What data will the library use? What else should it have?

Your Interactive Makes Me Sick - Features - Source: An OpenNews project

Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.

Guidelines to consider before adding swooshy parallax effects:

  1. Respect the Physics
  2. Remember that We Call Them “Readers”
  3. Ask for Consent

Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?

Be Kind, Design – Nat Dudley – Medium

The transcript of Nat’s superb Webstock talk.

We need to start thinking about inclusivity the same way as we think about mobile design. We realised with mobile, that we have to put that experience at the centre of what we do, otherwise it won’t be successful and we’ll fail mobile users. We realised we have to design mobile-first.

The same is true for inclusivity. Instead of it being an afterthought if it’s thought about at all, it needs to be our first thought. It needs to be central to our strategy, embedded in how we analyse and solve the problems we encounter. Designing inclusive-first is the only way we’ll manage to serve and protect all of the people who use what we build.

Fair Is Not the Default - Library - Google Design

Why building inclusive tech takes more than good intentions.

When we run focus groups, we joke that it’s only a matter of seconds before someone mentions Skynet or The Terminator in the context of artificial intelligence. As if we’ll go to sleep one day and wake up the next with robots marching to take over. Few things could be further from the truth. Instead, it’ll be human decisions that we made yesterday, or make today and tomorrow that will shape the future. So let’s make them together, with other people in mind.

V6: Color | Rob Weychert

Go deep, deep down the rabbit hole of Rob’s brain in all its colourful glory. Seriously, this is simultaneously a great write-up of how he came up with his site’s lovely colour scheme(s), and it’s a terrific primer on colour theory and why the HSL value in CSS is so, so wonderful!