KCC New Media Arts - Chris Gargiulo's Faculty Web Site

Kapi‘olani Community College, University of Hawai‘i - NMA Interface Design

ART 249

Interface Design 2

The Full Web Design Process

Interface Design 2 covers the full creative design process for interaction design of researching, planning, designing, coding, and testing a custom web standard compliant HTML/CSS web site for a chosen client and target audience.

Interface Design 2

An Introduction and Course Overview

Quality web sites that meet both client and user needs can be successfully created when designers properly go through the full creative design process. Integral to this process are the deliverables and documentation used in the industry for client based projects that help to ensure that the final product meets all of the primary project goals and objectives.

In this class students plan, design, and code one HTML web site over the course of the semester. During the first few weeks of the semester students choose a client, research the industry, and define the information architecture of their chosen site by drafting the necessary conceptual planning documentation such as site maps and wireframes. During the middle of the semester, students go through multiple rounds of design revisions until a mockup is created that best suits the project demands. During the final weeks of the semester, students code and test the web site across platforms, devices, and browsers for quality assurance.

Major Assignments

Overview of the Major Projects for this Course.

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. Designs - Round 1 Week 5
4. Designs - Round 2 Week 7
5. Designs - Round 3 Week 9
6. Coded Web Site Week 16

Calendar

A monthly overview of the semester

Lessons

A Week-by-Week Breakdown

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. Please note that all students are required to have hosting space to post their designs, assignments, and ultimately their final web site. Students are required to purchase a hosting plan with a third party hosting provider. Past students have purchased hosting plans from Bluehost, iPage, Super Green Hosting, and GoDaddy (these are just a few of many hosting providers available). Plans should include ample disk space (ie. more than 2GB or unlimited), support for CGI, PHP, and MySQL, multiple domain hosting (to host more than one site), one-click install/support for Wordpress, Joomla, and Drupal (popular CMS options), and a low, competitive price (an example rate is around $3-$5/month – this is subject to change based upon current trends for hosting prices).
  2. Once your class web page is set up, email the url to the instructor.
  3. 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.
  4. 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: Week 5

  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:

Conceptual Interface Design Examples:

Mood Boards:

Stock Photography:

Assignment: 1st Round of DesignsDue: Week 5

  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 or see John Doe's "Comp Site from Class" for a working example.
Week 6: Design - 2nd Round

Agenda:

  1. Lessons:
    • More Conceptual Design Examples
    • Design Theory for Web Design
      • 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.
    • Browser Stats
      • IE6
      • CSS3 and Trident, Gecko, & Webkit
  2. Work in class: continue designing

Class examples + related links:

More Conceptual Interface Design Examples:

Design Theory Links:

Browser Statistics:

CSS3:

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". See this example of a student comp site or see John Doe's "Comp Site from Class" for a working example.
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 three thematic design directions: one for your original client, and two that will be rebranded.
  2. Design all of your sub pages (minmum of 3 sub pages).
  3. Post your revised site map.
  4. Post your work as an interactive client "comp site". See this example of a student comp site or see John Doe's "Comp Site from Class" for a working example.
Week 8: Design

Agenda:

  1. Lesson: html+css overview/review
  2. Work in class: continue designing

Class examples + related links:

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

  1. Continue to work on your three thematic design directions: one for your original client, and two that will be rebranded.
  2. Design all of your sub pages.
  3. Post your work as an interactive client "comp site". See this example of a student comp site or see John Doe's "Comp Site from Class" for a 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 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. Wordpress Lesson: Initial Install & Site Setup
  2. In-class work time to continue coding. One-on-one support during class.
  3. Coded home page reviews on the big screen.

Class examples + related links:

CMS & Wordpress Resources:

Other CMS tools for designers:

Layout Examples (from ART 128):

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? Do you absolutely need all of your divs? 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. Test, test, test!!! Now is the time to test on all browsers on all platfomrs! Test on PC IE6!!!
  3. 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, Chrome, Opera, etc.). Validate your html, css, Section 508!
  3. Fully coded site is due in two weeks (week 13).
Week 12: Coding

Agenda:

  1. Optional 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, Chrome, 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

Agenda:

  1. Lesson: Meta Tags
  2. Full work week. In-class work time to continue coding. One-on-one support during class.
  3. ----- [ no class on Thursday (Thanksgiving) ] -----

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?" Some ideas:
    • Javascript Featured Content Area (ie slider, slideshow)
    • Javascript Animated Rollovers
    • Oversized footer - consider adding a sitemap, logo, contact info, social media, etc. to your footer
    • Breadcrumb Navigation - if you already have one, consider stylizing it
    • Icons & Graphic Symbolism - consider adding to enhance usability
    • Wordpress - consider converting your site over to Wordpress as a CMS
    • Mobile version - consider adding a mobile version of your site via CSS
    • HTML5 - consider using HTML5 semantic markup, doctype, etc.
  5. Don't forget about the portfolio entry!
Week 15: Quality Assurance Testing

Agenda:

  1. Full work week. In-class work time to finish your final project due next week. One-on-one support during class.
  2. Lesson: Using Multiple CSS files
  3. Lesson: NMA Wordpress Framework v2.0

Presentation:

Class examples + related links:

WordPress frameworks:

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.
Week 16: Launch

Agenda:

  1. Final Critique
    • 10 minutes per person to present.
    • 5 minute transition period in between presenters for further discussion, if needed.
Student Time
---------- SETUP ---------- 8:00-8:15
#1: Kathryne Sakata 8:15-8:25
#2: Randall Shiroma 8:30-8:40
#3: Melissa Lum 8:45-5:55
#4: Davin Char 9:00-9:15
---------- 15 Min. BREAK ---------- 9:15-9:25
#5: Jason Mudrick 9:30-9:40
#6: Lena Lee 9:45-9:55
#7: Michael King 10:00-10:10
---------- 45 Min. BREAK ---------- 10:15-11:00
#8: Reynaldo Minn 11:00-11:10
#9: Jeremiah Skurtu 11:15-11:25
#10: Jennifer Lazariuk 11:30-11:40
#11: Helen Chang 11:45-11:55
---------- 15 Min. BREAK ---------- 12:00-12:15
#12: Krystal Van Putten 12:15-12:25
#13: Elly Chen 12:30-12:40
#14: Emma Denight 12:45-12:55
---------- CLOSING REMARKS ---------- 1:00-1:15

Assignment: RevisionsDue: Week 17

  1. For those hoping to make revisions to any assignments from this class, you have one week from the last day of class to submit changes/revisions. If you do this, be sure to post all revisions on your class web page and email me prior to 12noon on Tues. Dec. 14th so that I can go back and adjust your grade accordingly. If I do not receive an email from you indicating that you made updates, then your grade will be based upon what you handed in as of the last day of class.

Quotes

Random quotes that are relavent to this class

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

"Design trends do not exist to be followed. They exist to be broken, reshaped and abolished by the spirit of creativity rippling through the design community. By nature, trends are anything but good: they distract from the main purpose of communication design and disrupt the balance between aesthetics and function. Rather than follow trends, use the appropriate tools in the appropriate context for the right purpose. That's where the beauty of information design lies, and it makes the huge difference between a nice design and a nice and usable design."

- Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers. From his May 20th 2010 article entitled "Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation."

↑ back to the top ↑