Type & Interaction: Skills

Fall 2018

Active Reader

Saturday, 12:10 – 2:50
(Submit files by 11:30)
63 5th Ave. Rm. 304

Mon–Friday, 9:00 – 6:30
55 W13th, Rm. I 205
(Hirshon Suite)



Table of Contents


This intensive course introduces students to intermediate skills and methods to quickly design and prototype digital experiences and user interfaces. Informed by current and historic principles of design, students will become familiar with the process of transforming an idea into a functional design by making use of basic web technologies. They will utilize and practice a shared vocabulary to critically address how the visual form of language impacts communication, navigation, and behavior in screen-based media. The experience of this intensive course will prepare students to successfully participate the following program core classes.


Inclass Exercises




For the start of the class, we have selected four short readings. Please have these read for Monday, August 27.

If you’re interested, we’ve gone ahead and uploaded all this week’s readings (and some additional ones) here.

Also, please download the trial version of Sketch. We will be doing a demo on basic functionality, but feel free to play around beforehand.

Day 1


  • Introductions
  • Small reading-based group discussions + presentation prep
  • Full class presentations
  • Sketch Introduction
  • Exercise 1
  • Lunch
  • Typography Vocabulary and History Lecture
  • What is critique conversation
  • Exercise 1 continuation
  • Exercise 2 introduction + work session
  • Class Conclusion: Finish Exercise 2 for tomorrow
  • Assigned Readings

Inclass Exercises

Exercise 1: Compositions

Two main challenges introduced when designing for screen based media have come from the variation in screen sizes and introduction of movement based interactions.

This exercise will explore the former. How do type hierarchies have to respond to variations in proportion and scale? Find a print piece or website w/ a wide range of typographic styles and content types.

Translate the various of levels of hierarchies into a set of ‘type marks’ that you can use in your composition. e.g. display type, header, sub-header, body text (Large body copy can be replaced with lorem ipsum for the time being.) You should have at least 4 levels of hierarchy defined.

We will do this by creating a single Sketch file w/ multiple symbols which will then be arranged to produce the final composition.

For these compositions please use a minimum of two typefaces and be ready to articulate thoughts as to how they relate to the content you have selected. Don’t worry about legibility if it becomes an impediment.

Create 10 compositions at 375 x 667 (iPhone 6 dimensions).

Please upload your completed sketch documents and assets to the google drive folder under ‘Exercise 1’

Create a folder with your name and inside place the document and any necessary assets. Please name your files as ‘firstname_lastname_1’


Exercise 2: Variable Formats

Prepare and package your Sketch file (be sure to include the font files you used), and exchange it with a fellow student. Open a new Sketch document and import your received file as a Library. Using your new symbols and text styles, create the “same” composition at the following custom Sketch artboard dimensions (i.e. create a simple page that acts responsively to different sizes):

  • 375 x 667 (iPhone 6)
  • 562.5 x 1,218 (iPhone X)
  • 768 x 1024 (Tablet)
  • 1440 x 900 (Desktop)

You will be expected to explain how your composition has reacted to the different dimensions.

Please upload your completed sketch documents and assets to the google drive folder under ‘Exercise 2’

Create a folder with your name and inside place the document and any necessary assets. Please name your files as ‘firstname_lastname_2’

Day 2


  • Discussion on Readings
  • Exercise 3
  • Critique in small groups (half half)
  • Inspect element session on beamer (anatomy of a webpage)
  • Class Conclusion: prepare Assignment 1a for tomorrow

Inclass Exercises

Exercise 3: Intervention

Spend the extended lunch period walking outside. Pay attention to how stores “brand” themselves. Find a particular typographic system that you find interesting. Document the brand execution with your phone (photograph the logo, spatial typography, print typography, and material uses).

Once you’re back in studio, spend some time studying your photographs. What typographic systems can you identify (does there seem to be a grid? A color palette? Do they use several typefaces?)? Write these down, and spend some time recreating the branding system in Sketch, keeping in mind to produce symbols when necessary.

Now experiment. What happens when you swap a typeface? What happens when everything becomes monochrome? What kind of mood shift is produced (ex: does Nike suddenly feel like a Halal stand? Does Starbucks feel like a bank?)?

