Last updated: December 10, 2019

Tools web designers and web design agencies should try in 2020

Note: Make sure to bookmark this post, because we will continue to update it weekly with new tools we test.

Designing for the world wide web is easier than ever. Every day, there is a new tool that is “the last web design tool you’ll ever need”. Most of the time, its a load of shit.

When I first started, I spent hours looking for the easiest way to design a website (using Photoshop) and turn it into a website. Eventually, I learned enough about WordPress to buy and install themes and boom, I was a “web designer”.

It didn’t take long for me to realize that I was going to have to step my game up if I wanted to start making the big bucks. So, I decided to learn to write code. While I still try and keep up-to-date with new development tools and coding languages/frameworks, design is still my forte.

With all of the software testing I do, there is still tons of features (or software as a whole) I am hoping to see in the future:

• Version control for designers – this should come standard with all design tools.
• Better code export functionality – a few tools are getting close but most seem to focus more on apps than websites
• Easier client feedback – again, a lot of tools do offer this, but most still seem to need some work

We have a select group of tools we use for all of our web design projects, but we still love testing the new ones that come to the market.

A breakdown of some of our web design software categories:

• Best wireframing tools
• Best prototyping tools
• Best web design feedback and collaboration tools
• Best handoff tools
• Best project planning task management for web designers

The best wireframing, project planning, and user-flow software for web designers in 2020

#1 Flowmapp – Best for creating sitemaps and user-flow graphs

Flowmapp is one of our favorite tools because of its simplicity. With Flowmapp, you can easily map out your website’s sitemap. In our process, we will create our sitemap in Flowmapp and share it with our clients so they can visually see their list of pages and how they will be grouped. It also gives them a good idea as to how we intend to group pages within the website’s navigation.

To make it even cooler, Flowmapp also has a User Flow tool that allows you to create an anticipated user-journey to create a conversion strategy.

Software overview:

• Platforms: Currently browser only
• Best for: Web design plans, sitemaps, and user flow graphs
• Integrations: Slack
• Price: $15/mo – $199/mo
• Free trial: Yes, 14-days

#2 Eagle – Best for mood boards and design inspiration

Of all the tools I use, Eagle is probably the one I use most frequently. Eagle is one of the coolest tools I have ever come across and one I use for not only web design projects but also for our graphic design and branding services. Eagle is a visual library to organize and view your fields. For Mac users, it is a better version of your Finder.

I have Eagle synced to my Google Drive account and use it to view all of my saved designs, PSD mockups, and a million other reasons. The best part about Eagle is the never-ending file format list it supports. You can save and view PSDs, PDFs, JPGs, PNGs, Videos, Gifs, Word Docs, Powerpoints, and about twenty other formats.

It is the perfect way to create a moodboard or collect inspiration for web design projects.

Software overview:

• Platforms: macOS and Windows
• Best for: Web design planning, moodboards, viewing design files
• Integrations: Dropbox, Google Drive, and several other cloud tools
• Price: $29 (lifetime cost)
• Free trial: Yes, 30-days

#3 Whimiscal – Best for project planning, wireframing, and flowcharts

Whimisical is the perfect tool for web designers who want to visually plan their entire process. Whimsical has four main features: flowcharts, wireframes, sticky notes, and mind maps. Each tool/feature gives web designers a simple interface with complex functionality. The sticky notes feature is one of our favorite. It allows you to easily create notes or tasks for your project and arrange them however you’d like.

Whimsical also makes it extremely easy to share your board(s) with clients. You have the option to create a share link or export the entire board as an image.

Software overview:

• Platforms: Browser only
• Best for: Web design planning, flowcharts, wireframes
• Integrations: None at the moment
• Price: $0 – $12/mo
• Free trial: Free membership option (4 boards free)

The best UX design and prototyping software for web designers in 2020

#4 Adobe XD – Best for prototyping and designing

Adobe XD is our go-to software when it comes to designing websites. Before XD, I slaved away creating UX mockups in Photoshop and boy was my tiny little mind blown away to the first time I used XD. XD’s simplicity is why we love it here at DELT. Its interface is so clean and simple you can pop out 10 different designs in less than twenty minutes. They may look like shit, but the possibility is still there.

Like many Adobe products, its lack of updates and new features, in the beginning, had me a bit worried, but it looks like XD is now in it for the long haul. While we haven’t fully adapted XD’s prototyping functionality, we religiously use its other features like creating design assets and sharing our work with clients. One of XD’s most promising new features is its plugin marketplace. It appears to have new plugins added almost daily and it is finally built a steady integration platform so it will only continue to get better.

