We'll help you get online products designed better and faster than ever before and set you up for future iterations.Let's Work Together →
We developed the most advanced responsive front-end framework in the world and made it free-for-all.Discover Foundation →
A powerful design suite that will help you prototype, iterate and collect feedback on your product design.Get Started →
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.
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.