18 web design tools to speed up your workflow in 2018

[Rss Bot 1]

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 don’t want to waste it on dull, repetitive and soul-sapping tasks. 

Thankfully, new web design tools are being released all the time to help you simplify processes, and reduce time and effort – most notably in UI design. 

Here, we look at 18 brilliant web design tools for 2018 that will help you become more productive in the coming year. Some are brand spanking new; others have been around for a while. But all have the potential to save you time, energy and budget in your web design projects.

01. Sketch

Sketch is rapidly replacing Photoshop as the UI design tool of choice

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 shiny new prototyping and wireframing tool, which comes in second on this list). 

Rory Berry, creative director at Superrb, rightly feels that using Photoshop for web deign 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.”

02. Adobe XD

Sketch rival Adobe XD has a light interface that allows you to concept and prototype with ease

Adobe now has its own vector design and wireframing tool, Adobe XD. We reviewed the Beta version this May, and it was formally released this October.

Andrei Robu, design director at Robu Studio in Barcelona, is among its fans. “XD doesn't replace Sketch yet, but 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 https://www.receptional.com, 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.”

Learn how to prototype a mobile app with Adobe XD. 

03. Figma

Figma allows you to design, prototype and gather feedback with other designers in real time

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.

“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 artworker David Eastwood, who works for Co-o 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.”

Learn how to create a responsive dashboard with Figma.

04. Zeplin

Zeplin translates Photoshop or Sketch files into a free Mac, Windows or web-based app

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 Sitff. “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.”

05. Canva

Canva is a popular tool for quickly creating social media images and infographics

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 tools 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.” 

06. Web design proposal tool

Generate web design proposals easily with this free tool

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, they’ve brought out another superb free app: the self-explanatory Web Design 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 round, 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.

07. Site Stacks 

Check out any website’s tech stack quickly and easily

Here’s 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, 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.”

08. CodePen Projects 

A new tool lets you build websites directly inside CodePen

Founded in 2012 by Alex Vazquez, Tim Sabat and Chris Coyier, CodePen has grown to become of 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. 

Note that, although it works in a similar way to the Pen Editor, CodePen Projects doesn’t replace the lattter but sits alongside it. You can learn more about CodePen Projects in this blog post.

09. ARKit 

Create augmented reality experiences for iOS 11 devices with Apple’s ARKit

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 in June at WWDC17, Apple released ARKit, a new framework that allows you to easily create AR experiences for iPhone and iPad running iOS 11. To get started, simply download iOS 11 and the latest version of Xcode 9, which includes the iOS 11 SDK. Check out what ARKit is capable of.   

10. Hologram 

This Mac app built on A-Frame lets you create WebVR experiences without needing to code

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, 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. 

11. Parallax SVG Animation Tools

This set of tools makes it easier to create complex sequences of SVG animation 

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.”

12. GitHub Notifier 

Get GithHub notifications in your browser with this Chrome add-on

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 and released this September. 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.

13. URL to PDF 

Convert HTML into PDFs automatically with this API

Brought to you by Alvar Carto, this self-hosted API enables you to convert the 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.

14. iotaCSS

iotaCSS is a CSS framework with a difference

iotaCSS is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend 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. 

• 40 web design freebies to make your life easier

iotaCSS been quietly in development for a couple of years, with a number of early adopters using it to build high-scale products. But now it’s out of beta and confidently announcing itself to the world. You can learn more about how it works in this blog post.

15. Launchpad 

Launchpad turns Sketch into a fully fledged website builder

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. 

You can learn more about Launchpad in this blog post.

16. React Sketch.app

Airbnb is sharing its bespoke tool with the open source community

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.

17. SVGito

This free app saves you having to manually edit SVG files

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.

18. Sizzy 

Sizzy allows you to preview multiple screens during app testing

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. 

Related articles:

• The 5 biggest web design trends of 2017
• 9 of the best resources for learning HTML and CSS
• 11 great landing page designs

View the full article