The course introduces students to the history, trends, terminology, and concepts in the field of interactive design. Through materials presented in the course, students become familiar with the roles and responsibilities of people working in the field, professional organizations, and significant organizations. Students are also introduced to the basic concepts and tools for developing interactive media applications.

Instructor: John Keston

Meeting Times and Location:
M/W 2pm – 5pm (with appropriate breaks), Room 233, Pence building

Syllabus:
Please visit e-Companion to download the current syllabus

Recommended Texts:
Miller, B. (2010). Above the Fold: Understanding the Principles of Successful Web Site Design. Blue Ash: HOW Books.
McNeil, P. (2007). Web Designer’s Idea Book: The Ultimate Guide To Themes Trends & Styles In Website Design. Cincinnati: F+W Publications.

Required Reading:
Speaking in Styles: Fundamentals of CSS for Web Designers

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

Session 1: Welcome to Interactive Design I. Today we will start with introductions, review the syllabus, and discuss the goals of the class. Our first project will be a simple one page layout called the Project Portal. The document layout will use “normal flow” to present a short biography and links to all of your upcoming projects.

Important: Normal flow is a term used to describe how an HTML document behaves when none of the elements within the document have been given values for the CSS position or float attributes. In this case all block-level elements stack vertically from top to bottom in contrast to inline-level elements that stack horizontally from left to right.

We will begin the first project using a text editor to create a basic single page website. Before getting started it’s important to understand a little about HTML and how websites operate. Therefore we will build our sites by using a text editor like TextEdit, TextMate, Sublime Text, or Smultron. This technique allows for the possibility of mistakes to be made and in-turn you will learn about troubleshooting techniques.

Assignment 1: “Project Portal” Static Web Page
Due: Session 1, Week 3 (10 points)

Description:
This assignment is an introduction to the most basic concepts of building a web page (i.e. normal flow, hyperlinks, file management, creating sub-directories, and basic CSS). It is also the mechanism through which I will grade all of your subsequent assignments. start by creating a home directory titled “im1480”. Next, create four new directories within “im1480” labelled for each upcoming project. You will then build one web page with the filename “index.html” with links to the new directories you created. Upload the environment to the student webspace and place an internet shortcut on the Dropoff Drive as demonstrated in class.

Requirements:
1. Build an environment for your Project Portal and upcoming assignments
2. The environment should contain all of the subdirectories necessary
3. Create a single project portal page in the “im1480” directory called “index.html”
4. The project portal will include a header, biography, images, and an unordered list
5. The list will have links to all upcoming projects
6. Upload the environment to the student webspace
7. Place an internet shortcut on the Dropoff drive

Points Breakdown:
2 points are awarded for coding headers, lists, links, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for preparing readable, accessible, and well design content for the page

Session 2: Today I’ll be demonstrating a couple of ways to produce the "Project Portal" assignment that we discussed last time. We will also start our discussion on HTML5 and look at some functionality within the text editors and FTP applications.

Reading Assignment:
Speaking in Styles – Introduction and Chapter 1
Setting up your Student Webspace

Student Webspace Support:
For MyAiCampus support, call 1.866.642.2711 or email campus_support@aii.edu. Support is available Monday through Saturday, 7 AM to midnight, and Sunday 10 AM to midnight (Eastern).

Session 1: Today we will select students for the Google-Fu assignment. This participation assignment requires each student to research and comment about the content for a particular week of the class.

Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)

Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.

Requirements:
1. Enter a single comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included in the course content
3. Enter your comment 24 hours before session 2 of the assigned week for approval

Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article

Following the discussion we will continue demonstrations for the “Project Portal” This will include creating a basic “normal flow” layout including a header, content area, and footer. We will also look at lists, links, images, and some basic CSS properties. A portion of class time will be available for studio work and feedback.

<!DOCTYPE html>
<html>
<head>
  <!-- this is an HTML comment -->
  <meta charset="UTF-8">
  <title>Title of the page goes here<title>
</head>
<body>
  <h1>h1 is the largest of the six header tags</h1>
  <p>All content is contained in the body tag</p>
</body>
</html>

Relevant Resources:
W3Schools CSS Tutorial
W3Schools HTML4 and HTML5 Tutorial

This weeks reading:
Speaking in Styles – Chapters 2, 3, and 4 (Pages 17 – 88)

Session 2: Today is the last day to get feedback on the “Project Portal”. We will also look at the “Google-Fu” research. Finally, in-class demonstrations will center on completing the layout, techniques, and requirements for the “Project Portal”. This will include a discussion regarding the anatomy of CSS rules and demonstration regarding “box model.”

Relevant resources:
Selectutorial – CSS selectors
W3 Schools – The CSS Box Model

