1. Unsplash (for images)

One of the big headaches you can get as a designer is finding quality demo content to use in designs. Sure you can use the watermarked low-quality images from stock sites such as Shutterstock and iStock, but they won’t look great, and will only take away from your design work. Then when your designs are ready to hand off to development, you need to worry about image licenses, any attribution that is required, any possible usage restrictions, where you even sourced the image from originally, etc. Headache!

Fortunately for us web designers and developers, Unsplash came along in 2013 providing totally free images and photos, with no need to provide any attribution. The free Unsplash library now contains over 3 million images that you can use and remix however you want.

Unsplash is not the only company providing this kind of service, so it’s worth mentioning that Pexels and Pixabay are also worth bookmarking too.

Since Unsplash provides a robust JSON API, some related tools have also emerged that have become really useful to us as designers and as developers. Sketch and Figma—two of our favorite design tools—have Unsplash integrations that make it really easy to import random images or faces into design layers. If you’re working on a social application, the faces option can be really valuable. You can read more about the Sketch plugin here, and Figma plugin here.

Wordpress also has a number of Unsplash plugins. The one that we’ve had the most success with is Instant Images, which also gives you the ability to search for and select images from Pixabay and Pexels.

2. Stark (for accessibility)

Accessibility is a big deal and it keeps getting bigger. With certain clients such as in higher-education, accessibility has become a requirement. But all of that aside, making websites accessible for everybody is the right thing to do… what good is usability if it only applies to some of your users? A fair amount of accessibility work falls on developers as well as content creators, but designers also have an important role to play.

Stark is a plugin available for Sketch, Figma, Adobe XD, as well as Chrome, that gives you contrast information about the text in your design. You can see the current contrast ratio between the text and its background, and also get color suggestions in order to get it to be WCAG AA and AAA compliant. There are even vision simulations available, to give you an approximation of what your design will look like to people with different kinds of color blindness, as well as people who have blurred vision.

3. InVision (for design presentation and gathering feedback)

InVision has been a total game changer for us. All of the other ways we previously presented designs to clients now seem barbaric in comparison. We primarily use InVision to present new and updated designs to clients, as well as gather feedback and have discussions about the designs… all in the context of the design. It also allows us to keep track of where individual pages are in the approval process, whether In Progress, Needs Review, or Approved.

In addition to being a great visual feedback tool, InVision offers many other features such as the ability to add hotspots to designs to turn them into a clickable prototype, Inspect (which is a developer handoff tool), a Design System Manager, and Freehand which is a collaborative and virtual kind of digital whiteboard.

InVision has some formidable competitors in terms of sharing designs, and building out prototypes, so depending on your needs you may also want to explore products such as Zeplin, UXPin, Balsamiq and Axure.

4. Icons

When you’re in the flow working on wireframes or high-fidelity mockups, nothing can slow you down like having to go hunt down an appropriate icon.

There are probably at least a few hundred really decent icon sets out there, so I’m going to offer you my top 2 recommendations. Both of these icon sets are open source, and available as SVG so that you can customize them as much as you want.

Font Awesome is actually a font that you can use, as a text layer in your designs as well as a font within your project. There are also several plugins available for Sketch, Figma and Adobe XD that can help you quickly import icons into your designs. But honestly, in terms of the design process it’s usually a lot simpler to just use SVG versions of icons.

Bootstrap Icons comes from the same people who provide Bootstrap, the popular CSS framework. It’s a very nice, large icon set that probably has every icon you will ever need.

5. Smashing Magazine

Keeping up to date with design and development trends can be a lot of work, so it’s nice that Smashing Magazine does a really nice job of curating all the good stuff for us. At the very least sign up for the free weekly newsletter. If you want to dig deeper into web design, UX, front-end coding, or accessibility, they also offer books, podcasts and workshops.