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.
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.
Related Blog Posts