Final Class

This class is an open lab to troubleshoot your web sites and review for the final exam.

Final – Study Guide

I will not answer these questions for you this time. However, I have created a Google Doc to be shared between the two classes. This will be a collaborative study effort. Answer any questions that you can. If you are stumped on any of them, I will be happy to help you find the answer.

Check your email for a link to the document. If you have trouble accessing this, email me and I will invite you to edit using the email given.

Most answers can be found in the slides, posted to this site.

If you can’t find them there, remember, Google is your friend.

 

I’ve had the privilege of grading you all Semester:
Now it is your turn to grade me!
I always welcome constructive criticism to help me improve future classes. Remember, these are anonymous, and I won’t see them until after final grades are submitted!

These evaluations will be conducted online.
You can log in one of two ways using your Hunter netID and password:

Smartphone: www.hunter.cuny.edu/mobilete
Computer: www.hunter.cuny.edu/te

Lab 13: CSS Update

CSS In-Class Exercise

In your MEDP150 Folder, create a new folder called css-exercise
In this folder, create three new html documents (one must be named index.html)
Each page should have a <h1>, <h2>, and <p> tag
Each page should have a menu (the same one on each page) allowing the user to navigate to all other pages.

Using 1 EXTERNAL style sheet:
Use the <h1>, <h2>,  and <p> tags to specify font, font size, and color for each tag.
Use classes to define background colors for pages. Each page should have a different color background.
Use <a> tags to define link colors for link states: regular, hover, etc.
Use classes to define any text color outside of those generally defined using html tags (IE, currently selected link in menu)

Lab 12: Non-Linear Narrative

Create a web-based non-linear story. For this assignment, you can use photography, illustration, 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.

Screen Shot 2016-04-14 at 9.59.10 PM

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. Save all of your files for this project, including a new index.html, directly in the narrative 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.

 

You can create link hotspots on images this way:

http://www.onextrapixel.com/2009/04/30/how-to-create-multiple-links-on-a-single-image-with-image-map/

If you want to do this with video, you can use the image map this way:

http://stackoverflow.com/questions/13224037/mapping-areas-on-an-html5-video

Student Examples:
http://fmundergrad.hunter.cuny.edu/~sakutukwar/medp150/narrative/index.html
http://fmundergrad.hunter.cuny.edu/~silvag/medp150/park.html
http://fmundergrad.hunter.cuny.edu/~krioutchkovac/narr/continue.html
http://fmundergrad.hunter.cuny.edu/~deveciogluc/medp150/page13.html

Artists:
http://slimedaughter.com/games/twine/girlwaste/play.html

 

EXTRA CREDIT:

MEDP150 Extra Credit Assignment

We are offering an extra credit opportunity to MEDP150 students who attend one of the panels at the Theorizing the Web conference on either April 15th or 16th and write a short response paper to it. Completion of this assignment will be worth 6 extra points on the final exam.

The conference will take place at the Museum of the Moving Image in Queens. Please note that if you want to participate in this opportunity, you must register ahead of time on the conference website, you cannot show up on the day of and expect to be admitted. Please also note that attendees must pay a $1 online donation at the time of registration.

Theorizing the Web is an inter- and non-disciplinary annual conference that brings together scholars, journalists, artists, activists, and technology practitioners to think conceptually and critically about the interrelationships between the Web and society.

In order to receive the extra credit points, you must complete the following and submit them to your lab instructor:

  1. Proof of attendance – this could be a paper program or admission ticket. If these items are not available, you may take a photo of yourself that clearly demonstrates your attendance at one of the panel discussions.
  2. Short response paper – This will be a two-page, double-spaced paper written in Arial 12pt with 1″ margins. The paper should summarize the key points of the panel you attended, as well as provide your analysis of and response to the topic discussed.

Please check the conference website for a complete listing of panel topics and speakers.

 

OR

If you don’t want to leave campus, you can go to this: If you do, you MUST stay for the critique, and fulfill all of the requirements above.

Eyespeak and IMA’s first visiting artist of the year! Signe Baumane is screening her feature animation documentary this Friday night! Following the screening, you’re more than welcome to stay for a critique of a few works-in-progress animation shorts by IMA students. There will be pizzas from Two Boots..so stop by the screening a bit early (6:30ish) to get some food!

This Friday – April 15th – event starts at 7pm
The location is now the TV STUDIO – 436 Hunter North (68th Street and Lexington)
Free and open to the public!  RSVP by emailing me!

Lab 11: UX continued

From your wireframes, create a mock-up of your app.

Upload to your web site:
• Your (second) 200 word write-up
• exported mock-ups

