Updated on 9 November 2026 by Nicolas Finet, CEO of Sortlist. This guide has been rewritten for 2026: it replaces tools that are no longer current, adds current pricing for design, no-code and CMS platforms, and covers AI features, accessibility and performance testing.
Web design involves many different jobs: designing layouts, building them, testing on devices, keeping pages fast and secure, and working with others. No single tool does it all, so teams assemble a toolkit. This guide groups the main web design tools by job, with current prices and practical advice on choosing.
Key takeaways
- Figma is the dominant interface design and prototyping tool: a free Starter plan exists and the Professional plan starts at about $16 per full seat a month on annual billing.
- For building sites without code, Webflow and Framer sit alongside WordPress (about 40% of the web, according to W3Techs) and website builders such as Wix and Squarespace.
- Test every site for speed and accessibility. Google's good Core Web Vitals thresholds are LCP 2.5 seconds, INP 200 milliseconds and CLS 0.1.
How to choose web design tools
- The job: design, prototype, build, test or collaborate.
- The team: solo designer, in-house team or agency; designers who code or developers who design.
- Collaboration: real-time editing, comments, hand-off to developers.
- Ecosystem: integrations with your CMS, analytics, design systems and project tools.
- Cost: licences per seat, usage-based credits and hosting.
- Skills and learning curve: time to be productive.
- Accessibility and performance support: built-in checks and clean code output.
Web design tools at a glance
| Category | Tools | Typical use |
|---|---|---|
| Interface design | Figma, Sketch, Adobe Photoshop and Illustrator, Canva | Layouts, components, graphics |
| Prototyping and wireframing | Figma, Balsamiq, Axure RP | Flows, interactions, usability testing |
| No-code and low-code builders | Webflow, Framer, Wix, Squarespace | Build and host sites visually |
| CMS | WordPress, Drupal, Joomla, headless CMS | Manage content at scale |
| Code and development | VS Code, Git and GitHub, browser dev tools, frameworks | Custom builds and debugging |
| Responsive tools | CSS Grid, Flexbox, Bootstrap, Tailwind CSS | Layouts that adapt to screens |
| Collaboration | Slack, Trello, Asana, monday.com, Notion | Communication and project management |
| Performance | PageSpeed Insights, Lighthouse, GTmetrix, WebPageTest | Speed and Core Web Vitals |
| Accessibility | axe, WAVE, Lighthouse, contrast checkers | WCAG compliance |
| Security | TLS certificates, web application firewalls, vulnerability scanners | Protect the site and users |
Graphic and interface design tools
Figma
Figma is a browser-based design tool built for collaboration: several people can edit the same file, comment and share components. It handles interface design, design systems and prototypes in one place. Reported 2026 pricing: a free Starter plan; Professional from about $16 a month per full seat billed annually; Organization from about $55 and Enterprise from about $90, with cheaper seats for developers and viewers. Its AI features (such as Figma Make) are credit-based, so check usage costs.
Sketch
A Mac-only interface design tool with a long history. It remains popular for teams that prefer a native application, but its cross-platform collaboration is more limited than Figma.
Adobe Creative Cloud
Photoshop and Illustrator remain the standard for image editing and vector graphics, often used alongside a UI tool. Adobe XD, which was once Adobe's UI design product, is no longer actively developed, so most teams have moved to Figma or similar. See graphic design in advertising for how design decisions affect results.
Canva
Canva is useful for marketing graphics, social posts and quick visuals rather than detailed UI design. Pro pricing for UK users has been reported at roughly £100 a year, but check Canva's current UK page.
Prototyping and wireframing tools
- Figma: interactive prototypes with transitions, variables and conditional logic; user testing links.
- Balsamiq: low-fidelity, sketch-style wireframes that keep attention on structure rather than appearance.
- Axure RP: advanced prototyping with logic and documentation for complex applications.
InVision, once a popular prototyping platform, shut down at the end of 2024, which is a reminder to avoid locking critical work into a single vendor. Export and back up your files.
No-code and low-code website builders
| Tool | Best for | Pricing (approx., 2026) |
|---|---|---|
| Webflow | Designer-built marketing sites with CMS | Site plans from free to about $25 a month billed yearly (Basic $15; Premium $25) |
| Framer | Design-led sites, fast publishing, animation | Free; Basic about $10 a month; Pro about $30 a month |
| Squarespace | Small businesses and portfolios | About £12-£79 a month in the UK, billed yearly |
| Wix | Small sites and online stores | Plans vary by location; entry ecommerce plans around £16 a month, per UK comparisons |
Prices are in the currency reported by vendors and review sites and change often; Webflow and Framer prices are in US dollars and Squarespace and Wix in pounds. Check each vendor's UK pricing and VAT treatment. Many builders include hosting, SSL and basic SEO tools. For help deciding when to hire a professional, see website design quotes and website creation agencies.
Content management systems
WordPress
WordPress powers about 40% of websites, according to W3Techs, so it has the largest ecosystem of themes, plugins and developers. Page builders such as Elementor are used on a large number of WordPress sites. WordPress is flexible, but it needs maintenance: updates, backups, security and performance tuning. See our WordPress tutorial.
Drupal and Joomla
Drupal suits complex, structured and enterprise-scale sites. Joomla offers a middle path with a smaller community than WordPress.
Headless CMS
A headless CMS stores content and delivers it by API to any front end (a website, an app, a kiosk). It suits teams with developers who want full control of presentation.
Hosted builders
Wix, Squarespace, Webflow and Shopify (for stores) manage hosting and updates for you, at the cost of some flexibility.
Development tools
- Code editors and IDEs: Visual Studio Code is the most widely used editor, with extensions for almost every language; JetBrains IDEs suit larger projects.
- Version control: Git, with GitHub, GitLab or Bitbucket for hosting, branches and review.
- Frameworks and libraries: React, Vue, Astro and others for modern sites; consider performance and maintenance.
- AI coding assistants: useful for boilerplate and debugging; always review the output for accuracy and security.
Responsive design tools
- CSS Grid and Flexbox: the modern, built-in layout systems that handle most responsive needs.
- Bootstrap and Tailwind CSS: frameworks that speed up responsive layouts with ready-made classes and components.
- Browser developer tools: device emulation in Chrome DevTools, Firefox Developer Tools, Safari Web Inspector and Edge DevTools lets you inspect layouts, debug CSS and test different screen sizes.
Always test on real devices, because emulators miss touch behaviour and performance. See responsive websites.
Collaboration and project tools
- Slack or Teams: daily communication.
- Trello, Asana and monday.com: boards, tasks and timelines.
- Notion or Confluence: documentation and design-system guidelines.
- Figma comments and dev mode: feedback and hand-off from designers to developers.
Performance optimisation tools
“Site owners should aim for good Core Web Vitals metrics: Largest Contentful Paint (LCP) under 2.5 seconds, Interaction to Next Paint (INP) under 200 milliseconds, and Cumulative Layout Shift (CLS) under 0.1.”
Google Search Central, Core Web Vitals
- Google PageSpeed Insights and Lighthouse: lab and field data with recommendations.
- Search Console: the Core Web Vitals report shows real-user data across your site.
- GTmetrix and WebPageTest: detailed waterfalls and test locations, including the UK.
- Pingdom: uptime and page-speed monitoring.
The most common fixes are compressing images, serving modern formats, reducing JavaScript, using caching or a CDN and limiting third-party scripts. See the Google SEO guide for more.
Accessibility tools
Accessible design is good practice and, for many organisations, a legal and reputational matter. Use WCAG 2.2 as your standard: for example, normal text needs a contrast ratio of at least 4.5:1.
- axe DevTools and WAVE: automated checks for common issues.
- Lighthouse accessibility audit: a quick baseline.
- Contrast checkers: verify text and button colours.
- Manual testing: keyboard-only navigation and a screen reader, because automated tools catch only part of the issues.
Security tools
- SSL/TLS certificates: encrypt traffic and show the secure padlock; many hosts provide them free.
- Web application firewalls (WAF): block common attacks; many CDNs include one.
- Vulnerability scanners: find outdated components and misconfigurations.
- Good hygiene: keep software updated, use strong passwords and two-factor authentication, and back up regularly.
AI in web design tools
Most major tools now include AI: generating layouts from prompts, producing code from designs, writing copy, suggesting colour palettes and fixing accessibility issues. These features speed up first drafts, but they raise questions of originality, accuracy and cost. Many are credit-based, with fees that depend on usage. Treat AI output as a starting point: check design quality, code, accessibility and licensing before launch.
Choosing the right stack: examples
| Situation | Suggested toolkit |
|---|---|
| Freelance designer building small business sites | Figma, Webflow or Framer, PageSpeed Insights |
| Small business owner | Squarespace or Wix, Canva for graphics |
| Content-heavy publisher | WordPress or a headless CMS, Figma for design, Search Console |
| Agency building bespoke sites | Figma, VS Code, Git and GitHub, a framework, WebPageTest, axe |
Frequently asked questions about web design tools
What is the best web design tool?
There is no single best tool. Figma is the most widely used for interface design and prototyping; the best choice depends on your task and team.
Is Figma free?
Figma has a free Starter plan. Paid plans start at about $16 a month per full seat on annual billing, with extra costs for some AI features.
Is Adobe XD still available?
Adobe XD is no longer actively developed, and most teams have moved to Figma or similar tools.
Should I use WordPress or a website builder?
WordPress offers flexibility and a huge ecosystem but needs maintenance. Builders such as Wix, Squarespace, Webflow and Framer are simpler to run but less flexible.
How do I test my site's speed?
Use PageSpeed Insights, Lighthouse and the Core Web Vitals report in Search Console. Aim for LCP 2.5 seconds or less, INP 200 milliseconds or less and CLS 0.1 or less.
Do I need accessibility tools?
Yes. Use automated checks such as axe or WAVE alongside manual keyboard and screen-reader testing, and follow WCAG 2.2.
Need help designing or building a website? Post your project on Sortlist and compare UK web design agencies for free.
Sources: Figma pricing, Webflow pricing, Framer pricing, W3Techs, WordPress usage, Expertsure, Wix vs Squarespace UK, Google, Core Web Vitals. Prices change often.
