Color Palette Cinema
Some colour palette inspiration from films.
Tags: colour
48
Useful accessibility resources
A whoooole bunch of links about inclusive design, gathered together from a presentation.
Accessible By Design | Sparkbox | Web Design and Development
A primer on accessible colour contrast with links to some handy tools for testing.
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!
Little UI details from @steveschoger, in HTML and CSS
Suggestions for small interface tweaks.
The HSB Color System: A Practicioner’s Primer – Learn UI Design
A nice clear explanation of specifying colour using HSB (not to be confused with HSL).
unDraw
Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.
Accessible Links Re:visited | Filament Group, Inc., Boston, MA
Great advice on keeping your hyperlinks accessible.
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.