ahandrewh teaches IAT-102graphic design (SD-36)

P2: Layout (due Oct 16)

On this page:

Introduction

Continuing from P1: Process, this project has you laying out a digital magazine to practice working with type and composition. You will be designing your layout for a 1280PX-wide display that can scroll in any direction.

P2: Layout is done in teams of 2-3, and is worth 20% of your final grade.

Weekly instructions

This project spans multiple weeks. Please read the weekly instructions carefully.

From Sept 25 to Oct 2

This week is about organizing your group and agreeing on how you will approach the layout.

  1. As a group agree upon which of your first project directions you would like to pursue. Make sure that you agree on:
    • A title for your article.
    • 3 sub-headings that will appear in your article.
    • An initial collection of possible photos for use in the layouts.
  2. Individually choose 2-4 fonts for your article. Make sure to:
    • Identify what each font is meant for, such as headings, captions, bodytype.
    • Look at the combinations and consider how they balance (weight, scale, style); an example is provided in the image below.
    Three different typefaces shown at different scale to help demonstrate the intended hierarchy of type.

    An example of showing a hierarchy and combination of type.

  3. Individually sketch 30 possible layouts, ensuring the sketches are no wider than 5cm (2 inches) across. Make sure to start exploring:
    • Different hierarchies of type
    • Relationships between the image and the text
    • Approaches to composition for the layout
    • Consider the navigation/scrolling through the layout
    Two thumbnail layout sketches

    A sketch demonstrating different composition and relationships between text and image

Bring to your Oct 2 class

As a group:

  • A title for your article.
  • 3 sub-headings that will appear in your article.
  • An initial collection of possible photos for use in the layouts.

Individually:

  • A set of 2-4 fonts for your article
  • 30 possible digital magazine layouts

We will chat about your deliverables class.

From Oct 2 to Oct 9

This week is about starting to work on your magazine layouts digitally.

You will be working with the following constraints:

  • Include one main title
  • Include three sub-headings
  • Only use two-person placeholder text (for groups of two) or the three-person placeholder text (for groups of three) for the article body text
  • All images that are not 'decorative' must include captions
  1. As a group, set up and share a common Figma file. This file should include:
    • Pages and margins
    • Grid structures
    • Required text content
    • Article title and sub-headings
    • Images
    • Fonts
  2. Individually create one complete digital layout option for the article. Consider:
    • How can you keep the flow of content through the article consistent?
    • How can you clarify the relationship between the images and text?
    • How can you help the reader understand how to move through the text?
Bring to your Oct 9 class

A link to your digital magazine layout.

From Oct 9 to Oct 16

This week is about combining your ideas into one final layout. We will hold a large critique of your work so far to provide more direction for the final week. In the final week you are creating one final digital magazine layout as a group.

Grading rubric

Your project will be graded on the following criteria:

Grading rubric for P2: Layout.
A B C D

Typography (5 points):

  • Is the hierarchy clear?
  • Is the article designed to be readable?
  • Does the article's design guide the reader effectively?
  • The hierarchy of text is clear.
  • The article uses good line-lengths, leading, point-size and alignment to create readable type.
  • The article's design guides the reader effectively through the article content including text, images, and any additional items (such as pull-quotes).
  • There are some concerns with the clarity of text hierarchy.
  • There are concerns with one of good line-lengths, leading, point-size or alignment which make for somewhat less readable type.
  • The article's design guides the reader effectively through the article content including text and images.
  • There are multiple concerns with the clarity of the text hierarchy.
  • There are concerns with two of good line-lengths, leading, point-size or alignment which make for less readable type.
  • The article's design guides the reader somewhat effectively through the article text and images, with some areas confusing or misdirecting the reader.
  • There is a lack of text hierarchy.
  • There are concerns with three of good line-lengths, leading, point-size or alignment which make for hard-to-read type.
  • The article's design makes it hard for the reader to follow the flow of text and image content in the article.

Composition (5 points):

  • Is the structure consistent?
  • Is the composition repetitive?
  • Is whitespace used to direct the attention of the reader?
  • Is whitespace used to clarify relationships between pieces of content?
  • The design uses a consistent structure for the content of the article.
  • The composition of the content in the structure is not repetitive, but understandable by the reader.
  • Whitespace is used actively to direct the attention of the reader to key content.
  • Whitespace is used passively to help create clear separations between pieces of content.
  • The design uses a consistent structure for the content of the article.
  • The composition of the content in the structure is repetitive and understandable by the reader.
  • Whitespace is occassionally used actively to direct the attention of the reader.
  • Whitespace is used passively to help create clear separations between pieces of content.
  • The design uses a somewhat inconsistent structure for the content of the article, which somewhat hinders reader understanding.
  • The composition of the content in the structure is repetitive (or not), but mostly understandable by the reader.
  • Whitespace is rarely used actively to direct the attention of the reader.
  • Whitespace is used passively to help create clear separations between pieces of content.
  • The design uses a very inconsistent structure for the content of the article, which hinders reader understanding.
  • The composition of the content in the structure is repetitive (or not), and hinders reader's focus or attention.
  • Whitespace is rarely used actively to direct the attention of the reader.
  • Whitespace is used passively to help create clear separations between pieces of content.

Unity (5 points):

  • Do the elements used feel like a set?
  • Do the images complement one another?
  • Does the article's design help convey the content of the article?
  • The design uses a consistent visual language.
  • The images are a complementary set.
  • The article's design strongly conveys the content of the article.
  • One of the design's elements: fonts, ornamentation, and imagery feel inconsistent.
  • Most of the images in the article feel like a consistent set.
  • The article's design conveys the content of the article.
  • Two of the design's elements: fonts, ornamentation, and imagery feel inconsistent.
  • Most of the images in the article feel like a consistent set.
  • The article's design somewhat conveys the content of the article.
  • Two of the design's elements: fonts, ornamentation, and imagery feel inconsistent.
  • Some of the images in the article feel like a consistent set.
  • The article's design somewhat conveys the content of the article.

Fulfilled requirements (3 points):

All requirements completed.

Missing one of the requirements.

Missing two of the requirements.

Missing three of the requirements.

Formatted document (1 pt)

Document is formatted as a 1280 pixel wide, scrolling page.

Document is formatted as a scrolling page.

Citations (1 pt)

Citations are provided in a consistent, standard (APA, MLA, or otherwise) format.

Citations are provided in a consistent, non-standard format.

Citations are provided in an in-consistent format.

Final submission requirements (Oct 16)

The final submission for P2 is a URL linking to your Figma file including:

Your project submission is due to Canvas before your Oct 16 class.

Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.