Having a good set of resources within arm’s reach is helpful.
While there are a ton of really great paid design services and resources that can make life a lot easier, the focus of this list is on the best free resources that I’ve personally collected over time. Many of these I’ve been using for years for my own design work.
Whether you’re a web, app, UI, UX designer, or none of the above, there’s likely at least a few things here you could consider adding to your toolkit.
Special thanks to all the individuals and companies that made these resources available for designers like us to use free of charge!
Typography
FontJoy in action. Yes, sometimes it comes up with wild combinations…
FontJoy is a really nice font pairing web application tool that generates font combinations with deep learning. If you know what style you’re after (and have some patience), it can come up with some nice font pairs for you to consider.
Typespiration If you’re needing some inspiration for type, you can take a look at Typespiration for some designs and guides for font combinations.
FontBase A cross-platform font manager. A very useful tool for using Google/Adobe fonts in any application.
Type Scale is a visual calculator you can use to size your typography.
Typescale
Fontsinthewild.com Sometimes you just have to see a font used in order to get inspiration to use it in your design. That is the basic premise of fontsinthewild.com, where you browse screenshots of different fonts used on sites “in the wild”.
v-fonts Experiment with variable fonts.
FontSpark is a simple tool to find different fonts.
Pair and Compare is a great way to mix and match different Google fonts to find the best combination for your design.
Looking for some good reading resources to improve your typography skills? Read Butterick’s Practical Typography and Stop Stealing Sheep & Find Out How Type Works. You’ll be glad you did.
Color resources
Automatic UI color palette generator is a very helpful tool for generating a full-spectrum color palette from a single color. I mainly use it when I need to quickly generate a range of grays for a UI design.
Accessible color matrix Accessibility is an important part of choosing colors for a website or app design. This accessible color matrix tool allows you to check if your color combinations conform to accessibility standards.
ihayk.github.io/scale A creative way to experiment with different color ranges.
Icon sets
Simple Icons Very useful and vast collection of 2750 SVG icons for popular brands. I haven’t found any brands I’ve ever needed to not be in the Simple Icons collection.
Phosphoricons Open-source icon family offering 6 weights: thin, light, regular, bold, fill, and duotone. Needless to say, it is a very useful and large (1,248+) collection worth bookmarking.
Phosphor icon family. Go bookmark it —it’s worth the bookmark.
Software
Lunacy is a great design tool. Being a native Windows application makes it fast and smooth to work with. Lunacy works completely offline which makes it a good alternative to Figma.
Lunacy—my (current) go-to design tool open to my logo design for Hilltop Motion.
PenPot is an open-source, web-based design and prototyping tool based on open standards.
Templates
If you need something for a specific design software, there are sites that provide free UI kits, icons, templates, mockups, style guides, illustrations, and more. My experience is that you do have to look through a lot of “okay” stuff to find the gold, though.
Sketch
SketchElements is a place to find free Sketch resources. The files can be used with either Lunacy or Sketch.
Figma
Similar to SketchElements.com above, FigmaElements offers free Figma resources.
Mockups
ls.graphics Free, high-quality mockups from ls.graphics.
MockUPhone is by far the best free resource I have discovered for generating device mockups. The site allows you to wrap your design in a variety of mobile device frames, including iPhones, iPads, Android phones, laptops, and wearables. The mockups are licensed under the Creative Commons Attribution 3.0 Unported License, making them usable for practically any project.
Another resource for generating Android mockups is the official Android Device Art Generator.
Assets
You can generate all sorts of backgrounds with Haikei.
Both superdesigner.co and haikei.app let you generate SVG assets like backgrounds, blobs, patterns, gradients, and shapes for your designs.
Conclusion
Thanks for reading. I hope you enjoyed this list of design resources and tools.
Do you have any free design tools or resources you use that I didn’t mention? Feel free to comment below.
