Insights Newsletter

Sign up for our Insights Newsletter and receive regular news & views from the team including:

  • Our take on the world
  • Free resources & downloads
  • News & inspiration
  • Ridiculous things that happen here

I have read and agree to the Privacy policy

A bit scared we'll email you crap? We hate spammers so we promise we'll only send you awesome content roughly once a month.

Come & Say Hello

We love building relationships with our clients that will last. Give us a call to talk through your ideas.

01279 883119

Pop in for a Cuppa:
Rubber Cheese Towers
Unit N, The Maltings,Station Road,
Sawbridgeworth, Hertfordshire CM21 9JX

A wireframe template for responsive web design

We’ve created this free to download ai template for web designers creating wireframes for responsive websites. You can use this vector file to create wireframes for 3 different screen sizes, 978px, 768px and 320px wide. We’ve found it really useful and thought we’d share it with our fellow designers.

  • 25/09/2015
  • 2 Mins to Read
  • Share

Don’t Have Much Time?

We’ve condensed this blog down for all of the people with not a lot of time:


This handy little document comes with some added features including:

  • Various icons, buttons and picture boxes for you to use as you wish.
  • 12 column grids for the 978px and 768px templates, plus an 8 column grid for the 320px template. These can be adjusted depending on the length of the pages.
  • A useful overlay of the actual screen sizes for a standard desktop screen, an iPad and iPhone. This is ideal for client reviews as it shows clearly how the pages will look in the finished design.

At Rubber Cheese, we use Adobe Illustrator to create wireframes. We’ve tried the likes of Balsamiq and other online wireframing tools but we always go back to Illustrator as we find it’s easier to use and more flexible for our needs. 

Everything has been layered for ease of use so you can switch on and off any details you’d like to. I could have added a wider template but I thought this might be overkill and slightly confusing for clients, it would also take longer to create. 

Please use the file as you wish, all we ask is that you don’t distribute the file or claim the file to be designed as your own.

I found this blog post by Metal Toad very insightful so please take a look – A Simple Device Diagram for Responsive Design Planning

If you make use the file please let us know if it has been useful or how you’ve improved it.

Click here to download the template