1. Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 7A

2. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Reading Assignment  HTML, XHTML, and CSS Resources and Tutorials on w3schools.com. READ EVERYTHING!!!  HTML:  http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp  XHTML:  http://www.w3schools.com/xhtml/default.asp http://www.w3schools.com/xhtml/default.asp  CSS:  http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp  Difference between XHTML and HTML  http://www.w3schools.com/xhtml/xhtml_html.asp http://www.w3schools.com/xhtml/xhtml_html.asp  XHTML syntax:  http://www.w3schools.com/xhtml/xhtml_syntax.asp http://www.w3schools.com/xhtml/xhtml_syntax.asp due by next class!!

3. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Examples  CSS Mania  http://cssmania.com/ http://cssmania.com/  Vloerwerken FD Comm.V  http://vloerwerken-fd.be/ http://vloerwerken-fd.be/  Unstructure  http://www.unstructure.com/ http://www.unstructure.com/

4. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Calendar Week 5 Week 6 Week 7 Week 8 9.189.209.259.2710.210.410.910.11 HW - 3 home pg. comps - round 1 - due. HW - 3 home pg. comps - round 2 - due. Client “Comp web site” due. MID-TERM - 2 final comps due - both home and all sub pages due for each theme. CRITIQUEWORK DAY INFORMAL CRITIQUEWORK DAY CRITIQUE

5. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Today’s Agenda  Quick look/reminder of how to create a comp mini site  Lesson on setting up your html, div tags, and css --------break--------  Work on your designs in class  1-1 Meetings

6. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Lesson  Brief review of what we did last week  Set up all your of your most commonly used elements (h1, h2, h3, p, a, a:hover, font, font size, body background, etc.)  Two approaches to setting up an html page: 1.Add content as you code/setup the layout  Work from the top down, outside in  Start with your background  Then your container  Then your header  Then your nav  etc. 2.Add all content in the beginning, then set up the layout  Start off with an “all text” complete web site.  Use comments ( ) to hide content while setting up the layout.

7. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Lesson  How to begin setting up the structure of your page  Working from the top down, outside in  Body background  background image? color? gradient?  Container(s)  page width? orientation? drop shadow?  Header  logo should link back to home  Nav  unordered list!  Body  Content  Footer

8. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: Assignment due : 10.09.06  Final comps  purpose/objective:  To use templates in order to iterate out the designs for an entire site.  To design the most effective user interface for your targeted audience.  To defend the conceptual merits of your own designs.  To meet the needs and deadlines dictated by your client.  assignment: Based upon the feedback from your 2nd round of comps, make the necessary changes to transform your designs into their final form for viewing to the client. You need to produce at least two versions. All pages from your site map must be comped to completion (yes, all sub pages). Pay attention to the details (spelling, curve quality, pixel alignment). All comps should include the final images and copy (no lorem ipsums).  format: no less than two thematic designs in two different thematic directions. You may do a third if you would like to show a third design to the client. Use Photoshop to execute your designs digitally. Technical details:  Post a Client “Comp Site” that includes “x” number of JPEG images (the number x depends upon how many pages are in your site map) – in at least two different thematic directions (1000 x 800 pixels in dimension, 100% max quality compression).  Revised site map – along with your comps, please revise your site map, and save it out as an image to show the client during the critique.

9. Art 249 :: Interface Design 2 :: Week 7 :: A In-class Presentation :: A heads-up for next week  ALL COMPS WILL BE MARKED LATE IF NOT POSTED ONLINE BY 1:45PM ON MONDAY, 10/9/06.  I WILL BE GRADING CLASS PARTICIPATION.  IF YOU ARE LATE, THIS WILL COUNT AGAINST YOU.  IF YOU ARE ABSENT WITHOUT AN EXCUSE, THIS WILL COUNT AGAINST YOU.