Core 1: Interaction

Student Portfolio

Overview

As we wrap up the first semester of Core Interaction, let’s put everything we’ve learned together in the form of a student portfolio.

For our final project, you’ll design and program a website that houses all the work you’ve created in this class. You can think of this activity as an open book test – while you should develop a customized visual system that compliments your work, there are specific code requirements I’d like you to include.

Content

In terms of content, your class website should link to: Your interview project Your rock garden project

Your p5 exercises Your hover exercise Your Wikipedia article exercise Your coding from life exercise Your CSS animation exercise Your JavaScript sketch exercise

Your design journal (optional)

Design Questions to Consider

  • How do you present your work? Thumbnails? Typography? Combination of text and language?
  • Are case studies important?
  • How can you distinguish between exercises and projects? Is the process of each project important, or do you just want to highlight the end result?
  • What did you take away from this class? What kind of information would best represent this if you looked back on it in a few years?
  • How would you like to remember this course?
  • Were there any commonalities between your projects? If so, you might want to highlight this.
  • What is the typographic system on this website? How can it establish an aesthetic while also develop hierarchy?
  • How can you develop consistency between interactions and UI elements?

Coding Requirements

  • The website must be responsive (Use either flexible increments, and/or media queries) – Review Week 7 Notes
  • Your homepage should include one of the following: CSS Animation, JavaScript interaction.
  • All links should be consistently styled and have hover effects.
  • All links must work!
  • You should use a custom typeface for this project, unless you have a philosophical decision to use a default typeface
  • You need to include at least one image or SVG on the website.
  • You need to include a favicon (should be a 32 x 32px png).

Due Date

12/07