GD for the Web

Assignments

A1 – Republish a Text

Due Sept 24

Description

Choose a text or composition whose copyright has expired, or that has a creative commons copyright. Ubuweb is a good source. For your own sake, the text or composition should be no more than a few pages.

Republish or process the composition through an online service such as YouTube, Flickr, Vimeo, Vine, Instagram, Twitter, Tumblr, Facebook, Google Docs, Second Life, Google Earth, World of Warcraft, Yahoo Answers, Craigslist, etc…

Make sure your text is publicly available or document it by taking screenshots.

Goals and Expectations

The goal of this assignment is to experiment with publishing or processing a text or composition online without typing a single line of code. As a Graphic Designer working on the web, you should become adept at negotiating different platforms and social networks, understanding how information moves across these networks, how context is created by different tools and different communities. Is a successful online work one that spreads – like memes? Is it a work that viewers might encounter through serendipity? Or a work that viewers must seek out and assemble themselves? How can you best leverage the existing online landscape in your own work?

You should consider the context in which you place the text. How will the reading of the text be affected by the choice of platform? Does the TUMBLR community create a different context for writing and images than the Second Life community for example? Think also about the technical constraints of different platforms. How are texts broken up? In 140 character blurbs? In longer sequences? How does each piece of text link to the next one. Are there different voices you can use? Can the text be broken up into sequential sections? What about parallel sections? How does the text look on the page? How do all these elements affect your reading of the text? How many of these elements can you control? What is the typical way we read text on the service you are using? Are you interrupting this ‘usual’ read, using it to your advantage?

Schedule

September 17: Working prototype

You will republish at least 25% of your text at least twice using two different platforms, tools, forums, etc. These are meant to be separate studies, to see how different platforms affect the reading of a same text. You will present both studies to the class, though you may choose to emphasize one study in particular.

September 24: Final

Based on feedback from the class, you will republish at least 100% of your composition using a platform and a well-thought out method. You will present the work to the class.

Examples

Assignment 2

Assignment 2 GDfW

The Hyperlink

Although it is now ubiquitous, the hyperlink is the most radical feature of the internet. You will consider how to use the hyperlink for creative ends. The ability to hyperlink web pages together allows for all kinds of complex new readings.
Select a a visual composition or a text. Determine a way to break your composition down into meaningful units (paragraphs, sentences, words or blocks of imagery, etc…). Now weave these distinct units together using many html pages and hyperlinks. Allow for user choice, branching structures, loops, etc… The linking does not have to follow a linear sequence. See if you can produce new readings and new ways of traversing your composition. When linking different parts of the composition together, think of the meaning of each link. Are they linking between similar content? Similar characters? Similar actions? Are the meaning of links consistent across all of your pages? Do you have different types of links? How could these different types of links be indicated?
You may include additional material in the webpages if they add meaning to your sequences of links.

This project is due in two weeks.

Next week in class we will have a working session and desk crits. Please prepare:
– diagram or site map that shows hos each unit of your composition will link to every other part
– page template(s)

due in 1 week: site map, page template
due in 2 weeks: final

OBJECTIVES

– to consider how hyperlinking changes the act of reading
– to consider how the structure and navigation of a website affects meaning
– to explore the potential for complex hyperlinked structures
– to design a webpage by focusing on the hypertext link

 

 

Assignment 1

DUE SEPT 24

DESCRIPTION

You will select a text or composition whose copyright has expired, or that has a creative commons copyright. Ubuweb is a good source. The text or composition should be no more than a few pages for your own sake.

You will republish or process the composition through an online service such as youtube, flickr, vimeo, twitter, tumblr, facebook, google docs, second life, google earth, world of warcraft, yahoo answers, craigslist, etc…

Make sure your text is publicly available or document it by taking screenshots.

GOALS AND EXPECTATIONS

The goal of this assignment is to experiment with publishing or processing a text or composition online without typing a single line of code. As a Graphic Designer working on the web, you should become adept at negotiating different platforms and social networks, understanding how information moves across these networks, how context is created by different tools and different communities. Is a successful online work one that spreads – like memes? Is it a work that viewers might encounter through serendipity? Or a work that viewers must seek out and assemble themselves? How can you best leverage the existing online landscape in your own work?

