11 web design tools you can’t live without
From Sketch to Affinity designer, here are 11 top design tools to transform your workflow.
01. 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.
02. Vivaldi
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: JavaScript and React were 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 and tiling, and web panels that enable you to put all your favourite sites in one place for easy access.
03. Affinity Designer
Serif’s Affinity Designer has been dubbed the ‘Photoshop killer’ by some, and it’s easy to see why. 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 (very often Photoshop’s 32,000 feels like it’s just not enough). This is 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.
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!
04. Avocode
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.”
Overall, I’m not 100 per cent sure any app can ever replicate a developer. However, I’d happily use this to turn PSDs and Sketch files into interactive designs that could form the foundations for the website build.
05. Antetype
Antetype is a tool for creating responsive UIs for apps and websites. It feels like its been built to do just one job: to create high-fidelity prototypes, but not production files. This is actually a good thing – the team is focused on exactly what it is creating, and it’s not trying to make an app that replaces developers.
“Frustrated using photo editing tools for UX design, we wanted a tool designed for UX design, with a better understanding of content and layout,” says Tim Klauck, UX director at Antetype. “Auto-layout and widgets allow us to rapidly iterate our designs while maintaining consistency.”
On download you’re given a fairly basic widget library, which you can use to quickly create prototypes and start designing. Antetype provides a library of devices and OS designs including iOS, Android and Windows to start with. There is also an active community section on the site, and you can download UI kits from other Antetype users.
The thing that sets Antetype apart from other prototyping tools I’ve used is that you can actually create responsive prototypes and add some neat interactions; ideal for presenting ideas to a client.
It feels a bit too ‘drag-and-drop’ for my liking, and the UI isn’t stunning but it is very efficient and quick to learn. Spend some time with it and you can create very effective prototypes, very rapidly.
06. Sketch
Sketch has gained a massive following since it launched in 2009. The speed at which Bohemian Coding (the creator of Sketch) is moving is very impressive – the team has already introduced improved exporting, symbols and simplified vector modes.
“When we set out to build Sketch, we envisioned an app for the modern digital designer,” says Pieter Omvlee, founder of Bohemian Coding. “We have tried to do that with key improvements to basic functionality and radical new features. We’ve been humbled by the enthusiasm with which people have started using Sketch and the amazing work they have created already.”
Another feature that’s really handy for speeding up the design/development crossover is Automatic Slicing. Without having to manually add slices, Sketch can create assets using one-click export, which will be exported at 0.5x, 1x, 2x and 3x and in various formats such as PNG, JPG and TIFF. I’m looking forward to seeing what Sketch does next.
07. Form
RelativeWave’s Form is a prototyping tool like no other I’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 me, 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. I 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.
08. UXPin
UXPin is a wireframing and prototyping tool that has been designed to not be limited to just one thing. You can use it to create rapid low-fidelity wireframes just as easily as hi-fidelity interactive prototypes. Using UXPin is a really pleasant experience – you can tell it has been built by a UX Team!
I love that the team allows so much flexibility within the app. You can opt to start with an empty iPhone app or responsive website template, where you design everything in the app. Or, if you have a design you want to prototype and add interactivity, there are tools to import a project from Photoshop or Sketch.
Making high-fidelity prototypes with interactions is also really easy and super-smart. Select an element such as a button, and you are guided through a step-by-step process of adding the interaction. It’s really easy to do and very effective.
Finally, sharing and commenting on designs is simple too. A point-and-click interface makes it easy for clients to add comments on certain elements and have them reviewed. I’d definitely recommend giving this a try for your next wireframe or prototyping project.
09. Macaw
Macaw was built with designers in mind, and without touching any code you can create responsive designs that look and work great across all devices. I was immediately blown away by the simplicity of its design, and the app feels nice and familiar.
After watching a few videos I got stuck into designing a simple page layout. Within 30 minutes I was able to create a responsive template that worked pretty well. I really enjoyed how the app allowed you to bring up options to adjust the layout and would represent this in real time, enabling you to see how the changes would actually effect the design.
This was even more useful when setting breakpoints. As the layout broke, I was able to tweak it to create a responsive layout without touching any code.
The code the app produces is actually really well constructed and semantic. This is usually where apps like these fall down, but Macaw has managed some kind of code magic and got it right! I’m very excited to see where this goes.
10. Marvel
“We wanted to lower the barrier to bringing your digital ideas to life, so we created Marvel, a ‘code-free’ prototyping tool that transforms images and sketches into interactive prototypes that look and feel like real apps and websites,” says Murat Mutlu, who co-founded the tool.
When you first open Marvel you’re asked to connect it with your Dropbox, which allows the app to grab the files it needs to create your project(s). If you don’t use Dropbox, there’s no other way to get your files into Marvel.
Once you have your PSDs in place, you can use Marvel’s (beautifully designed) UI to hotlink your pages together.
There are also some really handy features, including being able to create transitions between links/pages and quickly preview how these will look in the browser.
Another great feature is that you can choose the environment for your project. So, if you want to create an iOS app, you just select it from the settings and the preview is automatically adjusted.
I really like how simple the app is to use, and the ability to share it with staff or clients is helpful. I’ll definitely be using this for my client work!
11. Webflow
Webflow is a web app that allows you to design production-ready websites without coding. It has an unobtrusive UI that allows you to focus on the design. There’s an option to view the design at popular breakpoints, and a preview mode, which gives you full control over the viewport size.
There are some familiar tools that allow you to design elements, but it’s all drag-and-drop (there’s no drawing tool) so you are limited with what you can create.
“Webflow was born out of the frustrating workflow between my brother Sergie (a designer) and I (a coder) while we were building sites for clients,” explains co-founder Vlad Magdalin. “It now helps web designers create and publish custom responsive websites much faster.”
This app takes code-free design to the next level. However, you do still have to understand how code works in order to create something that functions well. You couldn’t jump in as someone who knows nothing about design and just build a website, for example.
This is definitely a good thing – Webflow makes you think about the code, without having to worry about it. It also allows you to publish your site and will host it for you for a monthly fee. Definitely one to try, even if just for prototyping.
Many Thanks to Dan Edwards for this Post
Related Posts
20 web design trends for 2019
20 useful tools for web developers
25 Useful HTML5 and CSS3 Tools for Designers and Developers
100+ Awesome Web Development Tools and Resources
38 Linux Commands and Utilities You CANT Live without
15 Top PHP Frameworks For Startups | 2019
24 Must Have WordPress Plugins for Business Websites in 2018
Web Development Trends 2018: Your Ultimate Top 10