In most professions, the more time you spend in your job, the more set in your ways you become. But for web designers and developers, resistance to change simply isn't an option.
As clients demand bigger and better websites and apps that work across an increasingly complex ecosystem of devices, from VR to voice, working with new tech and techniques isn't an option; it's a necessity.
Thankfully, there are plenty of web design tools being released all the time to help you tackle new challenges. The only problem is finding the time to keep up with them all.
So if you don't have a spare hour every day to scour Product Hunt, check out our selection of the best web design tools available now, which will all help you become more streamlined, inventive and creative in your work.
Some will be very familiar, others may be new to you. But each has the potential to save you time, energy and budget in your web design work.
We’ll start with the most obvious. Yes, we know everyone’s heard of Sketch – Bohemian Coding’s vector UI design tool – but anecdotally it seems there are still a lot of web designers relying on Photoshop for UI design (and that's despite the release of Adobe XD, Adobe's prototyping and wireframing tool – one of the newer additions to Creative Cloud).
Rory Berry, creative director at Superrb, 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.”
And that’s not all. “The built-in grid system in Sketch is great and makes interface design much easier. I think the overall UI and minimal feel makes it much cleaner to design in and user friendly. Photoshop seems very complicated in comparison.”
The Sketch community offers hundreds of plugins to make a designers work flow 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 all round winner for web design.”
If you tried Sketch a long time ago and didn't like it, you may want to try out the latest iteration of Sketch, version 52, which includes a totally redesigned interface, new features for designing with data, and a new Dark Mode for macOS Mojave.
Don't miss our top tips for using Sketch.
02. Adobe XD
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.
Andrei Robu, design director at Robu Studio in Barcelona, is among its fans. “For quick mock ups it's great,” he says. “It’s a very light interface, with lots of photos loaded in, and great for moodboards. The prototyping is very useful to show clients how stuff works, especially because you can push the content online right away. I also love that I can copy and paste stuff from other Adobe apps.”
Crucially, Adobe XD integrates with the rest of Creative Cloud. Ellis Rogers, graphic designer at Receptional Ltd also recommends it. “Sketch is brilliant for designing for a web developer, because you are working in values in a software built exactly for designing websites and apps,” he says. “But the biggest limitation for me was it only being available on Mac, making it difficult to share Sketch files for web developers/designers not using OS X. Sharing Sketch files for development meant additional software/conversions, or working from flat JPGs – something that caused too many boundaries.
Being a user of Photoshop and Illustrator, the UI for Adobe XD felt familiar, he adds, so there wasn’t a real learning curve for using it. “So now after a few weeks of trialling, it’s the only tool I now use for all web design, app design, prototyping or wireframes.”
Rogers also praises the ability XD offers to use Adobe libraries to quickly import any asset from Photoshop or Illustrator, as this makes collaboration projects run more quickly.
“Working with UI/UX designers and illustrators makes this process simple,” he says. “When the design/prototype or wireframe is complete, Adobe XD allows you to very quickly select elements and create page transitions for a working prototype, which can be shared via a link. The link also allows you to gather feedback per page, keeping it all organised. The link can be updated within Adobe XD so the client can always see the latest version without having to worry about incorrect versions; an absolute joy to work with.”
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, and there are both free and paid versions 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 front end designer Benjamin Read. “When I used it to create a couple of icons for an article on our website I 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.”
Freelance content writer and artworker David Eastwood, also has good things to say about Figma. “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 product designer Dan Edwards. "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 a few features I really enjoyed, including adjustable, nondestructive layers. This essentially means you can adjust images or vectors without damaging them.
"The 1,000,000 per cent zoom was just bliss; it's especially useful when working with vector art, as you can really get in close. The undo and history features are also really handy: Affinity allows you to go back over 8,000 steps!"
"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."
Affinity Designer is now also available for the iPad. And note that this is not the scaled-down mobile app version you might expect: it's the same full version you get on the desktop.
Don't miss our guides to using the Pixel persona, the Export persona and the Pen tool in Affinity Designer. Also note that Affinity make a Photoshop alternative, Affinity Photo and an InDesign alternative, Affinity Publisher; all of which play together nicely.
Flare is a browser-based tool from 2Dimensions that helps you design and animate vector art. Aimed at both web designers and game designers, it lets you work directly, in real time, with assets that run in your final product, eliminating the need to redo that work in code. So it should simplify your process enormously and save you a bucketload of time.
Best of all, it’s free to download as part of the Open Design movement. You can see how Ahmed Tarek used it to create an app animation in this tutorial.
Want to match your website’s colour scheme to a particular image? Then you may well find Vaunt handy. It's a free Mac app that uses a clustering algorithm to analyse your images and lets you know which colours are dominant in a picture, so you can use that information in your design.
You drag and drop your image into the app and the dominant colours appear in a panel. You can then click on any of the colours to add them to your clipboard.
Launched last November, Squoosh is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.
The app works both online and offline, and overall it’s a win-win: web designers save time, and Google gets a faster web that still looks good.
The most effective way to make your website better is through A/B testing: splitting traffic between two or more different versions and seeing which performs better. And this tool makes it a lot easier to set up. It’s free for the first 10,000 clicks, and you don’t even have to sign up to get started.
Head to the site, enter your destination URLs and you’re given a single, short test URL to share with your audience. If you like, too, you can set up rules. For example, if you want people in the UK who are using Chrome on iOS to end up in a different place to people in the US, that’s pretty easy to set up.
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:
Avocode makes it extremely easy for frontend 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 here. 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 into Avocode with just one click.
Avocode quickly and automatically analyses your PSD or Sketch file 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 and 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."
We're not sure any app can ever replicate a developer. But we know of many hard pressed designers who happily use this to turn PSDs and Sketch files into interactive designs, which can then form the foundations for the website build. It costs from $14 per month.
Do you find handing over design assets to developers can be a bit of a hassle? James Stiff certainly does. “They don't always share the same software,” he points out, “so those painstakingly layered and annotated Photoshop mockups end up as flattened files and things inevitably get lost in translation.”
Zeplin mitigates this painful experience by translating Photoshop or Sketch files into a free Mac, Windows or web-based app. “The best part is that Zeplin provides quick reference for the colours, dimensions and fonts from your designs,” says Stiff. “It even generates CSS and style guides. I've found Zeplin to be a massive time saver and my developer friends seem to really like it too.”
Also read our post on Tools that bridge the designer-developer gap.
12. Pattern Lab
Pattern Lab is a beautiful pattern-driven design tool created by Dave OIsen 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 UI components, there's much more to Pattern Lab than that. It's language- and tool-agnostic; it enables you to nest 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 it's fully extensible so you can be sure it'll expand to meet your needs.
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 and tiling, and web panels that enable you to put all your favourite sites in one place for easy access.
14. Firefox Reality
If you’re working in webVR, you’ll want to check out Firefox Reality, a new browser for virtual reality devices such as Viveport, Oculus and Google Daydream.
Launched by Mozilla last September, it's available now from these device’s app stores, and is designed to move seamlessly between the 2D web and the immersive web. Among these features is the ability to search the web using your voice, via your device headset. The browser is being built in the open, and you can follow along via its Github page. Also check out the VR app Hologram, further down on our list.
Want to mock up something like an infographic quickly and easy? Then Lawrence Harmer, founder of Solve Web 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.”
Beewits has a nice line in tools to make the business side of web design easier, namely its the Web Design Quotation Generator and Hourly Rate Calculator. Now for 2018, it's brought out another superb free app: the self-explanatory Web Design Proposal Tool.
“It's essentially a simple ‘Proposify’ tool, which enables you to quickly and easily churn out proposals,” explains Beewits’ David Attard. “It’s a glorified form that allows you to enter and change set text, and then creates a Word document ready for sending directly to the client.” Alternatively, you can enter your own text without using a template.
If you sign in to the free service, you can save your current version, such that next time round, you've got a bunch of fields already filled in with your details. It's simple, but it gets the job done.
17. Site Stacks
Here’s another browser-based tool that’s 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, provides coverage for over 40,000 products and 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.”
18. CodePen Projects
Then in 2017, CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which enables you to 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.
Note that, although it works in a similar way to the Pen Editor, CodePen Projects doesn’t replace the latter but sits alongside it. You can learn more about CodePen Projects in this blog post.
Bootstrap is certainly not a new tool. But it has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web. Each update also brings a complete overhaul of the tool.
The latest version, 4.2.1, launched in December. It included a slew of new features, including a new spinner loading component, a new toast component for displaying notifications, a new iOS style switch, touch support in the carousel component, and more. Check out the full feature set on the Bootstrap site and find the best free Bootstrap themes in our guide.
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.
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).
21. 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.
Augmented reality – blending digital objects and information with the environment around you – is a space that’s generating a lot of excitement in the web and app development community right now. Not least because of Apple's ARKit, a framework that allows you to easily create AR experiences for iPhone and iPad
With ARKit 2 on iOS 12, your AR apps can now be experienced by multiple users simultaneously, and resumed at a later time in the same state. You can also incorporate real-world objects into your AR experiences, giving your users even greater immersive opportunities.
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.
Hologram is an 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, Mozila’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.
Created by Gareth Battensby of Parallax, SVG Animation Tools is 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.”
There are lots of different contexts in applications where a rich text editor is needed. And Quill, built firmly with the modern web in mind, is currently our clear favourite.
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.
27. URL to PDF
Brought to you by Alvar Carto, this self-hosted API enables you to convert your HTML into PDFs, so 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 frontend architect Dimitris Psaropoulos, who felt 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 plugin from Anima that lets you publish responsive websites directly from Sketch, with no coding required. The entire interface is integrated into Sketch. If you're currently designing responsive pages in Sketch and then handing them over to a developer, then giving this cool tool a try is a complete no-brainer.
30. React Sketch.app
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. You can learn more about how it works in this post and by following this tutorial.
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.
You can learn more about SVGito in this blog post.
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. So he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs.
You can learn more about Sizzy in this blog post.
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:
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.
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 you're re 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.
The process is 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.
from Creative Bloq http://www.creativebloq.com/features/best-web-design-tools