Interface Design 2

Interface Design 2 builds upon interface design skills learned in Interface Design 1. Students plan, design and build web sites and audience specific interfaces for the internet on a more comprehensive level. Technical emphasis will be placed on learning web standard compliant web design using HTML and CSS.

SYLLABUS:

MAJOR ASSIGNMENT LIST:

# Assignment: Due:
1 Creative Brief Week 2A
2 Site Map Week 2B
3 Wireframes Week 2B
4 Three Mock-ups/Designs - Round 1 Week 5
5 Three Mock-ups/Designs - Round 2 Week 6
6 Three Mock-ups/Designs - Round 3 - [MIDTERM} Week 8
7 Coded Web Site - [FINAL] Week 16

CALENDAR:

WEEKLY SCHEDULE + DIGITAL ASSETS:

Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.

Week 1: Intro to the Course + Begin Research

Lesson:

Class examples + related links:

Assignment: Due: Week1B

  1. Set up your class web page.
  2. Choose a company/organization for the web site that you will design throughout this course. Begin by conducting background research. Post your final choice, or a list of options, on your class web page this week.
  3. Once you have selected your site, create a creative brief document and post it on your your class web page for next week.
Week 2: Research - Site Map + Page Maps

Lesson:

Class examples + related links:

Assignment #1: Site Map + WireframesDue: Week2B

  1. Create a site map for your client web site. Pay attention to the naming of your navigation.
  2. Create wireframes (page maps) for each page of your site. You can use templates to demonstrate pages that will look similar.

Assignment #2: 1st Round of DesignsDue: Week5A

  1. Start designing. NOTE: Work in Photoshop.
Week 3: Design

Lesson:

Class examples + related links:

Assignment: 1st Round of DesignsDue: Week5A

  1. Design, Design, Design.
  2. Work in 3 different thematic design directions.
Week 4: Design
Week 5: Design - 1st Round

Lesson:

Assignment: 2nd Round of DesignsDue: Week6A

  1. Revise and enhance your designs.
  2. Continue to work in three different thematic design directions.
  3. Begin designing your sub pages.
  4. Post your work as an interactive client "comp site".
Week 6: Design - 2nd Round

Lesson:

Class examples + related links:

Mid-term Assignment: Final Designs [MIDTERM]Due: Week8A

  1. Continue to work on your designs in two different thematic design directions.
  2. Design all of your sub pages.
  3. Post your work as an interactive client "comp site".
  4. Post your revised site map.
Week 7: Design

Lesson:

Class examples + related links:

Reading Assignment: HTML, XHTML, and CSSDue: Week7B

  1. Read the following links right away (this week).

Mid-term Assignment: Final Designs [MIDTERM]Due: Week8A

  1. Continue to work on your designs in two different thematic design directions.
  2. Design all of your sub pages.
  3. Post your work as an interactive client "comp site". See John Doe's "Comp Site from Class" for a good working example.
  4. Post your revised site map.
Week 8: Design - 3rd Round [MIDTERM]

Lesson:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Begin coding your web site. Start with the home page.
  2. Coded home page is due in two weeks (week 10A).
Week 9: Coding

Lesson:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Begin coding your web site. Start with the home page.
  2. Coded home page is due in next week (week 10A).
Week 10: Coding

Lesson:

Class examples + related links:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Take a close look at the structure of your markup (html) for your home page. Is it semantically correct? Are you using your title, h1, h2, and p tags appropriately? Are you using too much absolute positioning? Is your layout flexible to accompany any amount of text (or do you have a fixed height on your container)? Now is your chance to go back and recode your home page so that it is set up in the best possible way. You should do this before you begin coding your sub pages.
  2. Coded sub page is due in next week (week 11A).
Week 11: Coding

Lesson:

Class examples + related links:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Continue coding your site. Once your home page and sub page template are complete, tested, and working properly, then you can begin to iterate out the other pages of your site.
  2. Be sure to test your site! Test on both platforms (Mac & PC). Test in all browsers (IE, Firefox, Safari, Netscape, Opera, etc.). Validate your html, css, Section 508.
  3. Fully coded site is due in two weeks (week 13A).
Week 12: Coding

Lesson:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Continue coding your site. At this point you should be iterating out all pages of your site and populating those pages with content.
  2. Be sure to test your site! Test on both platforms (Mac & PC). Test in all browsers (IE, Firefox, Safari, Netscape, Opera, etc.). Validate your html, css, Section 508.
  3. Fully coded site is due next week (week 13A).
Week 13: Quality Assurance Testing

Lesson:

Class examples + related links:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Using the list of bugs noted during the QA test session in class, update the list with your own list of tasks and known bugs. Then, prioritize your bugs starting with the critical bugs as the most important to be placed on the top of your task list.
  2. Fix ALL of your bugs and continue testing your site.
  3. Be sure to validate your site!
  4. If you are close to finished with your site, ask yourself, "what can I do to make it better?"
Week 14: Quality Assurance Testing

Lesson:

Class examples + related links:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Complete your site by adding all final content.
  2. Fix ALL of your bugs. Continue to test it on both platforms and all browsers.
  3. Make sure that your site validates!
  4. If you are finished with your site, ask yourself, "what can I do to make it better?"
  5. Don't forget about the portfolio entry!
  6. If you have any questions for me over the next two weeks, post them in the discussion board area at Laulima - the online course management site. Be sure to go to the Art 249 discussion board.
Week 15: No Class (Work Week)
  • ----- [ we will not meet in-class during this work week; instead we will meet "online" via laulima ] -----

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. Finish your site and post a link to it on your class web page.
  2. Create your portfolio entry and post a link to the pdf on your class web page.
  3. If you have any questions for me this week, post them in the discussion board area at Laulima - the online course management site. Be sure to go to the Art 249 discussion board.
Week 16: Launch

Lesson:

Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16A

  1. This is the last week of class; all projects are due.
Search:

Find it fast.

Class info:

Interface Design 2
KCC | New Media Arts
Fall 2007
Kopiko 202
T,TH :: 1:45 pm - 4:15 pm
Instructor: Chris Gargiulo
Office: Koa 109

Laulima:

Laulima is the online course management web site for the University of Hawai‘i. Login to visit this course's online resources such as the discussion board, chat room, and drop box.

Student sites:

Below is a list of student web pages for each student enrolled in this course.

Client assets:

Below are links to all digital documentation provided by the clients. This section will be updated as the clients send me content.

Course info + templates:

Below are links to documentation that I gave to clients to explain the project.

Helpful Links:

Below is a list of online resources related to this course.

Past Final Projects:

Below is a list of completed web sites created in past classes in Interface Design 2.

CSS Gallery Sites:

Below is a list of sites that showcase sites built using CSS.