Core 1: Interaction is designed to introduce students to programming as a creative medium—as a way of making and exploring. The coursework focuses on developing a vocabulary of interaction design principles which can then be applied across a range of platforms. Students are encouraged to experiment with various media, tools, and techniques, ultimately producing a portfolio of interactive and visual projects designed for the screen. An emphasis is placed on typography as it applies to a screen context, research-based problem solving and a learning-through-making approach to technical skill building. Historical and current interaction design precedents will be discussed.
Learning Outcomes
By the end of the semester, students will be able to:
Use a basic vocabulary of interactive media to both give and respond to critique productively.
Create compelling interactive experiences through more careful and inspired interpretation/translation of content(i.e. develop great design concepts)
Demonstrate an understanding of the iterative making process in interaction design, using incremental methods such as prototyping, user research and evaluation to build toward more advanced work.
Conceptualize a product, object, or experience for the web and realize it through coding.
Evaluate the difference in designing interfaces for different kinds of devices, their limitations and specific user situations including responsive websites and apps for mobile.
Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support usability and create consistency.
Research historic and current design precedents to contextualize your own work.
Be able to archive and document work that is printed, on screen or time based in a reflective manner for learning portfolio.
Combine your artistic creativity with technology related to the internet.
Demonstrate a comprehension of skills, methods, techniques and processes to realize interactive systems, particularly systems for dealing with unpredictable, variable, and ever-changing content.
Assessable Tasks
p0 Expressive Text(Week 1)
Choose one piece of text and use the HTML only to create 2 different versions. In these 2 versions, try organizing the text based on your own understanding and express it differently. Think about how the hierarchy and the layout of the text can change the experience of reading when scrolling through it.
In the first version, only use elements like <p> <br> <hr> to space out the text.
In the second version, display the text using elements we’ve learned so far as much as you can, such as <h1>-<h6> <p> <ul> <ol> <em> <strong>, etc.
p1 20 Variations(Week 2-5)
Create 20 separate webpages of a poem using HTML & CSS. For each variation, you will focus on changing the poem's form through shifts in composition, typography, hierarchy, scale, and pacing. Version 1-8 should be HTML only. Use both HTML & CSS in version 9-16. In version 17-20, use CSS flexbox and grid to experiment more ways of layout.
a. HTML only(1-8)
Try displaying the profile both in conventional and unconventional ways. Explore more HTML elements that you’re curious about(<table> <form> <pre>, etc.) What are the default appearance and function of different elements? What happens when you break the sentences up, place them more condensed or more expanded and distant?
*Make sure to use these tags at least once(not necessarily at the same time):
Core 1: Interaction (PUCD 2035)
Course Description
Learning Outcomes
Assessable Tasks