30 essential tools for web developers
The right web design tools can streamline your workflow, helping you work smarter â rather than harder â and more efficiently. After all, you want to invest your energy in solving problems, delighting users and creating beautiful designs. You wouldnât want to waste your time and energy on dull, repetitive and soul-sapping tasks. Letâs look at 30 essential tools for web developers that will help you become more productive in the coming year.
Where some are brand spanking new while others have been around for a while. But all of them have the potential to save you time, energy and budget in your web design projects.
Rory Berry, creative director at Superb, rightly feels that using Photoshop for web design is a mistake. He made the switch to Sketch in 2017 and highly recommends it. âHaving been a user of Photoshop for over 10 years, it was hard to change and learn something new,â he says. âBut literally after the first day of using Sketch, there was no looking back. Iâm a total convert.â
He offers a number of reasons why. âCompared to Photoshop, sorting all your documents that you have and making revisions on Sketch is much easier,â he begins. âSketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.
The Sketch community offers hundreds of plugins to make designers workflow easier and smoother, he adds. âThereâs basically a plugin for everything if you can find it. Photoshop/ Lightroom is still our go-to for photo editing, but Sketch is an all-around winner for web design.â
Figma is an interface design tool that enables multiple designers to collaborate in real-time. Itâs available in the browser, or on Windows, Mac or Linux. Both free and paid versions are available depending on what you use it for.
Here are some of its outstanding features:
âFigma has a similar USP as Sketch with the exception of being cross-platform,â explains frontend designer Benjamin Read. âI recently used it to create a couple of icons for an article weâre publishing on our website and found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app.â Iâve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,â he adds. âIn comparison, Iâve found many tools for other platforms fall short.â
Content writer and art worker David Eastwood, who works for Co-op Electrical, also has good things to say about Figma. âWe were recommended Figma by our web development agency and use it for landing page wireframes,â he explains. âThis has included proposed changes to the homepage and specific sales landing page, especially around Black Friday. Itâs also been a really useful tool when weâve needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet, and mobile.â
Serifâs Affinity Designer has been dubbed the âPhotoshop killerâ by some, and itâs easy to see why,â says Dan Edwards, creative director at No Divide. âMy first impressions are that the app is incredibly well designed and feels like itâs been made to be a dedicated web and graphic design tool.â
âThere were few features I really enjoyed, including adjustable, non-destructive layers. This essentially means you can adjust images or vectors without damaging them.â
âWhen it comes to designing, the UI feels familiar. When moving from Photoshop, everyone seems to want to start over, which can pose a real challenge. What Affinity has done is to keep the layout familiar, while tightening everything up and hiding distractions. I was easily able to jump straight in and get designing.â
âOverall, Affinity feels like it could be a real competitor to Photoshop, Illustrator, and Sketch. And at just ÂŁ48.99 itâs a real bargain!â
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.
This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.
Avocode makes it extremely easy for front-end developers to code websites or apps from Photoshop or Sketch designs. Itâs built by the same team that brought us CSS Hat and PNG Hat, so itâs not surprising theyâve taken the exporting process one step further. Although previous apps have allowed you to export assets, what makes Avocode really special is that you can use its Photoshop plugin to sync your PSD file into Avocode with just one click.
Avocode quickly and automatically analyses your PSD or Sketch files and brings everything into a beautifully designed UI. You then have full control over how you export assets, including SVG exporting as standard.
You can also click elements in the design, and copy & paste the code into a text editor of your choice. âIt gives users everything they need for coding â a preview of the design, and access to all layers and export assets,â says Avocode co-founder Vu Hoang Anh. âThe best thing is that developers wonât need Photoshop or Sketch at all. The current workflow really sucks and thatâs why we created Avocode.â
Pattern Lab is a beautiful pattern-driven design tool created by Dave Olsen and Brad Frost. Itâs based on the concept of atomic design, which says that you should break your design down into its smallest parts â atoms â and combine them to form bigger, reusable components â molecules and organisms â that can then be turned into usable templates.
Although at its core itâs a static site generator that stitches together the UI components. Thereâs much more to Pattern Lab than that. Itâs language-and-tool-agnostic enables you to nest the UI patterns inside each other and design with dynamic data. It features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive and fully extensible so that you can be sure that itâll expand to meet your needs.
Sometimes the best tool can be something as simple as a new browser. Vivaldi is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed âa browser for our friendsâ, Vivaldi is built using web technologies like JavaScript and React that are used to make the user interface, along with Node.js and lots of NPM modules.
Vivaldi is the most customisable browser out there, and it offers other cool features such as command line control, a panel for taking notes, tab stacking, tiling and web panels that enable you to put all your favourite sites in one place for easy access.
Do you want to mock up something like an infographic quick and easy? Then Lawrence Harmer, founder of Solve Media, recommends Canva. Â Itâs a free, browser-based tool thatâs used by both designers and non-designers, to make graphics for both print and the web.
âCanva is pretty good for making nice images,â says Harmer. âImages are the window into the soul of your website and social media, so a tool like this can be key to success.â
Web Designing Proposal Tool
Itâs essentially a simple âProposifyâ tool, which allows you to quickly and easily churn out proposals,â explains BeeWitsâ David Attard. âItâs essentially a glorified form that allows you to enter and change pre-set text and then creates a Word document ready for sending directly to the client.â If you sign in to the free service, you can save your current version, such that next time around, youâve got a bunch of fields already filled in with your details. Itâs simple, but it gets the job done, and what more do you really want? Itâs not officially been launched yet, as BeeWits are currently canvassing feedback, but itâs otherwise ready to use.
Here is another browser-based tool thatâs both simple and brilliant. Type in the URL of any website to this Chrome extension and it lets you look at its tech stack. Itâs fast, smooth and reliable and provides coverage for over 40,000 products. It prides itself on both the accuracy and exhaustiveness of its data.
âWe built this extension to be a simpler way to access this data,â says its makers, âwhile also protecting your privacy and running all operations on our own servers so that your browsing isnât slowed down.â
Founded in 2012 by Alex Vazquez, Tim Sabat, and Chris Coyier. CodePen has grown to become the webâs largest and liveliest communities for testing and showcasing HTML, CSS and JavaScript code snippets. For the last five years, itâs functioned as both an online code editor and an open-source learning environment, where developers can create code snippets (âpensâ), test them and get feedback.
Recently CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which lets you build websites within your browser.
You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools.
Bootstrap is certainly not a new tool. But the new version of the worldâs most popular front-end 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:
Bootstrap has revolutionised development and thereâs no doubt the ubiquitous framework will continue to shape how we build stuff on the web.
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
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 tabable, and identify focus changes within the shadow DOM.
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 pipeline, itâs an online typesetting tool that gives you fine control of typestyles.
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).
This tool also allows you to register for an account, log in and save the progress of your work. 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.
Augmented reality is as blending digital object and information with the environment around you. It is a space thatâs generating a lot of excitement in the web and app development community today. Not least because in June at WWDC17, Apple released ARKit, a new framework that allows you to easily create AR experiences for iPhone and iPad running on iOS 11. To get started, simply download iOS 11 and the latest version of Xcode 9, which includes the iOS 11 SDK.
What would a list of new web tools be without the hottest new JavaScript framework? Vue.js, like React, is a framework for building user interfaces and utilises a virtual DOM. As the name suggests, Vueâs core library is focused on the view layer.
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
There is a custom v-on handler that calls the reverse Message method. Vue is great for those who are less-experienced with complex libraries, but also has a number of plugins to help with the development of complex single-page web apps.
Hologram is a new all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozillaâs WebVR framework.
This means that developers can download projects created with Hologram and use them in their A-Frame workflows. Itâs currently available on Mac and a Windows version is promised soon.
Parallax SVG Animation Tool
Created by Gareth Battensby of Parallax, SVG Animation Tools has a range of SVG animation tools in the form of a Python script. âI built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,â he says in this explanatory blog post.
âThe biggest of these being overwritten edits whenever you re-export from Illustrator. These tools completely eliminate that issue â theyâre perfect for front-end developers who animate SVG graphics with GSAP or similar animation libraries.â
Hate wading through emails? Prefer the idea of getting GitHub notifications in your browser? This Chrome extension does exactly that.
This straightforward but effective tool was created by Stacy Goh. It enables to get real-time push notifications whenever someone creates an issue, comments on an issue, pushes code, creates a pull request, forks your repository or stars your repository. You can learn more about how and why Goh created it in this blog post.
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.
Now a stable product, Quill lets you convert a basic div element into a powerful rich text editor with a few lines of JavaScript:
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 a 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.
Brought to you by Alvar Carto, this self-hosted API enables you to convert the HTML into PDFs. Hence itâs handy for rendering receipts, invoices, or any other HTML content. The API ignores a pageâs @media print CSS rules by default and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, itâs free.
iotaCSS is a CSS framework thatâs been purposely crafted to be design-agnostic. It was created by consultant front-end architect Dimitris Psaropoulos, who found that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top or ask the designer to compromise. So instead, he created his own framework, which works a little differently.
While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules that donât depend on each other. You can use one independently or you can combine them to build more complicated user interfaces.
Launchpad is a tool from Anima that lets you publish websites directly from Sketch, with no coding required.
The entire interface is integrated into Sketch and can be used to create landing pages and static websites, although at the moment it doesnât support dynamic web pages using JavaScript. But it does let you include links, add responsive breakpoints, set up forms, embed videos and integrate analytics tools. So it could be an ideal tool for setting up a quick and easy promotional website, for example.
React Sketch.app provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers. Itâs basically an open-source library that allows you to write React components that render to Sketch documents.
Because React Sketch app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.
React Sketch app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch.
SVGito is a free web app that cleans up your SVG files, to save you the bother of manually editing them.
Created by Peter Nowell, this neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing what they actually look like on screen.
Sizzy is a tool that allows you to preview multiple screens at once while youâre testing out your responsive web apps.
Creator Kristijan Ristovski had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. Hence, he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs.
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.
RelativeWaveâs Form is a prototyping tool like no other weâve tried. Itâs not a typical design tool in that thereâs no tools or layers palette. Using the app feels like a mix of design and code.
While you canât actually create graphics in the app, you can insert them and use what Form calls âpatchesâ to add gestures and interactions. The Mac app requires you to also use the iOS app so you can view your prototype in real time and interact with it.
âForm is an app design and prototyping tool with the goal of producing designs that are closer to what you get in production,â explains RelativeWave creative coder Max Weisel. âWe want designers to work directly on the production side of an app, and at the same time free up engineers to focus on more complex problems.â
There are some great tutorials on how to use Form, but the process is rather complex if, like us, you are used to creating visuals in Photoshop. Moving an image to the centre of your device, for example, is achieved using Superview variables and Match Patches. Once in place, you use maths to divide the width and height and connect them to the X and Y positions in Image View. Group those together, rename the variables and adjust the X and Y anchor points. We found this process fairly complex.
However, once you get your head around the processes, you can create stunning prototypes. Having access to the deviceâs camera and other sensors means the prototypes you create are just as powerful as the coded app would be.
