Creating Mockups using Google Drawings

Web Design /

Recently I needed to make a wireframe so that we could make some revisions to our website. Our developers usual workflow is to listen our requirements and then send us a wireframe embedded on a page where we can approve it. If we need to make any changes we usually download the image, edit it in paint and reply to a ticket. Then the process goes back and forth till we’ve got it right and we finally click approve.

Since I’m working internally I decided to make my own workflow. The first thing that needed to do was pick a software to create the wireframe in. A quick Google search came up with some of the usual recommendations for graphics works like Photoshop and Indesign. There is also a lot of online tools. One really cool tool that I found is Wirify which lots you convert an existing website to a mock up.

However I couldn’t find  suitable tool for my use. A lot of the online tools have a free version, but you need to pay for collaboration. Then almost by accident I stumbled upon Google Drawing. It’s perfect for what I needed. Free, easy to use and share! Morten’s created some awesome template to use also.

I ended up drawing mine from scratch. Check it out 🙂

Mock up made in Google Drawings 


Original Website
Original Website