Fall #

This first semester will focus on a mastery of type and layout concepts on the web.

• Submitted Version
• Course Catalog

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 (HyperText Markup Language) and CSS (Cascading Style Sheets) 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.

• Submitted Version
• Course Catalog

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 JS (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.

Fall #

By the end of this semester, students will:

• Demonstrate advanced knowledge of and be able to critically analyze type, form, and interactivity as it applies to screen-based media.

• Understand how to effectively deploy type hierarchy in layout and grid systems, in responsive, device-agnostic design.

• Effectively translate these designs into functional websites using HTML, CSS, and other web technologies.

• Design and prototype work while taking into account the ever-shifting, bespoke challenges of web design.

• Give, receive, and respond productively to feedback in critiques.

• Think critically and develop their own, distinct thoughts on the role of digital within the larger canon of design.

Spring #

By the end of this semester, students will:

• Thoroughly exercise and extend their typographic, design, and technical web skills developed in the first semester.

• Learn to use modular, templated HTML components with varied and dynamic external data sources.

• Understand the CMS (Content Management System) and API (Application Programming Interface) as software archetypes.

• Be introduced to JavaScript and programming logic, the underlying concepts that make interactivity possible.

• Gain an awareness of processes, methodologies, approaches, and systems in use in contemporary software development and on the web.

• Conceptualize a web project with an eye towards its complete implementation—balancing the tradeoffs between design, features, and practical build considerations or limitations.

• Develop an understanding of how they want to practice as a designer within the larger context of the discipline.

Unit 1: Type and the Web #

Unit 2: There Is No Perfect Layout #

Unit 3: Typography as Interface #

Unit 4: Interface as Interface #

Unit 5: If All You Have Is a Hammer, Everything Looks Like a Nail #

Fall #

Spring #

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:

• The class should feel comfortable asking the instructors anything—nothing is too trivial, or embarrassing, or off-topic. Tangents are good. Students can ask us via Slack, if they would like to remain anonymous.

• Classmates should use our preferred names and pronouns.

• When presenting, students will “have the floor” while they take us through their work. This means everyone else will be quiet, we’ll close our laptops, and give our full attention to the person showing their work.

• We will all engage meaningfully with presented work and try to give constructive feedback (no fluff).

• Fall semester, we’re not going to copy/paste any of our code. We’ll talk about appropriately using Stack Overflow and large language models (“artificial intelligence”) in the Spring.

• We will attribute our work when referencing other tools or examples.

• We will have a short break, roughly halfway through the class.

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.

Office Hours #

We will have limited availability outside of our class time, and won’t keep scheduled “office hours.” Students should not expect us to immediately solve specific design or technical problems, or be blocked by this. 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) to “thorough paraphrasing” (changing names or rearranging) of code. Students should also review the Academic Integrity Policy.

An example:

		/* I wanted to treat large grids differently in my design! */
/* I found this tool: https://css-tip.com/quantity-queries/ */
/* The selector matches when the container has a sixth child. */
.container:has(> :nth-child(6)) {
	background-color: gold;
}

	

LLM s 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 Chat GPT 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 permission or attribution—means the use of these tools remains fraught, at best.

We think you first need to write code yourself to understand the medium. Copying/adapting from Chat GPT/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. We think you know the difference.

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.