Start working out your responsive layouts through sketches using our super awesome responsive sketchsheets!
We're embracing design for a multi-device world. So we need to start thinking about how our sites will look on smaller devices early on in the design process.
Your code shouldn't dictate how your layouts will respond to different screen sizes. Work through those problems using these sketchsheets before you dive into code, and both you and your clients will have a clearer vision of how layouts will change on different devices.
We also included our regular ZURB sketchsheets that you can use for your not responsive layouts!
Already have those? Download just the responsive Sketchsheets
The sketchsheets will make it super easy for you to start designing responsive sites, with room to work through elements that might change in a responsive layout, such as off-canvas layouts and navigation.
These focus on sketching out phone flows and layouts. If you're going the mobile-first route, you might want to start here.
Highlight differences between phone and desktop layouts, and represent how a layout might stack on mobile.
These are great for sketching out off-canvas content, with mobile and desktop versions included.
You'll find two files in our sketchsheets folder, one PDF contains the original ZURB sketchsheets, and the other responsive-flavored PDF.
Start sketching out your desktop layouts using the normal sketchsheets as you normally would.
Move on to mobile hotness, and start with thumbnail sketches of the desktop layout, alongside the mobile layout.
Planning to implement our sweet off-canvas layouts? No problem! You can start visualizing the content and layout of these elements using the sketchsheets.
So you're starting with mobile, you daring designer, you! Here's what you'll need to do. Sketch using the responsive sketchsheets and start with the full-size mobile sheets, then move onto thumbnail sketches for the desktop layouts.
Try these for yourself and add another layer of awesome to your work. Want to find out more about why we made these?
Check out the blog post »
Welcome to the ZURB Playground, creative interaction design tools and experiments by the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.
Get our monthly newsletter, ZURBnews.
Check out the latest news and buzz.
Design Great Products Faster
