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

Oct 30th Lab

Animation:

Create three different animations:

1 straight ahead, exported as a continuous loop

1 pose to pose, exported as a seamless continuous loop (first and last pose identical)

1 typewriter effect, exported so that it only plays once, and then stops

Export each image as an Animated GIF, and upload to your web site, using the <img> tag.

Include 50 words on each image:

What elements and principals of art did you use? What feeling were you attempting to portray, and how did you achieve this?

Class Handout

Theory of Animation:

https://www.youtube.com/watch?v=v8quCbt4C-c

Straight Ahead:
https://www.youtube.com/watch?v=wjLANKAjJQc&feature=youtu.be
Pose to Pose
http://design.tutsplus.com/tutorials/create-flash-animations-entirely-in-illustrator--vector-3254

Saturday Oct 24th Lab - Midterm Review/Animation

Midterm Review:
All of the Lecture Slides and midterm review questions have been posted to Blackboard

As requested, here are the slides from class.
Don't use this as an excuse to not study the lecture slides and Lynda videos.
This is only a sampling of the types of questions that may be asked. Get to know the lecture slides and lynda videos as well as you can.

Slides


Animation:

Straight Ahead:
https://www.youtube.com/watch?v=wjLANKAjJQc&feature=youtu.be
Pose to Pose
http://design.tutsplus.com/tutorials/create-flash-animations-entirely-in-illustrator--vector-3254

Oct 17th Lab - Color

Color Assignment:

In the color lecture we discussed the cultural, expressive and compositional uses of color. In the lecture that introduced the elements of art and the principals of design we also discussed how these concepts are important for developing visual design.

Based on this create a separate logo for three of the 2016 presidential candidates. Each logo should not only be visually distinctive but also express the salient and unique features of the character of each of the three 2016 presidential candidates that you have chosen. The logos should be visually legible at a range of sizes i.e. look readable at both a small business card scale and at a large billboard scale.

• Choose three of the 2016 presidential candidates and create a logo for each one.
• Each logo image should be exactly 400x400 pixels.
• The logos should be presented on your website.
• On your website you will also include a minimum of 100 words for each logo explaining the qualities of the candidate and how your use of color communicates those characteristics. In the same text you will also name which elements of art and principals of design you also used and how you are doing it.
• Your logo must be made from abstract shapes. You absolutely can not use any text, characters, or identifiable objects in the creation of the three logos.*

---

For this assignment, we will be using Illustrator.

*You may use text, but it must be converted to paths and creatively enhanced/embellished/altered to portray the character and political platforms of the given candidate. Original imagery created with abstract vector shapes in Illustrator must be a prominent aspect of the design. You may not import or copy pre-existing imagery or text.

In the next lab, I will be collecting the original Illustrator files, and all of the above should be posted to your web sites.

A few current logos and criticism

https://www.washingtonpost.com/posteverything/wp/2015/07/31/which-2016-presidential-candidate-has-the-worst-logo/

Examples of current candidates (with snarky commentary)

http://observer.com/2015/06/the-2016-u-s-presidential-candidates-logos-ranked/

Recommended Watching: 

Getting Started:

Touring the Illustrator interface

Creating new documents

Drawing Basic Shapes:

Understanding vector paths

Drawing basic lines curves

Drawing rectangles and ellipses

Drawing polygons and stars

Modifying existing shapes and paths

Transforming Objects:

Using the Direct Selection tool

Moving and duplicating objects

Scaling objects

Rotating objects

Reflecting objects

Working with type:

Creating point and area type objects

Making basic edits in the control panel

Exploring type panels

Setting type onto a path

Converting text to paths

Saving for web:

Saving files for the web

Oct 10th Lab

Type Face Assignment: Due Oct 17th

As discussed in class the way type is used has a fundamental impact on the meaning of written words. Type can be used to highlight the expressive aspects of the written words and/or to make it more legible. For people seriously thinking about typography both aspects are very important to consider.

• Photograph three bad examples of typography in public space. E.g. Outdoor signage. Keeping in mind the examples given in class these images should be photographed in such a way that we can clearly see both the type face and the space it exists in. Each image should be 1000 pixels wide in their largest dimension.

• Write 50 words for each example explaining why you think the type is used poorly and how it relates to its context i.e. the space that it is in.

• Upload the three images and the text for each to your website.

• Using Photoshop you will either improve the pre-exsiting type or you will add entirely new type to the image in a way that looks as photographically realistic as possible. Each completed image should be the same size as when they were originally photographed.

• Write 50 words for each image explaining how your adjustments are both an improvement and appropriate to their specific use in the space.

• Upload the three revised images and your text to your website.

Required Watching
In the set of Lynda Tutorials called:
Photoshop CS6 Text Workshop with Tim Grey
watch the videos in chapters:
2. Basic Text Appearance
3. Advanced Text Appearance
Photoshop CC 2015 One-on-One: Fundamentals 
watch the videos in chapters:
5. Introducing layers.


Recommended:
Using the perspective crop tool
Scaling, Skewing, and Rotating with Free Transform
Non-destructive transformations with smart Objects 
Removing unwanted details with Content-Aware Fill and Patch

Keep in Mind:

The Elements and Principles of Design

Line, Shape, Form, Color, Texture, Space, Value

Pattern, Contrast, Emphasis, Balance, Proportion/Scale, Harmony, Rhythm/Movement

The overall sentiment of the typeface: 

Happy, Sad, Exciting, Formal? Does the typeface match the message?

Alignment

Does the overall composition fit into a grid pattern? Does it use the rule of thirds?

Is the overall composition symmetrical? Balanced? Off-center? Clean? Messy?

Does this serve the purpose of the message?

Example1 - Straight
Example2 - Slant