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