Nov 21

Create a web-based non-linear story. For this assignment, you can use photography, iIllustration, montage, or simple text to create a narrative with multiple story paths which can be navigated using hyperlinks. 80% of the imagery and all of the text used must be your own original content.
1) Map out your narrative, using illustrator or simply a pen and paper.
2) Develop the imagery/text for each page.
3) In your MEDP150 folder, create a new folder named narrative. In this new folder, create a new images folder. Save your html file for this project, including a new index.html, directly in the narrative folder. If you are using external style sheets, make a css folder.
4) Post your project to the web, ensuring that all of your links work.

There must be at least three possible endings
There must be multiple ways to get to each one.

Examples:
http://fmundergrad.hunter.cuny.edu/~krioutchkovac/narr/continue.html
http://fmundergrad.hunter.cuny.edu/~deveciogluc/medp150/page13.html
http://slimedaughter.com/games/twine/girlwaste/play.html

In-Class Example:
http://fmundergrad.hunter.cuny.edu/~wentworths/medp150/narrative_example/ 

Tables:
http://www.lynda.com/HTML-tutorials/Displaying-data/365960/378906-4.html

Intro to CSS
http://www.htmldog.com/guides/css/

Styling tables:
http://www.lynda.com/HTML-tutorials/Styling-borders/365960/378915-4.html

Text style generator:
http://www.cssfontstack.com/arial

Style sheets:
http://www.w3schools.com/css/css_howto.asp

Common CSS topics
http://www.lynda.com/CSS-tutorials/Working-fonts/80436/90611-4.html

Adding Audio:
http://www.w3schools.com/tags/att_audio_autoplay.asp

UXD, continued

From your wireframes, create a mockup of your app.

It must include separate layers containing:

• guides

• App elements

• interaction labels

Upload to your web site:

• Your (second) 200 word write-up

• exported mock-ups without labels/interactions

• exported mock-ups with labels/interactions

Creating a color palette

http://www.lynda.com/Illustrator-tutorials/Working-color-groups/370378/412101-4.html

Adding master elements

http://www.lynda.com/Illustrator-tutorials/Adding-master-elements/108130/109850-4.html

Importing images

http://www.lynda.com/Illustrator-tutorials/Placing-linked-images-Illustrator/370378/412133-4.html

Clipping masks

http://www.lynda.com/Illustrator-tutorials/Using-clipping-masks/370378/412136-4.html

Start work on UXD homework Assignment 

In the UXD lecture we discussed what interactivity is and various approaches to make these experiences more user friendly. On a basic level UXD considers what the purpose of the interactive experience is, asks who is the audience and how can design thinking make the meeting of these two as productive as possible. For this two part project you will work in groups of three. Each group will create a proof of concept for a smart phone app which they will present in class. 

Part 1 will be due on Nov14th and will contain 

1) a minimum of 200 words describing the app. This description will include what it does: who its primary users are, what might be particular to the way these user might use technology that might be different from other groups erg. grade school age technology users interact with technology in very specific ways that would be very different from senior citizens and software geared to these demographics are made with this in mind. 

2) a wire frame of the main screen of the app. Upload this to your website. 

Part 2 will be due on Nov 21st and will contain a visual mock up of the main screen and at least one of the secondary screens of the proposed app. Each group will also include a 200 word description explaining how the way visual and interactive elements would help the user to understand how to use app. Upload this to your website

You are free to develop this project with the imaging software of your choice that was covered in class (photoshop or illustrator)

Use any mobile phone preset in the Photoshop or Illustrator New Document dialog box.

Keep in mind Don Norman’s Design Principles from ‘Design of Everyday Things:’

• Visibility- can I see it?

• Feedback - what is it doing now?

• Affordance - how do I use it?

• Mapping - where am 1 and where can I go?

• Constraint - why can’t I do that?

• Consistency - I think I have seen this before?

and the Gestalt Design Principles:

• Similarity

• Continuation

• Closure

• Proximity

• Figure/Ground

• Symmetry and order

Creating Grids with guidelines:

http://www.lynda.com/Illustrator-tutorials/Defining-grid-your-artboards/368388/374155-4.html

Layer Structure:

http://www.lynda.com/Illustrator-tutorials/Creating-layer-structure-your-wireframe/368388/374153-4.html

Creating App Elements

http://www.lynda.com/Illustrator-tutorials/Developing-screen-template-specific-devices/368388/374154-4.html

UI Placeholders

http://www.lynda.com/Illustrator-tutorials/Creating-common-UI-placeholders/368388/374158-4.html