Communicating design changes between the client and your development team often requires translation. The translation is often semantics but a very important skill for productivity. Communication breakdowns between the client and your team, especially in design, can be critical and annoyingly circular, that is why is always recommended to use automated test tools to keep going with the productivity.

Aside from color changes, moving elements around and resizing certain elements in a mock up are some of the most often requested design changes. I have found a few useful browser tools to increase web design productivity for myself and in turn, my team.

Browser Tools for Web Design

Many of the tools below can also be used the old-fashioned way by right clicking and selecting the inspect element option. Then you can use the editor to see how certain changes would look on the page. However, if you need to give direction to a development team without going into the source code for information and editing, using the following Chrome browser extensions can save you time and headaches.

Window Resizer for Chrome

A tool that is helpful to view how web pages will be seen at different screen resolutions is Window Resizer for Chrome. The browser extension resizes your current browser to emulate a different resolution. This allows you to discuss and test locations for elements like banner size, conversion forms, navigation and menus, as well as anything else in regard to above-the-fold considerations. The extension has many of the common default resolutions for desktop, laptop, and mobile devices as well as a custom setting for unique resolutions.

Eye Dropper for Chrome

The Eye Dropper for Chrome tool is an extension I use almost daily. I love graphic design and aside from it being beneficial to communicate exact hexadecimal colors to design and development if possible, I myself want to “get it right” too. There are browser tools that will tell you all of the colors used on a web page in list form, but what if you want to just know one color? The Eye
Dropper tool, using an icon similar to the Photoshop eye dropper, make finding the color of that single element on the page easy. The eye dropper tool allows you to hover over an item and view the hex color live as you move over the web page’s grid. In addition, you can click on a location on the page and it will store the hex color for you so you can inspect multiple items in one use of the browser tool. If the hex color is not what you’re looking for, then you can tell the Chrome extension to select the RGB color instead. Communicating exact hex colors to your design and development team takes away the guess work and allows them to make changes to a clients exact specifications as well as yours.

Page Ruler for Chrome

The inspect element option for web browsers is a very useful exercise when you want a wealth of information and a great live editor. Often, communicating exact design element changes for size and location to your graphic or dev team can decrease the back and forth you might encounter if you sent changes in for a new mock up. Taking the guesswork out of the equation for your designers and developers will save everyone time and frustration. Instead of telling someone it needs to “pop” in the upper right quadrant of the page, use the Eye Dropper tool and the Page Ruler extension for Chrome and say, “Use #ff6600 on the conversion form and place it 1250 pixels to the right and 150 pixels from the top.” The Page Ruler extension allows you to draw out a ruler area on a live web page giving you the height, width, and position of the drawing on the page. As an added feature, you can CTRL click any element on the page and it will give you the dimensions and location of the live element.

Ratio Calculator for Chrome

The Ratio Calculator for Chrome is a simple extension tool that gives you easy access to determining the new aspect ratio for an inspected element on a page or just any ratio in general. For images and video, it was cumbersome to open up Photoshop, create an element at a certain size, and resize the image using “constrain proportions” to figure out what the new size should be. This simple tool, right in your browser, allows you to plug and play numbers to determine new widths and heights within an aspect ratio so that you can properly communicate new dimensions to a designer and developer. If you wanted to communicate a new size for a video on the page, plug in the current width and height of the element, and then plug in the new width or height and the ratio automatically calculates the rest of the information you need to precisely communicate your intentions.

Evernote Web Clipper

There are many useful and robust screen capture browser tools and I could ask 5 people in the same office and receive 5 different answers. I have used Awesome Screenshot among others and for complete transparency, I actually use Windows OS’s Snipping Tool most often. However, I have also recently begun exploring the usefulness of Evernote. In turn, I have recently used the Evernote Web Clipper for Chrome. The desktop Snipping Tool doesn’t allow for full web page capture so tools like the Evernote Web Clipper has it’s advantages even in basic functionality. The added functionality is the integration into your Evernote account right from the plugin. Saving the entire web page can help you with version history of test server pages while clipping individual sections of pages can help communicate design changes, technical issues with a page, or create a visual aid for educating a client in a step by step process such as setting up a non-Gmail email address as a new Google account.

Browser Tools for Productivity

In the end, these web browser tools are about productivity. While I inevitably fail at times, I have found no better way to increase productivity than communication. These extensions for Chrome can help improve communication by giving the details and specific information needed to accurately portray the action needed by other team members. And when your team is clicking because of better communication and resulting action, the client wins.