You should consider the context in which you place the text. How will the reading of the text be affected by the choice of platform? Does the TUMBLR community create a different context for writing and images than the Second Life community for example? Think also about the technical constraints of different platforms. How are texts broken up? In 140 character blurbs? In longer sequences? How does each piece of text link to the next one. Are there different voices you can use? Can the text be broken up into sequential sections? What about parallel sections? How does the text look on the page? How do all these elements affect your reading of the text? How many of these elements can you control? What is the typical way we read text on the service you are using? Are you interrupting this ‘usual’ read, using it to your advantage?

SCHEDULE

Sept 17: Working prototype

You will republish at least 25% of your text at least twice using two different platforms, tools, forums, etc. These are meant to be separate studies, to see how different platforms affect the reading of a same text. You will present both studies to the class, though you may choose to emphasize one study in particular.

Sept 24: Final

Based on feedback from the class, you will republish at least 100% of your composition using a platform and a well-thought out method. You will present the work to the class.

EXAMPLES

Assignment 3

Single Serve Site

For this assignment you will build a Single Serve Site. A single Serve Site is typically defined as a website that consists of a url and a single page.

In particular, I want you to pay attention to a particular interaction for this site. We will be learning jQuery and Javascript, which will let you build a page that reacts to the user’s input.

Think of typical web-elements: scroll-bars, the infinite scroll, forms, buttons, boxes, etc. Can you create an interesting single page focusing on a single one of those elements, or a single interaction? Begin by picking one or two actions typically performed in a browser: Point, Click, Drag, Hover, Move, Scroll, Pinch, Swipe, Pan, Zoom, Select, Type, Tab, Open, Close, Resize, Listen, Speak, Wait (usually for adds to finish), Save

 

This is an open assignment, so have fun and explore.

 

Examples of sites:

Essay on single serve websites
http://isthisyourpaperonsingleservingsites.com

More interactive
http://yes.thatcan.be/my/next/tweet/
http://www.jesusswimming.com
http://cat-bounce.com
http://chillwitchnamemagic.com

Useful
http://emergencycompliment.com/#
http://0to255.com/
http://isitoninstant.com/
http://dummyimage.com
http://whatcoloristheempirestatebuilding.com
http://www.howmanypeopleareinspacerightnow.com

Less interactive
http://sometimesredsometimesblue.com

Rafaeël Rozendaal
http://www.muchbetterthanthis.com
http://www.jellotime.com
http://www.aestheticecho.com
http://www.goodbyefarewell.com
http://www.fromthedarkpast.com
http://fff.cmiscm.com/#!/main

Related:
http://hypergeography.tumblr.com/
http://directionstolastvisitor.com/
http://oliverlaric.com/stillavailable171008.htm

Assignment 4

Assignment 4

For this assignment you will work with a collection of items (texts, images, video, audio, etc…) that has a direct relation to your Thesis, Degree Project or principle area of study. You will workwith this collection by responding to ONE of the following prompts.

Prompt 1:
Produce a website that enacts, demonstrates or highlights a particular aspect of your collection. For (a simple) example, if your collection is about color, or a particular aspect of color, can you make a website that expresses or explores that particular aspect of color.

Prompt 2:
You will build a website to house and display your collection.

WEEK 1
RESEARCH AND PRESENTATION.
You will present a 2 minute presentation on your collection (minimum 10 slides). The first part of your presentation should introduce the class to your chosen collection and your research in a clear and articulate manner. The second part of the presentation will focus on your proposal for a the site.

SITE WIREFRAME, PAGE TEMPLATES, EARLY INTERACTION PROTOTYPES
You will produce a wireframe of the site, beginning with the home page. Once your wireframe is complete, you will design one or more basic page templates for the site. If you are proposing a complex user interaction, it may be necessary to quickly code an interaction prototype.

WEEK 2
ONLINE WORKING PROTOTYPE
Your site should be online and basically functioning as intended. This will allow us to troubleshoot design and code issues in class and give you the final week to fine tune the elements of the site.

WEEK 3
FINAL REVIEW

Final Documentation

Due December 10 by 5pm

Failure to submit final documentation will make it very difficult for you to pass this class

Documentation Folder collected as a .zip file downloadable from dropbox or on cd/dvd in my mailbox. Your .zip file should be named gdfwf15_lastname_firstname.zip and should include:

  • One info.txt file that contains:
    • link to online component of presentation
    • link to all assignments on the course site
    • questions for all readings on course site
  • documentation of all 4 assignments. this includes:
    • a screenshot of each page (or each page template)
    • a site map in pdf format
    • all html, css, javascript and image assets