While my design skills leave a lot to be desired I have had to on the odd occasion had to design a few things here and there. Here is my collection of useful tools that I've either used myself or have learnt to use as part of the web build phase of projects. I have used these design tools to create better website wireframes, UI elements while making sure that my design is accessible as possible to all audiences.
markup.io
Markup is a simple tool to help designers and stakeholders to feedback on a website design. This is a great tool when finalising a website build as it automatically generates a screenshot of your website on desktop, tablet and mobile devices ready for you to markup. Once you've entered your URL and the screenshots are generated you can then click anywhere on the screenshot of your site and add feedback for whoever is designing or building your website. After you've added your feedback you can pass it over to the person making the amends and they can mark each amendment as completed ready for you to review.
The best part about this tool is the fact that their free plan allows you to create unlimited projects, unlimited comments on each project and unlimited collaborators so that you can share the work between a whole team of people. They have paid plan which gives you live support, the ability to manage which projects each account can view and third-party integrations.
Price: Free with paid plans available
Link: markup.io
Figma
Figma allows you to design website, app and general user interfaces. It's very similar to programs such as Sketch and Adobe XD and it can be used online through their web app or you can download it locally if you're working offline. Learning to use Figma is very easy and it's collaborative wireframing means that it's easy to work together just like you would in a Google Doc with the added bonus that you can teach basic design principles remotely to help junior team members improve their design skills.
Figma also has loads of plugins available so you can easily make use of icon packs, insert pictures from Unplash and more. This makes it extremely easy to hand over your design to your developers who can then pull assets straight from Figma into their production process.
Figma is free to use for 2 editors and up to 3 projects which will usually be more than enough for a small team who only occasionally need to work together on the same project. If your need more users or unlimited projects you can get this for $12 per month, per editor which seems very reasonably priced depending on the size of your team.
Price: Free with paid plans available
Link: Figma
UI Goodies
UI Goodies is a collection of resources for designers. It has everything from tools to assess accessibility issues within your design, animation tools, colour tools, icons, illustrations, design ideas, photography, typography and more. It's well worth taking a look at if you ever need some inspiration or are just looking for a new tool to add to your design workflow.
Price: Free
Link: UI Goodies