Web Design
Web Design Tools Explained: What Designers Use and Why It Matters
We use a set of design and testing tools on every website we create. This guide is for business owners who see tool names in a design proposal and want to know what they mean. It covers design and prototyping tools, accessibility and testing tools and feedback tools. Use it to understand a designer's process, so you know how your site will be planned and checked.
Design and prototyping tools
Designers create page layouts and clickable prototypes before any code is written. A prototype lets you click through the site and give feedback early. Changes at this stage cost far less than changes after the build. These are the main tools you will hear about.
| Tool | What it does | Why it matters to you |
|---|---|---|
| Figma | Designs pages and clickable prototypes in the browser | You review and comment on designs from any device |
| Adobe XD | Designs layouts and simple prototypes | Common in older proposals and existing projects |
| Adobe Photoshop and Illustrator | Edits images and creates graphics and icons | Consistent, high-quality visuals across the site |
| Canva | Creates simple graphics and social images | Easy for your own team to make matching visuals later |
Ask whether you will receive a clickable prototype before the build starts. Seeing the layout on your own phone helps you spot problems early. Agree how many rounds of design changes are included.
Accessibility and testing tools
A good website works for every visitor, including people who use screen readers or keyboards. It also loads quickly and works on every common device. Designers use testing tools to check these points before launch. These are the tools to look for in a proposal.
- WAVE or axe, which check pages for common accessibility problems.
- Colour contrast checkers, which confirm text is readable against its background.
- Google Lighthouse and PageSpeed Insights, which measure speed and accessibility scores.
- Real-device testing on phones and tablets, alongside browser previews.
- Keyboard-only checks, which confirm every link and form works without a mouse.
Accessibility is not only good practice; UK businesses also need to avoid excluding disabled customers. Ask the designer which checks they run and when. Our guide to web development tools covers the build-side tools.
Feedback and project tools
Clear feedback keeps a design project on time and within budget. Shared tools stop comments getting lost in long email chains. They also give you a record of what was agreed. Look for these tools in a designer's process.
- Comments directly on designs in Figma or a similar tool.
- A shared project board, such as Trello or Asana, for tasks and deadlines.
- Screen-recording tools, such as Loom, for walk-throughs of designs.
- A single feedback document for each review round.
- A sign-off step before each stage moves forward.
Agree how you will give feedback before the project starts. One combined list per review round works better than scattered messages. Our guide on what to include in a web design brief helps you set expectations from the first day.
Web design tools checklist
Use this checklist when you review a design proposal. Each item shows how the designer plans, tests and manages your project. Ask about anything that is missing.
- Design and prototyping tool named
- Clickable prototype shared before the build
- Number of design revision rounds agreed
- Accessibility checks listed in the proposal
- Real-device testing on phones included
- Feedback tool and review process agreed
- Sign-off step before each stage
Good to know
Web design tools FAQs
What is the most popular web design tool?+
Figma is one of the most widely used web design tools. It runs in a browser, so clients can view and comment on designs easily. Adobe XD and other tools appear in some projects. The designer's skill matters more than the tool they choose.
Do I need to buy any design software?+
No, you do not need to buy software to work with a designer. Most tools let clients view and comment on designs for free. You only need an account if the designer invites you to one. Ask for a short guide to giving feedback in their tool.
What is a website prototype?+
A prototype is a clickable model of your website before it is built. It shows the layout, navigation and key pages. You can test it on your own phone and suggest changes. Fixing issues at this stage costs much less than after the build.
How do designers check accessibility?+
Designers use automated checkers, contrast tools and manual testing with a keyboard. Automated tools catch common issues, but manual checks find more. Good designers build accessibility into the design rather than fixing it at the end. Ask to see the results before launch.
Keep this guide beside any design proposal you review. Share it with anyone who will give feedback on your site. So you can follow the design process with confidence and spot gaps before they cost time.
Last updated