“I always felt that the website was the opportunity to add another dimension.”
Paola Antonelli, “Design and Violence: Zoë Ryan Interviews Paola Antonelli”, MAS Context 27, “Debate,” Fall 2015, 77–78 (See also Design and Violence blog)
“A book is a sequence of spaces. Each of these spaces is perceived at a different moment — a book is also a sequence of moments.”
Ulises Carrión, “The New Art of Making Books,” Kontext 6/7, 1975
“We need to stop thinking about the future of publishing and think instead about the future of reading.”
Clive Thompson, “The Future of Reading in a Digital World,” Wired, May 22, 2009
Laurenz Brunner, identity for Offprint London art publishing fair, 2017
Project 2: Paper & Pixels
Five weeks
Summary
In this second semester module we will be working with a complex long-form text of your choice (or provided by me if you prefer) and designing a readable, engaging, navigable typographic interpretation of the text across three surfaces: mobile, desktop, and print. With each version you should maintain a certain consistency for the everyday multi-platform reader (like you), but also approach the design & typography to make the most of each medium and its affordances and virtues.
On Crossmedia Simultaneity
In my experience, and I expect in yours too, the contemporary act of reading involves a simultaneity of, rather than a dichotomy between, media. As opposed to notions of what I think is an outdated “print versus digital” divide, the way we all read is increasingly fluid and crossmedia (one story, many channels). Read this brief useful post that helpfully distinguishes between the terms “multimedia,” “crossmedia,” and “transmedia.” (This is from a journalistic perspective, but the terms are of great relevance for typographers and graphic designers.)
As a personal example, I will often pick up, say, a New Yorker magazine by my bed to read a long-form article, continue reading it on my phone the next morning at a bus stop, then finish it off by pulling it up in a browser while I’m waiting for a book design PDF export to complete on my laptop. This flow of content between media, devices, systems, viewports, and substrates presents a tough yet intriguing challenge for typographers. In many design situations, there is no single finite format or surface that we can rely on. Sometimes we can’t even trust that the reader will actually see our predetermined design and typography settings: that book we’ve lovingly typeset might be read on a Kindle, with font selection and size determined by the reader’s taste, not by ours.
This project is about the flows described above, a spectrum from paper to pixels. We will work with a complex text (including subheadings, footnotes, quotations) plus accompanying images and captions, we’ll analyse the text’s hierarchies and structures, we’ll read it (of course), and we’ll establish a typographic strategy and system to deploy that content across print, web, mobile, and finally, raw hierarchical text (typography that doesn’t even involve actual typesetting).
Learning Objectives
- Critical analysis of typographic structures and systems
- Reading, processing, understanding, and the resulting design and typographic possibilities for the interpretation of: writing, essays, footnotes, image relationships, and other content types
- Typesetting, system design in InDesign, Sketch, Adobe XD, Figma
- Prototyping and documentation for clients/editors/printers/developers in printed, web, mobile, and text forms
- Careful, intuitive, practical selection of typefaces
- Establishing and maintaining consistency, and building identities, across media
- Designing within parameters and constraints, and developing an intuition, and solutions, for media where such parameters do not apply
- Going with the flow
Assignment
With a chosen complex set of text (including title, sections with subheadings, footnotes/endnotes, pull-quotes, and images with captions), you will format, typeset, design, adapt, and art direct the following versions:
- 1 a 16-page (minimum) print edition (with cover, spine, back cover, inside front & back covers), printed, cut, bound to correct size, in the form or a book or magazine
- 2 a desktop web version (representing the same content as print, as a single long-form page, or multiple pages/sections with menu, as you see fit), prototyped with Adobe XD or Figma, or better, on live web with Cargo or Webflow (or other templating system as desired), or with actual CSS/HTML if you have the capabilities
- 3 a mobile web version (as with desktop, multiple sections & menu if deemed appropriate, and same prototyping conditions)
You will also set up accompanying specification documents for:
- A typographic specifications, outlining all paragraph and character styles with font(s) used (for implementation of Paragraph and Character Styles in InDesign, and for CSS styles for the web)
- B print specifications for your print edition (catalogue or magazine) including paper stock, cover materials, binding, and other details (e.g. foilstamping, head and tail bands, cover flaps, embossing, &c.)
You are welcome to source your own long-form text (it will need to be a text the various elements mentioned above, you can potentially add your own section subheadings if the original doesn’t have them). Or you may choose from one of the five following art catalogues (disclaimer: designed by me!) and essays therein to use as your text:
- Trevor Fairbrother, “‘I am just a poor boy, baby / Lookin’ to Connect’: T.C. Cannon and the Times of Change,” in T.C. Cannon: At the Edge of America (Salem: Peabody Essex Museum, 2018)
- Charlotte Ickes, “The Surface of Stuff, The Stuff of Surface,” in Ginny Casey & Jessi Reaves (Philadelphia: Institute of Contemporary Art, University of Philadelphia, 2018)
- Amy L. Powell, “Food is Ready,” in Zina Saro-Wiwa: Did You Know We Taught Them How to Dance? (Houston: Blaffer Art Museum; Champaign, IL: Krannert Art Museum, 2016)
- Sandra Ruiz, “Crossing the Line: The Here and Now of Race and Gender and the Entanglements of Love in Performance Art and Pedagogy,” in Autumn Knight: In Rehearsal (Champaign, IL: Krannert Art Museum and Houston, TX: Project Row Houses)
- Lanka Tattersall, “Black Lives, Matter,” in Kerry James Marshall: Mastry (Chicago: Museum of Contemporary Art Chicago; New York: Skira Rizzoli, 2016)
With your chosen text:
- Most importantly: read and critically analyse your chosen text and its contexts (was it in a magazine or newspaper? Is it related to a physical gallery exhibition?). Think about the ideas and arguments expressed in the writing, and your resulting design’s editorial strategy, structure, hierarchy, modules, paragraph/character styles, and potential grid
- Part 1: Design and typeset a 16-page (minimum) book “blad” or magazine, plus 4-page cover (front + inside front + inside back + back: 16pp + 4pp cover = 20pp). Include a contents page (p. 1), and your chosen text (or as much of it that will fit within the remaining pages) (pp. 2–16). You might design the inside front and back pages as coloured endpapers, as patterns, as full-bleed artwork details, &c. Perhaps you’ll design a softcover with cover flaps, which would make it a so-called “8pp cover.”
- Parts 2 and 3: As you establish your print design, work with the emerging system and translate it into a two web versions: one for desktop, and one for a mobile breakpoint. For the web, there is obviously less a sense of “cover”, “contents”, &c. as with print. But you can design a larger header image with some kind of interesting typographic headline treatment. See e.g. the New York Times special editions and story links below. Design the web editions of your chosen essay as a long single page (or perhaps series of a few pages with an associated menu) within a larger main “book” website. Think about how columns and images might adjust and change from print to screen, from desktop to mobile. How can the constraints and affordances of each medium be used to their advantages, rather than simply forcing the exact same design across each platform?
- Part 4: The last, fourth, version of the text is more for “machine reading”, for handoff to a fellow designer, or printer, or to a developer: purely hierarchical non-formatted text, in the form of a stylesheet list. Character and paragraph styles listed and defined from your typesetting in InDesign, also specified for CSS, as documentation of your typographic decisions relating to typeface choice, and scaling in print, web, and mobile.
- Produce 1:1 scale media-specific prototypes for each of the three main formats (print, laptop, mobile), and a text document/PDF outlining and documenting styles and hierarchies for the documentation style sheet
- Live web links will be necessary for desktop & mobile versions, so we can all read and critique them in their original formats on our laptops and phones
Timeline
Week 4: Thurs 1 Oct
- For next week:
- Select a long-form text (in consultation with JG, to ensure it’s complex enough!)
- Read and analyse your chosen text: both in terms of its subject(s), approach (writer’s voice), and its structure (subheadings, paragraphs, quotations, footnotes, &c.)
- Try importing your Word doc into InDesign (using the process outlined in class) and setting it all in a number of initial test typefaces of your choice. Begin first rough page design, typography, and reading tests, place images with text and experiment with scale, balance, placement, &c.
- Bring examples of crossmedia print & digital designs you admire (or criticise) to share with the class next week
Week 5: Thurs 8 Oct
- Present analysis of system and content
- Share initial explorations in small groups
- Start crossmedia design strategy for web formats
- For next week:
- Work on first typeface tests (try different fonts, and tell us research/stories/feelings behind your choices), hierarchies of headline to body text to captions and footnotes, grid systems across media, test typography on screens and in print at actual sizes
- Bring 1:1 scale test layouts: printouts cut to actual size, web edition in laptop browser, mobile edition on mobile phone
Week 6: Thurs 15 Oct
- Work in progress
- Desk crits
- Rationalise and update style sheets for print and web
Week 7: Thurs 22 Oct
- Finetuning and production of print edition
- Establish type families, paragraph, and character styles
- Work in progress, testing, finalise prototyping of web versions
Week 8: Thurs 29 Oct
- Finetuning and production of web editions
- Printing and production of print editions (at least 2 copies: one for you, one for me to have in hand for final review)
Week 9: Thurs 5 Nov
- Final review: project readings, analysis, Post-It crit
- In-class exhibition of completed print and web prototypes
Some Readings, Resources
- Adobe Creative Cloud: Learn Adobe XD in 5 minutes (Adobe, YouTube)
- Adobe Experience Design CC (adobe.com)
- Adobe XD Tutorials, (adobe.com)
- Cargo video tutorials on how to get started with their template (and customising them for your own design): all RISD GD students have full free use of Cargo. See our class Slack for the code.
- Frank Chimero, “What Screens Want,” Build Conference, Nov 14, 2013
- Dansky, Adobe XD Tutorials (foreverdansky.com)
- “Getting Familiar with Figma,” (figma.com)
- John Kane, A Type Primer (London: Laurence King, 2003/2011). See “Headlines within text” 132; “Expressing hierarchy” 146–153
- Christina Paone, “Scrolljacking—The Usability Nightmare?,” Medium, Jan 21, 2019
- David J Plumb, Design and Print Production Workbook, 1978. See “Parts of a book” (including “Parts of a book page,” “Parts of a magazine page,” and “Grid construction.”)
- Readymag: another responsive web design template tool with numerous typographic, editorial, and UI effects (it can be impressive, but it can also be rather scrolljacky in my opinion). A bit pricey, but they offer 70% discount for students.
- Nick Sherman, “The Future of Responsive Typography,” An Event Apart Seattle, March 31, 2014
- Webflow video courses on YouTube, covering general HTML & CSS, and specifically on the Webflow responsive web design tools
Examples of crossmedia typographic systems, hierarchies, flows
- Newspapers: Washington Post; The Guardian; New York Times (e.g. specific sections or subsections like the Travel section’s opening “In Transit” page; Book Review; Sunday Business; &c.)
- Magazines: see mixed-content introduction pages; events or reviews listings; longform articles, &c. in e.g. Artforum, Bon Appetit, Frieze, New Yorker, New York Times Magazine, New York Times Style Magazine, Vogue, The Wire, Wired, &c.
- Particularly interesting are magazines/journals that have both print and online editions, e.g. Paris-based graphic design/digital technology journal Back Office. See, for example, the use of images, captions, body text, footnotes, in this great article titled “Thanks for Nothing, Adobe!” by graphic designer and art director Etienne Robial
- The New York Times consistently experiments with long-form essays, articles, and special thematic issues across print and web. Recent examples include their “1619 Project” and this weekend’s “Voyages” NYT Magazine issue.
- We’ve also already looked at one of the NYT’s series of shorter video-loop + image picture essays, “How Brexit Could Break Britain’s Food Chain,” but there are more in this series to explore and analyse, e.g. “This Is the Most Lonesome Job’: Ride With a ‘Hot Shot’ Oilfield Trucker in Texas” and “A Look Inside the Secretive World of Guantánamo Bay” among others.
- Websites: 99% Invisible, Curbed (e.g. features like Alexandra Lange’s “A Journey to Isamu Noguchi’s Last Work”), Five Thirty Eight, The Intercept (e.g. “Features” section, see “The Drone Papers” as a good example), McSweeney’s, Pitchfork, &c.