Designing Layouts

LAYOUT DESIGN 

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

The example opposite is destined for a single-page layout tri-fold brochure (or web column ad unit) but the principle is the same for multi-page and web pages too.

Whether you are working on a poster, web page or logo design, it is vital to make sketches.

The sketching process

Draw some light grid lines using a ruler or get paper that already has a fine grid on it. 

There are websites such as 960.gs that even provide free grid examples you can download and print out. 978.GS offers similar but optimised for ipad/ 1024x768 systems. 978.gs also offers a free Photoshop Action that automates the process of producing a page with column guides already in place.

By working at a small scale, it is not necessary to write in text, instead, use line weights of varying pencil thicknesses to represent headings and text. The use of lines instead of text is called 'greeking'.

At this early design stage, decisions can be made with respect to position of lines and shapes, headlines and text, graphics and textures. 

While you do this, Just keep thinking about Focus, Grid, Flow, Hierarchy, Unity

Learning Activity 9: Sketching layouts

1. Sketch a wire frame layout for the entry page for a website. Your choice of website. What's a wire-frame? (link to series of great articles on wire framing at Design Festival). This Smashing Mag. article might help too.
2. Sketch a layout for a club newsletter. Your choice of newsletter. Just the front.
3. Sketch a layout for your business card.
   

Indicate on each of your designs:

• The grid. Show the columns and any horizontal guides.
• Any meaningful copy (text) or use "greeking" where the text doesn't need meaning, just shape.
• Photos/artwork (use a box with a cross in it as above but add meaning by labeling it.

Summary

Producing sketched layouts is crucial to the design process for any design; from web design wireframes to storyboards for animation or film to car graphics, DVD menu design to mobile application development.