Week 16 Day 1 - Monday- Dec 8 - Homework

Critique of Project 2 scheduled for next class Wednesday, Dec 10, 8:30am. Each student will present final website via your personal course site (webpages.uidaho.edu). File upload to webspace and USB drive submission must be completed by start of class session (Wednesday, Dec 10 at 8:30am). Late work (even 1 min late) will be subjected to penalties.

***Classroom will be open at 8:00am on Wednesday, please be sure to plan submission of work accordingly.

What to submit for Project 2 critique next class:

1. USB Flash Drive with following Proj 2 files (organized and labeled similar to project 1 screenshot below)

Process Files - should include mindmaps, flowchart, wireframe, screen shots of original website

Design Files - PDF of midpoint design layout for multiple screens

Web Files - All web and media files for final website build

Week 15 Day 2 - Wednesday, Dec 3 - Homework

1. Continue working on coding for project 2. Final project critique scheduled for next week, Wednesday, Dec 10, 8:30am.

Embedding Google Maps

Embedding Google Maps
Need Google Account and Google API Key

Week 13 Day 2 - Wednesday, Nov 19 - Homework

1. Continue working on coding for project 2. At least 3 pages/secitons must be fully coded with foundation, and all intended text and image/media content placed by next class, Monday, Dec 1, 8:30am.

University Buildings (including AAS labs) will be open and accessible thru this weekend, in addition to Nov 24-26 and Nov 29-30. 

University will be closed officially Thursday + Friday (Nov 27-28). 

CAA Print Center will not be providing print service support between Nov 22-30.

No classes next week. Have a fun and safe thanksgiving break!

Orbit Javascript code (to modify slideshow setting)

Orbit Foundation Documentation

In order to make modification to the Foundation Orbit slideshow settings, be sure to following the instructions below

1. Comment out the following lines of code near the closing body tag

    <!--<script>
      $(document).foundation();
    </script>-->
    

2. Add the following javascript code before the closing body tag

   
<!--add for orbit slideshow-->
    <script>
    $(document).foundation({
  orbit: {
 animation: 'fade', // Sets the type of animation used for transitioning between slides, can also be 'fade'
 timer: true, // Does the slider have a timer active? Setting to false disables the timer.
 timer_speed: 5000, // Sets the amount of time in milliseconds before transitioning a slide
      pause_on_hover: true, // Pauses on the current slide while hovering
 resume_on_mouseout: true, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
 navigation_arrows: true,
 slide_number: false,
 bullets: false // Does the slider have bullets visible?
  }
});
    </script>
    

3. Following the provided html comment instructions to make adjustments to various slideshow settings

Week 12 Day 1 - Monday, Nov 10 - Homework

1. Continue working on layout design for Project 2. All content (image and text) should be included in your comp design of all "pages/sections"

Upload your PDF file into the Project 2 Design submission folder onto DROPBOX for review by Wednesday, Nov 12 at 8:30am. Be sure to label your file as P2_Design_LastName.pdf.

Scheduled design critique for Wednesday, Nov 12, 8:30am.

Foundation Resources

Foundation Documentation (what can you do with Foundation)
Foundation Website Examples, More Responsive Design with Foundation
Foundation Component Stencils

Week 10 Day 2 - Wednesday, Oct 29 - Homework

1. I will be out of town next week, we will NOT be meeting for class next Monday (Nov 3) AND Wednesday (Nov 5).  

Use this opportunity to either work from home or in the classroom on Project 2 Design comps for all sections (with actual text and image content). 

In order for me to keep track of your progress with Project 2, everyone must submit a PDF file of the design layout for your home page to our class dropbox folder (Proj 2 Home Submission Folder) by 11:30am on Monday, Nov 3.

Keep in mind that the Proj 2 Design Critique is scheduled in two weeks, Wednesday, Nov 12 , 8:30am.

2. Revisions to Project 1 due by 5pm Friday, Oct 31 in "Revised Project 1" folder in class dropbox folder.

Week 10 Day 1 - Monday, Oct 27 - Homework

1. Create a Moodboard for Project 2

Moodboard should be a collection of imagery that represents the intended visual language/style to be explored in your design layout for project (including, but not exclusive to, typography [primary + secondary], color scheme, inspirational layouts, textures, imagery sketches, etc).

Moodboard(s) must be saved as a multi-page PDF or PDF version of Pinterest board for review at start of next class.

2. Revisions to Project 1 due by 5pm Friday, Oct 31 in "Revised Project 1" folder in class dropbox folder.

Week 9 Day 2 - Wednesday, Oct 22 - Homework

