Illustrator: Responsive Design Template

Over the course of designing a few sites to be responsive we’ve come up with these Illustrator templates to streamline the design process.

Download the templates from GitHub

How to use it

When you first open it you should be zoomed out to see the entire illustrator canvas, notice how there are guides set up vertically at each device width. We’ve found that the easiest way to design sites in Illustrator is vertically like this because you can easily copy a page downward while holding the shift key and keep everything within the same grid. (see the second screenshot for an example)

Screen 1: Blank Template

Screen 2: Designs added in

Screen 3: Some of the overlays

We’re including one with device overlays and one without because the overlays can be slow if you don’t have a lot of ram and also they’d add extra weight to your file.

Screen 4: More of the overlays

Feedback

If you feel like there are some missing or some should be tweaked leave a comment.

If you find this useful please follow us on twitter / facebook for more free web design schwag