Assignments - Spring 2011 - ARTC 3310 - Bowling Green State University
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Turning in files
• Assignments are due in the Homework folder prior to the beginning of class.
• Revised project files are due exactly one week from the critique due date or they will receive a zero.
• When turning in assignments, use the following naming convention: create a folder with your username.
Assignments:      [1: Nonlinear Narrative]       [2: Hypermedia Poetry]       [3: E-Zine]       [4: Final Project]
Description Dates
Assignment 1

Assignment 1 - Non-Linear Narrative:

DUE: February 8th

Create a non-linear narrative story for the web. The story can be autobiographical, fantasy, realistic, a mystery, humorous, or dramatic.

Create a non-linear visual narrative story for the web. The story can be autobiographical, fantasy, realistic, a mystery, humorous, or dramatic.

Creative Form:
There are different nonlinear and creative forms the story can take. For example it could be a:

  • Net-art diary with daily decisions that branch off to form different outcomes
  • Concurrent narratives (more than one story taking place on the same screen)
  • Interactive comic book / graphic novel
  • Choose your own adventure-type story
Consider your audience. Who would be interested in this story? Is the text, images and story appropriate for this group?

Point of View:
  • Who's point of view will the story be told from?
  • What is the user's relationship to the other character(s) in the narrative?
  • Is the user one of the secondary characters in the story, the main character or an innocent bystander?
  • What sort of choices does the user have throughout the story?
Possible choices a user may have:

They might:
  • Change the setting, time of day, year it takes place (contemporary or ancient), etc.
  • Change the point of view (navigate to see each person's point of view at any point in the story)
  • Make a decision to do one thing or another, then progress to another page
  • Discover more about each of the characters or objects by rolling over them or clicking them (their background information, motives, critical flaws, thoughts, etc)
Project Technical Requirements:
  • 10-15 HTML pages, linked to each other according to the navigational flow of a non-linear narrative.
  • You must have multiple clickable choices (at least 2, preferably more) or rollover options on all pages.
  • When the user clicks or rolls over an option, they will be taken to a new page or something will change on the page.
  • You MUST use properly formatted HTML and CSS. Use the code validator
  • You should use CSS for body and text design
  • Store all your files in a folder called Assign1 (no spaces in the file name)
  • You must have an folder called images that contains all your images for the project (they can not be in the same folder as the html files.
  • The starting page of your story MUST be called index.html
Project Artistic Requirements:
  • The pages must have a creatively designed interface - NOT just story images and text on the page
  • The pages must be laid out using a creative grid (the grid can change on different pages)
    • Be careful about alignment, balance and overall composition of the pages.
  • Good use of typography and text.
    • There should be NO spelling errors
    • Consistent use the font style and font face
    • Use of a font that matches the feeling of the story, Creative use of font size and color.
  • Good use of the art and design elements and principles
    • Good use of color combinations
    • Effective use of texture, shape, line, etc.
    • Think about symmetry/asymmetry, unity, closure, rhythm, repetition, etc.
  • Professional drawing or image quality
    • if you can not draw, use photographic images, 3D modeled, vector, or stylized image
    • if you want to draw the images, use reference images if you need to.
    • NO copyrighted images allowed
    • be consistent in the graphic quality of the images (no jaggies)
  • The interface and pages MUST look good artistically
Here is a description to help you understand the project: Here are some sites with unusual/interesting interfaces:

PART 1 - Story, Design and Hierarchy Chart
DUE DATE: Thurs. Jan 20th
Turn in to homework folder: 01_20-Proj1_Part1

(see Hierarchy Charts)

  1. Create a one to two paragraph description explaining your story and what sort of interactivity it will have (Text or Word file).
  2. Create a layout in Photoshop of what a single page might look like (design the interface and at least one actual character and a setting). Think about what you can do with grids and tables. Look on the web for good interface designs. Keep a PSD for your own use, but turn in a JPG copy of it.
  3. Create a hierarchy/flow chart in Photoshop showing the choices the user can make in the story. Keep a PSD for your own use, but turn in a JPG copy of it.

TURN IN: Put all three files in the homework folder before the start of class: username_description.doc, username_layout.jpg, and username_hierarchy.jpg

Part 2: Layout a page of your story

DATE DUE: Thurs. Jan 27
Turn in to homework folder: 01_27-Proj1_Layout

Create a single page of your story in html. Slice up the image of the design of your interface. Write HTMLand CSS code to contain the page elements.

All images need height, width and ALT information.
Use CSS to adjust the margins, background image of the page, and font style.

1 page of your story created using CSS and HTML.

PART 3 - Project 1 Half Done - Interactive Story
DUE DATE: Tues. Feb 3rd

Turn in to homework folder: 02_03-Proj1_Half

The interactive story must be half done and ready for a small group critique.

PART 4 - Project 1 Completed
DUE DATE: Tues. Feb 8th
Turn in to homework folder:


1) Create a folder on your BGSU website called "interactive". Within it, create a" project1" folder. Upload all of your site's files (html files, images, css...etc). The first page of your project MUST be index.html.

2) Make a folder with your username and put all your files in it. Upload your folder (html, css, and images) to the class homework folder. I must be able to drag your index.html file into my browser and have it run correctly.

