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.

1.Adobe XD

Sketch rival Adobe XD has a light interface t

Sketch rival Adobe XD has a light interface

Adobe’s vector design and wireframing tool, Adobe XD, keeps getting better, with the announcement at Adobe MAX last year that it will now include voice prototyping.

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

2.Sketch

Sketch has replaced Photoshop as the UI design tool

Sketch has replaced Photoshop as the UI design tool

Sketch has replaced Photoshop as the UI design tool

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

3.Affinity Designer

Affinity Designer is as powerful on iPad as it in on desktop

Affinity Designer is as powerful on iPad as it in on desktop

Affinity Designer is as powerful on iPad as it in on desktop

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

4.Vaunt

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.

5 Flare

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.

6.Figma

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

7.Linksplit

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.

8.Anime

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:

var myAnimation = anime({
targets: [‘.box1’, ‘.box2’],
translateX: ‘5rem’,
rotate: 180,
duration: 3000,
loop: true
});

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.

The author, Julian Garnier, has provided a CodePen collection that demonstrates what the library can do, as well as thorough documentation on GitHub.

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

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.

1n

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

Bukason

Comments (49)

  1. Reply

    Greetings from Carolina! I’m bored to death at work so I decided to check out your website on my iphone during lunch break. I enjoy the info you provide here and can’t wait to take a look when I get home. I’m surprised at how quick your blog loaded on my mobile .. I’m not even using WIFI, just 3G .. Anyways, great site!|

  2. Reply

    I have been surfing online more than 4 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all webmasters and bloggers made good content as you did, the net will be much more useful than ever before.|

  3. Berniece Fleet

    Reply

    It’s difficult to find educated people for this topic, but you seem like you know what you’re talking about! Thanks|

  4. Isabel Spallone

    Reply

    We’re a group of volunteers and starting a new scheme in our community. Your website provided us with valuable information to work on. You have done a formidable job and our whole community will be thankful to you.|

  5. Reply

    Hi my loved one! I want to say that this post is amazing, great written and come with approximately all vital infos. I would like to look more posts like this .|

  6. Amber Puorto

    Reply

    Do you have a spam problem on this site; I also am a blogger, and I was wanting to know your situation; we have developed some nice procedures and we are looking to swap solutions with others, be sure to shoot me an email if interested.|

  7. Kyung Conzemius

    Reply

    Ahaa, its pleasant dialogue concerning this paragraph at this place at this blog, I have read all that, so at this time me also commenting at this place.|

  8. Julia Pembrook

    Reply

    There is certainly a lot to learn about this issue. I really like all of the points you have made.|

  9. What was I in my past lives

    Reply

    This reminds me of the other info I was looking at earlier

  10. Reply

    Hello, i feel that i noticed you visited my website thus i got here to go back the choose?.I am trying to to find issues to enhance my site!I guess its good enough to use a few of your concepts!!|

  11. Glen Charters

    Reply

    Hi! This is my first visit to your blog! We are a collection of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a outstanding job!|

  12. Wally Tronnes

    Reply

    Why people still use to read news papers when in this technological globe the whole thing is presented on net?|

  13. Reply

    Fine way of explaining, and good article to get information regarding my presentation subject matter, which i am going to deliver in institution of higher education.|

  14. Corie Hollywood

    Reply

    naturally like your website however you need to check the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the reality however I’ll certainly come back again.|

  15. Joan Provino

    Reply

    At this moment I am ready to do my breakfast, once having my breakfast coming yet again to read additional news.|

  16. Trinidad Doscher

    Reply

    Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.

  17. Donald Caney

    Reply

    What’s Happening i am new to this, I stumbled upon this I’ve discovered It absolutely useful and it has helped me out loads. I hope to give a contribution & assist different users like its aided me. Good job.|

  18. Leonie Marcoline

    Reply

    What’s up i am kavin, its my first time to commenting anyplace, when i read this piece of writing i thought i could also create comment due to this sensible piece of writing.|

  19. Devon Schiver

    Reply

    Hello there, You’ve performed a fantastic job. I’ll definitely digg it and in my opinion recommend to my friends. I’m sure they will be benefited from this site.|

  20. Laquita Wolvin

    Reply

    Hello it’s me, I am also visiting this web site on a regular basis, this website is actually good and the visitors are really sharing pleasant thoughts.|

  21. Dalene Girst

    Reply

    I like reading a post that will make men and women think. Also, many thanks for allowing for me to comment!|

  22. Reply

    Thanks on your marvelous posting! I really enjoyed reading it, you will be a great author. I will be sure to bookmark your blog and definitely will come back in the foreseeable future. I want to encourage you continue your great posts, have a nice holiday weekend!|

  23. Reply

    Very good site you have here but I was curious about if you knew of any community forums that cover the same topics talked about in this article? I’d really like to be a part of community where I can get feed-back from other knowledgeable individuals that share the same interest. If you have any suggestions, please let me know. Many thanks!|

  24. Reply

    You really make it seem so easy with your presentation but I find this topic to be actually something which I think I would never understand. It seems too complex and extremely broad for me. I am looking forward for your next post, I’ll try to get the hang of it!|

  25. Reply

    I’m really inspired with your writing talents as well as with the format on your weblog. Is that this a paid subject or did you customize it yourself? Either way stay up the nice high quality writing, it is rare to see a great weblog like this one today..|

  26. Reply

    My brother recommended I would possibly like this website. He was totally right. This put up actually made my day. You can not imagine simply how a lot time I had spent for this info! Thank you!|

  27. Reply

    Great post however , I was wanting to know if you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit further. Kudos!|

  28. Reply

    We are a group of volunteers and starting a new scheme in our community. Your web site offered us with valuable information to work on. You have done an impressive job and our entire community will be grateful to you.|

  29. Reply

    Great post. I was checking continuously this blog and I am impressed! Very useful info specifically the last part 🙂 I care for such info a lot. I was seeking this particular information for a very long time. Thank you and good luck.|

  30. Reply

    Please let me know if you’re looking for a author for your weblog. You have some really great posts and I believe I would be a good asset. If you ever want to take some of the load off, I’d love to write some articles for your blog in exchange for a link back to mine. Please shoot me an email if interested. Regards!|

  31. Reply

    Wonderful beat ! I wish to apprentice whilst you amend your site, how could
    i subscribe for a blog web site? The account helped me a acceptable deal.

    I have been tiny bit acquainted of this your broadcast offered shiny transparent concept

  32. Reply

    Great items from you, man. I’ve understand your
    stuff previous to and you’re just extremely magnificent.
    I actually like what you’ve got here, certainly like what you’re saying and the way during which
    you are saying it. You make it enjoyable and you continue
    to care for to keep it sensible. I cant wait to learn much more from you.
    This is really a great website.

  33. Reply

    you are in point of fact a just right webmaster.

    The web site loading speed is incredible. It sort of feels that you’re doing any distinctive trick.

    Also, The contents are masterwork. you have performed a great task on this
    matter!

  34. Reply

    I like the valuable information you provide in your articles.

    I’ll bookmark your blog and check again here regularly.
    I’m quite sure I will learn plenty of new stuff right here!
    Best of luck for the next!

  35. Reply

    Oh my goodness! Awesome article dude! Many thanks, However I am having troubles with your
    RSS. I don’t know why I cannot subscribe to it.
    Is there anybody else having the same RSS
    problems? Anyone that knows the solution will you kindly respond?
    Thanks!!

  36. Reply

    Hi there fantastic blog! Does running a blog like this require
    a massive amount work? I’ve no expertise in programming
    but I had been hoping to start my own blog soon. Anyhow, if you have any
    ideas or techniques for new blog owners please share. I understand this is
    off subject but I just wanted to ask. Many thanks!

  37. Reply

    It’s genuinely very difficult in this full of activity life to listen news on Television, therefore I simply
    use world wide web for that purpose, and get the most up-to-date news.

  38. Reply

    whoah this weblog is excellent i really like reading your
    articles. Stay up the great work! You realize, lots of persons are searching around for this information, you could aid them greatly.

  39. Reply

    My spouse and I stumbled over here different website
    and thought I should check things out. I like
    what I see so i am just following you. Look forward to looking over your web page yet again.

Leave a comment

Your email address will not be published. Required fields are marked *