**Be prepared to present BOTH your WIRE FRAMES and FINAL APPLICATION in class on Friday!**

Creating a color palette
http://www.lynda.com/Illustrator-tutorials/Working-color-groups/370378/412101-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

Using the Layers panel to organize content:
http://www.lynda.com/Illustrator-tutorials/Using-Layers-panel-organize-content/142068/165864-4.html?autoplay=true

Using art boards to display application states
http://www.lynda.com/Illustrator-tutorials/Using-artboards-display-application-states/142068/165865-4.html?autoplay=true

Lab 10: User Interface (UX) Design

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 April 8th 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 users might use technology that might be different from other groups. 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 these to your web sites.

Use any mobile phone preset in the Illustrator ‘New Document’ dialog box to begin your document.

For this week, work on WIRE FRAMES only!
This means no color or imagery: this is meant to simply sketch out
your ideas for layout and interaction design.

 

Groups for this have been randomly determined by a computer:

1:10

James Binninger
Karol Ortiz
Daniel Savillo

Kay-Lee Ebanks
Naomi Calhoun
Elif Candaner

Harris Ellahi
Laurence Sulner
Amelia Polton

Walter Montiel
Samantha Zurin
Kelly Dao

Genesis Mier
Hannah Hodgson
Fariha Chowdhury

3:10

Bana Nour
David Gantz
Yulia Emelynova

Rahiesa Belfon
Grace Fong
Aaron Sherbakov

Stephanie Bautista
ChenJun Liu
Jeffrey Rivera

Ester Shamailova
Raphael Kashtelian
Alexandria Regan

Lisa Zhang
Ricardo Montero

 

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 I and where can I go?
• Constraint – why can’t I do that?
• Consistency – I think I have seen this before?

http://moveableonline.com/blog/2014/11/03/6-principles-design-la-donald-norman/

As well as the Gestalt Design Principles:

• Similarity
• Continuation
• Closure
• Proximity
• Figure/Ground

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

Look through existing apps to look for common themes regarding imagery and navigation.

Screen Shot 2016-04-01 at 11.40.09 AM

 

Watch the following Lynda Videos to assist you in your design process:

Creating and Positioning Guides

Using a grid

Creating Symbols

Modifying Symbols

Lab 8: Animation

Animation Three Ways

Due Wednesday, March 23rd lab

Create three animated gifs using methods of your choice, as described in class.

Class Handout
Video Animation in Photoshop

Each gif should be posted to your website and the files you used to create the animations will be collected in class (photoshop or Illustrator, with layers intact).

For each animation, write 50 words describing your process: What form of animation is it? Straight ahead? Pose to Pose? Describe your choices in color, the elements of art involved, your choice of typography (if included), etc. Take consideration of how your animation loops: does it loop? Does it do so smoothly? If not, was this intentional? Why? If it doesn’t loop, why did you choose to do this?

Rubric:

Animation 1
1 – GIF
1 – Original file
1 – description
1 – Posted to site

Animation 2
1 – GIF
1 – Original file
1 – description
1 – Posted to site

Animation 3
1 – GIF
1 – Original file
1 – description
1 – Posted to site

12/12 = 100%

Extras:

Image file formats explained:
http://1stwebdesigner.com/image-file-types/

Animation Principles:

(Full youtube playlist)

Lab 7: 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 400×400 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.*

 *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.
For this assignment, we will be using Illustrator.
 
In the next lab, I will be collecting the original Illustrator files, and all of the above should be posted to your web sites.
Helpful links:
Rubrick:

Logo 1
1    400x400px
1    100 words
1    made primarily with outlines (no text/imported images)
1    posted to web

Logo 2
1    400x400px
1    100 words
1    made primarily with outlines (no text/imported images)
1    posted to web

Logo 3
1    400x400px
1    100 words
1    made primarily with outlines (no text/imported images)
1    posted to web

12/12 = 100%


Recommended Watching: 

Getting Started:

Drawing Basic Shapes:

Transforming Objects:

Working with type:

Combining Shapes:
Saving for web:

Lab 6: Typeface

Type Face Assignment: Due March 11th

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 (before and after) and your text to your website.

Rubrick:

Image 1:
1 – before
1 – before text
1 – after
1 – after text
1 – uploaded to web

Image 2:
1 – before
1 – before text
1 – after
1 – after text
1 – uploaded to web

Image 3:
1 – before
1 – before text
1 – after
1 – after text
1 – uploaded to web

15/15 = 100%

Examples:

http://fmundergrad.hunter.cuny.edu/~dolmat/medp150/Typography.html

http://fmundergrad.hunter.cuny.edu/~ravis/medp150/text-pages/shirt-ad.html

 

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?

