Insights

< Back to Insights

I'll Get You Next Time, Inspector Gadget!

When designing for the Web, we are often either handing off resources to an engineer or working with an engineer closely to make sure that our wonderful designs and layouts are matched perfectly. There is always room for error even when working closely as we are playing a wonderful game of design telephone, unfortunately for us it’s nowhere near as fun, and generally there are no winners.

The standard process in my experience is to hand off resources such as PSDs, PNGs, and Icon sets. While this is certainly a good starting place, there is sometimes a lack of follow-up to ensure the implemented design matches the original. The common frustration being we have no tools to help them engineer the solution.

Well it just so happens there is. Enter ‘Inspector’, a tool that I use nearly every day. All modern Web browsers have this tool, it allows you to view the HTML, JavaScript, and most importantly for us, CSS. Not only can we view it, but we can live edit it too. This allows us to update the CSS to best match our original designs, and then send off the updated CSS values to our engineers.

The simplest way to open an inspector on a page is to right click > inspect. There are also keyboard shortcuts to get to the inspector for each browser if that is your preference. Once we are in an inspector we can begin viewing and editing CSS. Now I know not every designer knows HTML and CSS, and that’s ok. Here’s a great resource to learn some basics. Browse around the CSS rules for a bit and start playing.

Other than being able to help adjust CSS on client projects, you can also use inspector to get design values you might want form other websites. Need to know the client’s color palette but they haven’t sent it to you? Go to the website, open inspector, and find those background colors and font colors. Is there a really cool element on a page and you want to know how to replicate it?  Go Go Gadget Inspector!

Inspectors are great tools that I highly recommend every designer learns to use, not only for improved client work results, but also for your own personal improvement as a designer. There is so much to cover in the inspector but we’ll call this a brief intro; I’ll be back with more inspector tips and tricks next time.

Ready to take a deeper dive? Tweet @VerndaleTweets using #DesignThinks or drop us a line here to learn how to take the next step!