analysing website visitors

Our Blog

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.

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. 

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.


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. 

Responsive website wireframe screen shot

A screen shot of the template

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 use the file please let us know if it has been useful or how you've improved it.

> download the file

Written By: Paul Wright

Paul has over 13 years experience in Senior Design and Creative Director Roles delivering high-end eCommerce design which focuses on the user experience. Paul has the ability to design for the end-user and understands the customer journey through all touchpoints. He is skilled in translating the site information architecture into an easy-to-use navigation system, whilst making it an exciting and visually appealing user experience

Related Blog Posts

Readers Comments

blog comments powered by Disqus

About Us

Hello, we’re Rubber Cheese, a full service creative agency specialising in design and development for the retail sector, located smack bang in the middle of Hertfordshire & Essex borders. 

Blog Categories


Featured Blog Post

The Rubber Cheese Story Competition

We're always being asked, "How did Rubber Cheese get its name?"

In all honesty, we’ve never had a good story to tell, so after being asked one too many times we had an idea; let’s ask our friends how we got the name! 

Follow Us

  • RSS
  • Facebook
  • Twitter


Looking for the Competition?

We're running a very unique and exciting competition, check it out and have a go!