I’m always looking for inspiration, checking my development work, and taking screenshots for projects I’m working on in Chrome/Safari. To streamline my workflow and learn more about my craft, I use a certain set on bookmarklets, plugins and add-ons. Here are five very useful plugins for web designers and developers:
Most developers probably already know about Firebug. This incredibly useful plugin lets developers inspect HTML elements and their corresponding CSS styles to debug code, or to find out how other websites have achieved a certain effect. Firebug also allows users to modify both the HTML and CSS in real time to see how changes will affect the web page.
Aside from that, hovering over an element in Firebug shows CSS metrics: the padding, margins, width and height of elements come up as colored blocks. This is a great way to find out why there’s weird spacing or why elements aren’t lining up correctly when coding out a webpage.
Firebug also includes other features aside from viewing and editing code:
- Monitor loading speeds of every element on the page
- View and manage cookies
An obsession with colors come with the territory of being a designer. ColorZilla allows designers to pick out colors directly from the webpage and copy the hexadecimal color code to use in their own projects or to make a color palette. This plugin is also helpful for developers who need to copy color codes from one part of a website, in order to use it on another element.
ColorZilla is more robust in Firefox than in Chrome, however. In Firefox, the color picker is easier and quicker to use – there are less clicks required in order to pick a color.
In Chrome, users would have to open the ColorZilla widget, click “Pick color from webpage,” choose a color, open the widget up again, choose the last color picked, and finally copy the code. In FireFox,users just click the ColorZilla icon, pick a color, and the color code is automatically copied to the clipboard. Firefox’s ColorZilla add-on also gives us access to RGB values, X/Y coordinates, position in the DOM, CMYK values, gradient generators, and copy/paste CSS codes.
MeasureIt is a ruler extension used to measure elements in your browser; it’s available for Chrome, Firefox and Safari. Meant for web designers and developers, this tool measures areas of a page by its width and height in pixels.
Measure also serves as a straightedge to see whether elements of a page line up exactly. You won’t need to hold a book up to the screen anymore, Taylor!
4. Aviary Screen Capture
Aviary is awesome. They’ve created a whole set of great tools for creatives, from music editors to vector editors to image markup, including a screenshot plugin. Their screen capture plugin is a complete lifesaver for anybody who needs to take screenshots of webpages.
What makes Aviary different from just taking a screen capture using your system’s native screenshot tools is that Aviary allows you to take an image of a whole webpage. Instead of just capturing everything above the fold, Aviary captures the page from header to footer. Of course, there’s also an option to capture just a portion of a screen, which is useful for PC users (since that feature is available for Macs already).
After taking the screenshot, Aviary allows users to annotate and make edits to the image before they save it. Users can crop the screenshots, include text, and add shapes, lines and arrows. There’s a more advanced editor/image effects, but simply saving the image and bringing it into Adobe CS programs might be more beneficial.
StumbleUpon is a browser extension that brings its users to new and interesting websites, depending on their interests. While StumbleUpon is known more as a procrastination tool than something useful (rage comics all day!), the StumbleUpon add-on allows users to stumble on pages in a certain interest only.
By turning off all other interests and only focusing on web design (or graphic design/web development/internet tools), users can discover lots of great articles, tools, and inspirational websites. StumbleUpon is actually how I found out about all the other browser extensions in this blog post!
These are the browser extensions I use on a daily basis. If I missed a good one, let me know in the comments!