1. Modify Javascript Demo Exercise Files to include:

• Image Gallery File: Modify code to feature as least 10 thumbnails and large images (of your own images) using Image Map javascript. Upload Image Gallery files (including relevant css and image folder) to class website.
• Javascript Exercise 1 File: Include at least four different background link options and four different background image links options, as well as 10 possible random image thumbnails (all same size (400 x 200 px) that load at bottom of your page, created with random image javascript. Upload Javascript Exercise 1 file (including relevant CSS, Javascript and Image folder) to class website.

Both Image Gallery and Javascript 1 Exercise files due on your class website by start of end of next class session (Monday, Oct 27, 8:30am)

2. Complete Wireframes sketches and Flowchart for Project 2. Due for review at start of next class.

3. Revisions to Project 1 due by 5pm Friday, Oct 31 in "Revised Project 1" folder in class dropbox folder.

Project 2: Non-Profit Website Redesign

Description:
Working individually, you will be redesigning a website for a local non-profit organization (from list provided). Using pre-existing content from the organization's website, you must assess the strengths and weakness of the existing site, and develop ways to improve the information design, visual aesthetic, and interface usability.

Objectives:
+ Apply information and interface design fundamentals and principles to aide in creative problem solving
+ Write HTML, CSS and Javascript code
+ Use industry standard web authoring tools

Specifications:
+ Non-profit organization should be chosen from provided list.
+ User research and usability testing must be conducted throughout project to meet user expectations.
+ Design layout should meet usability standards and current web design/development best practices.
+ All web pages are to be generated with Dreamweaver and/or a text editing application.
+ Scripting languages to be used: HTML, CSS and Javascript. No table, td, tr tags allowed.
+ Website should be responsive & browser compliant in Firefox for desktop, laptop AND mobile platforms (Windows & Mac).
+ All media (video, graphics, photographs and/or artwork) must be original and/or not violate copyright laws.

Deadlines:
Concept Phase: Mindmap, wireframes sketches and Flowchart as PDFs due Monday October 27, 8:30am
Visual Concept Phase: PDF of Moodboard due Wednesday, October 29, 8:30am
Design Comps due for all section: PDF of all layout compositons due Wednesday, November 12, 8:30am
Usability Testing I: Functioning webpages for user review in Firefox due Wednesday, December 3, 8:30am
Final Project 2 critique and submission of all project files due Wednesday, Dec 10, 8:30am

Grading criteria (averaged as 50% of course grade):
Design Aesthetics—30% of project 2
Technical Skill—30% of project 2
Usability—20% of project 2
Process (Flowchart, Wireframe, Sketches, Mood Board, Project Refinement)—20% of project 2

Approved Local Non-Profit Organizations
Alternatives to Violence on the Palouse
Appaloosa Horse Club
Palouse Habitat for Humanity
Rural Roots
Cougar Track & Field Club
Nez Perce County Historical Society
White Spring Ranch
Two Degrees Northwest
Sojourners Alliance
Humane Society of the Palouse additional site here
Graham Ballet
Moscow Adventure Learning Camps
Swing Devils
United Way Pullman
Palouse Folklore Society
Family Promise

Week 9 Day 1 - Monday, Oct 20 - Homework

Work on revising Project 1. Any effective and successful changes made to your project (design, usability, technical skill, etc) can improve your overall Project 1 grade up to 10%. Web files due to "Revised Project 1" folder (in class dropbox folder) Friday, Oct 31 at 5pm.

Javascript Demo scheduled for next class, Wednesday, Oct 22.

Experiential Events Thursday, Oct 16 + Friday, Oct 17

Second Story is design studio, with offices in Portland, Atlanta, and New York, specializing in creating innovative interactive experiences. They push the boundaries of storytelling for brands and institutions across digital channels—web, mobile, and installations—empowering audiences to connect and share. Daniel Meyers, AIA (Creative Director) and Traci Sym (Experience Design Director) will be discussing various projects that continue to push boundaries, innovate, and redefine the world of interactive storytelling.

As part of the ART370 Advanced Experiential Design course, students from various CAA disciplines, including Studio Art & Design and Virtual Technology & Design, are working in teams to create several Experiential Design installations inspired by the theme of Otherworldly. Join them after the Second Story lecture for an evening of site specific collaborative experiences.

Please RSVP with Rachel Fujita (rfujita@uidaho.edu) if you plan on participating in this Friday Workshop/Roundtable Discussion.

Week 8 Day 1 - Monday, Oct 13 - Homework

Critique of Project 1 scheduled for next class Wednesday, Oct 15, 8:30am. Each student will present final website via your personal course site (webpages.uidaho.edu). File upload to webspace and USB drive submission must be completed by start of class session (Wednesday, Oct 15 at 8:30am). Late work (even 1 min late) will be subjected to penalties.

***Classroom will be open at 8:00am on Wednesday, please be sure to plan submission of work accordingly.

What to submit for Project 1 critique next class:

1. USB Flash Drive with following Proj 1 files (organized and labeled similar to the screenshot below)

Week 7 Day 2 - Wednesday, Oct 8 - Homework

1. Continue working on Project 1 Coding. 

**Keep in mind final class critique of Project 1 (with all functioning HTML and CSS documents) scheduled for next Wednesday, Oct 15, 8:30am.

Extra Credit Opportunities

By attending any of the following lectures 


1) Gordon Watkinson: Bauhaus Photography Lecture 
Thursday, Oct. 9 at 5:30 pm | Renfrew Hall (next to UI library) Rm 112 