Lab 5: Photoshop Self Portrait

Assignment 4: Digital Portraits

Using images taken in class, Photoshop masks, and layers create a digital  portrait. Post both the original portrait and your new creation on your site.

A self portrait should give some indication of your personality, interests, and character.

Examples from Natalie’s class last semester:
http://fmundergrad.hunter.cuny.edu/~penaa/medp150/page2.html
http://fmundergrad.hunter.cuny.edu/~grantk/medp150/portraits.html
http://fmundergrad.hunter.cuny.edu/~ortizna/medp150/page1.html
http://fmundergrad.hunter.cuny.edu/~sedaa/medp150/page4.html
http://fmundergrad.hunter.cuny.edu/~taeidkashania/medp150/page2.html

Rubrick (one point each):
Uses a high resolution portrait
Uses Masks
Uses Layers
Posted to site and linked correctly

In class I will collect your original image (camera raw) and your digital composition (.psd). Both images should be saved as jpegs and posted on your web site.

The original assignment from last term was this:
Digital Depth of Field
Please watch as content from this may be on the midterm, and because it contains relevant information for this assignment.

As portraits are more fun and leave more room for experimentation we will be doing these instead, using similar masking methods.

To help with this assignment, watch:

From: Photoshop CC for Photographers: Fundamentals

Chapter 10: Working with Layers
Chapter 13: Advanced control with Masking

 

Lab 4: Digital Photography

Homework #3: Due February 26th
Take two RAW file images shot in class and use Adobe Camera Raw to improve common problems with the images. You should make sure you’ve corrected for a tilted horizon, there are no shadow or highlight clipping, the image is nondestructively cropped, and there are no color casts. Save these files as jpg’s and upload them to a new page on your site and link them to the others.

I will collect both the Camera Raw file and the jpeg web version at the beginning of class.

Required viewing: 
In the Photoshop CC Essential Training Lynda tutorials with Julianne Kost watch the following chapters:

Chapter 3: 

Chapter 4: 

Useful Extras:
*The program from which they are opening the files is Adobe Bridge.

Also see: Save for web

Digital Photography Principles Class Handout
SONY Alpha 3000 Manual
SONY Alpha 3000 Handbook
Extra Camera Info

Lab 3: Photoshop Selections

Homework #2: Due February 19th
Create three new pages for your website, place an image on each one and connect them with links. The images on each page should be from selections and compound selections made in Photoshop.

Each image should be at least 800 pixels wide, and under 1500.

Required viewing: In the Photoshop CC Essential Training Lynda tutorials with Julianne Kost watch the following chapters:
Chapter 7: Switching Tools using the keyboard
Chapter 8: Panning, zooming and using the rotate view tool
Chapter 10: Using the Undo and the History Panel
Chapter 12: Using the Marquee and Lasso tools and Combining selections 

Lab 2: HTML (continued)

Tutorials:

For February 5:

Required viewing:
HTML dog beginner tutorial
“Getting Started” through “Images” (8 sections)

Above and beyond:
Lynda.com HTML Essential Training
(log in before clicking links)
4. Structuring Content
7. Controlling Styling

For February 9:

Homework #1: Due February 9th
During this class, we will be creating an ongoing web portfolio of your work. Create an index page for your site and, making sure your link works, add a second page with heading and paragraph text. Use the following website as a reference for your work:
HTML dog beginner tutorial
“Getting Started” through “Images” (8 sections)

Please have a lynda.com account set up! I will check in class.
To connect for FREE via NYPL, see the Class 1 Handout
*Log in to lynda.com before clicking the links below.

 

For Feb 9th class and and Feb 19th Assignment:

Required viewing: In the Photoshop CC Essential Training Lynda tutorials with Julianne Kost watch the following chapters:
Chapter 7: Switching Tools using the keyboard
Chapter 8: Panning, zooming and using the rotate view tool
Chapter 10: Using the Undo and the History Panel
Chapter 12: Using the Marquee and Lasso tools and Combining selections 

Lab 1: HTML

This class provides an introduction to the course and a primer in HTML.

Please download the following documents for your reference:

Syllabus

Class Handout

Homework #1: Due February 9th
During this class, we will be creating an ongoing web portfolio of your work. Create an index page for your site and, making sure your link works, add a second page with heading and paragraph text. Use the following website as a reference for your work:
HTML dog beginner tutorial
“Getting Started” through “Images” (8 sections)

Instructions on how to upload to the server from Hunter computers and from your home computer:
http://fm.hunter.cuny.edu/?page_id=517

You may also use the code from class as a template:

Class 1 HTML Template
Word Document – Copy and Paste into TextWrangler