ahandrewh teaches IAT-102graphic design (SD)

P2: Layout (due Oct 8)

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 17 to Sept 24

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 Sept 24 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 Sept 24 to Oct 1

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 1 class

A link to your digital magazine layout.

From Oct 1 to Oct 8

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 8)

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

Your project submission is due to Canvas before your Oct 8 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.