top of page
ART288_edited.jpg

ART 288: Interaction Design I

The class introduces the fundamentals of web typography and layout, as well as the standard design and development practices for the pervasive experiences of digital media and the cultural contexts that they exist within. It is primarily a studio course in which the fundamentals of coding for the web are taught through hands-on work each week.

Learning Outcomes:

  • Demonstrate core principles and techniques for graphic and information design using basic development tools, terminology and aesthetics

  • Interpret user research and testing through planning, curating and organizing digital content

  • Demonstrate creativity and inclusivity in the conception and development of interactive experiences for diverse users

  • Discuss interaction design principles and cultural practice

  • Employ current industry standards and systematic process for designing interactive products, starting from a high-level design problem and ending with a detailed specification

Blurry Blue
Blurry Blue

Project 1 Description

Task

Code a mini news web page from scratch using an assortment of relevant and credible articles. These articles should reflect your interests or concerns, defined either by sources, topics, or contents.

Deliverables

  • Content of at least 5 supporting articles with author name, date of publication, and publisher

  • Two-column layout grid or more

  • A header, a navigation, a body, a section, an article, and a list

  • Multiple levels of headings and paragraphs using font weight, size, style, text transformation, letter spacing, and line height attributes

  • Two font families and two colors, not including background color

  • Style properties and values of color, padding, margins & border

  • Different hover states for CTA buttons

  • Links to original source articles

  • Original graphics designed in Adobe Illustrator

Pastel Swirl
Pastel Swirl

Project 2 Description

Task

Code a recipe page and employ one of the most dynamic kinds of web content: images & other media contents.

Deliverables

  • Articulate the significance of the content in your cultural or historical context

  • A logical reading flow, clear user orientation, and user retention through dynamic layout

  • Multiple lists of ingredients, instructions, comments, and similar recipes

  • A header, a navigation menu, a body, and a footer

  • A dynamic layout of two (2) columns grid or more

  • Three (3) images or more and one (1) image for each comment

  • A clear and developed visual hierarchy

  • Different hover states for CTA buttons​

  • Print, share, and favorite buttons

bottom of page