Next week’s reading:
Speaking in Styles – Chapters 5 and 6 (Pages 89 – 175)
Brainjar CSS Positioning article

Session 1: After a brief presentation of the Project Portal assignments we will discuss the requirements for the Technical Exercise #1 Image Optimization. If time permits I will also demonstrate the techniques required to complete the exercise.

Technical Exercise 1: Image Optimization
Due: Session 1, Week 4 (3 points)
Download the Exercise Assets

Description:
Use Photoshop to optimize the provided raw images as JPEGs and display them within a single web document. Next, in the same document display some type converted to graphics using the transparent GIF format and the transparent PNG-24 format. Use a background color other than white and a typeface with plenty of curves to illustrate the advantage of alpha over index transparencies. Finally, experiment with an image of your own to create a 2 by 2 grid of 4 images that are manipulated by experimenting with the GIF color table in the “Save for Web” dialog box.

Requirements:
1. Create a single web page that documents the tasks listed below
2. Optimize the provided raw images into an appropriate web format
3. Display any type converted to graphics using both GIF and PNG-24 formats
4. Produce a grid of your own images manipulated via the GIF color table
5. Add the files and folders to your environment and upload to your student webspace
6. Upload your exercise and test your portal before class starts on session 1 week 4.

Points Breakdown:
1 point awarded for effectively optimizing the raw images into an appropriate web format
1 point awarded for using type converted to graphics to illustrate the advantage of alpha transparency
1 point awarded for creating a grid of experimental images by manipulating the GIF color table

Session 2: Today we will begin discussing the “World” CSS Positioning Project. This project is designed to allow students to focus on color, design, layout, type treatments, syntax, markup, and styles while learning about a country other than the one we live in.

Assignment 3: “World” CSS Position Project
Due: Session 2, Week 7 (25 points)

Description:
Design a web application featuring six content areas that are topics about the country you have selected. Create a consistent and appropriate design scheme that incorporates images, navigation and type treatments using HTML and CSS. Pay special attention to type, colors, layout, styles and positioning. In addition to developing your skills as a front-end web designer, this project will encourage students to discover new information another country.

Requirements:
1. Organize your content into six content areas or pages
2. Create a consistent design scheme and apply it to your template
3. Include universal navigation on each page to get to every content area
4. Incorporate optimized images appropriate for the content into each page
5. Format type, images, and the positioning of the content with CSS
6. Upload to the student webspace and test the link in your project portal
7. Due before class on session 2 of week 7 for presentations

Points Breakdown:
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct universal navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation

World Project Resources:
Wikipedia.org
The CIA World Factbook
Getty Images Login Information

Reading:
Speaking in Styles – Chapters 7 and 8 (pages 176 – 223)

Session 1: This week we will begin our discussions about the World Project. I will also be assigning the Markup Exercise and demonstrating the start of the build process for the World Project template.

World Project Milestone #1
Due: Week 4, Session 2 (before class starts)
1. Be prepare to discuss your layout and design concept
2. Prepare a minimum of three sketches to illustrate your ideas
3. Prepare a color scheme using kuler.adobe.com

Relevant Resources:
CSS Reset
CSS Normalize

Session 2: Today we will continue demos regarding the World Project. Be prepared to demonstrate the points listed last session for the milestone. This milestone is required for the approval of your design concept. Also, we will discuss the requirements for the Markup exercise.

Relevant Resources:
Viewport Sized Typography
Can I use Viewport Units (vw, vh, vmin, vmax)?
Using vw and vh Measurements In Modern Site Design

Technical Exercise 2: Markup
Due: Session 2, Week 5 (4 points)

Description:
Build a single page that profiles the first computer or gaming console you remember using. If you cannot remember the exact model choose from something around the same time period. Browse VintageComputing.com, Wikipedia, or other sites to collect the content and resources for the page. You must cite the resources that you use in the page as links. Your layout must include page-jumps for navigating to specific content areas. It must also include a header, header images, content images, an aside, and a footer. Focus on the markup. Styling will be added later during the styling exercise.

Requirements:
1. Create a profiling the first computer or gaming console you remember using
2. Use available web resources to find the content for the page
3. Cite each image and source that you use inline, in the footer, or the aside
4. Use page jumps to navigate to content areas within the page
5. Break up the page into a header, main content, aside, and footer
6. Add the files and folders to your environment and upload to student webspace
7. Test the it loads correctly from your project portal by session 2 of week 5

Points Breakdown:
2 points will be awarded for organizing the content for the page
2 points will be awarded for properly coding the markup in html5 format

