Syllabus

Course Information

Web Type (RISD GRAPH-2313-01, 3 credits), Spring 2022

• Thursdays 1:10–6:10pm, Design Center 407 / Zoom (We will be running a hybrid model of in-person and remote meetings. See schedule for details.)
• Instructor: Marie Otsuka (Reach me at motsuka@risd.edu)
• Office Hours: Fridays 11:00am–1:00pm on Zoom. Sign up for a slot. Extra help is also available through Code Lab, Wednesdays 5:00pm–7:00pm.

Course Description

This course explores the intersection of typography and web design as a creative medium. By engaging with type that activates the capacities of browsers, we will push beyond “resonsive design” as a layout-based exercise and question what typography can “respond to” — whether user input, network conditions, or the physical environment. All projects will involve hand-coding web pages, using the browser for experimental research and engagement. Critique and discussions will broadly examine the sociocultural implications of publishing on the internet; technical instruction will include web languages such as HTML, CSS, and JavaScript, as well as type design technology such as variable fonts. A basic background in coding is recommended, but not required.

This course is purposely named with shortened, less precise versions the words “web” and “type” to broaden our perspective on our explorations.

Web could refer to websites, but also to the web infrastructure, to the technology and culture of the world wide web; the protocols that compose the fabric of our internet; the act of weaving a web.

Type could refer to typography — the arrangement of letterforms — but also the design and technology of typefaces themselves, the quality of letterforms; or to type, the act of typing, or writing, or coding.

Both are fundamental for communication: one a medium for its distribution, the other its foundational visual form. As designers, it is essential that we can critique and create work that thrives at their intersection.

Course Objectives

Web

• produce working prototypes of web pages with a working knowledge of HTML, CSS and Javascript/Jquery
• critically respond to material within the internet landscape, discussing the web as a very specific public space, with its own communities, forms of engagement, modes of communication
• learn how to problem-solve technical questions

Type

• use the browser as a platform for typographic expression and experimentation
• understand the technology involved in exercising typographic control on the web
• consider how a typographic system adapts to different devices and platforms and to user interaction
• develop a sensitivity towards typographic detail within the browser, and identify interesting examples of browser-based typographic media

Prerequisites

• basic understanding of typography
• a willingness to explore the web in all its many forms, uses, and aesthetics
• a curiosity for technical tools and the contextual infrastructure around design
• a tenacious spirit for trial & error

Tool and account Requirements

• A laptop
• Github account
• A text editor, such as Sublime Text or Atom for coding
• A Slack account for class communications: join here
• Glyphs 3 with the RISD institutional license
• For optional supplemental support
  • Access to RISD’s Panopto for video recordings
  • Sign up for a free account on Codecademy

Course Structure

Projects

Over the course of the semester, will explore various ways to engage with typography on the web through four large projects. These projects are ways to both gain technical skills as well as reimagine the boundaries of responsive text.

Critiques

During our crits, we will review your project based on the evaluation criteria outlined below. Projects should be “live” and working on the web with no missing assets — you should try accessing the URL from a different computer / device prior to the class. Be prepared to describe your design process. While we can raise technical questions here, critique time should not be used for troubleshooting; these should be addressed prior to the crit either by consulting your classmates or via office hours.

Readings

Readings will be dispersed throughout the semester to inform and contextualize our work. Be prepared to respond to the reading in the relevant slack channel, raise questions, and discuss the text.

Presentation & Discussion

In addition to reading discussions and class critiques, we will be sharing resources with each other, and supporting each other through technical challenges.

Each student is also responsible for preparing a brief 15min presentation on a topic surrounding the intersection of web / technology & typography using the browser as an expressive medium as part of the first project.

Exercises

Technical exercises, both in and outside of class, will strengthen our coding skills to build robust web pages and enhance our expressive capacity on the web. (Projects are longer term assignments we will crit during class, whereas exercises are shorter tasks that will familiarize you with a technical concept.)

Tutorials

Video recordings and Web tutorials, such as on Codecademy, will help supplement the technical instruction.

• A note on the video recordings: you must be logged into Panopto with your RISD account to view them. I recommend playing them at 1.5x speed.
• Sample code used in these video tutorials are available for downloada from the Web Type Demos Github Repository.
• Please note that there may be slight differences in the way the code is organized in the current repository, as I will be updating them as I review topics in class.

Policies

Attendance

You are expected attend every class, on time and prepared. If you must miss a class, please notify me as soon as possible. You are responsible to make up for any missed material by working with classmates and/or attending office hours before the next class. Three or more absences will result in a failing grade. Three arrivals later than 15 minutes is equivalent to an absence. See also: RISD’s Attendance Policy

Grading

• 70% Execution of projects and supporting exercises
• 25% Participation in critiques, class discussions, readings, and shares
• 5% Student presentation

Evaluation Critera

• All projects are not necessarily final on the designated crit day; it can be redone or improved until the end of the semester, when you submit all of your final work. Such improvements in the final documentation will be considered for the evaluation.

Classroom Etiquette

Please put away your cell phones while you are in the classroom, and actively engage in the classroom. Projects must be uploaded with a live url (with no missing fonts or images) before the start of class.

Diversity

It’s important to me that students from all diverse backgrounds and perspectives are well-served by this course, that your learning needs are addressed both in and out of class, and that the diversity students bring to this class are viewed as a resource, strength, and benefit. I will strive to present materials and activities that challenge accepted canons and are respectful and representative of diversity: gender, sexual orientation, disability, age, socioeconomic status, ethnicity, race, culture, perspective, and other background characteristics. Your suggestions about how to improve the value of diversity in this course are always encouraged and appreciated. Please let me know how I might improve the effectiveness of the course for you, or for other students or student groups.
See also: RISD’s non-discrimination policies on titleix.risd.edu

Learning needs

RISD is committed to providing equal opportunities for all students. If you are a student with a disability or condition that may require accommodations to complete the requirements of this class, I encourage you to discuss your learning needs with me during the first week of the term. Once an approval letter from the Office of Disability Support Services is submitted, accommodations will be provided as needed. For more information on how to receive accommodations, please contact Disability Support Services at 401 709-8460 or by emailing disabilitysupportservices@risd.edu.

Code of Conduct

All work is built upon other work; whether explicitly or not. You will find that a lot of the technical problems you come across have already been solved online, and learning code is a process that involves learning from these solutions. However, you will also find that in order to apply these to build original work, you will need to apply your own thinking and logic to properly incorporate it and make it work. Use of standard functions and common features are often acceptable to re-use; appropriating entire websites and their functionality are not.

Throughout the class, you will experience a range of opportunities to be inspired and influenced by other designers, artists, engineers, or other online sources. While plagiarism with the goal of deception will not be tolerated, it is normal to explore the work of others in new and original ways, and to express that influence through a variety of techniques — including homage, parody, style, derivation, and appropriation. As a general rule of thumb, if you see something you are excited about (in class or outside), understand the context in which it was made. What was the design responding to, communicating, and to whom. A deeper understanding of other people’s work generally produces additional ideas. We expect all GD students and faculty to maintain an open perspective towards these concepts, and to use this class as a safe testing ground for exploring influence, with the guidance of faculty. See also: John Caserta’s essay “It’s probably not plagiarism,” RISD’s Academic Code of Conduct.