After some experimenting, decide upon a “rebrand” and develop an updated style-guide of symbols and type styles. Prepare your before/after compositions in Sketch using the initial and rebranded symbol set.

Please upload your completed sketch documents and assets to the google drive folder under ‘Exercise 3’

Create a folder with your name and inside place the document and any necessary assets. Please name your files as ‘firstname_lastname_3’


Assignment 1

Consider our in-class discussions, critiques, and experiments exploring typographic hierarchy… How might we guide a reader’s eye through pattern and repetition? How might we ease a [user, consumer, audience, reader]’s navigation of interfaces, charts, and texts through spacing and type styles? How might we consciously add opinion and perspective to text through typographic hierarchy?

Part A

Select and download your content.zip from the class site. To continue exploring the effects of hierarchy on legibility, navigability, and perspective, create three different web designs, each should explore a different content structure (text index, grid w/ images, ‘featured’ content, drop downs). Each design will be presented in custom artboard at Desktop dimensions (1440 x 900) and can use multiple artboards per design.

You should generate and use Sketch Symbols for your designs. Additionally, utilize at least one instance of hotspots and fixed elements for each design. Be prepared to show your designs in Sketch’s preview setting.

Day 3


  • Discussion on Readings
  • Review of Assignment 1a
  • HTML CSS intro + exercises
  • Introduction + in-class work session: Assignment 1b
  • Class Conclusion: finish Assignment 1b for tomorrow, assign students to think about references on digital design, readings

Inclass Exercises

In class demos


Assignment 1

Part B

Based on this morning’s HTML + CSS tutorial, convert your hierarchical system into a basic webpage.

Starter files

Also, find a website with a reading experience you like to bring in as an example.


Sites we shared in class (plus a couple extras)

Day 4


  • HTML + CSS Q&A
  • 60(ish) minute work update session for Assignment 1b
  • Walk around
  • Lunch/Readings
  • Discussion on Readings
  • HTML/CSS Demo: box model and media queries
  • Introduction of Assignment 2: Active Reader
  • Assignment 2: Research period
  • Assignment 2: Work session
  • Critique in small groups, use time to ask technical questions
  • Optional Introduction to Javascript/JQuery
  • Class Conclusion: continue working on assignment 2, prepare javascript questions for next day


Assignment 2: Active Reader

A reader is a curated collection of texts meant to explore or present a given topic.

The Active Reader is a collaboratively built website that displays the readings, experiments, research and references we have collected and examined over the past week.

Your assignment is to design and build a part of our class’ web-reader. Your assignment consists of the development of a type system that can be applied to:

  • A web-based table of contents (i.e. a menu section of your webpage)
  • A selected reading typeset for the web in responsive html + CSS (Your typeset reading should include: Title, Author, original publishing source and date, full text, links to any inspirational sources and directly related texts (either found in your own research or from the class list))
  • A separately designed printable pdf of each reading (8.5x11”)

Each student’s reader contribution will be built into a resource hosted at typeinteraction.teachinginter.net/reader and is meant to act as a base resource for the rest of the semester.

Spend today researching and compiling visual and written resources, along with beginning your Sketch designs.

This evening should be spent beginning to code out your site.

Day 5


  • In class work session on prototype for assignment 2
  • Small group critiques/sharing research
  • File structures review for final build
  • Lunch
  • Work Session for Assignment 2


Spend this evening finishing up your section of the Reader.

For tomorrow, please have your file structure prepared as follows:

Day 6


  • Compile Active Reader
  • Final Critique on Assignment 2, with Section A (potential guest critic)





Active Reader

Class Syllabus

Class Google Drive

Class’ are.na


Raw Text to HTML Converter

Stack Overflow

w3 schools

Learn CSS

Code Academy — HTML

Shaw Howe, Learn HTML/CSS

Code Academy – CSS

Code Academy - Javascript

Code Academy - JQuery

Dev Docs

Fonts & Open Source

Google Fonts

Use & Modify


Open Foundry


Sublime Text

Sketch App