Go-To Tools for Web Design 2022
Nowadays, there are so many tools at our disposal as designers and it seems like new ones are coming out every day. It’s impossible to keep up with all of them, so having a list of go-to tools is crucial.
Check out my 8 go-to tools for web design and custom software solutions that cover everything from image optimization to open-source illustrations.
1. Image Optimization
One item pertinent to your web design needs is ensuring that your image file sizes are reduced. Reducing the size of your images increases your website’s page speed which is crucial nowadays. If your website takes even a fraction of a second too long, you’re most likely going to lose those possible conversions. That’s why my go-to tool for this is ImageOptim.
As soon as high-fidelity designs are approved and ready for dev handoff, I export all of my photography assets and then start the process of reducing their sizes. ImageOptim is super user-friendly and just a download away. It shows you the size of the file and how much you save with it once it’s done optimizing. What’s also nice about this tool is it updates the file in your folder, versus creating a duplicate file! You just drag in the file you want to be reduced and when you see a checkmark on the left side of the screen, you’re done!
2. Color Palette Generator
If you ever get stuck on color palettes or just need some color inspiration, check out Coolors. Coolors is an online tool that generates color palettes with the press of a button. You can generate full-color palettes, explore palettes, pull palettes from images, and so much more. The primary tool I use here is the generator. Say you have a primary color in mind for a brand but are not sure about the remaining elements. All you need to do is type in the hex code of that primary color, click on it to lock it in, and then press the space bar to generate all the other colors. As you see colors that you like for that aesthetic, lock those in and keep generating until you have a palette you’re pleased with.
3. Contrast Checker for Accessibility
When designing websites, something to always be thinking about is color contrast. You want to make sure that the colors you’re using are accessible and you can do that with the WCAG Color Contrast Checker. You just have to enter the foreground and background colors through either their hex codes or RGB values and the website does the rest. It will generate the contrast ratio, compliance results, and even shows you how those colors look together. When it comes to the contrast ratio displayed, the higher the number the greater degree of contrast. To pass accessibility compliance, you will need to be at or above the ratio of 4:5:1.
4. Resources for Design Practices
As web designers, there’s an abundance of items that need to be accounted for that sometimes are overlooked. It can get a little overwhelming to remember every single one and that’s why Checklist Design is a great resource. It’s a website that defines all of the critical elements of design in a checklist format. Say for example you’re building out a design system and you’re working on buttons. You can go to the elements tab, find buttons, and then it will show you a checklist of everything you need to have designed out. You’re able to check off items once you’ve completed them which is a nice element in addition to the recommended article links on the right-hand side.
5. Checking Responsiveness
Once your website has transitioned from design to development, testing is crucial to make sure that it’s fully responsive. With how mobile-first of a society we are today, part of our jobs is to confirm that our designs change seamlessly between varying screens. Once there’s a link for your website, Google’s DevTools Device Mode is key for testing this. It allows you to go through each page of your website and test it on specific devices.
To do this, right-click on your page, select inspect, and then on the top left of the toolbar you’ll see an icon of two devices together. Click that to open up the testing environment and you’ll see the dropdown of device selections and the screen adapts based on which device you select. From here, start a design audit to capture anything that needs to be updated.
6. Website Load Speed
Not sure if your website is loading at the speed you want? You can use Page Speed Insights to run a diagnostics test for both mobile and desktop from a user’s perspective. The only thing you need to do is enter your website’s URL and then click analyze. This tool breaks down mobile and desktop through an overall performance score, metrics, opportunities, diagnostics, and also a passed audit section.
Each of these sections goes into further detail on each line item so you can see right where your pain points are. The opportunities section is specifically helpful to look at because it showcases items that you can target initially to get your score higher and your site loading faster. This in turn is going to make your user’s experience that much better which will help with conversions ultimately.
7. Spelling and Grammar Checker
Spelling and grammar mistakes may seem small, but it’s those small details that make you stand out from your competitors. If your website copy is full of misspelled words and misused punctuation, even if you know what you’re talking about, it’s going to lessen the quality of the website as a whole. That’s why Grammarly is a tool that’s a must. Grammarly will identify all of those errors and show you how to update them with just a single click, and it also suggests different phrasing when needed. Having this as an installed app on your computer and also as a plug-in through Chrome, it catches all of those little errors before they even have a chance.
8. Open-Source Icons & Illustrations
During the wireframing process, having open-source items like icons and illustrations are a great tool to have. It saves a tremendous amount of time initially and allows for more time to be spent on concept and design, versus creating elements that may change or be removed later on. When it comes to illustrations, unDraw is an open-source collection that allows you to adjust the primary color in said items, and then the ability to download either an SVG or PNG of it.
Tools.design on the other hand is a full archive of icon sets, both free and paid, as well as icon stock libraries that are free too. Combine both of these open-source libraries and you have a powerful tool at your fingertips.
