Projects

Project 6 - Final

Create a digital environment through the browser that has a similar immersive quality to that of a physical installation. The environment that you create should engross the visitor and take them on some kind of an emotional journey. That could take the form of a linear narrative—something with a beginning, middle, and end—or something that is more abstract and exploratory. The idea is to use the web as an artistic medium to transport your audience somewhere else.

Grading rubric:

The final project will be graded based on the following:

Project 5 - Javascript Transformation

Using all the tools that we have learned thus far, create a complete website that pretends to be something it is not. Maybe it’s an e-commerce site that turns into a music video; it could be a business tool that turns into a hoax, a dystopia, a parallel universe—that’s up to you. But the main requirement is that the site is at first believable and then undergoes some kind of transformation triggered by user interaction (Javascript!) that reveals it is not what you thought it was. Consider how it will render on different devices and use media queries where necessary.

Project 4 - Hoverstates and Animation

Since the inception of the personal computer, our main interactions with the digital world have been through a desktop interface. A metaphorical workspace where a mouse pointer is our avatar, a waste paper basket is a digital recycling bin, and our ‘files’ are stored in ‘folders’. As we move to the new touch interaction model, the desktop interface may soon be a thing of the past, including its interactions and metaphors. With a touch screen, the touch of the cursor is replaced by the human finger.

This project asks you to investigate the desktop interface, specifically through its unique interaction of the hover state. Hover states are considered a ‘pseudo state’, something explicitly thought of as in-between. They occur when your mouse cursor is positioned above another element on the page and act as an on/off switch with only one level of interaction. Even with these limited capabilities, they’ve become a key aspect of desktop web design.

Create 5 one-page web pages that each explore a physical metaphor in digital space through a single hover state (clock, bouncing ball, police car light, wind, etc.) each animating one of the following CSS properties on hover:

References

Project 3 - 15 Variations

Week 1

Find a piece of text that could easily fit on one printed page. This could be an excerpt from an essay, an interview, poem, etc. You will make 15 variations of this text. Each variation will be a separate webpage. For each variation, you will focus on changing the text’s form through shifts in composition, typography, hierarchy, scale, and pacing. The text’s content must remain intact throughout all 15 variations. Define 5 rules of changes for your text. For each of the rule come up with 3 variations each. For example, if the first rule is scale, then invent 3 significantly different ways of scaling the text. The purpose of the assignment is to push the boundaries and play with legibility, so no minor changes—shoot for making as broad a variation as possible. Do not use images.

For inspiration take a look at Carl Dair’s principles of typographic contrast that we discussed in week 3

Week 2

Add a navigation page for your 15 variations. Use the tools we learned in class to make the navigation page responsive for mobile, tablet, and desktop screen sizes. Your variations do not need to be responsive but feel free to update them if you wish. Get creative with your design and experiment with different kinds of nav layouts, keeping usability in mind.

Project 2 - Iterations on a poster

Week 1

Choose a real or fake event that you want to promote. Using flexbox, make five iterations of a promotional poster for the event using some sort of a system or grid. There should be a name for the event, date, place, description, and anything else you would like to include (graphics, contact etc). These should be quick iterations that we will refine in the next class and for the following week. Take a look at vertical rhythm or some of the early Swiss posters by Josef Müller-Brockmann if you need inspiration.

Week 2

Continue refining your posters. If you’d like to more closely follow the style of an existing poster using flexbox this is also acceptable.

Project 1 - Hyperlink Text

Week 1

Using My Boyfriend Came Back From the War as inspiration, publish either your own or an existing poem, short story, or article on GitHub, line by line or paragraph by paragraph. Publish each line/section/stanza/paragraph as a separate html page. The text should be broken up into at least five pages. Link to the next page in the page before. Experiment with wrapping different elements in the <a> tag. What can you use as a “next” button? Try images, text, and other HTML elements. Creativity is encouraged with this assignment! A template can be found here.

Week 2

Take the assignment you made for week 1 and use external CSS to style it. Experiment with using different selectors to target elements on your pages. Make sure to try using margin, padding, width, height, font, color, and background rules. Also be sure that you use only CSS for styling your page - no inline styles in the HTML or use of the <center> obsolete tag. Try to give each page its own unique style.