Software overview:

• Platforms: macOS and Windows
• Best for: Web and UX design, client collaboration, web design prototyping
• Integrations: Creative Cloud and rapidly growing plugin marketplace
• Price: $9.99/mo for XD only, $52.99/mo for all Creative Cloud apps
• Free trial: Yes

#5 Sketch – Best for prototyping and web design

Sketch has been one of the most popular web design tools for Mac users for quite some time now. Sketch is very similar to XD, and had I not been a Windows user for the first couple of years I started learning web design, we would almost certainly be using Sketch for our web design services. Back when XD lacked the growth I like to see in design software, I tried converting to Sketch a few times. And while it definitely offers a clean and simple interface, I just found it lacked the ease of use that XD had.

With that said, Sketch is a great tool for web designers. It has a lot of features XD does not have, and its integrations and extensions currently have the upper-hand on XD in my mind.

Software overview:

• Platforms: macOS
• Best for: Web and UX design, web design prototyping
• Integrations: Huge marketplace with tons of extensions
• Price: $99 (for one year of updates)
• Free trial: Yes, 30-days

#6 Framer/Framer X – Best for web designs, prototyping, and developer handoffs

Framer was one of the first tools with an emphasis on creating interactive/animated web designs and prototypes. Framer’s newest flagship software, Framer X, is a beautifully designed tool that makes designing high-fidelity UX prototypes a breeze. Framer X is also one of the first – if not the first – web design tool to offer an in-app marketplace.

One of the features that makes Framer truly stand out is its developer-handoff option. Their developer tool allows you to create advanced animations and export the layouts and animations to React.

Software overview:

• Platforms: macOS
• Best for: Web and UX design, web design prototyping, code export
• Integrations: Framer X store allows tons of in-app integrations
• Price: $15/mo – $99/mo
• Free trial: Yes

#7 InVision & InVision Studio – Wireframing, design feedback, and prototyping

InVision has been a leader in the design industry for as long as I can remember. They have grown from a simple design sharing/feedback tool to a one-stop-shop for designers and agencies. InVision has a handful of design tools: Freehand (create wireframes and plans by hand), Boards (a tool for creating moodboards or showcasing designs for feedback – also great for graphic and logo designs), Prototyping (mobile and web design feedback and basic click actions), and Studio (along with several others).

Studio is InVision’s latest tool and, like Framer X, it was created as a solution for people who wanted to be able to easily create designs, animate those designs, and export the designs and animations to code. Studio has seen exponential growth since its first launch and InVision has turned into a very forward-thinking, consumer-driven company, so we are very excited to see how far they take all of their products.

Software overview:

• Platforms: macOS, Windows, and Browser
• Best for: Web and UX design, web design prototyping, code export
• Integrations: Atlassian, Sketch, Adobe, Slack, More, and a growing App Library for Studio
• Price: $0 – $99/mo (Studio is Free)
• Free trial: Yes

#8 Protopie – Best for creating interactive web design prototypes

Our final web design prototyping tool on this list is ProtoPie. Like the other software mentioned, ProtoPie, allows you to create high-fidelity interactive prototypes for mobile and desktop web designs and apps. Of all the tools, ProtoPie probably offers the most features in terms of animation customization.

Another area ProtoPie stands out is its ability to be integrated into web design teams. With ProtoPie, design teams can easily collaborate on projects, provide feedback and comments, and it even offers a version control function.

Software overview:

• Platforms: macOS and Windows
• Best for: Creating interactive web, mobile, and app designs
• Integrations: Adobe XD, Sketch, and Figma
• Price: $13/mo – $50/mo
• Free trial: Yes

#9 ProjectHuddle – Best tool for design and live website feedback

Another tool I spent countless hours searching for was one that offered easy client feedback. Our team had found reliable options in some other tools, but none that really allowed us to quickly share web designs and collect feedback – until we started using ProjectHuddle.

ProjectHuddle is a WordPress Plugin, but you can use it with any website framework (HTML, Drupal, PHP, etc.). You simply install the Plugin on any WordPress site, and you can then upload logo designs, web designs, or any other designs, and then send a custom link to your clients to make comments and provide feedback.

Along with static designs, you can also paste the link to any live website. All you have to do is paste some Javascript in the code of that site and bam: your clients can now make hotspots/annotations once they login to the dashboard.

Our favorite thing about ProjectHuddle is we have control over everything. We can edit the PHP to change or add functionality or change the CSS to match our brand. The fact that we use WordPress to develop most of our websites definitely is a plus as well.

Software overview:

