Sketching with developer tools

Written by: Dan Goodwin On: 5 Jul 2016 In: Design, User experience

Pete’s been designing up some work which came out of a sketching workshop which we ran with a client.

He quickly showed me his early ideas and we talked through them on a call. They were looking amazing. Something struck me which I thought we could improve with some simple UI styling and I tried to explain what I was getting at on the call and I don’t think Pete got it.

Screenshot of a tabular layout presenting performances and ticket prices

I said “I’ll do a sketch”. Then I remembered how bad I am at sketching. Since I was looking at styled HTML in a browser (most of our design work is conducted and presented in a pattern library to be viewed in browser), I could just crack open the developer tools on the browser and hack away at the markup and CSS to present my idea.

Screenshot of a tabular layout presenting performances and ticket prices being modified using Chrome developer tools

I can no longer call myself a ‘front end developer’ but I certainly used to be and I still have the basic HTML and CSS skills to experiment with ideas this way. You can see from the in-progress shot that I made a mess of the table but that didn’t matter, I’d made the changes I needed to one row such that I could screenshot them and show Pete.

My code wasn’t production ready, and maybe I could have grabbed my CSS changes out of the dev tools and shared them back with Pete. But none of that mattered, I’d got my idea across quickly and Pete got it.

Screenshot of a tabular layout presenting performances and ticket prices after being modified using Chrome developer tools to present a design idea