Responsive Sketchsheets

Start working out your responsive layouts through sketches using our super awesome responsive sketchsheets!

What's this for?

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.

Download Sketchsheets
Header
Header

Wait, there's more!

We also included our regular ZURB sketchsheets that you can use for your not responsive layouts!

Already have those? Download just the responsive sketchsheets

What's included?

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.

Iphone

Phone

These focus on sketching out phone flows and layouts. If you're going the mobile-first route, you might want to start here.

Desktop and iphone

Desktop and Phone

Highlight differences between phone and desktop layouts, and represent how a layout might stack on mobile.

Offcanvas

Off-Canvas Layouts

These are great for sketching out off-canvas content, with mobile and desktop versions included.

How to Use the Sketchsheets

Desktop

Start with Desktop

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.

Differences

Sketch Responsively!

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.

Mobile first

Aww yeah, Mobile-First!

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.

Get the Sketchsheets

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 »

Download Sketchsheets

Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×