• Platforms: Browser/WordPress
• Best for: Collecting feedback on live websites and static designs
• Integrations: Zapier
• Price: $109/year – $139/year
• Free trial: No

The best tools for web design feedback and collaboration

#10 MarkUp – Best for collecting feedback and collaborating on live websites

MarkUp is a simple and modern way to collect feedback from clients and designers on your live website. MarkUp eliminates the need to send countless emails, create endless spreadsheets, or set up meetings every time your client or design team has edits they want to be made to your website.

Our favorite things about MarkUp is how clean the user interface is and how simple it is to set up. If you visit MarkUp’s website, you can paste in a URL and test their software in realtime.

Software overview:

• Platforms: Browser only
• Best for: Collecting feedback and collaborating on live websites
• Integrations: None currently
• Price: Currently free
• Free trial: Yes

#11 Pastel – Best for getting feedback on live websites and static designs

Pastel is another feedback tool that is perfect for both design teams and individual designers. Pastel offers a beautiful user interface and works perfectly on both static designs and live websites. No matter what framework your website is developed on, Pastel can easily be integrated to gather feedback from stakeholders or collaborate with other people on your design team.

Unlike the other design feedback tools on this list, Pastel offers a strong arsenal of integrations. You can create support tickets from comments and export them to task management tools like Asana, Jira, or Trello.

Software overview:

• Platforms: Browser only
• Best for: Collecting feedback on live websites and static designs
• Integrations: Trello, Asana, Jira
• Price: $0 – $249
• Free trial: Yes, 14-days

#12 Toybox – Best software for design collaboration and managing tasks

Toybox does more than just provide web design teams with a solution to collect feedback. Toybox is focused on taking the hassle out of bug reporting during your web design reviews. Inside of Toybox are three main features: Annotate (comment and feedback tool for websites), Inspect (hover over an element and make CSS edits/comments), and their newest tool, Roller.

Roller is a feature that is still in its early stages, but we are super excited to see where it goes. Currently, it integrates with Figma, but they also plan releases for Sketch and XD. Toybox’s Roller allows you to find and fix inconsistencies in your designs to ensure accuracy across your designs and prototypes.

Software overview:

• Platforms: Browser only
• Best for: Collecting feedback on live websites and static designs
• Integrations: Trello, Slack, Asana, Figma, more
• Price: $25/mo – $149/mo
• Free trial: Yes, 30-days

The best developer handoff and project planning software for web designers

#13 Avocode – Best tool for turning static designs into code

Avocode is the OG of design-to-development software. Avocode was originally a tool that gave developers the ability to take a PSD and extract code/inspect its elements to easily gather CSS. Now, it is harder to find a tool that doesn’t integrate with Avocode.

Along with its developer hand-off features, Avocode also allows you to collaborate on designs, organize and manage design files, and even create click-through functionality for your prototypes. Avocode is currently compatible with Photoshop, Sketch, Illustrator, Figma, and XD.

Software overview:

• Platforms: Windows, macOS, Linux, Web/Browser
• Best for: Turning design assets into code/developer hand-off
• Integrations: Adobe products, Sketch, Figma, Slack more
• Price: $19/mo – $100/mo
• Free trial: Yes, 14-days

#14 LogicalPlan – Best software for web design project planning

LogicalPlan is the software on this life we are the most excited to see grow. In short, LogicalPlan is a project and task management solution with awesome functionality for creative planning. Software is the most useful when it can eliminate as many tools as possible. LogicalPlan has the potential to do just that.

Its task lists are very well designed, and there is also a portion of the page dedicated to a separate, more visual depiction of your tasks. You can create a mindmap, a timeline, or even another task list.

Software overview:

• Platforms: Browser, i0s, Android
• Best for: Creating and managing web design plans and tasks
• Integrations: iPhone and Android phones
• Price: $0 – $9/mo
• Free trial: Yes, free version

#15 Abstract – Best version control software for designers

As we previously mentioned, making version control a more viable option for designers is something we want software developers to put more of a focus on. Abstract does just that.  Abstract is the first tool (that we are aware of) built specifically to provide version control for static designs. Currently, Abstract can only be used with Sketch but there is a beta version of an Adobe XD plugin.

In addition to version control, Abstract also offers design collaboration and developer handoff functionalities.

Software overview:

• Platforms: macOS
• Best for: Designers using Sketch and needing version control
• Integrations: Sketch and Adobe XD
• Price: $9/mo – $15/mo
• Free trial: Yes, 14-days

Coming soon: an ongoing list of new software for web designers. Check back soon or sign up for a newsletter to get updated as soon as it goes live!