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.

"A device is easy to use when there is visibility to the set of possible actions, where the controls and displays exploit natural mappings. The principles are simple but rarely incorporated into design. Good design takes care, planning, thought. It takes conscious attention to the needs of the user. And sometimes the designer gets it right."

Donald Norman, Professor at Northwestern University, cofounder of the Nielsen Norman Group, and former Vice President of Apple Computer.
From the book The Design of Everyday Things.

"[The] medium reinvents itself too quickly for false oppositions between creative types and programmers. They have become something else, some new fusion of artist and engineer -- interfacers, cyberpunks, Web masters -- charged with the epic task of representing our digital machines, making sense of information in its raw form."

- Steven Johnson, author and columnist
From the book Interface Culture : How New Technology Transforms the Way We Create and Communicate.

SYLLABUS & GRADESHEET:

MAJOR ASSIGNMENT LIST:

Assignment: Week: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Due:
1. Creative Brief(s) Week 2
2. Site Map + Wireframes Week 3
3. Visual Designs - Round 1 Week 5
4. Visual Designs - Round 2 Week 7
5. Visual Designs - Round 3 Week 9
6. Coded Web Site 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

Agenda:

  1. Introduction to the course
    • In this class we will go through the full design process of planning, designing, and building one working web site throughout the course of the semester.
  2. Introduction to the primary project: Designing & Building One HTML/CSS Web Site
    • You can choose any site that you want to work on (yes, you can choose a real-world client).
    • Your site must be relatively small (approx 4-5 pages in depth, no less)
    • You must go through the full design process, including doing all research
    • You must gather all content
  3. We will take a look at student sites from past years.

Presentation:

Class Overview - Going Through The Full Design Process for Interface Design:

Class examples + related links:

Assignment: Due: Week2

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

Agenda:

  1. Project Ideas/Decisions & Creative Briefs
    • We will meet as a group to discuss each persons's project decision and help those who have yet to choose their client.
  2. Lesson:
    • Site maps & Wireframes
    • How to begin designing

Presentation:

Class examples + related links:

Assignment #1: Site Map + WireframesDue: Week3

  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: Week5

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

Agenda:

  1. In-class review of site maps and wireframes
  2. Work in class: begin designing

Presentation:

Class examples + related links:

Assignment: 1st Round of DesignsDue: Week5

  1. Design, Design, Design.
  2. Work in 3 different thematic design directions.
Week 4: Design

Agenda:

  1. Lesson: mood boards & stock photography
  2. Work in class: continue designing

Class examples + related links:

Assignment: 1st Round of DesignsDue: Week5

  1. Design, Design, Design.
  2. Consider creating mood boards to explore different thematic styles.
  3. Work in three different thematic design directions.
Week 5: Design - 1st Round

Agenda:

  1. In-class critique: Round 1 Designs
  2. Work in class: continue designing

Assignment: 2nd Round of DesignsDue: Week7

  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". See this example of a student comp site from last year (click on round 2 designs) or see John Doe's "Comp Site from Class" for a working example.
Week 6: Design - 2nd Round

Agenda:

  1. Lessons:
    • The Elements of Design
      • point, space, shape, tone, form, mass, line, texture, pattern, movement, time, light, and color
    • The Principles of Design
      • scale, proportion, balance (symmetry), rhythm (pattern) (movement), emphasis (focal point), variety, contrast and unity
    • Gestalt Theory
      • continuity, proximity, common fate, similarity, and closure.
  2. Work in class: continue designing

Class examples + related links:

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

  1. Continue to work on your designs in three different thematic design directions.
  2. Continue designing your sub pages.
  3. Post your work as an interactive client "comp site".
Week 7: Design

Agenda:

  1. In-class critique: Round 2 Designs
  2. Work in class: continue designing

Class examples + related links:

Reading Assignment: HTML, XHTML, and CSSDue: Week8

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

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

  1. Continue to work on your designs in at least 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 working example.
  4. Post your revised site map.
Week 8: Design

Agenda:

  1. Lesson: continuation of comp site coding from last week
  2. Lesson: html+css overview/review
  3. Work in class: continue designing

Class examples + related links:

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

  1. Continue to work on your designs in at least 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 9: Design - 3rd Round [MIDTERM]

Agenda:

  1. ROUND 3 - MIDTERM CRITIQUE: Post your final (midterm) designs to your www2 site for an in-class critique.

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

  1. Based upon the feedback from the critique, this is your last opportunity to make any significant changes to the design prior to coding.
  2. Begin coding your web site this week. Start with the home page.
  3. There are multiple ways to code any given page, therefore be prepared to code your page multiple times from scratch, in pursuit of figuring out the best, most robust version.
  4. Things to think about: is the site flexible? Can content stretch? Do all graphics blend into the background gracefully?
  5. Be sure to test your site on both platforms (Mac and PC) and all browsers during this early phase of coding.
  6. Coded home page v1 is due in next week (week 10).
Week 10: Coding

Agenda:

  1. Coded home page reviews on the big screen.
  2. In-class work time to continue coding. One-on-one support during class.

Class examples + related links:

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

  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 home page v2 is due in next week (week 11). If your home page is already coded, tested, flexible, and validating with no errors, then you can move onto coding your sub pages.
Week 11: Coding

Agenda:

  1. Optional code reviews on the big screen (for those who needed to redo their home pages from last week, and for those would like another, more detailed review).
  2. In-class work time to continue coding. One-on-one support during class.

Class examples + related links:

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

  1. Continue coding your site. Once your home page and sub page template are complete, tested, valid, 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 13).
Week 12: Coding

Agenda:

  1. Code reviews on the big screen.
  2. In-class work time to continue coding. One-on-one support during class.

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

  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 13).
Week 13: Quality Assurance Testing

Agenda:

  1. In-class QA testing session.
  2. In-class work time to continue coding. One-on-one support during class.

Class examples + related links:

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

  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

Presentation:

Class examples + related links:

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

  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: Quality Assurance Testing

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

  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

Presentation:

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

  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
Kopiko 202
T,TH :: 8:00 am - 10:30 am
Instructor: Chris Gargiulo
Office: Olapa 130

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.

Course info + templates:

Below are links to documentation that I sometimes give to clients.

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.