Session 1: Now that your designs have been approved it is time to continue working on the template for the World Project. Today’s demonstrations will be based on getting the markup started and some of the rudimentary styles in place.

World Project Milestone #2
Due: Week 5, Session 2 (before class starts)
1. Be prepared to show your work-in-progress on the template
2. Your markup must include areas for a header, navigation, aside, content, and footer
3. Have some rudimentary styles in place to illustrate how your design is developing

Session 2: Today I will be looking at your Markup Exercises and Milestone #2. We will also discuss the requirements for Technical Exercise 3: Styles. In-class demos that apply to the World project are also scheduled for today.

Relevant Resources:
Fluid Width Equal Height Columns
Best Practices for Modern Web Navigation

Technical Exercise 3: Styles
Due: Session 2, Week 6 (4 points)

Description:
Style the markup on the single page that you created for the Markup Exercise. Use CSS to adjust the layout, float the aside, float content images, place and adjust background images, choose and format type, build a navigation system, specify hover behaviors, and create a color scheme.

Requirements:
1. Use CSS to style your markup exercise
2. Float the aside and content areas to the left or right of each other
3. Design a navigation system with hover behaviors
4. Choose a distinct typeface and use the typesetting properties
5. Create an attractive color scheme
6. Add the files and folders to your environment and upload to your student webspace
7. Test that your exercise loads from your portal before class on session 2, week 6

Points Breakdown:
2 points will be awarded for designing an effective navigation system
1 point will be awarded for producing an inviting layout and color scheme
1 point will be awarded for capably handling the type setting

Session 1: Today we will continue demonstrating the techniques required to produce the World Project. I will also assign the requirements for World Project Milestone #3.

World Project Milestone #3
Due: Week 6, Session 2 (before class starts)
1. Be prepared to show your template for final feedback
2. Illustrate working navigation to multiple pages or content areas
3. Demonstrate how your markup and stylesheet differ from the in-class demos

Session 2: Please be prepared to show your World project for group critiques and feedback today as described in World Project Milestone #3. Afterward we will discuss the requirements for the Typesetting for the Web exercise. This exercise is intended to illustrate the alternatives to web-safe type as well as alternatives to rendering type as images. Placing type as images in web documents used to be the only way that non-web safe fonts could be included in navigation and content headers. Although many web designers still use this technique it is well known that it limits accessibility and does not contribute to SEO enhancements.

Technical Exercise 4: Typesetting for the Web
Due: Session 1, Week 7 (4 points)

Description:
Use the CSS3 @font-face rule to apply several open typefaces to a single web document. Create three headings and three paragraphs of place-holder text on the page. Use a minimum three open typefaces or fonts that you have a license to use for the headings and paragraphs. Experiment with the CSS properties line-height, and letter-spacing.

Requirements:
1. Use the CSS3 @font-face rule typeset three headlines and paragraphs
2. Download fonts from an open web resource or fonts that you are licensed to use
3. Use three or more typefaces for the headlines and paragraphs in the exercise
4. Apply several examples of the CSS properties line-height, and letter-spacing
5. Add the files and folders to your environment and upload to your student webspace
6. Test loading the exercise from your portal before class on session 1, week 7

Points Breakdown:
3 points will be awarded for applying each typeface
1 point will be awarded for using line-height effectively
1 point will be awarded for using letter-spacing effectively

Relevant Resources:
CSS Text Layout Properties
Open Font Library
Font Squirrel

Session 1: Today will be spent primarily of wrapping up the World Project before in class presentations on session 2 of week 7. Secondly, we will discuss the components required for the Final Web Application project. These include:

1. A project proposal (title, summary, and feature list)
2. Three design mockups of a single page
3. The complete and fully-functional web application

Session 2: Please be prepared to present your World project in class. If time permits we will also discuss the requirements for the Final Web Application component of the final project as shown below.

Assignment 5: Final Web Application (Component 3 – Webapp)
Due: Session 1, Week 15 (35 points)

Description:
Using the HTML5 web standards we have learned so far and other techniques that will be demonstrated throughout the semester, design and build an interactive web application with a minimum of five pages in primary navigation and four pages in secondary navigation. The content for the project may be of three possible categories:

1. Build the project for a real organization that is need of a webapp or webapp redesign.
2. Build the project for a real business that is need of a webapp or webapp redesign.
3. Create an informational webapp on a topic of your choice that you are passionate about.

Important: If your project is a business or organization ensure that it is one with which you are closely associated. Consult with me about your concept no later session 1 of week 9 so that I can approve your ideas. All content must be either generated by you, the organization/business, or cited to credit the original source.

