As a designer it is becoming a requirement to not only produce beautiful and aesthetically pleasing work, but also to have some level of basic html/css knowledge. This front-end developer work has now become a necessity for most designers as the world immerses itself further and further into the digital space.
For an e-commerce company the power of digital design is endless. Certain aesthetic changes such as: typography, elemental hierarchy, and subtle page elements can make or break how a consumer interacts on a endless see of connected devices. That being said, one of the most important tools to test any variable of design breaks out of the adobe mold — welcome Google Chrome developer tools. Chrome’s developer tools features not only provide an easy and efficient way to test code changes without implementing them onto a live site, but they also give you the source of a live preview editor (an interactive dream for any graphic designer).
While originally targeted toward developers Google Chrome provides a number of tools to address design related issues. For starters the style pan includes ALL css styles that apply to the element selected. This is not only helpful for minor issues, such as a showing a client a “tad darker shade of blue,” but also allows you to troubleshoot why a certain style might not be applied. Just like PEMDAS there is an order of application that all codes follow. Google Chrome is what allows you to see which rules are over-ridding each other.
Need to get that PERFECT shade of mint? Well now you can with the color picker. The style pane allows to adjust opacity as well as selecting any color within the browser, creating perfectly matched elements within your design.
Next in line we have the enable/disable feature that allow you to turn on and off certain rules or styles, just like visible layers in photoshop. Bye bye to the days of coding, saving a page, and comparing to see which layout you like best. Similarly Chrome allows you to edit styles in place, adding and subtracting styles, classes, rules, you name it.
Paranoid that spacing is just…off? Well the box model at the bottom of your style pane will notify you. It gives you a visual representation of your div, padding, margin to ensure your spacing is accurate and even double clicking to change those values in place.
Perhaps the most useful element, in my opinion, is the device mode checker. It gives you the ability to emulate different size screens, including multiple mobile options; therefore, allowing you to course correct any responsive design issues and mobile friendly UX.
All in all, for those indecisive designers (which lets be real, is every designer at their core) developer tools will be your new best friend. But shhh, don’t tell illustrator.