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.
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 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
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
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.
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.
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 and you can read about both in this Medium post.
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. 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
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.
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
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
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.