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... otheriwse 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 - themese.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
Thanks to Richard Mason of Aussie Bushwalking for forwarding me this talk and his own notes on which those above are based.