Requirements:
1. Create a minimum of nine content areas for the webapp.
2. Primary and secondary navigation will allow visitors to get to all content areas.
3. Include a minimum of four of the following types of media: graphics, photos, video, sound, motion.
4. Images and text content must be your original artwork, unless cited correctly and the licenses allow for use.
5. The webapp must be fully interactive – navigate to any page from any page
6. Upload your environment to the student webspace before class on session 1 of week 15

Points Breakdown:
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct primary/secondary navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for the use of media (graphics, photos, video, sound, motion)
5 points will be awarded for developing meaningful and accessible content for the user experience
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation

Session 1: Today we will discuss the requirements for the Project Proposal component of the Final Web Application. The remaining time will be spent on individual consultations for finalizing your cycling project or Final Web Application concept approvals.

Assignment 5: Final Web Application (Component 1 – Project Proposal)
Due: Session 2, Week 8 (5% of final project grade)

Description:
Write a one page project proposal that includes a title, project summary, wireframe, and feature list. Use Google Docs, Word, or Illustrator to create the proposal. Export the proposal as a PDF file and submit before class starts on session 2 of week 8.

Requirements:
1. Start the proposal with a title page (include your name, project name, my name, class title, etc.)
2. Secondly write a project summary that describes the scope of the project in two to five paragraphs
3. Thirdly insert a list of project features and a brief description of each feature
4. Include at least one wireframe to illustrate the layout of your project
5. Copy the PDF of the to your folder on the Dropoff Drive before class on session 2 of week 8

Points Breakdown:
The proposal constitutes 5% of the grade for the Final Web Application

Session 2: Project Proposals are due today. We will also discuss the requirements for the Design Mockups component of the Final Web Application project. During the in-class demonstration we will look at adapting our template for the final project and creating some secondary navigation items under the primary navigation bar.

Relevant links:
Create a CSS3 Dropdown Menu
Another Simple CSS3 Dropdown Menu
CSS Menu Maker » Dropdown Menus

Assignment 5: Final Web Application (Component 2 – Design Mockups)
Due: Session 2, Week 9 (5% of final project grade)

Description:
Design three mockups of a single page for in-class critiques on session 2 of week 9. Mockups resemble the final web application’s interface and layout while wireframes are simplified boxes and text. Each mockup should include layout, color scheme, typesetting, graphics, and images. The mockups may differ from each other in the following ways: try different color schemes, select different typefaces and typesetting parameters, and experiment with the layout.

Requirements:
1. Design a minimum of three mockups for critique
2. Include distinct layout, color scheme, typesetting, graphics, and images for each mockup
3. Use Photoshop, Illustrator, or HTML/CSS to design the mockups
4. Render the mockups as either web graphics (PNG, PDF, GIF, JPEG) or HTML templates
6. Upload a the documents to the Dropoff Drive before class on session 2 of week 9

Points Breakdown:
The mockups constitute 5% of the grade for the Final Web Application

Session 1: Today’s inclass demonstrations will involve typical uses for CSS3 transitions and animations. CSS3 transitions and animations are an easy and generally accessible way to integrate motion into your designs. Most transitions are initiated via the hover pseudo class. Animations begin when the page loads. Uses include: navigation, thumbnail fades, image captions, sliders, etc.

Relevant links:
CSS3 Transitions of W3Schools
CSS3 Transition Tutorial
Lea Verou’s Prefix Free Widget
Trigger CSS3 Transitions on Click

Session 2: Today we will be critiquing your design mockups. Please be prepared to show your mockups to your assigned group members. I will visit each group and provide additional feedback.

Final Web Application Milestone #1
Due: Week 10, Session 1 (before class starts)
1. Be prepared to show your template work-in-progress
2. Demonstrate navigation with both primary and secondary items
3. Illustrate your ability with fluid layout, floats, asides, and typesetting

Session 1: This week we will look at several examples of Javascript image galleries. These galleries may take the form of a simple “lightbox,” or they may be implemented as responsive image sliders with slideshow, animation, and many other adjustable options. Also, please look a the following requirements for the next milestone.

Relevant Resources:
LightBox
Fancybox
Flexslider
An article with many jQuery Gallery Plugins

Final Web Application Milestone #2
Due: Week 10, Session 2 (before class starts)
1. Be prepared to show your template work-in-progress
2. Illustrate the use of a jQuery image gallery on a single page
3. Demonstrate your working navigation system linking to three or more pages

Session 2: Let’s continue demonstrations of Javascript image galleries. I will also be polling the class to find out if there are any other techniques that you would like to see demonstrated that have not yet been covered. Otherwise, please be prepared to show your final project work-in-progress for feedback.

Session 1: Final Project presentation and evaluations. Additional studio time will be available for students not presenting today.

Session 2: Final Project presentation and evaluations.