Tools and ResourcesTools
A collection of useful design tools spanning color, fonts, icons, imagery, video, and more.
Michael Croft
July 4, 2022 · 3 min read
Color
Color Palettes
ColorPicker.io — A wide range of curated color palettes for digital designers, illustrators, and product designers. You can click to copy individual hexcodes, or download a file with the full list of hexcodes for a given palette.
ColorDot — A tool that allows you to generate a color palette by moving your mouse around until you find colors you like. Great for eyeballing colors and generating new palettes on-the-fly.
Material Design Color Palettes — The original set of Google Material Design palettes from 2014. The blue gray and gray sets are great for user interface colors.
Gradients
- UI Gradients — A great alternative if you’re looking for curated gradients, instead of solid colors.
Data Visualization
VisualizingData.io — A curated range of colorblind-friendly palettes for quantitative data visualization. A map with sample data gives you a good indication of usage on a real dataset, coupled with scales to demonstrate edge cases.
Scale — A great alternative if you’re more interested in creating your own data visualization palettes by choosing your own hues, tints, and shades.
Colorblind Testing
- Sim Daltonism — A great app to simulate red-green, blue-yellow, and monochromatic color blindness to check the accessibility of websites and user interfaces.
Fonts
- Google Fonts — A broad range of free fonts, most of which are licensed under the Open Font License or Apache License version 2.0. This means you can use them for both personal and commercial projects, without having to pay for individual licenses.
Icons
Free Icons
Material Icons — A huge free icon set, available in outlined, rounded, and sharp variations. They’re available for free under the Creative Commons 4.0 license.
Ionic Icons — Another great free icon set with outlined, filled, and sharp variations. Although this set is smaller than Material, they’re less widely-used, so provide a more unique look. They’re available for free under the MIT License.
Paid (or Attribution-Required) Icons
- Noun Project — An enormous icon set, which can be useful for icon symbolism inspiration. They have a large icon set available for free with attribution — although for use without attribution, you need to either pay per icon or subscribe.
Imagery & Video
Photography
- Unsplash — A massive library of beautiful, high-resolution free imagery that can be used for both commercial and non-commercial purposes without attribution (although it is appreciated).
Pexels — Another large image library available for free use without attribution. It also includes a small selection of videos.
Pixabay — Similar to Pexels, but also includes vectors, illustrations, music, and sound effects.
Vector Backgrounds
Trianglify — A tool for generating low-poly triangle patterns that are great for backgrounds to help spice things up. It allows you to choose dimensions, color patterns, pattern intensity, triangle variance, and cell size.
Subtle Patterns — A great selection of subtle textures and repeating patterns for use as backgrounds in your products, as a nice alternative to plain color fills or gradients.
Optimizing Video
- FFMPEG — An open-source command-line tool for processing and optimizing video, audio, and other multimedia files. If you use any video, this is a great way to help minimize file-size while maintaining quality. It can also be used to produce high-quality GIFs or animated PNGs.
Misc
- Smooth Shadow — A nice GUI tool to generate the CSS for smooth, layered shadows. It allows you to tweak layers, transparency, distance, blur, and spread to generate beautiful, realistic shadows.
