Resources
Web Design Tools to Consider
There is no single best toolkit — only the right fit for your team, budget and project. This hub maps the main categories and lists tools to consider in each, without rankings or sponsored opinions.
Choosing tools is mostly about constraints: who will maintain the work, how much you can spend, and how much control you need over the final output. We deliberately avoid “best” lists here. Instead, each section below describes what a category is for and names a few options to consider, so you can shortlist and trial them yourself. Mentions are informational and do not imply any partnership or endorsement.
Site builders & frameworks
Where your site actually gets built. The right choice depends on who maintains it and how much control you want over markup and performance.
Tools to consider
- WordPress
- Webflow
- Astro
- Framer
- Eleventy
Visual builders are quick to start and friendly for non-developers; code-first frameworks trade setup time for speed, flexibility and lighter output. Match the tool to the team that will maintain the site, not to the trend of the month.
Wireframing & prototyping
Tools for thinking before building — laying out structure, testing flows and sharing ideas without writing production code.
Tools to consider
- Figma
- Penpot
- Excalidraw
- Whimsical
Low-fidelity wireframes are about decisions, not pixels. Start rough, agree on hierarchy and flow, and only raise the fidelity once the structure is settled. Penpot and Excalidraw are worth a look if you prefer open-source options.
Graphic design tools
For interface design, illustration, icons and the visual assets that surround your content.
Tools to consider
- Figma
- Affinity Designer
- Inkscape
- Photopea
Vector tools keep logos and icons crisp at any size; raster editors handle photography and detailed artwork. Many small teams run almost entirely on one collaborative design tool plus a free image editor for the occasional fix.
Image optimization
Often the highest-impact, lowest-effort win for performance. Smaller, modern images load faster and improve Core Web Vitals.
Tools to consider
- Squoosh
- ImageOptim
- Sharp
- TinyPNG
Export to modern formats such as WebP or AVIF, size images to how they are actually displayed, and automate compression in your build where you can. Our article on visual assets covers the why in more detail.
AI-assisted design tools
Helpers for drafting copy, generating placeholder imagery, summarising research and speeding up repetitive steps.
Tools to consider
- AI writing assistants
- Image generation tools
- AI plugins inside design apps
Treat these as assistants, not autopilots. They are good at first drafts, variations and boilerplate; you remain responsible for accuracy, accessibility and taste. See our guide on AI in web design workflows for a grounded view.
Code-friendly tools
For teams comfortable getting closer to the markup — editors, utility frameworks and deployment platforms.
Tools to consider
- VS Code
- Tailwind CSS
- Git
- Cloudflare Pages
- Netlify
A code-friendly stack rewards you with control and performance. A modern editor, a utility-first CSS framework and a static host cover most small projects without heavy infrastructure.
How to shortlist tools without the hype
A tool is only as good as its fit. When you are comparing options, a few practical questions cut through marketing quickly:
- Who maintains this after launch? A tool your team already knows usually beats a “better” one nobody can support.
- What does it cost at your scale? Free tiers and freemium plans are fine — just check the ceiling before you commit.
- Can you export your work? Favour tools that let you leave with your content, designs and code intact.
- Does it help or hurt performance? Lighter output and good image handling pay off on every visit.
When you have a shortlist, trial each option on a small, real task rather than a demo. The friction you feel in the first hour tends to predict the friction you will feel for months.
Build on a solid foundation of UI fundamentals
Tools help, but principles last longer. Explore UI resources for type, colour, spacing and components, or read our guides for step-by-step advice.