&

📃

Our syllabus

Course description

Typography & Interaction is a year-long course, divided into two classes, which will provide a rigorous foundation of typographic and interaction principles in the context of digital design. Over both classes, students will acquire and hone the skills they need for success in the field of interactive design.

Fall

This first semester will focus on a mastery of type and layout concepts, with the second semester emphasizing interaction and interface design principles.

Typography is the infrastructure of communication in nearly any visual medium. It provides the very first shape and form to written content, and as designers, it is our responsibility to do this with intention and care. Whether towards goals of expression itself or in the service of ideas, the designer must understand type to use it successfully. In this way, we are stewards of meaning.

Digital design, the web in particular, is inextricably linked with typography—from the very letters of code at its base to the words in arrangement we see on a screen. Type, thus, is the scaffolding in which all interaction design first rises. The very shape of the web, in its layouts, grid systems, and patterns—and its various technologies—all exist in the service of type, at their root. They provide the tools with which we can breathe a form and different, digital life into that meaning.

In this class, students will learn intermediate and advanced methods in typography and layout as they concern interactive design. We will use web technologies as the lens to examine this subject—introducing the foundational, front-end languages of HTML and CSS to achieve our designs. Students will understand the specific challenges of type in this medium, but also how it offers unique and particular forms to us as designers. They will learn the common tools and paradigms with which we practice, while developing their own visual, design vocabulary and critical understanding.

Spring

Our second semester will build on the type and layout foundations from the first, moving into interface design and interactive experiences on the web.

Interaction, interactive, interface, product, UI, UX designers—we are known by many names. These are all monikers for a digitally-native design practice. It is our responsibility, as practitioners in this increasingly consequential and broadening field, to both understand existing paradigms and help manifest, refine, and sustain purposeful new ones.

Contemporary digital design exists in the continuum of the ever-shifting, evolving, and ubiquitous web. Designers today work at many different scales and within many different systems. We act as mediators—not only for users, meaning, and experience—but with these systems themselves, as well. They shape our work and we shape them—at the meeting point, the interface, between things.

In this class, students will learn to give form to and then work at these intersections. We will again use web technologies as our lens for the subject, building on our foundations in HTML and CSS by incorporating JavaScript—to give behavior, interaction, and life to our designs. We will survey modern approaches to front-end design and development, as our discipline has as many methodologies as we do names. There is no one way to do this work, nor one thing to do it for—and through our readings, discussions, exercises, and projects, students will understand and then situate themselves and their practice within the larger field.

Learning outcomes

Fall

By the end of this semester, students will:

Spring

By the end of this semester, students will:

Assessable tasks

Unit tasks

Projects

The bulk of the work for this class takes the form of projects. They are intended as opportunities for students to apply knowledge and skills learned in class while developing their own practice. There will be check-ins and presentations around each of these before the final due dates, when we will have critiques as a group:

Evaluation and final grade

Fall
Participation 20%
Reading reviews 10%
Exercises 10%
Project 1, Manuscript 10%
Project 2, Spread 20%
Project 3, Binding 30%

Spring
Participation 20%
Reading reviews 10%
Exercises 10%
Project 4, Links 20%
Project 5, Functions 40%

Course outline

Unit 1, Type and the web

Weeks 1–5 Weeks 1–6

We will focus on reviewing core principles of typography, and introduce the web and its base technologies. Students will learn about HTML, semantic DOM, basic CSS, as well as type hierarchy and the use of custom typefaces for the web.

The unit ends with Project 1, Manuscript, which students will present on September 27 October 4.

Readings

Unit 2, There is no perfect layout

Weeks 6–9 Weeks 7–10

Students will learn how to design and implement more complex, flexible layouts, while collaborating closely with a classmate. We’ll introduce responsive design, media query CSS, and advanced web type techniques.

This unit concludes with Project 2, Spread, which students will present (in their pairs) on October 25 November 1.

Readings

Unit 3, Typography as interface

Weeks 10–15 Weeks 11–15

In our final unit, we will focus on creating advanced, multi-page layouts with grid systems, prototyping their flows, and exploring typography’s usage as interface elements for navigating a website.

This unit, and the first semester, will culminate with Project 3, Binding, which will be presented in class on November 22 November 29.

Readings

Unit 4, Interface as interface

Weeks 16–21

We will expand on our first-semester foundations in design, typography, HTML, and CSS—now incorporating images and other media while introducing JavaScript to enliven our work. Students will be introduced to a CMS and will work with an API.