Your project needs to be on your portfolio site and in the homework directory prior to class.


Part 1 Due: Thurs Jan. 20

Part 2 Due: Thurs Jan. 27

Part 3 Due: Thurs Feb 3

Part 4 Due: Tues Feb 8


Assignment 2

Assignment 2 - Experimental Web Art: Hypermedia Poetry

DUE: March 3rd, 2010

Create an experimental web site using text, image and interactivity to convey your idea. Start with a CONCEPT. Develop images to go with your concept. Interactivity should play a BIG role in the unraveling of your idea. This site should be very exploratory. Experiment with innovative layouts, unexpected results, juxtapositioning unusual elements, etc.

Theme: Experimental Hypermedia Poetry
Think about what the word poetry means. In your piece you can use a standard form of poetry and alter it using hypermedia or you can be very creative in your interpretation of what a poem actually is. Your poetic expression must include visuals and interactivity beyond going to another page (use Javascript). Your piece does not have even resemble a poem but it must be an exploration of an idea in a less than literal way.

Technical requirements:
Use some of the advanced techniques taught in class. You do not have to use them all because they may not be appropriate for your piece but you MUST go well beyond using just standard HTML and CSS.

DO NOT USE any drag and drop Web page creation software. I will know if you did and mark you down.

All images must have WIDTH, HEIGHT and ALT and use CSS for formatting of layout and fonts.

If you open a ton of windows in JavaScript, close them via JavaScript.

The grade will be based on the following:

  • Good use of Art and Design (color, composition, etc.)
  • Thought-provoking or well thought-out idea
  • Innovative use of interactivity
  • Appropriateness for the theme (experimental hypermedia poetry)
  • Technical aesthetic issues (antialiasing problems, mis-alignment, etc.)
  • Technical code issues (I will check the javaScript and HTML)
Sites to search for examples:
Jason Nelson's Hypertext Poetry (click the links in the External Links section) (Don't forget to View Source Code - there is a surprise)
Midwinter Fair

PART 1 - Written Description of Project 2 Ideas
DUE DATE: Thurs. Feb 17th
Turn in to homework folder:

  1. Create a one to two paragraph description explaining your concept and how you plan to design the site.

TURN IN: Put your file in the homework folder before the start of class: username_proj2-idea.doc

Part 2: Project 2 - two pages

DATE DUE: Thurs. Feb 24
Turn in to homework folder: 02_24-Proj2_2Pages

Two of your pages should be fully functional. The design should be completed and we should be able to navigate from one page to the next.

PART 3 - Project 2 - 75%
DUE DATE: Tues. March 1st
Turn in to homework folder: 03_01-Proj2_75perc

The project should be very close to being done.

PART 4 - Project 2 Completed
DUE DATE: Thurs March 3

Turn in to homework folder: 03_03-Proj2_Final

