April's 10 best new web design tools

Use Flexbox and Framer without learning new code, improve your email copy, a Sketch alternative for Windows and more.

Every month we select the 10 most useful new tools to help web designers (and sometimes developers, too) improve the way they work. They include add-ons, libraries, Chrome extensions, jQuery plugins, apps and more. Here are the tools we've picked out for April 2016.

Thanks to Flexbox, it's now much easier to create your layouts – if you've put in the time to learn it, that is. If you haven't done that yet, tools are starting to appear to aid your learning and even enable people to use Flexbox without learning to code. You'll find two such tools below, as well as eight other resources to help you make great websites.

01. Webflow Flexbox UI Builder

flexbox ui

Flexbox UI can do all of these!

Take advantage of the power of Flexbox without the need to write code using this visual builder from Webflow. The builder enables you to to build complex, responsive layouts and achieve popular design patterns from within a GUI.

02. Gravit

Gravit

Browser-based vector drawing

If you don't have a Mac but need a utility for vector illustration, Gravit it a good option as it runs in the browser. It's a powerful tool with a decent feature set and, depending on your needs, is a good alternative to Sketch or Fireworks.

03. Platforma Ultimate Wireframe Kit

Platforma wireframe

Over 200 customisable wireframes

Put a prototype together in a matter of hours with this huge library of over 200 wireframe layouts that work in Sketch, Photoshop and Illustrator. Prototypes can be made live and interactive by uploading to Invision, Marvel or UXPin.

04. Flexbox Patterns

Flexbox patterns

Dive in to Flexbox with this learning resource

Flexbox Patterns by CJ Cenizal is a learning tool that builds your Flexbox knowledge by demonstrating how to build various UI elements, starting out with simpler things such as tabs and headers and progressing to trickier examples. A good way to get started with Flexbox.

05. The Data Visualisation Catalogue

data visualisation

Choose the right kind of chart for your project

If you're new to the world of data visualisation, this is a good place to start: it lays out charting options in a way that's easy to browse and guides you through how to use each one. When you've made your choice, there are links to the tools that will help you to generate each type of chart.

06. Just Good Copy

just good copy

A great place to get inspiration for your copy writing

Hitting the right tone in your communications with users can be tough. This site is a repository of emails from companies to their customers that do a great job of conveying information in a clear and friendly manner, often with humour and personality. It's a really useful tool for working out the right tone of voice for your organisation.

07. Runstatus

Runstatus

Keep your users informed with Runstatus

It makes sense to have a status page that operates from outside your infrastructure, so it won't be affected if you have downtime. If things aren't working, Runstatus is an easy way to quickly let your users know what's going on, and it's free for the first year.

08. Framer

Framer

Learn as you go with Framer

The latest version of Framer has a visual interface that enables designers with little or no coding experience to take advantage of its power. If you're interested in learning to code, this is a great opportunity to pick it up as you work. Here's a great tutorial to get you started.

09. How much does a website cost?

website cost

Get a rough budget estimate for hiring a freelancer or agency

Get a ballpark figure for what it would cost to pay an agency or freelancer to build a website by answering a series of questions about your requirements. It's based on the premise that you'll be paying $60-100 USD per hour for the work.

10. Instant Logo Search

logo search

Scoop up logos with ease

Searching for logos on Google Images is okay, but this site makes it much better. Logos are displayed in a grid with SVG or PNG links, or you can hoover up multiple images in one go by adding them to your download bucket.

ABOUT THE AUTHOR

Tanya Combrinck is digital editor on net magazine.

Topics