My Favorite Design Tools and Generators

By Alec Gall on September 25, 2020
Updated on September 29, 2020

Hey everyone! I've been building up a small bookmark folder of tools and generators for web design. I thought I'd go ahead and list them all for others. If you know of some more little tools like this please share! I'd love to add more to my list. This list is in no particular order and they are all great! I will keep adding to this list as I find more.

FontPair

FontPair lists tons of good options for font pairings (Heading and Text). It's especially great if you know what you want to use for one of your fonts but aren't sure about the other. You can search "Montserrat" for example and it will show you a bunch of good pairings to go along with it.

Canva

Canva is also a tool for finding font pairs. Just insert the font you're working with and it will give you options to go with it.

Type Scale

Type Scale helps you decide the appropriate sizes for your text and headings. You can select your font, base font size, and the scaling ratio you'd like to use then it will automatically generate all your heading sizes in em units based on your selections.

Brumm

Brumm is a tool for generating beautiful multilayer shadows. These shadows look much more natural than the standard one layer box-shadow and can really step up the design of a web page.

PALX

PALX helps you generate a color palette based off of a single color. Basically, if you have one color picked, you can input that and it will give you a bunch of colors that go well with it. Select a few and you've got your pallet!

Coolors

Coolors is a color palette generator as well, but generates random color palettes instead.

uiGradients

uiGradients is exactly what it sounds like. It's basically a big list of colors that go well together mashed up into gradients. Most of them are two colors but some go as high as four colors.

Gradient Animator

Gradient Animator is pretty self-explanatory as well. Based on a few settings and some colors it will generate all the CSS you need for a beautiful animated gradient.

Bob Ross Lipsum

Bob Ross Lipsum is a fun little twist on the usual Lorem Ipsum. It's basically just Lorem Ipsum but with Bob Ross-isms. It's fun to change it up sometimes!

Techsini

Techsini has a few other tools on their site, but my favorite is the Multi-Device Website Mockup Generator. It creates those mockups you see on a ton of web design pages that show a website or app on a bunch of different screens like a pc monitor, tablet, phone, etc. You just input the URL of a site and it loads up iframes of the site in a mockup that you can screenshot and use on your site!

SizyMyImage

SizeMyImage is an all-in-one image scaler, compressor, and file converter that can process several images at a time. It's a nice simple website with a nice design and great UX.

ShapeDivider

ShapeDivider is an awesome tool for easily creating SVG shape dividers of several types. You can choose from types like waves, curves, triangles, arrows, etc then adjust some sliders to get them exactly how you want them. Super easy way to make something that's normally quite complicated!

SVG Backgrounds

SVG Backgrounds is another pretty self-explanatory one. It's a tool for generating some cool SVG backgrounds. They are a premium service, but they do offer quite a few free options as well so it's still worth checking out if you're not looking to spend anything!

ConvertICO

ConvertICO converts PNG files into ICO files which you can use for the favicon of your website.

Thanks for reading and please let me know if you know of any other little tools worthy of this list! I'd absolutely love to add more to my bookmark collection.

Article written by Alec Gall
Web Developer / Designer aspiring to learn new things every day!

6 comments on “My Favorite Design Tools and Generators”

  1. Hey Alec,

    I find or have found some of these quite useful in the past. Some might even make it on your list! Keep up the great work.

    Jason

    http://www.convertico.com
    ConvertICO is a free online PNG to ICO file converter. It is fast, free and easy to use. It is used to convert Desktop Icons, App Icons as well as the much needed favicons for websites. Go ahead and give it a try, you will be pleased.

    https://www.mockupworld.co
    The original biggest Source of free photo-realistic Mockups online

    https://www.shopify.com/tools/slogan-maker
    Capture more customers with a great brand recall. Whether you need a catchy slogan for advertising or as a tagline for your business, our slogan generator will help you come up with the best ideas. In an overcrowded market, a creative and unique business slogan can be the difference maker.

    Simply enter a term that describes your business, and get up to 1,000 relevant slogans for free.

    https://coolors.co
    Create the perfect palette or get inspired by thousands of beautiful color schemes.

    https://www.canva.com/font-combinations/
    Font combinations

    https://www.colorzilla.com/gradient-editor/
    A powerful Photoshop-like CSS gradient editor from ColorZilla.

    https://css-tricks.com

    https://cssreference.io
    A free visual guide to CSS
    Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

    http://www.robbiddulph.com/draw-with-rob

    https://github.com/bradtraversy/design-resources-for-developers

    https://tinyjpg.com
    What does TinyJPG do?
    TinyJPG reduces the file size of your JPEG images. Every uploaded image is analyzed to apply the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth!

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram