Graph Paper Layout Sketch

February 25th, 2009


A sketch drawn up by an interaction designer and a sketch drawn up by a visual designer will emphasize slightly different things. An interaction designer likely will focus more on multiple element states, and events (or links) which glue them together. Whereas someone with a more traditional visual or graphic design background will put extra effort on sizing, alignment, positioning and visual priority, which all work together in establishing proper visual relationships between elements. This second case is perhaps visible in a sketch submitted by Mike. The sample here makes use of graph paper, straight lines, and explores block and element relationships.

A sketch like this is just more evidence that the wireframe overlaps greatly with graphic design – a case made earlier. This overlap suggests once again that the wireframe can be grounds for collaboration between information architects, interaction designers and visual designers.

Craving more graph paper? Konigi provides a number of awesome stencils aimed at IA’s and visual designers which can be downloaded. Of course writing about graph paper and wireframing, one could not overlook another awesome blog about a similar subject matter over at graphpaper.com.

Credits: Mike Rohde

Need UI Inspiration?

Hi I'm Jakub and I wanted to share with you some of my better UI sketches to inspire your line of work. I've been sketching user interfaces with paper/electronically for over a decade. Subscribe today, and I'll share 5 of my better sketches with you over the next 5 days. How is that? :)

I will send you 5 pieces of inspiration over the next 5 days. You can unubscribe whenever you like. Powered by ConvertKit

3 Responses to “Graph Paper Layout Sketch”

  1. Mike Rohde Says:

    Jakub, thanks for the mention.

    I've found graph paper really does help me as I wireframe ideas, whether they're web projects or logos and icons. I know for many the grid gets in the way — so long as the grid isn't too heavy or dark, it works well for me.

    I do come from a visual design background, so most of these wireframes are structural to gain approval of proportion/sizing/format with clients.

  2. juarezpaf Says:

    I didn't know graphpaper.com neither Stencils at Konigi. Nice resources and great article, it show us how to make a great layout sketch with high details information. Congrats Mike Rohde and Jakub to share.

  3. Darren Azzopardi Says:

    I myself use grids in my designs now, as designs can be majorly improved with realigning and some lovely white space.