Tags: visual



Proposal to CSSWG, Sept 2016 // Speaker Deck

Jen has some ideas for a new CSS Region spec to turbo-boost Grid. I’m still trying to wrap my head around it, but in the meantime, if you have feedback on this, please let her know.

The Future of Browser History — Free Code Camp

I’ve been thinking about this a lot lately. It feels like a user’s browser history is an incredibly rich seam of valuable information just waiting to be presented in a more interesting way.


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

The Joy of Sparks

This is so cool! The logs of the Indie Web Camp IRC channel visualised as a series of sparklines in the style of Joy Division/Jocelyn Bell Burnell.

Jon Aizlewood | Visual inventories for agile design

Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.

See also: Andy P.’s experience of working with Jon this way.

LOL Colors - Curated color palette inspiration

Here, have some colour palettes.

Design without touching the surface – Leapfroglog

My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).

Learn Sketch 3 - Design+Code

A very handy introduction to Sketch from an iOS-specific book. See also the subsequent chapter, Mastering Sketch 3.

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

NTH-TEST | nth-child and nth-of-type Tester

A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.

Visual Essentials for Product Design — Cennydd Bowles

This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

Design Principles

These are principles of visual design—hierarchy, rhythm, etc.—nicely explored and explained.

28 Months on Mars - NYTimes.com

Curiosity’s journey so far, nicely visualised.

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

Learn CSS Selectors interactively

This visual approach to demonstrating how CSS selectors work is really handy.