2) Second Story Lecture 
Thursday, Oct. 16 at 5:00 pm | Renfrew Hall (next to UI library) Rm 126 

**Attendance of a lecture can make up for a class absence or missed/late/incomplete homework assignment; must sign Rachel's attendance sheet after end of lecture to receive extra credit points

Or by participating in any of the following Studio Art & Design events 

1) Otherworldly: An Experiential Art & Design Installation

Thursday, Oct 16 front 6:30-9:30pm | UI Commons, TLC Courtyard, Reflections Gallery, Library Exterior, AA North Grounds

2) Bauhaus Photo Workshop with Gordon Watkinson
Saturday, Oct 11 from 9am-1pm at Prichard Art Gallery
Sunday, Oct 12 from 11am-5pm at UI Art & Arch Woodshop Crit Space

Register for Workshop (space limited for 20 participants)

**Attendance of a Studio Art & Design event can make up for a class absence or class participation; must submit photography created from workshop to receive extra credit points (double if you attend both days)

Gordon Watkinson: Bauhaus Lecture + Exhibition

Artist lecture Thursday, Oct. 9 at 5:00 pm, Renfrew Hall Rm 112

Opening Reception at the Prichard Gallery, Friday Oct. 10, 5-8 pm.

Bauhau Photo Workshop at Prichard Gallery Sat & Sun, Oct 11-12.

An exhibit featuring photographs by Gordon Watkinson. Conceived as a multidisciplinary project encompassing architecture, design, and photography, Bauhaus twenty-21 not only conveys the architectural history, but also illustrates the enduring philosophies of the Bauhaus. The exhibition offers a unique perspective on Bauhaus design philosophy as it relates to architecture and its relevance in today’s society.

Week 7 Day 1 - Monday, Oct 6 - Homework

1. Work on Project 1 Coding. By start of next class (Wednesday, Oct 8 at 8:30am.), please have the following completed for instructor review by next class:

a) Project folder created, should include images folder with all sliced/optimized images; image names should follow naming conventions
b) HTML and CSS files for the "home" page/section

Be sure to use a tracing image (saved as jpg for each uniquely designed page) to help you create appropriate css rules.

**Keep in mind final class critique of Project 1 (with all functioning HTML and CSS documents) scheduled for Wednesday, Oct 15, 8:30am.

Week 6 Day 1 - Monday, Sept 29 - Homework

1. Upload demo exercises from class today (Google Font, Image Rollover, Fancybox) to your personal class website by start of next class (for exercise points).

2. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design of a minimum of four "pages/sections"

Upload your PDF file into the Project 1 Design submission folder onto DROPBOX for review by Wednesday, Oct 1 at 8:30am. Be sure to label your file as P1_YourName.pdf.

Scheduled design critique for Wednesday, Oct 1, 8:30am.

Week 5 Day 2 - Wednesday, Sept 24 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. 

Scheduled design layout critique for Wednesday, Oct 1, 8:30am. You should put together at least 4 "pages/sections" worth of content for review.

Week 5 Day 1 - Monday, Sept 22 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. 

Would like to see content layout for homepage and 1 detail event section (text, images in addition to basic navigational content) by start of next class.

Scheduled design layout critique for Wednesday, Oct 1, 8:30am.

Beyond The Screen: The Future of Experiential Design Curriculum - this Thursday

CAA Guest Artist Events This Week

Week 4 Day 2 - Wednesday, Sept 17 - Homework

1. Create a Moodboard for Project 1
Moodbaord should be a collection of imagery that represents the intended visual language/style to be explored in your design layout for project (including, but not exclusive to, typography [primary + secondary], color scheme, inspirational layouts, textures, imagery sketches, etc).

