IAT-102: 04 Laying it Out

IAT-102: 04 Laying it Out — A slide deck

Close All Laptops Please

Only the back two rows may use their laptops.

Critiques

The post-its from last week helped to capture the feedback, please take notes this week to help capture it again.

Swiss Design

Audience = everyone

"Objective-rational design means legible design, objective information that is communicated without superlatives or emotional subjectivity."
Josef Müller-Brockmann
Different universal icons developed by members of the Swiss school of design
Swiss symbols

Swiss Design

Swiss style 'Olma' poster
Josef Müller-Brockmann

Composing Type

Considerations for composing type:

  1. Point-size
  2. Alignment
  3. Kerning, tracking and leading
  4. Paragraph breaks, widows and orphans
  5. Line-length

Point Size

You want to set point size to clearly distinguish hierarchy between elements and achieve good readability in your body text.

Headings should clearly stand-out

Subtitles should still stand apart from body copy

Body-copy should be a nice and readable point-size. Not too big as to feel uncomfortable, but not too small as to be unreadable. In print, this is typically between 8-11 points (depending on the font).

Left Alignment

A natural or expected alignment, though concerns can arise with the ragged right edge and ensuring a nice rag.

A set of left-aligned text

Right Alignment

Unfamiliar (in English), so be particularly careful about the punctuation along the right edge.

A set of right-aligned text

Center Alignment

Easy balance, though problematic for body-text as there are two ragged edges.

A set of centered text

Justified Alignment

A clean shape, but watch out for rivers.

A set of justified text

Kerning

Only kern type when balance within a word is concerning. You should not be kerning body type.

A word repeated in larger and larger point sizes making the issues in kerning become more evident

Leading

aka. line-spacing

Tight line-spacing means type can be hard for us to visually track, loose line-spacing separates paragraphs into lists.

Too tight

Tight leading

Too loose

Loose leading

Better

Nice leading

Widows and Orphans

Widows have a past, but no future. Orphans have a future, but no past.

A paragraph exemplifying widows and orphans

Line Length

Good line-length makes it easier for our eyes to track from one line to the next. Aim for 5-7 words per line.

Too short ('the Shatner')

A very-short line-length in a paragraph

Too long ('Monologuing')

A long line-length in a paragraph

Better

A well-suited line-length

Whitespace

The final frontier...

An illustration of two layouts, one more visually 'uncomfortable' than the other
Care of Creativity is Not Design

Whitespace

In which of these examples is the logo larger?

An illustration of an LA Times spread where the logo appear smaller due to a lack of whitespace
An illustration of an LA Times spread where the logo appears larger due to use of whitespace

Whitespace is Not Evil

'Let's stay at the table'

Minister George said he's not surprised by the results.

"We have had and felt the pressure to get a settlement since last September, I feel no more pressure tonight after this than I did yesterday," George told the news.

The minister also issued a statement reacting to news of the vote.

"While the leadership received the mandate they sought, no one should interpret this as any kind of enthusiasm on the part of them to shut down," said the statement.

Passive Whitespace

Important for helping balance and hierarchy.

'Let's stay at the table'

Minister George said he's not surprised by the results.

"We have had and felt the pressure to get a settlement since last September, I feel no more pressure tonight after this than I did yesterday," George told the news.

The minister also issued a statement reacting to news of the vote.

"While the leadership received the mandate they sought, no one should interpret this as any kind of enthusiasm on the part of them to shut down," said the statement.

Active Whitespace

Useful for focusing attention or clarifying hierarchy.

'Let's stay at the table'

Minister George said he's not surprised by the results.

"We have had and felt the pressure to get a settlement since last September, I feel no more pressure tonight after this than I did yesterday," George told the news.

The minister also issued a statement reacting to news of the vote.

"While the leadership received the mandate they sought, no one should interpret this as any kind of enthusiasm on the part of them to shut down," said the statement.

What is a Grid?

A grid is the underlying structure of a document which helps organization of content in a coherent pattern.

Purposes of a Grid

Grids assist in:

  1. Organization of text and imagery
  2. Providing consistency
  3. Clearer communication
  4. Expediting layout exploration
An example of using, and not using, a grid

Setting a Grid

First we would establish page edges.

Next we establish margins.

Margins can be even or uneven.

Next we set columns.

When flowing type, it should clearly begin and end at the edges of columns.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns; which is entirely fine.

Type should not end in a gutter or the middle of a column.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Type should not float freely in columns.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Type should clearly snap-to and work with the grid.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Any alignment can work within the grid.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Another type of alignment that can work within the grid nice and easily.

Even center alignment can work within a grid structure.

Now set your own!

  • Page dimensions
  • Margins + Bleed
  • Columns + Gutters
  • Modular
  • Flowing type

When Done

Please snap a photo and post your grid to https://ah1.ca/grids when done. If you do not have a mobile device with you, please bring it to the front during the break.

Composing Without Grids

Composing without grids is not an excuse to do whatever you want.

Considerations include:

  • Making a center of interest
  • Directing the eye and rhythm
  • Balance, unity and harmony

Center of Interest

A strong center of interest often involves use of contrast and balance to focus our attention.

An old US military poster stating 'We need You'

Directing the Eye + Rhythm

Using position, emphasis, and the visual cues within your composition can help direct the eye through.

A magazine layout directing attention

Photos as structure

Remember that the photos you choose can strongly suggest a structure.

A crow on a snowy backdrop

Photos as message

How you crop or alter photos can strongly suggest a message.

A tightly cropped photo of an person's face on an orange background

Photos as message

Same photo. Different cropping. Different message.

A full-frame photo of a person with snowshoes walking away from an orange explosion of a background

Balance, Unity and Harmony

Ensuring that we perceive the composition as one piece.

A series of symbols and shapes with varying sets of unifying elements, such as line weight, colour, and fill.

Unity, Consistency, and Boredom

InDesign

Given InDesign's complexity, you will receive a bit more of a software tutorial this week. Good and clean file and folder structures are essential.

Recommended structure:

  • P02 Project Folder (Oct 2017)
    • P02 Spreads (v1r1 Oct 2017).indd
    • Export Folder
      • P02 Spreads (v1 Oct 2017).pdf
      • P02 Spreads (v1r1 Oct 2017).pdf
      • etc...
    • Links Folder
      • Placeholder Text.txt
      • Duck Photo.jpg
      • Duck Photo - Adjusted.jpg
      • etc...

Deliverables Warning

Deliverables not brought in the requested format — such as print documents not printed — will not be critique nor receive any completion grade. The project brief details how materials should be delivered.

P02 Deliverables

Please remember that there are group and individual deliverables for each week of P02.

P02

Bring to the labs:

  • 1 article topic, title and 3 main sub-headings (per person)
  • 5 high-resolution photos, printed (per person)
  • 2-4 fonts, printed (per person)
  • 20 print layout sketches (per person)

Next week we will discussion how :D means we are happy, and :D means colon and capital D.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1