8 essential prototyping and build tools

[Rss Bot 1]

The right web design tools can help ensure a fast, efficient and smooth path to the final live design. A great starting point is getting any prototypes right and then selecting the right build tool for the job. Check out this selection to help you achieve design glory. If you can't find what you're looking for, take a look at our roundup of 10 top prototyping tools.

01. InVision

InVision offers a way to string together individual static designs in order to create user flows. The tools are simple and easy to use, and allow syncing directly from Photoshop and Sketch before linking designs together. With powerful collaboration and comment features it’s clear to see why so many designers use it.

02. Figma

Figma touts some impressive features, but the browser-based editor and cloud saving is the difference between most other design and prototyping tools. Figma 2.0 introduced new prototyping tools, bringing the abilities of multiple Adobe apps into one desktop and browser-based tool.

03. Marvel

Wireframe, prototype, design online and create design specs in one place with Marvel

Marvel, much like Figma, provides an all-in-one experience for design, prototyping and collaboration. The design UI is simple and beautiful, while offering all the tools you need. Marvel’s prototyping tools enable both high and low fidelity prototypes to be created easily. 

04. Axure

Axure is a wireframing and prototyping tool primarily aimed at software development. Axure isn’t trying to offer everything. Instead, it offers really powerful tools for rapid prototyping, diagramming and documentation and it does them well.

05. Gulp

A toolkit for automating painful or time-consuming tasks in your development workflow

Gulp is a frontend build tool used to perform any number of functions from compiling SASS to building SVG sprites. Gulp will save you time and perform a lot of the repetitive tasks required, enabling you to concentrate on writing code and building applications.

06. Grunt

Another frontend build tool that’s used in the same way as Gulp with the aim of saving you time and effort when building the frontend of any website or app. These tools have become an important part of frontend development due to their ability to perform repetitive tasks.

07. Yarn

Get fast, reliable, and secure dependency management with Yarn

Yarn is a package manager. It works much the same as Node Package Manager (npm). Yarn caches every package making it incredibly fast to download and install dependencies, and with all of the same packages as npm so you can easily make the switch. 

08. Webpack

Webpack is a JavaScript module bundler that enables you to keep your JavaScript files small and focused. In its simplest form Webpack will then bundle them all into one minified JS file which can be included in your website or application. 

Discover more at Generate London 2018

Learn more from leading experts. Get your ticket today

Related articles

• A guide to rapid prototyping with Photoshop CC
• Perfect prototypes and hand-off designs with Marvel
• How to avoid prototyping pitfalls

View the full article