Tags: colour

Redesigning your product and website for dark mode — Stuff & Nonsense

Some advice from Andy on creating a dark theme for your website. It’s not just about the colours—there are typography implications too.

Picular

A search engine for colours.

ColorBox by Lyft Design

I don’t really understand what this colour tool is doing or what it’s for, but I like it.

Color Leap - History’s Palettes

Colour palettes throughout the ages that you can copy and use.

‘Never assume anything’: The golden rules for inclusive design

Inclusive design is also future-proofing technology for everyone. Swan noted that many more developers and designers are considering accessibility issues as they age and encounter poor eyesight or other impairments.

Don’t Use The Placeholder Attribute — Smashing Magazine

A lot of the issues here are with abuses of the placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).

Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.

Dark theme in a day – Marcin Wichary – Medium

On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.

I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.

Colour Wheels, Charts, and Tables Through History – The Public Domain Review

These are beautiful!

Featured below is a chronology of various attempts through the last four centuries to visually organise and make sense of colour.

Color Palette Cinema

Some colour palette inspiration from films.

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.