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.
The final project will be graded based on the following:
- Immersion and Modes of Interaction - 20%
- Does the project exhibit several distinct modes of interaction?
- Does the site create an immersive experience?
- Theme - 20%
- Does the site follow the prompt and have a consistent user experience?
- Does the site take the user on an emotional journey?
- Design - 20%
- Does the site follow design principles outlined in the class?
- Do the various design elements come together to tell a coherent story?
- Originality of Concept - 20%
- Does the project demonstrate an original and novel concept?
- Overall Fit and Finish - 20%
- Does the website have any bugs?
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:
- Background color
- Any other CSS property or combination of them
Project 3 - 15 Variations
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
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
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.
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
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.
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.