Moodboard(s) must be saved as a multi-page PDF or PDF version of Pinterest board for review at start of next class.

Resources for Moodboard Creation
Why Moodboards Matter
How to create Moodboards
Google Fonts
Color Lovers (Color Trends + Patterns)

2. Continue research gathering (informational and imagery) for project 1. 

Week 4 Day 1 -Monday, Sept 15 - Homework

• Proj 1 Wireframes (create at least 3 rough sketch mockups for each of the following: homepage, sectional and and sub-sectional, detailed informational page)
• Proj 1 Flowchart (this should map out your project navigation, i.e. number of sections, pages, what links will be available on each page. Be sure to consider how you will categorize/organize your 20 key events)

Week 3 Day 2 - Wednesday, Sept 10 - Homework

1. Complete the following conceptual planning for project 1 for review start of next class, Monday, September 15, 8:30am

• Research Outline (Generate a list of 20 key events to be included in your project; these events should include significant milestones in regards to inventors, inventions, technology, computers, software, web/net protocols etc.)
• Wireframes (create at least 3 rough sketch mockups for each of the following: homepage, sectional and and sub-sectional, detailed informational page)
• Flowchart (this should map out your project navigation, i.e. number of sections, pages, what links will be available on each page. Be sure to consider how you will categorize/organize your 20 key events)

**All concept planning files for review should be saved as a PDF and uploaded to Proj 1 Concept in dropbox.

**We will talk about flowcharts, wireframes and Web Design Principles next week.

Web Design Resources

Web Design Blogs + Articles
Researching Your Design Project
Sketching and Your Design Workflow

An Introduction to Composition

Adding Space to Your Design
All About Grid Systems
Intro to Color Theory
Selecting Color Scheme
Understanding the Characteristics of Color
Principles of Successful Button Design
Common Mistakes in Website Design

The What, Why and How of Textures in Web Design

Visual Direction (great article that addresses design choices and its influence on usability)

Understanding the F-Layout

Understanding Split Layer Design
Jakob Nielsen (usability expert)

Design Grid Templates
960 grid systems (design templates)

Photoshop Basics
Type Tool Basics
Selection Tool Basics
Layer Basics

Typography Articles
Beginners Guide to Choosing Fonts
List of Web Safe Fonts
List of Special Characters in HTML
Typography Speaks Louder Than Words
Why Typographic Choices Make a Difference
How to choose a Typeface
What Font to use?
Combining Typefaces
Type Guidelines and References for the web {great article by Smashing Magazine}
I Love Typography {articles, resources, fonts}
Web Font Services: The Good, Bad and Ugly

Web Type Services

@font-face kit generator

Google Web Fonts
Adobe TypeKit

More Web Font Embedding Services {via Smashing Magazine}

Font Foundries {not all fonts are created equal, and should not have been created at all}
Emigre
League of Moveable Type
Berthold Types
Font Shop

Don't Know What Font it is? Try WhatTheFont.com

Flowcharts + Wireframes

Flowchart Examples

Do you Need a Designer Flowchart {by Sabine Ahrens}

So You Want to Watch a Holiday Movie {by lemon.ly}

Lovely Charts (Free Online Flowchart and Wireframe application)
Sample flowchart from Wired.com
Another sample flowchart from Wired.com

Image Copyright Flowchart
Fantastic flowchart diagraming the importance of getting permission to post copyright images online. Created and designed by Pia Bijkerk Erin Loechner and Yvette van Boven.

Wireframe Examples

Exercise 5: Keith Haring Webpages

Using the Keith Haring media assets provided via dropbox, create a biography (index.html) and early work (earlywork.html, use lore ipsum dummy text for this page) web documents as part of a Keith Haring informational website. Upload completed exercise to your personal class web site and be sure to update your home page of class site to include hyperlink to view Exercise 5. Due start of next class.

Project 1: History of the Computers + Web Technology

Download PDF of Project Specification

Description:
You will be responsible for researching, designing and developing a website project documenting the history and evolution of web & computer technology. Overall project should serve as an engaging, informational resource that introduces a historical overall of interactive media and technology developments throughout time.

Objectives:
+ Apply information and interface design fundamentals and principles to aide in creative problem solving
+ Collaborate effectively with group members through conceptual, design and development phases
+ Use industry standard web authoring tools

 Specifications:
+ Design layout should meet usability standards and current web design/development best practices
+ Factual information and historical photographs must be cited using MLA standards.
+ All web pages are to be generated with Dreamweaver and/or a text editing application.
+ Scripting languages to be used: HTML & CSS (external files when necessary). No table, td, tr tags allowed.
+ Project should be browser compliant in Firefox for both PC and Mac platforms.

