Week 16 Day 1 - Tuesday, May 6 - Homework

1. Project 2Final critique scheduled for this Thursday, May 8 at 8:30am. Must uploaded project web files to your class UI server space by 8:30am, as well as submit files via USB**

-----------

Files to submit for Project 2 Critique (on USB stick) next class:

Main Project folder with naming structure: FullName_Proj2_ART370

1) "Design Files" folder (PDF of all "screens" or "sections")

2) "Web Files" folder (web files with relevant html, css, javascript, images, etc)

3) "Process Docs" folder (with PDF or JPG scan of initial layout sketches + wireframe and flowchart)

**Files upload/submitted after 8:30 sharp will be considered late and will face grading penalties

2. Complete Course Evaluation for ART370 on vandalweb by Sunday, May 11.

Week 15 Day 1 - Tuesday, April 29 - Homework

1. Continue working on Project 2. Final critique will take place next Thursday, May 8 at 8:30am. Must uploaded project web files to your class UI server space by 8:30am, as well as submit files via USB**

-----------

Files to submit for Project 2 Critique (on USB stick) next week:

Main Project folder with naming structure: FullName_Proj2_ART370

1) "Design Files" folder (PDF of all "screens" or "sections")

2) "Web Files" folder (web files with relevant html, css, javascript, images, etc)

3) "Process Docs" folder (with PDF or JPG scan of initial layout sketches + wireframe and flowchart)

**Files upload/submitted after 8:30 sharp will be considered late and will face grading penalties

Week 13 Day 2 - Thursday, April 17 - Homework

1. Begin image optimization and coding process for Project 2.  Develop personal deadlines to complete various sections/stages of project over the next three weeks. Final project presentation scheduled for Thursday, May 8, 8:30am.

Week 13 Day 1 - Tuesday, April 15 - Homework

1. PDF with design layout (at least 6 pages/sections), also including an updated flowchart,  for Project 2 due on instructor station next class, Thursday, April 17, 8:30am. 

All relevant/appropriate content should be included in your design layout (no placeholders).

Be prepared to address following questions in your Proj 2 design presentation:

• Brief summary of social issue, importance of awareness and action to ignite change.
• How have you addressed your specific target audience effectively through your design choices?

• Based on your socially loaded topic, how have you chosen to visualize information (thru narrative, infographic, etc)? 
• How is this visualization of information (visual style, layout, composition ratio between image and text, etc) going to make an impact on changing the user's opinion and/or behavior?   

Animated Components via Scrolling

5 jQuery Plugins for Parallax {via inspiriationfeed}

Scrollorama

ScrollMagic

Scrollpath / download files

Week 12 Day 1 - Tuesday, April 7 - Homework

1. Continue to work on Layout Design for Project 2. Being to conduct target audience surveys and gather additional research resources for the project.

Besides project specifications, be sure to consider the following: 

• Address target audience effectively through your design choices?

• Appropriate visualization of information?

• Effectiveness of design strategies for strongest impact? 

Keep in mind Layout Design Comps due for formal class critique on Tuesday,  Thursday, April 17, 8:30am.

2. Earth Day Poster Competition submissions due end of this week.

About: Lewis Clark Recyclers hosts an annual poster contest to celebrate the observance of Earth Day. The winning posters will be featured on LCRI’s website and used to promote the annual Earth Day celebration in Lewiston, ID.

Prizes: There will be two $200 Grand Prizes awarded: One for People’s Choice and one for Judge’s Choice. The judges choice second place will receive $25.
The prize-winning artwork will be featured on the web-site and in other print and digital media. Runner-ups and other submissions may have the opportunity to be paid for use of their designs for marketing materials.


Judging Criteria:

• Overall visual impact 

• Skill level 

• Creativity 

• Originality 

• Polish 

• Effectiveness

Deadline: Submissions due Thursday, April 10th by 5:00pm.


Please submit your poster design on a CD labeled with your name, email, phone number and title of the piece to Rachel Fujita in AA 100.


Submissions must be either PDF or PSD formatted as 24” by 36” at 300 dpi.

For more information or to submit art-work, please contact contest coordinator Robin Lopez at lopezr7@gmail.com 208.596.0605
  

Week 11 Day 1 - Tuesday, April 1 - Homework

1. Create your own Parallax Exercise using your own imagery. Should include at least 5 sections in total and 3 set of imagery (foreground, mid ground, background).

2. Submit PDF of Wireframes (detailed sketches of content layout), Flowcharts (map out button controls and actions), and Moodboard (type, color scheme, visual style, begin gathering photographs and imagery) by Thursday, April 3, 8:30am via dropbox (ART370>P2_Visual Concept Submission). 