1) Within the interactive folder on your digital arts portfolio site, create a" project2" folder. Upload all of your site's files (html files, images, css...etc). The first page of your project MUST be index.html.

2) Make a folder with your username and put all your files in it. Upload your folder (html, css, and images) to the class homework folder. I must be able to drag your index.html file into my browser and have it run correctly.

Your project needs to be on your portfolio site and in the homework directory prior to class.


Due: Part 1 Thurs Feb 17

Due: Part 2 Thurs Feb 24

Due: Part 3 Tues Mar 1

Due: Part 4 Thur Mar 3

Assignment 3

Assignment 3: E-Zine

DUE: Tues April 5th, 2010

Create a website that is based on your philosophical view on a particular topic.

According to Wikipedia:

A zine (an abbreviation of the word fanzine, or magazine; pronounced "zeen") is most commonly a small circulation publication of original or appropriated texts and images. More broadly, the term encompasses any self-published work of minority interest.

Zines are written in a variety of formats, from computer-printed text to comics to handwritten text (an example being Cometbus). Print remains the most popular zine format, usually photo-copied with a small circulation. Topics covered are broad, including fanfiction, politics, art and design, ephemera, personal journals, social theory, single topic obsession, or sexual content far enough outside of the mainstream to be prohibitive of inclusion in more traditional media.

Examples of print-based zines:

Websites to look at for visual design ideas:

*NOTE: a lot of the previous examples have similar looks - these are just examples, and do NOT represent the only style you can use.

Online zines:    Look under the Zine Categories


Create an e-zine website that is based on your philosophy. . A philosophical view can be justified using logic or ethics. Your zine could focus on a topic that is political, social, environmental or personal. You must feel passionate about your subject and have something you want to say about it. For instance, you could do something related to:

  • Nuclear Power
  • Feminism
  • The Environment
  • Zombies have rights too

Create a zine with a title page and 4 more webpages. Be very experimental with your imagery and text. Use words and small phrases to help convey your views. Your piece must be very INTERACTIVE.

DO NOT think of the zine as a traditional Magazine. It is not - it is a much more expressive medium.

Technical Requirements:
  • ___ Use randomness
  • ___ Use CSS positioning (ie don't use tables for your layout)
  • ___ Include animation (movement or changing images) - animated gifs or other method
  • ___ Include at least 4 elements per page that are interactive (Rollover and animate, show/hide, move, resize)
  • ___ Use at least 4 different types of form elements to get information from the user
  • ___ Using PHP, incorporate the information you get from the form to alter your site
  • ___ maximum width for content - 890px (unless specifically intending for the page to scroll)

Aesthetic Requirements:
___ Defy the frame - do not just create a box centered on the page.

Past student examples:

So You Know What a Feminist is?

Don't Ask, Don't Tell

Input Overload

Part 1 - Concept

DUE DATE: Thurs. March 17th
Turn in to homework folder: 03_17-Proj3_Concept

Create a one-page document that has at minimum:
  • One paragraph about the concept
  • One paragraph about the aesthetics/visuals
  • One paragraph about the interactivity

Part 2 - Mockups

DUE DATE: Tues. March 22nd
Turn in to homework folder: 03_22-Proj3_Mockup

Create mockups (images) for three pages of your project. Save them as JPGs and upload them to the class folder:
PRIOR to class.

Part 3 -75% complete

DUE DATE: Tues. March 29th
Turn in to homework folder: 03_29-Proj3_75perc

Upload your 75% completed project(all files, not including the .psd files) into the homwork folder PRIOR to class.

Part 4 - E-Zine Completed

DUE DATE: Tues. April 5th
Turn in to homework folder: 04_05-Proj3_Final

1) Within your interactive folder on your portfolio site, create a project3 folder. Upload all of your site's files (html files, images, css...etc). The first page of your project MUST be index.html (or index.php).

2) Upload your files (html, php, css, and images) to the class homework folder.

Your project needs to be on your site and in the homework directory PRIOR to class.


Due: Part 1 Thurs Mar 17

