Lesson 6:

Designing layouts

An essential part of the layout design process includes experimenting with different layouts and the best way to do this is with a pencil, ruler and paper. This is true for web, TV, mobile device or print. The pencil is immediate and effortless. Your ideas can flow without any significant barrier.

Note: a graphics tablet and a copy of Photoshop / Illustrator is the next best thing and keep an eye out for emerging apps on smart phone or tablet that can make sketching layouts easier: Adobe Comp CC (iPad only) or any browser-based tools: http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

3 sketches of layoutsThe example shown opposite is designed for a single-page layout tri-fold print brochure. See the grid ? Whether you are working on a poster, web page or logo design, it is vital to add a grid to your sketches.

The sketching process
Sketching layouts is made easier by using ruled paper. You can either draw some light grid lines using a ruler or simply use paper that already has a fine grid on it.

Tip: A credit or business card is also a useful tool for drawing equal width column guides.

There are websites such as 960.gs that even provide free grid examples you can download and print out.

What's "Greeked" Text ?
If you're working at a small scale, it is not necessary to actually write the text, instead, use line weights of varying pencil thicknesses to represent headings and text. The use of lines instead of text is called 'greeking'. See the layout above for examples of this.

Be Neat
Even though it's a sketch, always try to be neat; this is an important part of the design process and your design needs to be legible. You may need to show it to your client.

bigtype focus unity flowGet it right first
At this early design stage, decisions can be made regarding position of lines and shapes, headlines and text, graphics and textures.

While you're sketching your layout keep thinking about Design Principles such as focus, grid, flow, hierarchy, alignment and unity.


Learning Task: Sketching layouts (4-6 hrs)

  1. Sketch a wireframe layout for the entry page for a website. Your choice of website. You are encouraged to sketch one for a website you'd like to develop. What's a wireframe?
    (link to series of great articles on wireframing at Design Festival).
    This Smashing Mag. article
    might help too.
  2. Sketch a layout for an app. Your choice of app., just one screen, hint: for inspiration, research "best app layout"
  3. Sketch a layout for your business card.


Show on each of your designs:

  • The grid. Show the columns and any horizontal guides. Just use light strokes so they don't impact too much on the final design.
  • Bodycopy (text) but use "greeking" to represent it. For bigger display headings draw the type neatly.
  • Show photos /artwork by using a box with a cross in it as above but add meaning by labelling it eg. "heroshot of product with actor".


Submission Guide
Take a photo of each and publish them to your blog and supply your blog's URL via email for feedback. If you need help with the task, check out our Design Forums.

Chris Adams 2017


Shown opposite (courtesy of ex-student Theresa S.) is an example of a sketched website (known as a "wireframe"). This layout follows a 7-column grid fairly "rigorously".

You'll get a lot of practice sketching wireframes in the Web Publishing Module.


sketched websiteProducing sketched layouts is crucial to the design process for any design; from web design wireframes to storyboards for animation or film to vehicle signage, Blu-Ray menu design to mobile device application development.


For more Mike Rohde sketches: