Assignments

Studio Assignment

Make a simple web page for the presentation content. Use the template we created in class using the img tag.

The following pages will get you started, but please use an additional online source and link to it using the a(anchor) tag.

• Web History Timeline
• History of the Web

Assignment Template Page

Reading

Please read the following article, and write a short response (3-4 paragraphs). Use the template below as a guide for the design of your submission, but feel free to modify it as you see fit.

Vannevar Bush, As We May Think

OPTIONAL READING - Joi Ito, Aesthetics of the Internet - Context as a Medium

Reading Report Template Page

Studio Assignment

Please complete the Code Academy basic HTML tutorial. Copy and paste your end result into a new HTML page. Save and upload this new page as assignment-2.html on your storm server.

Reading

Please read this PDF on the web and Tim Berners-Lee and write a short response. Upload this response using the reading template (or use your own styling) to your storm server.

Studio Assignment

Choose five HTML tags and five CSS properties.

Build a webpage where you:

• Write definitions of these tags and properties (i.e., in paragraphs explain elements such as img, a, div, etc. and font-style, color, background, etc.)
• Build an example where you use all of these tags and properties (i.e., make sure to include everything you chose to write about!).

To refresh on topics and concepts we went over in class, complete the following Code Academy Tutorials:

• CSS: An Overview
• CSS Selectors

You only have to submit the webpage you designed and built (no Code Academy files). Please make sure to upload this to your Storm Server using the convention outlined in the syllabus.

Reading

Please read The Web is Dead by Chris Anderson and Michael Wolff on Wired.com and write a few paragraphs in response to it. Upload this submission using the template to your storm server.

Studio Assignment

Implement a simple design of a cover page to present links to class assignments and reading reports. Here are some examples of layouts to use:

• CSS Layout Left Justified, Two Columns, Simple List
• CSS Layout Center Justified, Fixed Width Grid
• CSS Layout Left Justified, Variable Width Grid
• CSS Layout Full Page List

The following links will take you to a few example webpages. Once there, please view source in Chrome so that you can read about the examples and look into the code. Feel free to use them as a starting point or do something completely different. It's up to you.

Reading

Khoi Vinh, Ordering Disorder - An Introduction to Grid Systems in Graphic Design

OPTIONAL READING - UX Booth: Complete Beginner's Guide to Interaction Design

Studio Assignment

Present a story with separate episodes in different HTML files.

Students should use CSS to design and implement a navigation scheme that allows users to seamlessly browse through any point in the story.

Minimum episodes: 4. Each episode should have it's own HTML file.

Students are free to do whatever they want in terms of visual design, theme and tone of the story. Everything is allowed as long as it tells a story. Students can use material written by others as long as they properly cite their source.

Some examples to help guide you:

• Inline Tabs
• Left Menu Navigation
• Simple Tab Example

Please link to your assignment from your newly created cover page!

Reading

Better User Experience with Storytelling

OPTIONAL READING - Startups, this is how design works.

Write a response to one or both of these readings and link to it from your cover page.

Studio Assignment

Redo the same story from your previous assignment (it is ok to change it if you want) using simple animated interface effects and transitions. Sketch out your design on paper and bring copies and/or share a PDF with me via email before class on Monday.

Look at the jQuery UI site for examples.

Please link to your submission from your cover page.

Reading

FastCo Design, The Next Big Thing in Responsive Design

Please link to your reading response from your cover page.

Studio Assignment

Simply add some Javascript and/or jQuery to your cover page. You dont need to use jQuery plugins but feel free to do so if you want. Make it more fun with animations and/or interactivity.

Some resources:

• Tubular (useful for full-page video backgrounds)
• ToolTipster (interactive tooltips)
• jQuery Plugins
• Mr. Doob
• Paper.js
• Processing.js
• Three.js
• Loading AJAX Content

Reading

Lawrence Lessig, Free Culture (Preface and Intro)

Please link to your reading response from your cover page.

Studio Assignment

Choose an existing website of your liking. It can be anything from facebook to amazon, twitter, a tumblr blog you like, or anything else out there.

It's time to start thinking about your final project, and you can use this assignment as research for it. Look for inspirational examples, figure out how they work, begin taking notes about what you might want to do.

View the source code and run a comparative analysis between the website and the source. Based on this analysis, write a simple description of how you think the website works, then choose at least three attributes that you will change, using the chrome developer toolkit. These changes should be inspired by something you wish the developers of your site of choice made different.

Take screenshots of the original website and your modified version, and explain the reasons for your changes.

Build a webpage to host a description of your process and your results.

Resources:

• Chrome Developer Tools

Reading

Jonathan Zittrain, The Future of the Internet (Battle of the Boxes & Battle of the Networks)

Please link to your reading response from your cover page.

Studio Assignment

Create a fake brand, product, institution or intellectual property, and design a landing page for their website. You can choose from the categories listed below if you want, but you don't need to. Implement this page using HTML and CSS. Javascript is optional. Create all the fake content you will need to make it feel real. It is ok to parody and it is ok to simplify as long as the result looks sufficiently real. Try not to get influenced much by the provided examples. Use your imagination as a starting point. You don't need to reference any real website, unless you deliberately intend to do so.

• Ad Agency. Example.
• Interactive Digital Studio. Example.
• Entertainment Studio. Example.
• Online Store. Example.
• Tech Startup. Example.
• Official Movie Website. Example.
• Food Chain Website. Example.
• Online Magazine. Example.
• University Website. Example.

Reading

Frank Chimero, What Screens Want (Transcript)

Final Project Proposal Guidelines

The proposal document should be presented as a simple illustrated HTML webpage covering the following sections:

Letter of Intent

A simple paragraph explaining your motivation to work on your project of choice. Describe your own expectations from the finished product and explain the potential benefit you and others can have from it. In addition to this, justify your design choices based on the goal to communicate your subject in an original, optimal manner.

Theme and Subject

No personal portfolio websites are allowed. Other than that, there are no restrictions to the final project's theme or subject as long as it covers the required scope. However, a reasoned justification of your choice will be required.

Scope

The project scope should warrantee the need to use rich media (text, images, video, sound, etc), and an original, non-trivial implementation of presentation and interactivity using HTML5, CSS3, Javascript and JQuery. Viability of scope will require approval upon proposal review.

Design

Draw a detailed flow diagram with wireframe pencil thumbnails on paper to outline a tentative sitemap, including a layout proposal for all of the site's sections and interactive components. Explain your design decisions: why are they necessary? how do they benefit the presentation of your content?

Research

Based on theme, subject, scope, and design requirements, students should present research on current and state-of-the-art related websites, together with an assessment on what can be improved, incorporated or changed from all these references.

Reading

Adrian Zumbrunnen, Smart Transitions in User Experience Design

Final Project Pre-production Document

The goal of this assignment is to help students refine their design vision before they start building a final project, as well as to have them prepare the necessary technical resources and content assets to begin this building process.

At this point, all content required for the project (text, images, sound, video) should be ready to be used. In case new content still needs to be produced, a detailed description and a production schedule should be provided, as well as temporary placeholders to replace it during the initial stages of the final project production.

Proposal Refinement

A pre-production document should be presented as an illustrated HTML webpage covering the following sections:

• Link to a directory with all content or content placeholders
• Full Detail Landing Page Mockup (photoshop, illustrator, etc)
• Wireframes for all the additional sections in the site
• Site Map with Navigation Storyboard
• Descriptions of all transitions and interactive elements
• List of selected javascript plug-ins or add-ons
• Assessment of scope and production plan (timeline)

Reading

There will be no readings this week. Instead of that, write an analysis of the javascript plug-ins or add-ons you're using and how they will improve your design, as well as the top reasons why you chose them. Make this a part of your assignment.

Final Project Landing Page (Iteration 1)

The Landing Page is the content presented to the user once they visit a root URL. In the case of a single-page design, this will be the content filling the browser window prior to user interaction (known as above the fold).

This assignment requires the implementation of a first iteration of the Final Project Landing Page. All static content should be provided, as well as functional hyperlinks to placeholder pages or, in the case of a single page design, placeholder sections. Animations and effects are not required.

Reading

No reading this week. Work hard on your final project!

Final Project Complete, First Pass

The purpose of this assignment is to complete a first pass on the project as a whole. The website should feel finished, even if has missing parts. If a section is not finished or a particular software module is not working yet (for example slideshows or animated transitions), students should find a simple way to get around the absence of this aspect of their project.

Students should compare the state of their website with their design proposals and ask themselves the following questions: What has been achieved? What has changed and why? What is missing and why? A written list of answers to these questions should be available in class for workshop reviews.

Reading

No reading this week. Work hard on your final project!