CAA Lecture Series Fall 2013: Anna Kell Oct 10 + 11

Week 5 Day 2 - Thursday, Sept 26 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. PDF format of 1) home page design layout (with actual text and image content) and 2) two example pages that include 1 or more facts about history of web (with actual text and image content) due for review Thursday, Oct 3 at 8:30am. Scheduled design critique for Wednesday, Oct 3, 8:30am.

Week 5 Day 1 - Tuesday, Sept 24 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. PDF format of all pages due for review next week.

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 critique for Wednesday, Oct 3, 8:30am.

Week 4 Day 2 - Thursday, Sept 19 - Homework

1. Continue working on design layout for Project 1. Critique of all sections (design wise) due Thursday, Oct 3.

2. Based on Lianne's lecture on design, complete the following design exercise for discussion on Tuesday, Sept 24.

Week 4 Day 2 - Thursday, Sept 19 - Homework

1. Continue working on design layout for Project 1 using Illustrator, Photoshop, and/or Fireworks. Critique of design mockup for all sections scheduled for Thursday, October 3, 8:30am.

Web Design Resources

Web Design Blogs + Articles

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

Jakob Nielsen (usability expert)

Design Grid Templates
960 grid systems (design templates)

Photoshop Basics
Type Tool Basics
Selection Tool Basics
Layer Basics

Typography Articles
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

Exercise 5: Keith Haring Webpages

Using the Keith Haring media assets provided last week, create a biography (index.html) and early work (earlywork.html) 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.

Week 3 Day 2 - Thursday, Sept 12 - Homework

1. Practice HTML and CSS code. Recommend exploring HTML and CSS section on w3schools.com, in addition to your own exploration using textedit and/or dreamweaver.

2. Create a moodboard for Project 1 and addresses color choices (3-5 colors), type choices (1-2 choices) and visual language you intend to execute for the website project. Due for review next class.

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

Week 3 Day 1 - Tuesday, Sept 10 - Homework

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

• Research Outline (bullet point facts about 20 key events--for 2 person groups, 25 key events for 3 person groups)
• Wireframes (for each unique design layout for project)
• Flowchart

**All conceptual files for review should be saved as a PDF

UI College of Art & Architecture Technology Assistant

UI College of Art & Architecture Technology Assistant

You can also get personal assistance from the CAA Technology Assistant in Art & Architecture North building in Rm 117 during scheduled hours:

Monday	5:30 pm - 8:30 pm
Tuesday	9:30 am - 11:30 am
Wednesday	5:30 pm - 8:30 pm
Thursday	5:30 pm - 7:30 pm
Friday	3:30 pm - 6:30 pm
Saturday	None
Sunday	12:30 pm - 2:30 pm

The Technology Assistant can show you how to find program help resources and how to effectively troubleshoot the design software and hardware problems you encounter.

Additional CAA Computer Resources

Flowchart + 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

Week 2 Day 2 - Thursday, Sept 5 - Homework

1. Begin Conceptual Process for Project. Begin gathering research regarding the history of computers and web technology.

A project outline that identifies at least 10 key events/historical figures due for review by Thursday September 12.

• 20 key events/historical figures related to both the history of computer and web technology
• UI Library Guide for Art & Design 
• Use UI Library Catalog search to find books and articles; recommend browsing the following section sin the library, TK5105 (Internet/Web), QA76 (Computers), P90 (New Media)
• Wikipedia is not a reliable source of research
• All research material (text + image) must be cited in project (see MLA Image Citation guide)

2. Practice HTML tags introduced in class this week.

Project 1: History of the Computers + Web Technology

Download PDF of Project Specification

Description:
Working in groups of two, research, design and develop 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 Thursday September 12, 8:30am
Design Concept Phase: PDF of Moodboard due Tuesday, September 17, 8:30am
Layout Design Phase: PDF of final design layout due Tuesday, October 1 Thursday, Oct 3, 8:30am
Final Project Submission: USB submission of all project files due Thursday October 17, 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

Week 2 Day 1 - Tuesday, Sept 3 - Homework

UI Art & Design Library Resources

Oxford Art Online

Create EX3 html file with following information (due for review on ui webspace start of 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 at 6 pieces of artwork created by artist

**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

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