Jillian Rees

Core 2 – Interaction

Students

Sharing Commonalities

A Collaboration with Xinyu Qiao and Chichi Zhao
Jan. 29, 2021

Lab Assignment brief

Use Glitch.com to create a communal website that tells your group’s story. Your story should be unique to your group, and your website should reflect this. The story that you tell and the way in which you tell it are open-ended, but it should give the class some insight into who you are and a snapshot of what you have in common. Try to leverage the medium of the web – how can you tell a story online in ways you can’t do in print?


Project 1: Cross-Platform Storytelling

Jan. 19 - Feb. 02, 2021

Studio Project brief

Tell a story that begins with a web page you build and ends with a link to the starting point. Your story may be fiction or nonfiction. Traverse at least three platforms in between, leveraging the strengths of each to help your reader visualize the story. You could, for example, lead your reader to a TikTok video, then to an Amazon review, then to a LinkedIn profile, then to Instagram, and from Instagram to a dropped pin in Google maps. You can visit a platform more than once.


Typography on the Web

Wikipedia Layout 1

Wikipedia Layout 2

Feb. 05, 2021

Lab Assignment brief

For the first layout (in-class), choose a Wikipedia article and copy the basic content of the article into your own HTML file. Use custom fonts and CSS to style the text. For the second Wikipedia Layout – Use the same HTML from your in-class typography exercise, but create a completely new layout for it using CSS. You should use different fonts, different type styles, etc. Try to make this second version as different as possible from your first layout.


Structure and Animation

Event Poster

Feb. 12 - Feb. 19, 2021

Lab Assignment brief

Create a digital poster for an event that can’t exist. Think about what an event means to you now, when group activities are so limited. The poster needs to be visually captivating. It should immediately grab the viewer’s attention and make them want to know more about the event. The poster must function well when viewed at a variety of screen sizes. Think about what you can do in a digital environment that’s not possible in print.

You must include the following techniques: Flexbox, Grid, CSS animations, Media Queries and Positions.


Music Collection

Assignment

Feb. 26 2021

Lab Assignment brief

Create an online collection of music using traditional layout components of a website (otherwise known as the 'Holy Grail' layout). You may choose to organize artists, albums, songs, record labels, music genres, etc., but the collection you choose must be comprised of distinct types of data. There should be a theme to your collection. Try to come up with a bigger narrative to tell based on what you choose to collect. In your catalog you must have at least 25 types of data to organize (25 artists, or 25 albums, or 25 songs, etc.) Your catalogs must include images and/or other rich media. Consider using embedded content to enhance your catalog. YouTube videos and Spotify playlists are easy to embed using 'iframe' tags.


Javascript Intro Exercise

Assignment

Feb. 26 2021

Lab Assignment brief

Create a new HTML file and create a link to a `main.js` JavaScript file. Use that JavaScript file to complete each of these tasks in class. For each task, use `console.log()` to log the result of the task to your DevTools JavaScript console. You will not be able to see the results of your JavaScript code without looking at the DevTools console.


Project 2: Stories as Networks

Feb. 04 - March. 02, 2021

Studio Project brief

Read through the short story selections and choose one short story to set the text using HTML and CSS (JS optional) so that the reader will not only be able to read the story but also experience your interpretation of the story. Use the visual language of the web—hypertext, responsive design, forms, color, divs—to express the meaning of your selected story.You must use multiple views to convey this experience— it will be viewed on both large and small (mobile) screens, you may use no more than two typefaces, and representational images are not allowed