Tags: colour

40

sparkline

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

Essential Image Optimization

Following on from Amber’s introduction, here’s a really in-depth look at image formats, compression and optimisation techniques from Addy.

This is a really nicely put together little web book released under a Creative Commons licence.

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!

Stark

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

Color fonts! WTF? 🌈

I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.

It’s Nice That | A new national identity: Smörgåsbord Studio rebrands Wales

Smörgåsbord Studio created a design system for the Welsh government, including the typeface Cymru Wales Sans from Colophon.

The accompanying video lists the design principles:

  • Elevate our status
  • Surprise & inspire
  • Change perceptions
  • Do good things
  • Be unmistakably Wales

How the Web Became Unreadable

Kevin writes a plea on Ev’s blog for better contrast in web typography:

When you build a site and ignore what happens afterwards — when the values entered in code are translated into brightness and contrast depending on the settings of a physical screen — you’re avoiding the experience that you create. And when you design in perfect settings, with big, contrast-rich monitors, you blind yourself to users. To arbitrarily throw away contrast based on a fashion that “looks good on my perfect screen in my perfectly lit office” is abdicating designers’ responsibilities to the very people for whom they are designing.

Chromelens

A handy Chrome extension to simulate different kinds of visual impairment.

Color Safe - accessible web color combinations

A nice tool for choosing colour palettes that look good and are also accessible.

LOL Colors - Curated color palette inspiration

Here, have some colour palettes.

What colour is it?

This is quite beautiful in its simplicity: the hexadecimal colour value of the current time.

Swatch you doing?

A cute and fun way to put together a colour palette.

Flickr: ugordan’s Photostream

Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.

We are Colorblind

A really nice site dedicated entirely to making the web a better place for the colourblind.

Style Tiles

Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.

Lexadecimal

Hexadecimal colours and their corresponding dictionary definitions. Cute.

Dribbble - My Secret for Color Schemes by Erica Schoonmaker

A very useful tip for creating cohesive colour palettes.

0to255

A cute little tool to help refine colour palettes.

Evening edition - Bobulate

A lovely idea, nicely implemented: time-conditional CSS.

Pictaculous - A Color Palette Generator (courtesy of MailChimp)

A handy tool for generating colour palettes from images.