3. Next week, continue research process (info and media gathering) and begin to work on Layout Design for Project 2.  Keep in mind Layout Design Comps due for class critique on Thursday, April 17, 8:30am.

Parallax Demo Resources

Parallax Scrolling with JQuery {via F6 Design}
Horizontal Verzion of Parallax Scrolling demo {via github}
Parallax Scrolling for Mobile Devices
Skollr Tutorial


Additional Examples + Resources
Creativebloq's Parallax Examples
Atlantis World's Fair Simple Parallax Scroll
13 Reasons Why Your Brain Craves Infographics
Hobo Lobo of Hamelin
Timeline of Health Service Payouts (animation with Adobe Edge)
Adobe Edge Animate
Edge Dock - Resource for Edge Animate Tutorials

Week 10 Day 2 - Thursday, March 27 - Homework

1. Work on completion of Wireframes (detailed sketches of content layout), Flowcharts (map out button controls and actions), and Moodboard (type, color scheme, visual style, begin gathering photographs and imagery) for Project 2. Due as single PDF next Thursday, April 3 by 8:30am via dropbox.

2. Identify technical needs (demos/examples) for project 2. Next class will cover Parallax scrolling. Email examples to Rachel by end of this week.

3. Design Layout for Project 2 deadline moved to Thursday, April 17, 8:30am (in 3 weeks).

Profound Awareness Campaigns Case Studies

Impact through Social Media

WaterIsLife
Featured on Communication Arts: Hashtag Killer

The Missing Children Society (MCSC) Campaign
Featured on Communication Arts: Milk 2.0

No Homophobes
Featured on Communication Arts

Steve Jobs Moment of Silence
Featured on Communication Arts

Impact through rich media

Bullying Simulator
Faces of Drunk Driving (use of Parallax scrolling)
Don't Makeup and Drive
Too Young to Wed(use of Parallax scrolling)
A Woman's Nightmare  | Featured on Inspiration Room 

Consider how you deal with the emotional weight from learning about a social injustice. How can you funnel that strong emotion in measurable actions that actively improve the situation?

Earth Day Poster Competition

ANNUAL EARTH DAY POSTER DESIGN COMPETITION

About: Lewis Clark Recyclers hosts an annual poster contest to celebrate the observance of Earth Day. The winning posters will be featured on LCRI’s website and used to promote the annual Earth Day celebration in Lewiston, ID.

Prizes: There will be two $200 Grand Prizes awarded: One for People’s Choice and one for Judge’s Choice. The judges choice second place will receive $25.

The prize-winning artwork will be featured on the web-site and in other print and digital media. Runner-ups and other submissions may have the opportunity to be paid for use of their designs for marketing materials.

Judging Criteria:

• Overall visual impact 
• Skill level 
• Creativity 
• Originality 
• Polish 
• Effectiveness

Deadline: Submissions due Thursday, April 10th by 5:00pm.

Please submit your poster design on a CD labeled with your name, email, phone number and title of the piece to Rachel Fujita in AA 100.

Submissions must be either PDF or PSD formatted as 24” by 36” at 300 dpi.

For more information or to submit art-work, please contact contest coordinator Robin Lopez at lopezr7@gmail.com 208.596.0605
  

Week 10 Day 1 - Tuesday, March 25- Homework

1. Complete Project 2 Proposal (using template from dropbox) and 2 pages of rough concept sketches
 in PDF format for review

• Some questions to address in proposal and sketches:
• Who is the target audience? (Individuals vs groups? Age? Gender? Location?, etc)
• What technology/medium specific design strategies are most appropriate and effective to engage these users?
• Addition design strategies besides website: Infographics to visualize statistics? Narrative storytelling through parallax scrolling? Videos/Animations?
• What design strategies can be used for strongest impact? Methods to ignite active catalysis of change in behavior?  Use of social media? Tangible promotional materials and/or toolkits?

 2. Find at least 3 specific case studies from today's resources like AIGA - Design For Good and/or DesignIgnitesChange.org  for group discussions on design, usability and impact components next class.

Design For Impact Resources

Good Magazine - Design for Good Glossary
Design Ignites Change
AIGA - Design For Good
AIGA Minnesota- DFG Resources






Public Interest Design
Project H
John Bielenberg - Future
GoodCorps
Good Magazine - Designing for Impact Articles
Good Magazine - Social Design

Golla Golla Gymnastics
After School Educational Booklet
Yes, I am Wheezy
Medication communication
Marriage Equality
Against Campus Crime
FoodStalk (Facebook) (Twitter)

CAA Inspiring Design Futures

