This one’s for all of you web designers — we’ve rounded up some tools that we think you’ll find particularly helpful in your day-to-day workflow! Keep scrolling through to check out a hand-picked list of Google Chrome extensions for your web browser that just might change the way you work.
From checking your website for usability, identifying fonts, testing out responsive designs, and more, get ready to add a whole new layer of efficiency to your workflow. Who knows, you might even discover some tools you didn’t even know you needed! We hope you enjoy and don’t forget to check out our roundup of Chrome extensions for every kind of designer to download even more handy resources.
1. UX Check
UX Check works to inform you of any possible usability issues on a website without having to involve real users. The extension calls out any areas of your website that need improvement based on Nielsen’s ten usability heuristics — a list of general principles for designing user-friendly interfaces. This is an ideal tool if you’re not able to conduct usability testing with users themselves. You can even export the feedback into a document to share with other team members later on!
2. Fontface Ninja
Are you the kind of designer that loves getting font inspiration from typefaces you come across on the web? Instead of furiously searching for the font online, try using Fontface Ninja, a Chrome extension that lets you hover over the text on your screen to instantly help you identify a font, it’s size, line spacing, letter-spacing, and even the color hex code.
On top of that, Fontface Ninja enables you to test the font out yourself with whatever text by typing something out in the extension’s drop-down window. If you absolutely love it, there’s a handy link for you to find the web font’s source so you can purchase and/or download it for free.
3. Page Ruler Redux
Page Ruler Redux is the web designer’s (and web developer’s!) go-to digital ruler. Use the extension to get an accurate, pixel-perfect measurement of any web page element on your screen. Simply drag the ruler across any section of a website, and inspect the selected element’s height, width, and position. You can even adjust the ruler’s color to ensure there’s enough contrast depending on the website’s background!
4. Color by Fardos
This is more than just your average color picker or eyedropper tool. In addition to identifying color hex codes on the web, Color by Fardos comes with a few other helpful features: Identify a color’s different shades and tints, get color pairing recommendations based on color theory, and also grab the CSS for any gradient straight from your browser. This is a perfect way to get inspired by other website’s color palettes, without having to replicate them exactly.
5. Window Resizer
This brilliant Chrome extension enables you to re-size your browser window to mimic all kinds of different mobile and desktop resolutions — perfect for quickly testing out responsive web designs. View your layouts on different browser resolutions and ensure your web designs look top-notch across all devices. While the tool comes with a few pre-set resolutions to choose from, you can also customize those as you please through changing the window’s size, height, and position.
That’s a wrap! We hope you find some use out of these Google Chrome extensions. Find them in the Chrome web store to test them out and see how much they enhance your browsing experience and overall workflow. For more hand-picked design resources to explore, check out 7 best illustration resources to use in your web designs, and 6 handy color palette picking tools.
Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
