10 Best Chrome Extensions for Web Designers
In this article I highlight my top 10 chrome extensions for web designers. These extensions save a lot of time for me on a daily basis. I hope you will find them useful as well!
1. Window Resizer
Window Resizer lets you resize the browser window in order to emulate viewing at different screen resolutions. It’s a very useful tool, when testing if your design works on a range of screen resolutions. You can also add custom screen resolutions, and choose to base the window resizing on either the browser window or the browser viewport.
2. Full Page Screen Capture
So I have used a lot of different screen capture tools in the most recent years. Full Page Screen Capture is the best one I have come across so far. It’s very easy to capture a screenshot — just press Alt+Shift+P on Windows and the extension captures each visible part of the page until it reaches the end of the page. After that you can simply right click the image and save as. Very straight forward, and it saves me a lot of time when I want to capture multiple screenshots in the same screen resolution. This tool also works well when combined with Window Resizer, the tool I mentioned just before.
3. Perfect Pixel
This tool can be very useful when checking if your design has been implemented correctly. Perfect Pixel is basically a tool which allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform pixel per pixel comparison between the images. Again a tool that saves me a lot of time.
4. Check My Links
So this chrome extension is great when I want to make sure that all my links are working for my blog (or other web pages for that matter). Check My Links quickly finds all the links on a web page, and checks each one of the links for you. It highlights which links that are valid and which links that are broken.
5. What Font
What Font is a chrome extension that finds out which font family, font size, font style, font weight, line height and font color that a web page uses. All you need to do is to activate the plugin and then click the font that interests you. That’s it! Personally I find it much easier to use What Font, than having to go through the CSS files or Chrome Dev Tools.
6. Spectrum
A great tool when testing your web page with different types of color vision deficiency. Spectrum ensures that the colors you use on your web page is easy to distinguish for everyone, regardless of ability.
7. Page Ruler
Page Ruler lets you draw a ruler to get pixel dimensions and positioning, and measure elements on any web page. This extension can be very useful in order to see the exact size of elements, or to check if elements line up correctly with each other.
8. Color Zilla
Color Zilla is a fantastic chrome extension for checking if an implementation uses the colors that you use in your original design. You can also use this extension to find out the colors of an existing web page, or in another design that you like. The extension also comes with additional features, such as generating a CSS gradient or getting colors of dynamic hover elements.
9. Panda 5 | News and Inspiration Dashboard
So, Panda 5 is basically a tool that replaces your default tab with a news feed. You can decide which type of news that interests you, such as design or entrepreneur related news. This is a nice tool if you want to stay up to date in an easy and efficient manner.
10. Corporate Ipsum
This is a twist on the classic Lorem Ipsum generator, now with a more corporate feel. Use Corporate Ipsum to generate filler content in a design, either by the word or by paragraph.