Artist Lectures from Printmaking Candidates (this week)

Week 9 Day 1 - Tuesday, March 11 - Homework

1. Continue working on Project 1. Final critique will take place this Thursday, March 13 at 8:30am. Please have files uploaded to your class UI server space by 8:30am**

-----------

Files to submit for Project 1 Critique (on USB stick) next class session:

Main Project folder with naming structure: FullName_Proj1_ART370

1) "Design Files" folder (PDF of all "screens" or "sections")

2) "Web Files" folder (web files with relevant html, css, javascript, images, etc)

3) "Process Docs" folder (with PDF or JPG scan of initial layout sketches + wireframe and flowchart)

**Files upload/submitted after 8:30 sharp will be considered late and will face grading penalties

Week 8 Day 2 - Thursday, March 6 - Homework

1. Conduct additional usability screening with at least 7 more users (that fit target audience) outside of class this week. I recommend you send your 7 surveyors the link to your project via ui class webpage (i.e. http://webpages.uidaho.edu/art370-yourvandalname/projfolder/index.html) and PDF or word doc of Usability form.

Then continue to make revisions to your site for homework. There will be one more studio day next Tuesday for questions and technical troubleshooting.

Besides the feedback received from in class and outside testing, be sure to consider the overall project goals and objectives, including the following:

• Effectiveness of information design and organization
• Impact of visual aesthetic (appropriate for content? for target audience?) 
• Successful Interface Usability (clarity, ease, compatible for multiple browsers and devices/screen size)

Final project critique scheduled for next Thursday, March 13

Accessing your UI class Webspace

URL to UI webspace will be in format of:

http://www.webpages.uidaho.edu/ART370-vand1234

For example:
http://www.webpages.uidaho.edu/ART370-moll234/

To publish or upload file to webspace using a MAC computer
1. Cmd +K on mac to open connect to server window

2. Type in server address:
smb://files.uidaho.edu/shared/webpages

3. Type in your vandal username and password

4. Look for webpages folder, drag and drop files to your folder (that lists your vandal user name)

To publish or upload file to webspace using a PC computer
1. Download the quckConnect tool applicaiton from UI ITS Help Website (must your vandal user name and password to download the file) 

quickConnect Tool Download

2. Open quickConnect application, which will prompt you for your vandal username and password

3. Look for ART370 webpages folder, drag and drop/or copy and pages files to your folder

World Music Celebration Kick Off, Thursday, March 6, 6:30-8:30pm

Thursday, March 6 | 6:30-8:30pm | Ridenbaugh Hall

Come join U of I students and performers for a COMMUNITY ART & MUSIC EVENT. You are welcome to watch, listen, & participate along side students from Art + Design and the Lionel Hampton School of Music during this collaborative event. Artist will try their hand in drawing musicians in real time as we all gather to celebrate the energy and eclectic rhythms of the 2014 World Music Celebration happening through out this weekend. Various drawing materials will be available for the public to join in on collaborative drawings made throughout the evening-- All ages and experience welcome!

Artworks from ART122: Design II Students will also be on display.

Please come join the sites, sounds, and community for this exciting night of Arts in Moscow!

Sponsored by University of Idaho Art + Design &
the Lionel Hampton School of Music.

Week 7 Day 2 - Thursday, Feb 27 - Homework

1. Continue coding development of project 1. Two or three coded sections due for review at start of next class session.

Usability testing scheduled for next Thursday, March 6. 75% of content should be implemented in HTML documents by this time.

CSS3 Transparency + Rotation

CSS3 rules for transparency

opacity: 0.5;  /*value 0-1, all other browsers and IE9+ */
filter: alpha(opacity=50);  /* value 0-100, works in IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);  /*value 0-100, works in IE6+ */
-ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=50)"; /*value 0-100,  this works in IE8 only */


CSS3 rules for rotation

-webkit-transform: rotate(97deg); /*value 0-360, safari and chrome*/
-moz-transform: rotate(97deg); /*value 0-360, firefox*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /*Internet Explorer; only accepts following values, 0, 1, 2, 3 ; 0=0 degree rotation, 1=90 degree rotation, 2=180 degree rotation, 3=270 degree rotation*/

Week 6 Day 2 - Thursday, Feb 20 - Homework

1. Continue coding development of project 1. Coded home page due for review at start of next class session.

Usability testing scheduled for Thursday, March 6. 75% of content should be implemented in HTML documents by this time.

CSS3 Resources

CSS3 Solutions for Internet Explorer {via Smashing Magazine}
CSS3 PIE (Progressive Internet Explorer - IE compatibly for drop shadow, gradient, border radius)

