Layout

Our layout structure enables content to be conveyed clearly and precisely. Simple grids and logical divisions make our layouts come together in a way that content and messages are easily accessible.

 

p1 layout 1

 

 

 

 

 

Approach

McConnell Dowell layouts are spacious, clear and uncluttered. Simple subdivisions into halves and quarters guide us in how to divide space and arrange elements on the page across a variety of sizes and proportions.

 

Divisions

p6 approach 1
 

p6 approach 2

Full Area
 

p6 approach 3

Halves
 

p6 approach 4

Quarters
   

 

 

 

 

Grid

A basic grid structure underpins all McConnell Dowell layouts, allowing for variation and flexibility at diffeent sizes and proportions while also maintaining a consistent approach to space. The grid is broken down into smaller subdivisions. The subdivisions give us a reference point and unit for allocating space.

 

 

p6 grid 1

 

 

Typical Print Grid

p6 typical print grid 1

A4 page

4 columns
5.5mm gutters
8 rows
10mm margins

 

p6 typical print grid 2

A4 facing pages

4 columns each page
5.5mm gutters
8 rows
10mm outside, top and bottom margins
13mm inner margins

 

 

Typical Screen Grid

p6 typical screen grid 1

1920x1080 (16x9)

8 columns
8 rows
32px gutters
65px margins

 

 

  

 

Composition

The grid allows for a flexible approach to layout. The creation of carefully conceived layout structures can be achieved by the smart arrangement of elements on the page.

 

Type

Typographic elements can be arranged to the subdivisions on a page.

 

 

p6 type 1

 

 

Images

Images can be arranged to the subdivisions on a page.

 

p6 images 1

 

 

Colour

Colour can be arranged to the subdivisions on a page if required. Use restraint when dividing colour on a page. We use large areas of colour. Don’t have multiple divisions or boxes on a page.

 

 

p6 colour 1

 

p6 colour 2

Don’t have multiple divisions or boxes of colour on a page.

 

 

Dynamic Beams

The dynamic beams can be arranged to the subdivisions on a page.

 

 

p6 dynamic beams 1

 

 

 

 

 

 

NEXT: Signs