Due: Part 2 Tues Mar 22

Due: Part 3 Tues Mar 29

Due: Part 4 Thur Apr 5

Assignment 4

Assignment 4: Online Art Portfolio

DUE: April 28th, 2010

Create an online portfolio for both your "traditional" artwork as well as your digital artwork. This must include all works created in this class.

Create an interactive online portfolio showcasing your BEST artwork in any medium. This is the portfolio that you will hopefully use to get a job once you graduate. You should continue to link all your projects to this portfolio throughout the time you are at BGSU.

You should completely redo the portfolio you did in ARTC 2010 or 2210.

Use this Portfolio checklist throughout the project. Make sure EVERYTHING is checked off prior to the final deadline.

Basic Requirements:

  1. Minimum of 3 main sections with many subsections in the gallery : this includes a main page: index.html

  2. Main sections (must be linked from the index page):
    • artwork / gallery / portfolio (with as many subcategories as you need, i.e., photography, drawing, imaging, animation, etc.)
    • bio/artist statement
    • contact info
    • other possibilities
      • resume
      • sketchbook (although this could be part of your portfolio
      • music or poetry, etc.

  3. Links on the inner level pages:
    • the user should be able to get back to the main page from a inner level page without using the browser back button
    • small thumbnail images should link to larger views of each work
    • should be able to go from one large image to the next image without having to go back to a thumbnail page each time
    • each larger artwork should have a title, date and medium and optionally an description or artist statement with the concept
    • your site must have a link to all three interactive art projects

Technical Requirements:

  1. use CSS to position and format your elements
  2. use Javascript or CSS for rollovers (all clickable elements need rollovers)
  3. swap images using CSS or Javascript
  4. proper indentation of the code on all pages
  5. include interactivity that showcases what you have learned this semester
  6. use javascript to hide and show images
  7. have a NEXT and PREVIOUS button call the next and previous images in the series
  8. NO use of Lightbox, Shadowbox, Simpleviewer or other prefab code for your portfolio - write your OWN code
  9. max width 980px and height 590 for non-scrolling pages

Grading - the grades will be based on:

  • CREATIVE art and design of the interface
  • technical use of coding
  • interactivity and navigation
  • scope and overall professionalism of the site

Part 1: Research portfolio sites

DUE DATE: Thurs April 7
Turn in to homework folder: 04_07-Proj4_research

  • Inclass: Find 5 really GREAT DESIGNED art portfolio websites.
  • Submit the:

  • Title
  • URL
  • 3 reasons why you think it is a good designed interface
  • NO Blogs, wikis, or Flash sites

    Part 2: Three layouts

    DUE DATE: Tues. April12th
    Turn in to homework folder: 04_12-Proj4_3Layouts

  • Design three possible layouts for the thumbnail page in Photoshop. We will critique them in class.

  • Part 3: Favorite Layout

    DUE DATE: Thurs. April 14th
    Turn in to homework folder: 04_14-Proj4_FavLayout

  • Fix up your favorite layout for the thumbnail page and turn it in for approval. Your favorite design will have to be approved before you will be permitted to use it.

  • Part 4: Scan, Hierarchy, Redesign Layout

    DUE DATE: Tues. April 19th
    Turn in to homework folder: 04_19-Proj4_Part4

  • Scan in or take digital photos of all non-digital artwork. Save as JPG at 72 DPI.
  • Create a hierarchy chart that has one node for each page and artwork in your portfolio. Use arrows to connect the nodes. Save as a JPG at 72 dpi.
  • If the design needs reworking, resubmit a new design for approval.

  • Part 5: Project 4 Completed:

    DUE DATE: Thurs. April 28th
    Turn in to homework folder: 04_28-Proj4_Final

  • Write the code for each page, implement the design and finish the portfolio site.

  • [TOP]

    Due: Part 1 Thurs
    Apr 7

    Due: Part 2 Tues
    Apr 12

    Due: Part 3 Tues
    Apr 14

    Due: Part 4 Tues
    Apr 19

    Due: Part 5 Thurs
    Apr 28