Deadlines:
Concept Phase: Research Outline, Wireframes, Flowchart as PDFs due Monday September 15, 8:30am
Design Concept Phase: PDF of Moodboard due Wednesday, September 17, 8:30am
Layout Design Phase: PDF of final design layout due Monday, September 29, 8:30am
Final Project Submission: USB submission of all project files due Wednesday October 15, 8:30am

Grading criteria (25% course grade):
Design Aesthetics—30% of project 1
Technical Skill—30% of project 1
Usability—20% of project 1
Process (Flowchart, Wireframe, Sketches, Mood Board, Project Refinement)—20% of project 1

Keywords
Internet
World Wide Web
New Media 
Computers

Vannevar Bush

Memex

Tim Berners-Lee

Ted Nelson

World Wide Web Consortium (W3C)

Doug Engelbart

Samuel Morse

Bell Labs

George Stibitz

ARPANET

NCSA Mosiac

Turing machine

Charles Babbage

hypermedia

Apple

Microsoft

ENIAC

IBM

Exercise 3B // Week 2 Day 2 - Wednesday, Sept 3 - Homework

UI Art & Design Library Resources

Oxford Art Online

Create EX3B html file (in your Ex3 folder) with following information (due for review your/classroom computer next class)

1. Find an artist using Oxford Art Online research site

2. Download at least 3 images of that artist (work or portrait)

3. Type up at least 3 paragraphs of text about that artist, (summarized or dummy text ok)

4. Include 3 links (absolute URL) related your chosen artist

5. Create an unordered list featuring 5 names and dates (of creation) of artwork by your artist

6. Use CSS to change the following: 

• Typeface to Arial
• Links styles (underline for hover and visited, all states black text)
• Set list items font weight to bold
• Four more style changes to any HTML tag(s) of your choice

**Wikipedia is not an acceptable form of research; if using copyright images, cite your source reference

Accessing your UI class Webspace

URL to UI webspace will be in format of:
http://www.webpages.uidaho.edu/art271-vand1234

For example:
http://www.webpages.uidaho.edu/art271-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:
cifs://files.uidaho.edu/shared

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 
quickConnect Tool Download


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

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


Troubleshooting Tips for webspace setup 

Wednesday, Aug. 27 - Homework

1. Create homepage for your own ART271 site (file should be called index.html and placed in webpage folder on shared space and saved on a USB drive or somewhere on your laptop computer). 

Spend some time applying the following HTML tags to personalize your own website, which will be used primarily in this class for exercise submission.

Home page should include:

Your name (paragraph tag)

Name of the class [ART271 Interaction Design I] (paragraph tag)

Links to current assignments (html exercise 01). Please also include a date for each link that indicates the date of (assignment) completion.

At least 1 image that is copyright free (image tag)

File should be ready for review by start of next class, Thursday, Sept 3, 8:30am.

History of the Internet and What is a Web Browser?

Thomas Doyle Lecture and Opening Reception at Prichard this week

CAA Lecture Series presents Thomas Doyle lecture

This Thursday, August 28 at 5pm in TLC031

Prichard Gallery Opening Reception

This Friday, August 29 5:00-8:00pm

Work featuring Thomas Doyle (NY), Ellen Driscoll (NY), Gregory Euclide (MN), Lilana Porter (NY), Kurt Moses (MN)

A display of five contemporary artists all f whom work in miniature scale. The pieces vary in materials and media but each of them allow an intimate experience for the viewer to interact with big ideas presented through the intricate, detailed work.

Week 1 Day 1 (Aug 25): Homework

1. Accept dropbox invitation by start of next class session. If you have not received a dropbox invite from me, please see me after class.

2. Bring in 10 different digital images to class, 72 resolution, at least 900px width by 500px height 

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 throughout the semester (roughly 4 months), Adobe Dreamweaver (roughly 4 months)

Link for Adobe Creative Cloud Subscription Packages
Adobe offers 30 day trial versions as well as Subscription packages to all its software. Depending on your needs for specific software, this may be a more economical option.

Download 30 Day Trial Version of Adobe Software (only good for 30 days)

Adobe Creative Cloud Student Subscription ($19.99) 
Includes: Photoshop, Illustrator, InDesign, Acrobat XI Pro, Flash Professional Muse, Dreamweaver, Premiere Pro, After Effects, Audition,  Encore , Bridge, Fireworks, Prelude, Media Encoder

Syllabus + Student Profile

Download Syllabus

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