This is a pass/fail assignment. In other words, you must do it. If you do, you pass. If you don’t you fail.

The development will consist of a first implementation round (this one), followed by a critique and review, followed by a second round of revisions and then deployment. The grade for your final will be a combination of the grades for each round.

The expectation is that you will be making constant progress throughout the coming weeks (e.g. don’t push this off until the last few days, it’s a large assignment).

Deadline for round 1 May 5.

Remember those Choose Your Own Adventure books from when you were a kid? The basic idea is this: You start on page one with some background story, and are confronted with a choice—do you pick up the dagger, or not?. Depending on your choice, you turn to a different page, and the storyline is altered.

You wake up to find yourself in a cave. The air is dank and musty, and a most foul odor hangs in the air. How did you get here? You can’t remember.

Ahead of you are two cave entrances. The one on the left looks rough and has pebbles strewn across the ground. The one on the right is smooth and moist. There is no sense in staying here, you think to yourself. “I might as well follow one of these tunnels.”

• Choose the left tunnel: Turn to page 34.
• Choose the right tunnel: Turn to page 23.

Your mission is this: create a choose-your-own-adventure story website; only here we wont be turning to pages, we’ll be linking to them. On each page, you’ll be confronted with new choices and the story will take any number of twists and turns.

Due

The project is due on March 17th.

Requirements

• The story must have a total of at least 15 inter-linked .html pages
• The story must not be linear, (e.g. “Click next page > Click next page > Click next page”) but must involve alternate storylines.
• It should be creative and cool.
• The story should be interesting and fun to play. It can be about anything: time-travel, a dorky Dungeons and Dragons affair or a frat party. Be creative!
  • Please don’t be lewd. I have to read through this, after all.
• The page design must be creative, readable and high-quality. Go for pro.
  • Experiment to find out kind of design works best with your content. Scary story? Perhaps a dark color scheme is appropriate.
  • You probably don’t need a complex layout. One column of text is fine. This is a game-book, remember.
• Links must not be broken, e.g. you need to make sure all of the page links actually work and link to each other.
• Remember to use your knowledge of HTML and choose the most descriptive possible tag for content in the page.

When your project is finished, the directory structure will probably look something like this:

• my-adventure/
  • css/
    • screen.css
    • alternate.css
  • img/
    • cool-gradient.gif
    • troll.jpg
    • etc…
  • index.html
  • passage.html
  • super.html
  • another-page.html
  • etc…

Make sure the index file has a title, name for attribution, copyright etc, as well as the story intro.

Tips

• Having trouble planning your story? Try creating a site map.
• Remember, you only have to create your CSS design once. From there, you can link in your stylesheet on every page.
• Try designing special styles for certain pages. For example, a page where the player dies could have a different design from standard pages.
  • You could link in a different stylesheet, or use a body class to target your styles to.
• Try incorporating images into the story with the <img /> tag. Create your own, or search for Creative Commons images.
• Great games have incentives! Maybe you could give your player points for reaching certain pages intact.
• You could use your experience with creating buttons to design buttons for your page options. Cool!

Grading

• For your midterm, you will be graded as a team. The grade your project receives will be the grade that you get for the midterm.
  • It’s your team’s responsibility to make sure you’re creating a great project. Work hard, create cool things.

External Links

• http://samizdat.cc/cyoa/
• http://www.homestarrunner.com/disk4of12.html

In this phase you’ll be designing the website as it will actually appear. You’ll create static design files, or comps in Photoshop. A note to all you Illustrator folks: Photoshop is generally a better tool and the de facto standard for designing comps, while Illustrator is generally used for icon, logo and artwork design. We’ll be delivering the result as layered .psd files, and exported static files. But don’t worry, you can export and import artwork back and forth between the two programs.

Scope

• There should be one comp for each page style across your site. If your wireframes were created correctly, this will mean one design comp for each separate wireframed page.
  • Tip: Usually, a website’s design files are kept in a single .psd file, with a top-level layer for each page. That way, you can look at the different pages by hiding/showing them.

Delivery

The project will be delivered via Smart Class in the Interactive_Media_1/comps/ folder. It should consist of the following:

• A folder containing the design files. Name it last-first (for example: brander-gordon)
  • The layered .psd file containing the artwork
  • “Flat” .png images, one for each page design.

Due

The first design round is due March 15th (updated deadline). We’ll be doing a critique of the designs in class on the 10th as well. Critique classes are mandatory and you will be graded on participation.

• http://www.homestarrunner.com/sbsite/
• http://www.colorado.gov/
• http://disney.go.com/index
• http://lesailes.hermes.com/us/en/

Your Assignment

Write one paragraph of critique for each website above (4 total), describing problems you find with the design and interaction. Look at it from a design standpoint, examining balance, color, hierarchy and focus. Also examine it from an interaction standpoint:

• Did anything behave in an unexpected way? Why?
• How would you approach the same design problem? What would you do differently?
• Are there any small changes you could make that would improve things?
• If you were coming to the website to accomplish a task (read an article, learn about your congressman, book a trip) would the website be helping you or hindering you? How can you help your users accomplish whatever they came to your website for?

To get some ideas of what you might look for, check out these great redux examples:

• http://37signals.com/better_fedex
• http://jasonzimdars.com/svn/highrise.html. Improving on an already good interface.
• http://www.andyrutledge.com/white-house-redux.php. It should be noted that the current administration’s whitehouse.gov is a great example of web design done right.

DUE: March 1st

Class on the 15th will be devoted to lab time.

Project Requirements

Wireframes for:

• Site
  • Headers
  • Main navigation
  • Sidebars
  • Footers
• Main page
• Single Portfolio Item Page
• Content Page (For about page, etc)

Your wireframes should map out with boxes and labels where all major pieces of information will be on the page.

Here’s an example of a very simple wireframe I put together in Photoshop:

Wireframe Example

Your wireframe should chart all of the main page concepts listed above, as well as any others you want to be in your design.

Portfolio Interaction Concepts

Here are some of the interaction concepts we identified during class. Perhaps you may want to use some of them in your site.

• Site Title/Home link
• Site Description
• Site Navigation
• Portfolio Gallery
  • Thumbnail
  • Title
  • Description
• Single Portfolio piece
  • Piece title
  • Screenshot (larger)
  • Individual gallery/slideshow
  • Description (longer)
• Categories
• Lightboxes
• Close buttons (with X)

Using what you’ve learned about HTML and semantics, take a copy of your resume and mark it up with HTML. Focus on describing the information on the page, rather than picking elements based on their default style.

Make use of this cheatsheet of useful HTML elements and what they represent.

Using separation of content from presentation, style the resume with CSS. Focus on readability, coherence and good typography.

Code Structure

Keep the code well-organized. Download the Site Stub (.zip) and use it as a guide to structure your code.

• Make sure your file is called index.html
• Keep all style code in an external CSS file. Style inlined into the HTML will not be allowed. The site stub has a stylesheet in the css/ directory that is already hooked up.
• Practice proper code indentation and style. If you’re unsure how to do this, check with the styleguide for HTML.