Unit 1 Week 1-4: Working methods
The first segment
of Core Interaction will focus on the tools and concepts required for
building interactive experiences. We’ll use the languages of the web
because they’re accessible and immediately open up new modes of
communication for designers, but the concepts will be transferable to
any screen-based or interactive media.
In weeks 1-4 we will focus on:
Exercise prompts: journaling a field trip or a walk; morning pages
Unit 2 Week 5-8: Digital canvas
In our second
segment, we’ll investigate how designing for the digital canvas differs
from other media. We will aim to understand the inherent complexities
and how to use them to create compelling digital experiences.
In weeks 5-8 we will focus on:
Exercise prompts: interview; playlist; setting an old diner menu/cookbook/recipe in HTML
Unit 3 Week 9-11: Designing for interaction
Thinking about a website as a series of linked pages, we’ll take
the concepts we used to make individual web pages and apply them to
larger systems. We’ll explore how our systems can be designed to flex,
rather than break, under a wide range of variables while still
maintaining the original intent of the design.
In weeks 9-11 we will focus on:
Exercise prompts: collective entry for a web zine; screensaver as score
Unit 4 Week 12-15: Networks Because a website lives in a larger network of apps, websites, devices, and contexts, our final segment will explore how our website lives online. We’ll take the work we’ve done this semester and explore self-publishing and making our work public by putting our work on the internet.
In weeks 12-15 we will focus on: Setting up a GitHub repository and workspace Enabling GitHub Pages Writing in document JavaScript or connecting a script file Writing JavaScript variables and different types of data Accessing DOM elements using querySelector() /querySelectorAll() /getElementById() /getElementByClassName() /getElementByTagName() Using classList() to create interactive states Creating event listeners to basic mouse and window events Analyzing user models, creating Figma prototype for user flows and navigating Employing web services for media management
The first unit will focus on the fundamental relationship between structure (the semantic organization of content within and across documents) and style (the visual composition and presentation of content) as an organizing principle in design and on the web. We will examine how users navigate and orient themselves across chunks of content in a non-linear fashion. We will also examine how typographic concepts are expressed digitally and are responsive to the fluid and dynamic properties of the screen.
We will also learn the basics of using Figma as a prototyping tool to express these ideas of structure and style with a focus on its typographic capabilities.
Building on Unit 1, we will focus on the parts of an interface and how it responds to different valid, invalid, and edge conditions caused by user behaviors and interactions. Here, we will examine how users navigate and orient themselves within a process (as opposed to content) that is dynamic and changing and learn about basic user testing. We will also build upon our understanding of fluid and responsive typography to examine how this extends to compositional elements and form making on the web and the screen.
We will also continue to explore how to express compositional ideas through Figma with a focus on reusable and dynamic elements like symbols, components, and layout properties as well as utilizing the tool’s basic prototyping capabilities.
In the final unit, we will consider what occurs when the content of an online experience, its interface, and its users are dynamic and in a state of constant change. This final unit requires students to build upon the lessons from the previous two units to design a platform for a community audience and to create a system that can flex and accommodate unpredictable conditions.
We will also explore some of Figma’s more advanced capabilities like variables and plugins that allow for more advanced ways to prototype and test our design ideas.
Class Project: Harmonic Collection
TLDR: You’re going to pick a theme to explore visually for the duration of the semester. Each week, you’ll design and code an entry to a collection that explores this theme. At the end of the semester, you’ll deliver a website that houses 10 programmed entries. The website container is part of the design, as well.
Project Description
In mathematics, a sequence is
defined as a series of numbers arranged in a predictable pattern. It’s a
type of number set which follows specific, definite rules. When
translated to design, sequencing is a natural part of systems — each
individual item has unifying elements that when looked at as a whole,
tells a larger story.
In this class you’ll create a Harmonic Collection that explores a theme of your choice. Each week, you’ll design and code an entry into your collection that makes use of the design focus and HTML, CSS, and JavaScript skills we’re developing. First, you will pick a theme of your choice (think of it as the overarching concept you’ll explore through a series of sketches). Your theme should be open-ended enough to encourage a range of content, but specific enough to inspire an idea each week for twelve weeks. (Example themes: Your daily commute, songs you heard while walking around New York, interesting words you came across in articles this week). In the final weeks of the semester, you’ll refine your 10 entries so that they communicate a clear exploration and deliver a website that houses all of them together. You might need to re-organize or add additional content to your container or entries to fully realize your idea.
Minimum Requirements
Midterm Edit
For Midterms, we will have a one on
one meeting. At that time, you will present a refined iteration of your
current collection. Prior to this meeting, you’ll chat with your fellow
classmates about the following questions:
1. What is your theme? Has it evolved from the initial description?
2.
How is the content communicating the theme? What about the design?
3.
How would you describe the pacing of the collection so far? Does it feel
considered? Can there be a moment for a dramatic break, or an
acceleration?
4. Are there opportunities to establish a template or
system to the design — if so, when, where, and how? Can we break the
system mindfully to add interest?
You will also prepare a short written doc (one paragraph) that explains your collection’s theme so far and explains three other avenues you can explore for the remaining weeks of the semester.
| Week 1 | Working Methods |
|---|---|
| Lecture | Computers, files, and networks |
| Design Focus | Project Concept + Organization, Tools |
| Technical Skills | Introduce Figma as a design tool + text editor. Difference between local and online, starting a new project, locating files on your computer. |
| Homework | Come to class with three ideas for your Harmonic Collection’s theme. |
| Week 2 | Working Methods |
|---|---|
| Lecture | What is HTML? |
| Design Focus | Working with limitations; Typographic hierarchy |
| Technical Skills | Using text editor and dev tools in browser. Opening an HTML page in a browser. HTML basic syntax, page structure, hyperlinks and elements. Figma for organizing research and references. |
| Homework | Harmonic Collection Entry 1 |
| Week 3 | Working Methods |
|---|---|
| Lecture | HTML/CSS basic concepts and syntax, web typography intro |
| Design Focus | Developing design references. Narrative and visual flow. |
| Technical Skills | Setting up a project in Figma, looking at different modes (design/dev/draw/prototype). Connecting a stylesheet. CSS overview: colors, selectors, images, stylistic changes. |
| Homework | Harmonic Collection Entry 2 |
| Week 4 | Working Methods |
|---|---|
| Lecture | Layout + structure on screens, thinking about color |
| Design Focus | Typescale. Color theory + accessibility |
| Technical Skills | Web typography continued. Figma: grids, layout guides, setting text styles. |
| Homework | Harmonic Collection Entry 3 |
| Week 5 | Digital Canvas |
|---|---|
| Lecture | HTML structure (box model, dissecting a web page) |
| Design Focus | Layering, Collage |
| Technical Skills | Positioning with HTML and CSS, structuring a page, Flexbox Intro |
| Homework | Harmonic Collection Entry 4 |
| Week 6 | Digital Canvas |
|---|---|
| Lecture | Layouting continued |
| Design Focus: | Grids and Composition |
| Technical Skills | Position, float, flexbox, CSS grid |
| Homework | Harmonic Collection Entry 5 |
| Week 7 | Digital Canvas |
|---|---|
| Lecture | Responsive Units and Media Queries |
| Design Focus | Designing for Multiple Devices |
| Technical Skills | Viewport units, percentages, media queries |
| Homework | Harmonic Collection Entry Midterm Edit — Review and revise all of your entries so that they are responsive and beginning to create a coherent story. |
| Week 8 | Digital Canvas |
|---|---|
| Lecture | Midterm presentations |
| Technical Skills | Review responsive units and media queries, In class midterm activity |
| Homework | Harmonic Collection Entry 6 |
| Week 9 | Designing for interaction |
|---|---|
| Lecture | Visual and behavioral consistency for design systems |
| Design Focus | Gestalt Principles and Interaction Design (proximity, similarity, continuity, etc.) |
| Technical Skills | CSS transitions and animations. |
| Homework | Harmonic Collection Entry 7 |
| Week 10 | Designing for interaction |
|---|---|
| Lecture | Programming basic user interactions I |
| Design Focus | User flow and interactivity |
| Technical Skills | JavaScript introduction, data types, browser console, alert window |
| Homework | Harmonic Collection Entry 8 |
| Week 11 | Designing for interaction |
|---|---|
| Lecture | Putting a website online (hosting, Github pages, custom domains) |
| Design Focus | Consistency and systems |
| Technical Skills | Figma prototype, setting up Github repo, enabling GH Pages |
| Homework | Harmonic Collection Entry 10 |
| Week 12 | Networks |
|---|---|
| Lecture | Programming basic user interactions II |
| Design Focus | User models, UX |
| Technical Skills | Accessing DOM elements, event listeners, class manipulation |
| Homework | Harmonic Collection Entry Revision |
| Week 13 | Networks |
|---|---|
| Lecture | JavaScript libraries and APIs (optional) |
| Design Focus | Generative art / JS libraries |
| Technical Skills | JS libraries or API showcase of P5 or any resource of instructor’s choice |
| Homework | Harmonic Collection Entry 9 Bring in questions for the group question and answer session |
| Week 14 | Networks |
|---|---|
| Lecture | Group question and answer session |
| Technical Skills | TBD |
| Homework | Harmonic Collection Final Edit |
| Week 15 | Networks |
|---|---|
| Lecture | Harmonic Collection final presentations |
| Technical Skills | |
| Homework | Happy holidays! |
Learning a new skill is a challenging and iterative process. At times messy, it’s in these moments of frustration that we allow ourselves to grow and have a new experience. Do not rob yourself of the opportunity to do that.
That being said, students are allowed to use ChatGPT as a
supplementary tool to enhance their learning experience during this
class. ChatGPT is a powerful learning aid that can be used to:
1. Proofread code you already wrote
2. Add an explanation to why the code is or isn’t working so that you
can understand it better
3. Debug and catching typos
It is important to maintain a philosophy of learning, critical thinking, and independent problem solving throughout the class and to open ourselves up to the mental space of being challenged. ChatGPT can help you understand your code better and help you identify typos, however, it is not a substitute for learning how to code yourself, or developing creative solutions to the projects. Hands-on coding, visual experimentation, and diligence are all important skills in becoming a designer, and we should commit to developing these skills in the classroom and beyond. Using ChatGPT to complete your entire project is not permitted, nor can it be used for generating ideas. If you choose to do this, the person you’re disadvantaging is yourself.