Core Interaction

# About the Studio and Lab Classes

# Core Studio

# Download Studio Syllabus

# Course Description

The course is focused on gaining a deeper understanding of the Internet as creative platform—where did it come from, how does it work, how do you make things for it, and what do you want to say? We will critically examine the web from many angles and we will learn how to turn it upside-down based on our needs as a designers, writers, artists and coder.

We will conduct an extensive investigation into the interface, mechanism, controls, and aims of interactive works. Students will learn how to design and develop complex interactive projects, undertaking comprehensive research and directing their thinking process from brainstorming to final outcome. We will work from an open-ended definition of interactivity: any reciprocal action between two or more parties. With this definition, what a website looks like and how it can function opens up.

Students will learn foundational, front-end languages HTML, CSS, and JavaScript in order to produce creative content for web distribution. Students are required to come to class prepared with questions and concerns. This is not a tutorial class. We, all together, will use the class time to solve problem-based questions. Each student is expected to work autonomously at home. There will be a lot of making this semester, both in class and out, and you will be coding everything from scratch.

# Learning Outcomes

  • Concept projects that use interactivity and code in an unexpected way;
  • Present your design process and articulate the reasoning for your decisions;
  • Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support usability and create consistency;
  • Demonstrate the ability to gather ideas and make connections between disparate things;
  • Problem solve with your peers;
  • Be able to archive and document work that is printed, on screen or time based in a reflective manner.
  • Demonstrate a comprehension of skills, methods, techniques and processes to realize interactive systems.
  • Develop a strong understanding for the cultural context of interaction design and how it relates to the internet as a medium.

# Core Lab

# Download Lab Syllabus

# Course Description

This course serves as a complement to Core Studio Interaction. The assignments are built to work in tandem with the projects students are developing in the studio class. The lab is designed around a series of small workshops that teach beginning and intermediate interaction design through a hands-on engagement with HTML and CSS.

# Learning Outcomes

  1. Apply skills in HTML

    • Standards: W3C, the World Wide Web Consortium: W3C recommendations as standards
    • Understand the difference between programming and markup
    • Title, Meta (keywords/descriptions); !DOCTYPE and Document Type Definition
    • HTML tags and the HTML Element Syntax including opening/closing tags, nested structures.
    • HTML Attributes: class, id, style, title
    • Headings, Paragraphs and Formatting
    • Links, lists, forms and images
    • The Box Model
    • HTML5 Semantic/Structural elements
    • HTML5 Media Elements

  2. Apply skills in CSS

    • Cascading Style Sheets, their storage in external CSS files and reference in HTML
    • Styling backgrounds, text, links, lists and forms
    • Styling the Box Model: border, outline, margin, padding
    • Working with dimensions, positioning, display, floating and align
    • Color systems
    • Manipulating images with CSS
    • Using Webfonts
    • Using CSS to create interactive elements
    • Media queries and responsive design

  3. Understand the meaning of JavaScript/JQuery

    • Basic idea of JavaScript and JQuery

  4. Prepare Images for the Web

    • Digital Image Formats - what are they for and how are they created professionally: GIF, JPG, PNG
    • Working for different resolutions

  5. Understand Web Environments

    • Getting it online: Purchasing URL/Webspace
    • Use FTP to upload files
    • Use in-browser tools to troubleshoot and amend HTML/CSS
    • Search engine optimization
    • The role of content management systems / blog systems

# Assessable Tasks

# Weekly Homework Assignments:

  • Each week there will be 1 homework assignment due by the start of class and posted to your Github Page. We will review the homework in the class it is due so late work will not be accepted.

# Present on a Public Website:

  • Every class will begin with a student presenting on a public website they find interesting. The student is expected to facilitate a discussion with the class to dig into how the site was built. Both explanations of features and outstanding questions are expected. These will begin in our week 3 class meeting on Feb 7th. Post your submission on your Github page prior to your week.

# In-Class:

  • Homework review. Each week, students will be called upon to present their homework to the class. There are many ways to solve a problem with code—we will have a discussion on the varying approaches.
  • Throughout the semester, we will have individual and group challenges during class time to push your knowledge of the concepts discussed in class.

# Evaluation and Final Grade Calculation

Category Percent
Active Participation / Attendance 20%
In-Class Activities 20%
Weekly Homework Assignments 60%
TOTAL 100%
Last Updated: 1/26/2020, 7:38:01 PM