Layouts

With all the ingredients at our disposal, how are they then combined to create a design?

This section of the guide will start with building smaller groups of content, and then complete layouts.

Thirty degrees ¶

The key visual in the iHASCO identity is the 30° angle from the vertical. The shapes this angle creates provides the connection to the pinwheel logo, without having to repeat it (which would dilute the effectiveness of the logo).

The layout must feature a dominant use of the 30° shape:

In the diagram (above) you can see how the 30° angle connects with the logo, but when it’s used from the horizontal (below), that connection is broken.

Aim to show a dominant 30° angle somewhere in your layout. For example, this could be a large tinted background shape, cut into the main photograph, or a slanted block of text.

Division ¶

A common need in a layout is to convey division between different content, such as text blocks and images. This can be done with line, patterns and large solid background shapes:

The content doesn't need to be strictly seperated into it's own container however. You can offset and overlap elements to break the grid and prevent the design from looking too rigid.

Imagery ¶

Illustrations and photographs can be used a few ways - inside (or breaking out of) a container shape, or have other elements break into its space. Think about how the containing shape affects the focus of the image:

If another shape is cutting in to the image, it could be used to draw focus to an important part of it.

Constructing layouts ¶

The first consideration is always the context: what are the boundaries of the context you're designing? A business card will have a fixed physical size (either portrait or landscape) whereas a website's dimensions would be fluid, but will generally be taller than it is wide.

If you're unsure where to start, divide this area into thirds. This will give you key focal points for positioning content - the intersection top left in particular works well as a visual entry point. More complex layouts (such as a multiple column website) will require a more detailed grid (such as 9×9), using the viewport as the boundary. Using thirds will create a pleasing asymmetric design.

In this example business card layout, the large image is contained within a circle and placed at the top left intersection:

The eye is first focussed on the circle, and then led towards the heading, down the information and finally to the logo bottom left. As well as the grid, this uses the following ingredients:

1. Dominant 30° angle in the background.
2. Sizing of shapes and type to create a hierarchy of information (the name and photo are the most important in this context).
3. Colour is kept bright, warm and non-masculine, using the iHASCO Pink and Green tints with a white background contrast colour.
4. Shapes and patterns to suggest direction: the line pattern guides the eye towards the circle, and the background 30° angle to the logo in the corner.
5. Pinwheel logo to brand this as iHASCO.

Here are some layout ideas for different print and screen contexts, using the ingredients in different ways. These are just examples, and there are many more ways of achieving the same goal with different layouts.

Sample Layouts ¶

Print - Card: (Business Cards, Name Cards, Lanyards)

Note how the hexagon shape used large in the background can be used to emphasise focus to either the logo (B) or the information (C). The circle container in layout (A) can be used for a photo of the person.

Print - A4 Document: (Welcome Pack, Documents)

The first layout (D) on the left puts the emphasis on the logo first. The shapes and patterns top and bottom point towards the centre. Layout (E) has a large central container for either photography/illustration, while (F) uses just text content as the focus. (F) also shows a section of the text with emphasis on the second line. This layout could be used in a slide presentation.

Print - Large: (Poster, Display Stand)

The poster (G) has a large headline with emphasis style for the second line. Note also here how the text all aligns left to aid reading down. The sample display stand layout (H) uses background shapes to show a reading flow down the layout.

Screen - Rectangle: (Social Media Post, Card layout)

These layouts centre around arranging image with text, with the exception of (J) which focuses on just text (for an attention-grabbing headline or pull quote). Using a white cut-in shape (L) can help make the image feel more connected to its surroundings.

Screen - Single column: (Email newsletter, Mobile website)

Unlike previous examples, the following single and multiple column screen layouts are not fixed sizes, and may not all be visible. Therefore, emphasis is placed on the top as the visual entry point. Background shapes are arranged to guide the eye down the page and rest at the footer. As with the display stand example (H), the eye isn't taken straight down, but zigzags, particularly with multiple columns.

Foreground shapes can be containers for imagery, or even left as coloured shapes (particularly the smaller overlapping shapes).

Finally, note how patterns are used to either provide a break to suggest a new section, or to connect sections

Screen - Multi column: (Desktop Website)