10 new web design tools for May 2019

[Rss Bot 1]

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

Build a Bootstrap site using a visual interface

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

Find and install useful plugins for Figma

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.

03. Sidedoor

Speak to engineers inside companies you would like to work for

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.

04. Interplay

Collaborative prototype-building that works with all your usual tools

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 manuals for your users

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

Palettes based on colour combinations found in the wild

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.  

07. CSSFX

Simple CSS effects to beautify your interface

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.  

08. Backlinks

Find out who links to your competitors' websites

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

Re-engineered letterforms for the modern world

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

Find out contrast values for your colour scheme

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. 

Read more:

• 10 new web design tools for April 2019
• 8 Google Chrome extensions to make your life easier
• Cool CSS animation examples to recreate

View the full article