Refactoring UI talk -- tools mentioned

Steve Schoger "Refactoring UI" at CSS day 2019 -- see Youtube: Steve Schoger "Refactoring UI"

Excellent talk, helps show the thinking process a professional designer uses when improving a site.

I learned a lot from it and hope you will too.

Here are all the links or tools mentioned. Watch the talk though!

Online image editing - Figma
Colorize a background based on a pair of colors - Duotone by Shapefactory
Free photos for everyone - unsplash.com
Landing page gallery -
Galleries of websites for inspiration - site inspire and land-book.com
Also dribbble
- use dribbble's colour search to find sites using colours you like, and its palette for a picture
Colour palettes from Tailwind - Tailwind css palette
Check text contrast is consistent with Web Content Accessibility Guidelines
- contraste app — MacOS only... otherwise use:
- webaim contrast checker
SVG background patterns - hero patterns also, it advertises Heroicons (see also https://github.com/sschoger/heroicons-ui) for icons
Fonts - typography.com, commercialtype.com, klim.co.nz, hanken.co
Bootstrap themes - themes.bootstrap , bootstrap.build

One particular tip that is a real standout:

Tabular numbers — make numbers lay out in a table without using a monospaced font

font-feature-settings: "tnum";

Thanks to Richard Mason of Aussie Bushwalking for forwarding me this talk and his own notes on which those above are based.

See also