Web Design Tools for Planning, Prototyping and Testing
Pick tools for the stage of work you are in. A sketch is enough to decide what goes on a page, a prototype helps test a journey, and a real browser is where you can check how the finished design behaves.
Plan the structure and test the journey
Start on paper or use a wireframing tool such as Balsamiq to set priorities without getting distracted by colours. Use Figma when the team needs a shared prototype, comments and reusable components. Build a short path from a landing page to the main action, then ask someone unfamiliar with the project to try it.
Prepare assets and hand over the design
Use a vector editor for logos and icons that must scale, and an image editor for crop, colour and export. Label assets by purpose and agree on file formats with the developer. Hand over type, spacing and colour choices along with button states, error messages and narrow-screen behaviour.
Test the built site in a browser
Use browser developer tools to inspect breakpoints and check what happens when content is longer than the design sample. Test with a keyboard and on a real phone where possible. Use Lighthouse as a starting point for technical checks, then confirm any problem in the actual user journey.
