Skip to main content

10 best new web design tools for March 2019

We're always on the lookout for new web design tools to speed up your workflow, make life and work easier and/or generally provide interest and learning.

This month's hot new web design tools include an unobtrusive and ethical ad network, free illustrations for landing pages, social media templates and much more. Read on to discover how you can shake up your designs with the best web design tools for March 2019. 

For our more general list of tools, see this post on the best web design tools to help you work smarter this year (opens in new tab).

01.  Interactive Typography Cheatsheet (opens in new tab)

Interactive Typography Cheatsheet

This cheatsheet enables you to click the green bits to learn what they're called

Learn typographic anatomy by clicking or tapping on the highlighted letter parts to find out their names. Christian Heilmann based this cheatsheet on a Deviant Art post by Martin Silvertant (opens in new tab) that you can download as a vector file should you wish to print it extra-large as a poster for your wall. 

02. Absurd Design (opens in new tab)

absurd illustrations for your site

Free surrealist illustrations for your website

Absurd Design is collection of illustrations for landing pages that are free to use and described by the creators as “surrealist”. The idea is that most landing page illustrations reflect the function of the product literally, whereas these illustrations give people a chance to use images to convey a message. Each image can be interpreted in different ways, so how it is received will depend in part on the context in which it it used. They are whimsical, high-quality, and can be used to give an extra level of depth and thoughtfulness to your website. 

03. Amino Editor (opens in new tab)

amino editor

Tweak your favourite websites and tailor them to your tastes

Some websites are annoying to look at or difficult to read. Amino Editor is a live CSS editor for Chrome that enables you to write your own style sheets to customise websites that you use frequently. If text is too small, or a colour scheme or font makes reading hard on the eye, you can tweak it to your exact taste. Style sheets can be saved to your Google Drive so they’re accessible on multiple devices, and you can apply your styles to individual pages or entire domains. They can also be turned on and off easily.  

04. Accessible Brand Colours (opens in new tab)

Accessible Brand Colours

Check to see if your brand colours are ADA compliant

If you are a business in the United States, you most likely need to comply with the ADA (Americans with Disabilities Act) requirements for online accessibility. Making sure your brand colours are compliant is a key part of the process of selecting them – you don't want to move ahead with a colour scheme that isn't accessible and have to change it later. This tool from design studio Use All Five will help you out – input your hex values and it will generate a chart that tells you how accessible the colour combinations are in different situations, and help you to find ones that work better if they don't pass.  

05.  CSS Selectors Cheatsheet (opens in new tab)

CSS Selectors Cheatsheet

Print this out for your wall so you can find selectors quickly

This excellent selectors cheatsheet is laid out over six pages, or four if you discount the cover sheets, and is visually appealing enough to print out and stick on your wall for quick selector-identification. It’s by Nana Jeon and is released under a Creative Commons license. There is also a game version by Ryan Yu to help you learn, which you can look at over here (opens in new tab) and you can read about both in this Medium post (opens in new tab)

06. Mason (opens in new tab)

Mason website

Make front end features without having to code them from scratch

Mason is a platform for building front end features for your web apps. Instead of coding from scratch commonly used features such as news feeds, dashboards, user profiles and so on, you can use building blocks within Mason to custom-make these things without repeating the work that has already been carried out by countless front end engineers. "Building with Mason means never again reinventing the solutions to solved software problems," says creator Thomas McLaughlin on Product Hunt (opens in new tab). Once you've made your front end features, you can export them and drop the code into your existing codebase as if you hand-wrote them yourself.  

07. Startup Cemetery (opens in new tab)

Startup Cemetery

Find out why other people failed so you can avoid falling into the same traps

Startup Cemetery is a database-style resource for founders or anyone interested in start-ups, which documents what happened to companies that closed down so that you can get a picture of how things go wrong. There is currently information for over 100 companies and this will grow over time. It's a useful research tool because each entry contains a basic summary of what happened with links that help you to dig deeper if you want more detailed information. The cemetery is part of Failory, a resource for founders that contains interviews with founders who have failed in their start-up mission.  

08. MakerAds (opens in new tab)


Make money from ads without messing up your website

The creators of MakerAds set out to solve two problems: firstly that if you want to make money from your website, you have to put up with ugly adverts for irrelevant products; and secondly that indie makers often find self-promotion a challenge. The solution they've come up with is this advertising network that carries adverts for indie makers' products for free, and paid-for adverts from larger companies. All adverts are for ethical companies and they are unobtrusively designed.  

09. Social Sizes (opens in new tab)

social sizes social media

Grab templates with all the sizes for the top social media sites

Bookmark this page so you can easily grab image and video templates that are the right size for all the big social media sites. Each template contains all the sizes for that social media site, for example, the Facebook one has the sizes for news feed, stories, profile picture, cover photo, event photo and group photo. Templates are available for Sketch, Photoshop and Adobe XD. They’re for eight big social media sites: Facebook, Instagram, LinkedIn, Twitter, Snapchat, YouTube, Pinterest, Twitch (the usual suspects). 

10. Colour Harmonies (opens in new tab)

Colour Harmonies

Wonderful colour combinations displayed on a paint chart

This palette tool in the style of a paint colour chart comes up with some beautiful combinations when you twiddle with the settings. Click on a colour to fill the background with it so you can see it next to every other colour in the wheel. Hex values for each colour appear on the ends of the swatches.

(opens in new tab)

Read more:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tanya is a writer covering art, design, and visual effects. She has 16 years of experience as a magazine journalist and has written for numerous publications including 3D World, 3D Artist, ImagineFX, Computer Arts, net magazine, and Creative Bloq. For Creative Bloq, she mostly writes about web design, including the hottest new tools, as well as 3D artwork and VFX.