Call me old-school, but I’m historically a fan of designing with straight-up HTML and CSS with as few frameworks and frills as possible. And, while that’s still typically the way I work, I’ve introduced a small number of resources to my toolbox so I can iterate faster and design better responsive websites and user interfaces.
Here are seven tools I can’t design without right now.
Tachyons CSS: CSS for designing
For me, Tachyons has become an indispensable resource for quickly designing or prototyping responsive, performant, consistent pages. I’ve been using Tachyons for wireframing, and even for production-ready designs.
Tachyons is what’s called functional CSS—bits of single-purpose CSS classes, rather than the traditional method of styles defined for unique sections of a web page. It’s a little unconventional to stay out of CSS files entirely and add a bunch of classes to HTML markup—I know—but after years of spending hours pulling my hair out over browser-specific CSS quirks and bloated stylesheets, it’s a godsend to focus specifically on building responsive designs in HTML.
Sometimes it’s nice to have some pre-made components ready, too, when speed is necessary — and it’s truly great to use bits and pieces of code that don’t require maintaining a separate CSS file.
Functional CSS is still a bit of a polarizing topic in the design world, but I’m convinced it’s the future of how we’ll design performant, accessible, and lightweight user interfaces.
Tachyons is also a good entry point for non-technical designers to learn the basics of front-end coding. It’s easier to add bits of classes to one element to describe the appearance of that element, we’ve found.
Tachyons TLDR: Look-ups and tools for Tachyons
For Tachyons fans, Tachyons TLDR is an exceptional resource for searching for a property or class name if you can’t remember the Tachyons equivalent for what you want to do. While the official Tachyons documentation is robust, Tachyons TLDR is an interactive tool that goes a step further than a simple Cmd+F on a list of classes.
One of my favorite features of Tachyons TLDR is the skin generator, which spits out some Tachyons-esque CSS for custom colors beyond what’s included in the vanilla Tachyons skins list.
VHS: Post-future CSS animations
Sometimes, you need a little flair, and a CSS animation is an easy way to add it. While it’s not terribly difficult to add some CSS to achieve an animation, I find myself using VHS—a tiny collection of handy CSS animations and utilities—to add some animated styles that are as simple as adding a class name, Tachyons-style. VHS plays nicely with Tachyons and weighs in at just a few KB (or less gzipped and minified).
Colorable: Contrast checker and accessible color palette generator
I use Colorable when I’m not totally sure if two colors contrast well for accessibility. You can enter two hex codes and instantly get a clear picture of their WCAG color contrast score.
Colorable is also useful in a pinch if you want a quick, unique, accessible color combination if you hit the “Random” button—though I often find myself reaching for community-curated Random A11y first for this purpose.
Simpleicons: SVG icons and colors for popular brands
There are tons of designers who, when faced with adding a quick social media logo to a page, head to Google Images and search for “Instagram” or “Twitter”, then copy the first listing that looks right.
Often, the result is an outdated logo, inconsistently sized logos, or worse—an unofficial logo stolen from another website (monstrosities like this). Not to mention, most copy-and-pasted graphics are not vector graphics, which means worse appearance on high-resolution screens, as well as additional load time and page weight.
Instead of copying and pasting Google Images results, I use Simpleicons — a gargantuan, up-to-date list of popular brand logos in a consistent SVG format along with the brand’s official hex color. The result is better icon appearance, lighter page weight, and avoiding the “just copied from Google Images” guilt.
Microicon: SVG icon placeholders
Sometimes, you just need a quick icon, you know?
I use Microicon, an SVG icon placeholder microservice, to grab and host one of over 1,300 icons, including from the Material Design library.
Similar to an image placeholder service like Placeholder.com (formerly placehold.it), Microicon gives designers the ability to use a predictable URL to assign the icon, its size, color, and direction. It’s dead-simple to use a Microicon icon — just use the hosted image URL in an <img> tag.
Lorem Picsum: Beautiful placeholder imagery
While it’s rare I’ll use placeholder (“lorem ipsum”) text while designing, I’ll often find myself searching for an easily-manipulable photo to use.
That’s where Lorem Picsum comes in. Like Placeholder.com and Microicon, Lorem Picsum gives you a URL for a photo for use in your HTML markup.
The beauty of Lorem Picsum is that it uses photos from the Unsplash library—meaning placeholder blocks can look much nicer than plain-colored boxes. Plus, you can use modifiers like /g/ to turn the photo grayscale, ?blur to slightly blur the photo, or ?random to load a random photo from Unsplash.
==
Got any design tools you feel are valuable for the future of design? Give us a shout!