10 web design tools you can't live without

Creative director Dan Edwards introduces 10 top design tools to transform your workflow.

This year has been a really exciting one for new design tools entering the market. Photoshop has become something of a dirty word, and although it's still one of my weapons of choice, internet-makers are fighting back with a plethora of tools that aim to make your life as a designer that little bit better.

Static mockups are becoming less useful and the lines between designer and developer are becoming increasingly blurred. As we work more collaboratively with one another the tools we use are having to change.

The era of the HiDPI screen is here and dominating our devices, and designers are having to find new processes that help them produce designs that are more accessible across these devices.

Here, I've picked out top 10 tools that I believe are changing the way we think about design, and are key to helping us establish these new processes...

01. Pixate

Pixate is an app that has been created for making intuitive, interactive prototypes for iOS and Android. What sets Pixate apart from other tools I've used is its drag-and-drop animation and interaction panel.

To make an element interactive, all you need to do is simply select the interaction you'd like to use, be that double-tap, drag, tap or one of the other native interactions it provides.

Drag this onto your element, set some variables, and voilà – using the Pixate iOS or Android app gives you a real-time working prototype on your device.

The app allows you to build up an asset library really quickly. To start creating your prototype, just drag and drop your assets into the app and you’ll find them in your layers palette ready to use.

What I really enjoyed about Pixate is how simple it is. Every part of the app is really clearly and thoughtfully designed which makes it easy to understand.

And if you're not quite sure on what something does, the live feed onto your device allows you to experiment and see how it effects the design in real time.

02. Affinity

Affinity by Serif 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 that it feels like it’s been made to be a dedicated web and graphic design tool.

There were a few features that I really enjoyed, including adjustable nondestructive layers – which essentially means you can adjust images or vectors without damaging them.

The 1,000,000 percent 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 kept 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 £34.99 it's a real bargain!

03. Avocode

Avocode makes it extremely easy for a frontend developer 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 looks like there's going to be Atom integration soon, which will make this process even slicker.

"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 percent 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.

04. Antetype

Antetype is a new tool for creating responsive UIs for apps and websites. It feels like its been built to do just one job really well: 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, where 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.

05. 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 latest version includes great new features such as 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."

I had used the last version of Sketch for a limited time but found it to be buggy and not to my liking. However, after using Sketch 3 for a few hours I was pleased to see those bugs had been ironed out and the app overall much improved. It's great to see features such as the new grid tool, which makes it easy to create grids for your designs.

I also really like how Sketch has incorporated CSS logic into the app. This makes converting your designs into CSS much easier, as you have to use CSS logic when applying styles. Another feature which is 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.

Next page: five more web design tools you can't live without...