Incredibly Useful Online Tools

Entry categories Design
Extra Articles and Visitors to the Exhibition (185) by Richard Doyle. Original from The MET Museum. Digitally enhanced by rawpixel.

There are so many incredibly useful online tools on the web these days, just lying around for free. And with CSS Tricks recently posting an article about lots of the neat helper sites, I thought I’d share a few of my favorite online resource as well, that help me (and others) design at warp speed. I won’t be covering common ones like Dropbox or tools from the big three. The tools in each list are ordered by frequency of my personal usage.

Design tools

There are lots of tedious task or design needs that require expertise. It can be fun to tinker, but usually it’s best to just one-click-and-nail-it.

  • Mockaroo – Generate CSVs, JSON files, Excel docs of randomized data from a huge selection of dummy data. Great for dummy data in design systems.
  • Type-Scale – Generate visual content hierarchy with content rules
  • Ceasar – How I generate complex CSS easing code. Modified Quint FTW.
  • Colorzilla – Even now, I can never remember the exact code for CSS gradients. I’m sure there are better resources, but I use this one most.
  • Brumm – Making beautiful, smooth shadows in CSS. Don’t add too many steps, or you’ll have a performance nightmare on your hands.
  • Adobe Color – Make color palettes quickly using design rules
  • Colorbox – Design your color steps for design tokens
  • Bennett Feely – Make your own custom CSS clip paths for imagery on the web
  • Netfront – Converting RGB or HEX to Pantone

Media

It’s usually just easier to take existing work and modify it for your needs. Grab it and go (and attribute, even if not asked to).

Automation and Compression

Take processes that are tedious, painful, or require expert knowledge and essentially wrap them up in a super simple way.

Validators

It’s easy to miss something. Double-check your work with validators!

  • Tanaguru – Check your color contrasts and get alternatives to use
  • RegExr – Write and verify your Regex patterns. Great for HTML5 pattern attribute
  • ANDI – The US Government’s accessibility checking bookmarklet
  • Hemingway – Check your content’s readability
  • Quuz – Verify your web captions (VTT) file
  • Web Page Test – Review how heavy a page on a site is. Glad to say mine’s getting pretty low!

Reference

And finally, there are times I need to review or refer to some bit of content to make sure I’m covered or using something correctly.

  • Can I Use – I like using cool new CSS stuff. Helps me know if it’s supported.
  • Unicode – It’s useful knowing which emojis exist, and what their official names are for accessibility
  • Privacy Policies – I don’t want to or know how to write this. Enough said.
  • Avodocs – Free legal docs for startups. Haven’t needed this in a long while, glad to know it’s still around.

Conclusion

Hope this help you accelerate your workflow! What incredibly useful online tools do you find helpful? I’d love to hear about it.

Post a comment
Opinions and views expressed here don't necessarily reflect those of my employer.
Published Posted on