The unit ends with Project 4, Links, which students will present on February 28.

Readings

Unit 5, If all you have is a hammer, everything looks like a nail

Weeks 22–30

To wrap up the semester (and course), we’ll round out our knowledge of the web’s intricacies—handling user input, managing state, constructing metadata. We will examine how our projects participate in and live elsewhere on the web, and outline real-world processes to make them come together.

This unit, and the course, will culminate with Project 5, Functions, which will be presented in class on April 24.

Readings

Materials and supplies

In the open tradition of the early web, the only materials truly required are a computer, a browser, a text editor, and an internet connection. The specifics of these are open to the student’s individual preferences and practices. We will do our best to accommodate everyone and will make recommendations, when needed.

In class, we will demonstrate using Figma for visual design and sketching, Visual Studio Code for programming, and GitHub / GitHub Desktop for version control and project hosting. All of these products are available for free, or offer free education licenses to New School emails.

We will use the following tools to organize our class:

Our class policies

Our community

This agreement is intended to help us create and maintain a safe, empathetic, and productive space for our course. It can be revised and modified, with all of our input, over the year:

Inclusion

Our intent is to respect and give forum to a range of perspectives and backgrounds, including culture, race, gender, sexual orientation, socioeconomic status, disability, and age. In instances where we are personally not qualified to speak from a specific perspective, students are encouraged to explore this area themselves. And please let us know if there are ways that the course can better serve these goals.

Engagement

There are program policies (below) around attendance, but we also have an engagement policy—which will likewise affect students’ evaluation and final grade, as their engagement will be unavoidably reflected in the quality of their work.

Students are expected to actively and passionately participate in this course. This means more than showing up and turning things in on time, which should be a given. Beyond that baseline, students should be curious, prepared, thoughtful, vocal, and intentional throughout the course. They should make us understand why they are here, and demonstrate to us that they care about themselves, their work, and each other—and ultimately, about this chosen profession.

Office hours

We will have limited availability outside of our class time, and won’t keep scheduled “office hours.” Students should not rely on us to solve specific design or technical problems. Their first resource should be themselves, then this course site and its materials, and then each other.

If there are still questions—particularly logistical or content ones—students can message us on Slack, and we will respond when we can. But this should never be a bottleneck; all of this works better when not done at the last minute.

Additional technical help

For more specific technical instruction and questions, Parsons has dedicated CD-program tutors available to help students with HTML, CSS, and JavaScript—as well as offering general design critiques and feedback. The drop-in schedules are available in the CD@Parsons app under “Make & Remake.”

The University Learning Center also offers its own tutoring sessions; these are by-appointment.

As tutors are only available a limited number of hours per week, it is advisable to start early on your projects and seek help along the way—to avoid the usual end of project/semester rush for additional help.

Code plagiarism

Students may find code similar to our exercises or projects elsewhere online. But the copying or adapting of any code beyond our provided course material (lectures, exercises, demos) without attribution is not allowed under any circumstances.

If adapting, with attribution, students must explain the usage and demonstrate an understanding of how it works. We have zero tolerance for any sort of plagiarism—which ranges from “verbatim copying” (copying-and-pasting code) to “thorough paraphrasing” (changing names or rearranging code). Students should also review the Academic Integrity Policy.

LLMs and “artificial intelligence”

Relatedly, there has been a lot of discussion and developments in our field (and others) around large language models, a.k.a. “artificial intelligence.”

Here’s what we’re going to say about this: tools like ChatGPT or GitHub Copilot are known to often generate wrong or unnecessarily verbose code. This, combined with the fact that their results are derived from potentially copyrighted and/or legally questionable sources—usually without attribution—means the use of these tools is fraught, at best.

We think you first need to write code yourself, to understand the medium. Copying/adapting from ChatGPT/Copilot is no different from anywhere else (see above) and is ultimately a disservice to your education. These are to be treated like any other tools at our disposal—as aides to your understanding, not shortcuts around learning.

Recording sessions

We will take screen recordings of our sessions for students to reference later. As these will include the students and their work, the recordings will be stored on our Google Drive and made available only to New School email users.

Attendance, grading, and other policies

All CD classes adhere to the same common program and university policies.

Acknowledgments

We’d like to thank Brendan Griffiths, Lynn Kiang, Laura Tolomelli, Tuan Quoc Pham, and Rijk van Zanten for their support in planning this syllabus and class. And thank you, for reading this far.