We're always on the lookout for hot new web design tools that can save you some precious time and improve your workflow. Every stage of building a website is covered this month, from planning your layout, creating colour schemes and adding animations to making user documentation and optimising search engines.
Read on for the best web design tools of May 2019.
01. Startup 3
If you like Bootstrap, this tool from Designmodo could be a good option for you – it’s an online app with built-in templates and themes for building websites based on Bootstrap 4 with a 12-column grid. Sites are built using a drag-and-drop generator, so you can put everything together without coding but you do need a basic understanding of HTML and CSS to complete the process of creating a site. Startup will export your static HTML, CSS and JS files so you can upload them to your hosting provider.
02. Figma Plus
Figma Plus is the unofficial plugin system for Figma that lets you download and install third party plugins from within the Figma UI. The tool installs on Mac and Windows Figma desktop apps and you can also use it with Chrome browser. The intention is for the community to create and share plugins, but to get things started the team behind Figma Plus have built 11 useful new plugins so that there are things to play with if you install the system today. You can find out more in the release notes.
If you’re getting frustrated with recruiters, Sidedoor offers an alternative approach to finding a job by putting you directly in touch with engineers at companies that fit your criteria so you can talk about the role with someone on the inside. Based on your conversation, the referrer decides whether they want to put you forward for a position at their company. This process is hopefully more efficient as it quickly gives both sides a good understanding of whether the position is right for you.
For a more traditional approach to finding a job, you can check our listings of the best web design jobs from around the world.
Interplay is a flexible prototyping system that you can use to plan layouts and even your design system. You can work in the online or desktop app and your changes are automatically saved to the cloud for easy collaborative working. Interplay has its own component-creation tools but a major boon is that it’s compatible with lots of other software and systems – you can import things from Sketch, Figma or InVision Studio, and you can synchronise React, Angular and Vue code components.
05. UserGuiding 2.0
Create interactive user manuals for your products without writing any code – UserGuiding helps you to attract and retain users by making it easy for them to understand what your app does and how to use it. Your manuals might be for user onboarding or to get employees up to speed, either way there are many known benefits to communicating effectively, including reduced support costs and increased conversions. The latest version has a number of extra features and improvements based on customer requests that make it even easier to create your product tours.
06. Found Color
Creating interesting colour palettes is hard, and we never get tired of novelle ways of doing it. This site extracts dominant hues from photographs that are pleasing to look at because of their colours – most of the images depict shadowy corners, street furniture, bins and other miscellanea that happen to have appealing colour combinations. The result is an archive of naturally-occurring palettes that aren’t generated by rules or algorithms, and don't necessarily follow colour theory.
Subtle CSS animations can be an effective yet understated way to make your interfaces easier to understand and more pleasant to use. This site has a collection of small animations that you can use to give feedback when an interface element is clicked or hovered over – just select the ones you want and the CSS code is copied for you. They are fully open source so you can use them as you please.
Put any URL into Backlinks and it shows you who links to it, so you can compare your own link situation to that of your competitors. You can see who is linking to your competitor and not to you, which gives you a picture of what you need to work on to improve your search engine rankings. You can also organise links according to factors like anchor text, domain score, page score and .edu and .gov domains. The results can be exported to CSV for further analysis. This might sound like paid-for data, but it’s a free tool.
09. Helvetica Now
Helvetica has been going strong for many years, but as an older typeface there are some aspects of it that aren’t suited so well for modern usage. A few years ago it was decided that a reboot was necessary to bring the typeface up to date and the result is Helvetica Now. Every single character has been redrawn and refitted so that it works in every situation, from the tiny text on a mobile device to an advert on the side of a bus. It’s available in three sizes, Micro, Text, and Display, each of which is specially tailored to be used at a different scale. Read more with our post on Helvetica Now.
10. Colour Review
When putting together a colour scheme, it’s important to ensure that there is sufficient contrast between colours so that text is easy to read – this makes your site legible for people with a visual impairment and more effective for all users. This site is useful because you can input HSL, CMYK and RGB colour values and there are guides that tell you where different contrast boundaries lie on a given colour plane. It also helps you to ensure that you hit WCAG standards.