cssSandPaper (CSS3 Javascript Library) - cube transformations
Elliot Jay - Progressive Enhancement  (presentation that addresses the balance between usability and aesthetics, should web design be boring due to cross browser incompatibility)

CSS3 Transitions {via w3schools}
CSS selectors {via w3schools}
CSS3 Tranforms {via cssSandpaper}

Week 6 Day 1 - Tuesday, Feb 18 - Homework

1. Make revisions to Proj 1 design layout and prep/optimize imagery and relevant media.  Begin coding development of project 1. First section should be coded in Dreamweaver by end of next class session.

Usability testing scheduled for Thursday, March 6. 75% of content should be implemented in HTML documents by this time.

Week 5 Day 2 - Thursday, Feb 12 - Homework

1. Continue working on Design comps for Project 1. 

Design critique for Proj 1 scheduled in next class, Tuesday, Feb 18, 8:30am. 

Please save at layout comps for at least six "sections" into a single PDF document and place in Proj 1 Design Submission folder in dropbox by 8:30am next class.

see.hear.feel. THAT JAZZ | Visual Music Art Installation

Great student art installation going on for one night only during the Lionel Hampton Jazz Festival next week on Thursday, Feb 20 from 6-8pm

Week 5 Day 1 - Tuesday, Feb 11 - Homework

1. Foundation Class Exercise:

Create a HTML document using the following Foundation components

a) One row with 3 columns (varying in column size), with text and link content. Use the equalizer to maintain equal row height for each column

b) Create a block grid image gallery of 10 images. At least two of those images should be links that when clicked open up a large image and headline text using the reveal modal box. Two additional images should be links that when clicked open up a headline text and two paragraphs using the reveal modal box.

c) Create a navigation with 5 links using the Magellan Sticky Nav  and Scrollspy components.

Exercise to be review at start of next class, Thursday, Feb 13, 8:30am.

2. Continue working on Design comps for Project 1. Be sure to consider layout for both mobile and large screen devices. Design critique for Proj 1 scheduled in next week, Tuesday, Feb 18, 8:30am.

Week 4 Day 2 - Thursday, Feb 6 - Homework

1. Continue working on Design comps for Project 1. Be sure to consider layout for both mobile and large screen devices. Design critique for Proj 1 scheduled in 1 1/2 weeks, Tuesday, Feb 18, 8:30am.

Week 4 Day 1 - Tuesday, Feb 4 - Homework

1. Begin working on Design comps for Project 1. Be sure to consider layout for both mobile and large screen devices. Design critique for Proj 1 rescheduled for Tuesday, Feb 18, 8:30am.

2. Browse through jQuery and Foundation 5 resources, bookmark link (and email to Rachel) to the plugins you would like to cover in class demos next few weeks.

Week 4 Day 1: Responsive Web Design Case Study Discussion

Pick a website from the following list to review in today's class discussion:

http://worldwildlife.org/
http://www.jibevisuals.com/
http://www.hardlycode.com/
http://www.fijiwater.com/
http://minimalmonkey.com/
http://www.alchemy-digital.co.uk/
http://360gardalife.com/it
http://thepaintdrop.com/
http://anxietyfight.com/
http://foodsense.is/

Week 3 Day 2 - Thursday, Jan 30 - Homework

1. Javascript "Recycling Quiz" Exercise

Using the Space Quiz file as a reference, create a 10 question quiz that addresses recycling related facts using Javascript.

Due for review at start of next class

2. Put together a Moodboard for Project 1. 

Moodboard should address 1) color scheme options [type, background, link states color, etc], 2) typography choices [primary + secondary typefaces], and 3)inspirational imagery that address style and aesthetically initial concepts that you plan on utilizing in your design comps.

Save board as a PDF for review at start of next class.

3. Send out Recycling Survey to at least 10 people that fits within the project target audience. 

https://www.surveymonkey.com/s/BVKZC5C

Design For Social Change Resources

Reunite The River (Colorado River Preservation sponsored by Silk)

