The web design and development tools landscape is booming. That might be the understatement of the year, every year! It’s great to have plenty of options, but it does make it difficult to weed through all the web design inspiration and figure out what isn’t very useful and what has quality and staying power.
In this feature I’ve carefully selected a list of tools that I feel are not only practical and useful, but also pleasantly diverse. These options cover many aspects of the design and development process, from the planning stages of a prototype to the final code written on the frontend.
With that, let’s get right into 15 of the best web design and development tools that you can try out today.
Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.
Here’s an example to demonstrate the super-simple API:
Figma recently burst onto the design tools landscape claiming to be ‘the first interface design tool with realtime collaboration’. It’s a web app that has some key differences from other design tools. Here are some of its outstanding features:
- Drag Sketch files into the app and Figma will convert them
- Set precise constraints on elements to build fluid, multi-device layouts
- A pen tool that promises to be simpler and more powerful than other ones you’ve used
- Make collaboration notes right inside your design files
- Share projects in real time with others, with the ability to control permissions on the files
- File version history
- A file browser to organise your projects
Some of the early reviews on Figma have been positive. Designer Meng To raved: “Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch”.
03. Type Nugget
Type Nugget addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles. The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).
Usefully, this tool allows you to register for an account, log in and save your progress. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.
Look at a code example, taken from Vue’s docs, that utilises user input and demonstrates the library’s elegance. We’ll start with the HTML:
In that example, I’m populating the paragraph with data and defining the reverseMessage method. Vue is great for those less experienced with complex libraries, but also has a number of plugins to help with development of complex single-page web apps.
There are a number of good preprocessor GUI workflow tool options. Progress on Scout-App had gone stagnant, but Jared Wilcurt and the development team recently relaunched the project and it’s going strong once again.
As with many such tools, Scout- App allows you to compile your ‘.sass’ and ‘.scss’ files without touching the command line. It’s advertised as ‘the simplest Sass processor’ , which is a great draw for those who aren’t comfortable with the command line.
This app is so simple that you don’t need to install anything else on your OS; you just run Scout-App, choose your input/output folders and write your code. If you love the simplicity of writing Sass inside something like CodePen or JS Bin, then you’ll love this.
Adobe XD, one of the newest additions to Creative Cloud, is Adobe’s splash into the prototyping market. It’s currently in a Preview release for Mac, with Windows on the way.
XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.
As mentioned, XD is still in relatively early development but Adobe has set up a page detailing new features as they’re rolled out. Some of the most recent ones include zoom to selection, animations, linear gradients, and hex shorthand for colours. If you’d like a quick primer on XD’s basics, Lukas Steyer has written a multi-part article series, or you can check out this tutorial from Demian Borba.
ProtoPie, currently a native Mac app with a Windows version in the works, is a code-free prototyping tool. It’s aimed at designers that want to communicate complex mobile interactions to the developers on their team without having to write any code. The app has many of the features you’d expect to see in any prototyping tool. However, its most compelling detail is the interaction panel, which lets you build sophisticated interactions that would normally only be possible via programming.
Another related feature is the ability to test your interactions on a mobile device using the ProtoPie Player, which can be connected via Wi-Fi to the ProtoPie app. Other useful features include the ability to divide the interactions into ‘scenes’ for simpler communication of ideas, a timeline interface that enables you to make fine-grained changes, and the ability to include interactions that use multi-finger gestures.
Quill is billed as a WYSIWYG rich text editor ‘for the modern web’. There are lots of different contexts in applications where a rich text editor is needed, so it’s no wonder Quill has exploded in popularity since its version 1.0 beta release in mid-2016.
But the most powerful features in Quill are its flexibility and extensibility by means of modules and a powerful API. Quill offers themes and modules that include toolbar, keyboard, clipboard and history. You can test-drive many of these features in the Quill playground and of course the documentation is a must-read if you intend to use its advanced features.
Next page: 7 more web design tools you need to know
Now that Flexbox has strong support in all modern browsers, more and more CSS frameworks are starting to incorporate it as a primary feature. Bulma is one of the latest to do this.
Bulma is a Sass-based framework and it’s modular, which allows you to use @import directives to include only the components you want in any given project. Alternatively, you can just drop the entire bulma.css file into your project and go nuts.
Out of the box, the grid features are Flexbox-based, so it’s easy to create custom layouts with an intuitive class-based system. Additionally, there are dozens of CSS-only elements (button, icon and so on) and components (media object, modal) that can be dropped into your projects using just HTML.
In its introductory post, the Facebook team has detailed many of the problems Yarn attempts to solve. One of the issues addressed is related to dependency directories differing across machines, which can cause bugs that are hard to track down.
Bootstrap is certainly not a new tool, so it might seem a little out of place in this list. But the fourth version of the world’s most popular frontend framework is tabbed as ‘a major rewrite of almost the entire project’ , so I think it warrants a mention. Some notable changes include the following:
- Dropped support for IE8 and iOS6
- CSS source files move from Less to Sass (‘.scss’)
- Switched from px to rem for primary CSS units
- Increased the global font size to 16px from 14px
- Added support for Flexbox in the grid
- A new, all-encompassing ‘cards’ component to replace older components
- Nearly all components refactored to use classes without child selectors
Bootstrap has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web.
No list of web development tools would be complete without at least one accessibility tool. Accessibility is one of those often-neglected aspects of design and development, and ally.js can simplify it for you.
Now a stable product, ally.js is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabbable, and identify focus changes within the shadow DOM.
Two other powerful features are the ability to determine in what manner focus has changed (keyboard, mouse, etc.) and when an element is focusable and physically visible on the screen (this can help to avoid page scroll).
A neat little project from Chinese developer Xcat Liu, Mobi.css is a lightweight CSS framework that utilises Flexbox, with a special focus on mobile and mobile-first styles. This tool simplifies mobile-first layouts and provides easy-to-use styles for components, including a Flexbox-based grid system, typography, HTML tables, forms and utility classes.
Many of the styles for these features work straight out of the box – similar to something like Normalize.css – but the focus with Mobi.css is on making things simple and attractive on mobile devices. The docs offer a full overview and there’s also a full component reference.
14. Origami Studio
Origami Studio is a prototyping and design tool for Mac that is used by the Facebook team to build its own products. Origami allows you to work in layers (which you can also import from Sketch). It includes pre-built components from Material Design and iOS, and lets you build interactive components in its Patch Editor panel. Your interactive creations are live-updated in a preview window for fast testing.
Origami offers countless ways to create, test and customise your prototypes. For example, there are animation options, custom device settings, mobile interactions (double tap, long press, and so on), and the ability to add sophisticated logic and maths to your interactions.
Foundation for Emails is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.
As well as the framework itself, ZURB has provided the ZURB Email Stack, an all-in-one workflow that includes:
- Use of gulp
- The Inky templating language for complex table layouts
- A styles inliner as part of the build process
- Automatic image compression
The Getting Started guide will help walk you through how to get the stack up and running should you choose to take advantage of all the features.
- Top opportunities for web designers in 2017
- Using vector tools: A web designer's approach
- The problem with web design education
Source: creative blog