ah teaches information design (Structuring Content lecture)

Structuring Content

Lecture outline

Thinking about layout and structure to direct movement through content. Lecture slides will be made available on the day of the lecture (May 31).

A series of three sketches of a page. One with a question mark and two with content positioned

Structuring content

How we structure content

Designing structure is a non-linear process. In this process we will:

  • Define the problem
  • Research context
  • Generate ideas
  • Choose ideas
  • Implement ideas

How we structure content

Today we will worry about:

  • Define the problem
  • Research context
  • Generate ideas
  • Choose ideas
  • Implement ideas

Generating ideas

We are looking to suggest and explore, not to confirm our ideas. Our sketches should be:

  • Quick
  • Plentiful
  • Appropriately detailed
  • Disposable

Quick sketching

Quick sketching can be achieved through making appropriate sized sketches and not committing too much time to each sketch.

One three centimeter tall sketch next to the same sketch at eight centimeters tall

Work small and fast for ideation

Plentiful

We want to be generating lots of different ideas when we sketch.

'Similar' ideas:

A series of sketches of a page with small variations in the positioning of elements on the page

Less 'similar' ideas:

A series of sketches of a page with larger variations in the positioning of elements on the page

Appropriate detail

When generating ideas our sketches should be low fidelity; rough with enough detail to talk about.

A series of three sketches of a page. One with a question mark and two with content positioned

How we structure content

Designing structure is a non-linear process. In this process we will:

  • Define the problem
  • Research context
  • Generate ideas
  • Choose ideas
  • Implement ideas

How to choose ideas

Getting good at picking ideas to further refine requires an understanding of the purpose of the design, the principles that define good content structure, and critique.

Good content structure

Good content structure helps direct and guide a viewer through the content actively. We are going to recap a number of design fundamentals that help us build better structures.

Sequence of cognition

A simplified overview for the purposes of our class:

First is shape.

A layout with a series of shapes representing the positioning of content

Second is colour.

We will skip this one for now as no colour is used in either of the first two projects.

Third is form.

A layout with a series of shapes representing the positioning of content

Gestalt

Next in our order of cognition

A psychological theory that our minds self-organize disparate elements into a unified whole. Can you see the 'shape' in this picture?

A series of dark blotches on a white background that contain the shape of a dog if recognized

Building Relationships

Gestalt theory offers us tools for building meaningful visual relationships.

Figure & Ground

Gestalt theory

A series of sketched frames with birds in them. The second and third frames contain a dark and light fill to help demonstrate contrast

Proximity

Gestalt theory

Things that are closer are more related.

A sketch with a mouse next to the word 'cat', and a cat next to the word 'dog'

Space

Helps to clarify relationships and direct attention.

A sketch of a spread with one page filled with content and the other with only one element in the center of it

Similarity

Gestalt theory

Things that are similar are more related.

A sketch illustrating a collection of different elements on two separate pages, some similar, some not

Harmony and unity

Things that appear similar will help give us a sense of cohesion to a visual language.

A sketch illustrating a collection of different elements on a spread of pages, most dissimilar

Scale and hierarchy

Helps to build an understanding of relationships.

A sketch with the first page illustrating larger text above smaller text, and the second page illustrating smaller text above larger text

Continuance

Gestalt theory

We will build relationships between things that track along an expected line.

A sketch of a spread with the illustrated boxes following an expected pattern
A sketch of a series of spreads illustrating symmetrical to more assymetrical balance in layout

Balance helps to direct and focus attention

A sketch with three frames, the two smaller frames illustrating the head and feet of a bird which are portions of the larger frame, which shows the bird destroying a building and people running away

Framing can direct attention and change the message

A sketch of a layout with a photo of ducks feet at the top of the layout which align with text below the framed photo

Continuance (and other Gestalt principles) can apply to build relationships with framed elements as well

Order of cognition continued

  1. Basics: colour, depth, form
  2. Grouping: Gestalt
  3. Memory: connections
  4. Recognition: connections applied and understood

Connections and Humans

We're lazy, er, or efficient

"...users have time to read [on average] 20% of words on a page."
Nielson-Norman Group

Critique

Critique is a communication skill. Effective critique requires reading/listening, responding, and practice.

Bias

"[Our] perspectives are coloured by our habits, beliefs, and attitudes."
Erika Hall

Effective critique is...

  • Purposeful: Has a clear statement or goal.
  • Specific: Identifies a particular strength/weakness (not speaking in generalities).
  • Language appropriate: Uses language understood by the audience.
  • Practical/action-oriented: There is something to do or think about.
  • Timely: The type of feedback given makes sense for the stage of work.

Why critique matters

Effective critique can:

  • Motivate and inspire
  • Reinforce existing strengths
  • Keep goal-oriented behaviour on track
  • Modify and/or improve skills
  • Remedy errors
  • Help reflection and learning

Ineffective critique is...

  • Absolute: Providing no potential direction for solving the problem.
  • Not contextualized: Speaking your own opinion without stating so.
  • Not clarified: Talks to work without understanding what it is about.
  • Uninvited: Given without being requested or expected.
  • Needlessly vulgar: Swearing unnecessarily.

Critique context

Before giving critique, it is always important that you understand what the project is, and where it is at. This helps ensure your feedback will be timely and purposeful.

Sketch #2
P2: Layout++

For lecture...

For this week's lecture time, please come ready to critique.

Next week's lecture

Understanding Context

The importance of research to help understand context in a design process. Pre-recorded lectures and slides will typically become available the day after the lecture.

1/1