Made in Midtown (Campaign to educate people about the Garment District in NYC, tell story about the industry and the neighborhood as an integral part of New York City's economy, identity, and sense of place)

Foodstalk (Support Local Food and Goods)

Design Ignites Change

Tapped - documentary examines bottled water industry and its long term effects socially, economically and ecologically (Watch Full Movie Online)

Javascript Resources

Javascript 101 - Terminology
Javascript - W3Schools
HTML DOM - W3 Schools

Week 3 Day 1 - Tuesday, Jan 28 - Homework

1. Proposal, thumbnail sketches (20 or more potential layouts), Wireframes, Flowchart for project 1 due for review Thursday Jan 30, 8:30am.

2. Bring in 10 images (roughly 500px by 200px), cropped to the same size to next class.

Week 2 Day 2 - Thursday, January 23 - Homework

1.Work on Planning & Conceptual Phase of Project 1. Begin working on project Proposal, thumbnail sketches (20 or more potential layouts), Wireframes, Flowchart for chosen site re-design due for review Thursday Jan 30, 8:30am. 

Project Proposal/Project Evaluation should address

• Target Audience
• Summary of Website Goals/Mission
• Design/Usability problems and solutions

a)Do Research (read through all pages, all content, understand organization goals)
b)Outline the scope (what work will be done to project;apply SLIP and SHE model, list specific problems and solutions)
c)Create a timeline for the project (design, content prep, development)

John Maeda + Jakob Nielsen Resources

Laws of Simplicity (blog)

SLIP Tool

Jakob Nielsen
User Testing Methods
Identify your Target Audience
Information Architecture Report

Get In There And Sketch...

Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches

Why You Should Be Sketching (Even if You Can’t Draw)

Exercise: Measuring Successful Usability (Homework)

Using the provided Usability Survey sheet below, conduct a thorough usability test on the Lewis Clark Recyclers Inc website. Bring your completed survey to next class in preparation for a class discussion regarding website usability. 

Save completed Usability Survey in class dropbox folder by start of next class (Thursday, Jan 23).

Download Usability Testing Survey (word doc)
Download Usability Testing Survey (PDF)

Week 1 Day 1 - Thursday, Jan 16 - Homework

1. Bring laptop (with Dreamweaver) and required materials (notebook + pen) to next class.

2. Sign up for a dropbox account (via dropbox.com) and accept dropbox invitation from me by next class.

3. Upload PDF presentation of 10 x 10  exercise to dropbox folder by next class. Each student will present their concepts at start of next class.

4. Email me completed Student Profile by next class.

Week 1 Day 1 Exercise: 10 x10 Challenge

"Nothing is more dangerous than an idea when it's the only one you have"

—Émile Chartier, French philosopher

(90 min. in class exercise)

You've been hired by a soda company to create the packaging for an affordable organic energy drink. Your target audience is well-off twenty-year-olds.

1. Brainstorm a name and description of the drink through a mind map for 10 minutes

• Mind Mapping main categories: affordable, organic, energy, drink, 20 y.o.
• Goal of Mind Mapping: Determine the name of the energy drink, and a brief description of drink

2. You next have 50 minutes to create a hundred thumbnail sketches of the possible energy drink bottle design (take into consideration form factor, typography, iconography, etc).

• Sketch on a single piece of paper, in a 10 row by 10 column grid (10x10=100 mini sketches)

3. Next, you have 30 minutes to refine the top three thumbnail sketches down into three different final design sketches that incorporate all of your best problem solving to fulfill the clients requirements.

Design concepts for your top three ideas must fit individually on letter or tabloid sized paper

4. Scan all work created for 10x10 exercise (mind mapping, 100 sketches in 10x10 grid, 3 final sketches), save into a single PDF for class presentation. Please also write up a brief summary (2-3 sentences) per image to explain your creative process for this exercise. Each student will present their concepts at start of next class.

Call for Submissions for UI Undergraduate Juried Art Exhibition

Call for submissions for the Undergraduate Juried Art Exhibition.

• Work from all disciplines encouraged. 
• Entry fee is $5 per student.
• You may submit up to three pieces of work. 
• All mediums are accepted. 

Submit work in person to the Ridenbaugh Art Gallery (first floor of Ridenbaugh Hall) Friday, January 14-17 (12:00-5:00pm)

Software Resources

Although there will be some desktop computers available in the classroom with Adobe Software, computers are limited to a first come first serve basis. If you are interested in using your own laptop in class (or using your own computer at home) here are some resources for software purchasing.

**FYI: We will be using Adobe Photoshop, Illustrator and Dreamweaver throughout the semester (roughly 4 months)

Adobe Creative Cloud Student Subscription ($29.99) 
Includes: Adobe Creative Suite 6 Master Collection includes Photoshop CS6 Extended, Illustrator CS6, InDesign CS6, Acrobat X Pro, Flash Professional CS6, Flash Builder 4.6 Premium Edition, Dreamweaver CS6, Fireworks CS6, Premiere Pro CS6, After Effects CS6, Audition CS6, SpeedGrade CS6, Prelude CS6, Encore CS6, Bridge CS6, and Media Encoder CS6

Syllabus + Student Profile

Download Syllabus

Download Student Profile (fill out and submit via email rfujita@uidaho.edu by end of first class session)