Skip to main content

Blog

The web has been buzzing about Responsive Web Design lately. The techniques are solid and the concepts are easy to understand. The first thought that came to my mind, as with any new technique is “where do I begin.” I always end up going back to sketching.

Introducing the Responsive Design Sketchbook

Mulit-blueprint fron pageThe Responsive Design Sketchbook builds on topics discussed in the A Book Apart book, "Responsive Web Design" by Ethan Marcotte. When I started to sketch out how I would alter an existing web site to be responsive or incorporate the techniques, I started to draw thumbnail sketches. The first page of the sketchbook builds on this idea. It contains blueprints that map to various break points, lined with a 32px grid. These break points aren’t gospel. They just serve as a good place to start getting your ideas down on paper.

The back page of the sketchbook is a full grid, based on a 1200px by 800px viewport, with flags for the break points and 32px grid markings.

Unlike the UX Sketchbook, the Responsive Design Sketchbook is void of browser chrome. This really opens up the sketchbook to be used for just about anything you're designing. I recently used the back page blueprint to design an email campaign, using the 600px flag as my stopping point.

Feedback

I hope you’ll find the sketchbook useful in your own responsive design sketching and planning. Feel free to contact me with any thoughts or feedback.



It’s been quite a while since I started to rough out my idea for the App Sketchbook. One of the first people to see the App Sketchbook was UX Speaker and Author, Aarron Walter. A few months ago, Aarron had mentioned he had an idea (and need) for a web design version of the App Sketchbook with a browser blueprint. The UX Sketchbook is the result of a few brainstorming sessions and a sprinkle of sketchboard influence.

Faster, Smarter Interface Design

This new sketchbook features double-sided pages. The first side is a full web browser blueprint with a large right-hand gutter for free-form note taking and a few ruled lines at the bottom. On the back of each page is a 2-up layout of the same blueprint. Most of the sketchboarding templates I’ve worked with have 4 to 6-up blueprints, but in the sketchbook context this layout felt too small. The 2-up page allows you to get more detail than a thumbnail but allows you to sketch a series of pages quickly.

The pages are perforated, so you can tear them out, hang them up and discuss with your colleagues and collaborate.

Hot Off the Press

More technical details to come, but the sketchbook is made with the same quality materials (and craftsmanship) from a print shop in Roswell, Georgia. Stroud’s Printing has been producing the App Sketchbooks for the past 2 years and the quality has been rock solid.

 

The UX Sketchbook is on its way to be bound, de-bossed and shrink wrapped. They'll be available for purchase as early as next week. Sign up to be notified when they're in stock and shipping.