Interface%20Design%202

1

• Interface Design 2
• Week 10

2
Calendar
3
This Week's Agenda

• HTML CSS Basics
• Lesson how to design and build flexible
  containers
• We will continue the full coding process from
  Photoshop to HTML
• Establishing good semantic markup (html)
• lttitlegt
• lth1gt, lth2gt, lth3gt, etc...
• ltpgt for paragraphs
• Unordered lists for navigation
• ltulgt
• ltligtlta hrefgtlinklt/agtlt/ligt
• lt/ulgt
• Image replacement

4
Lesson

• How to create a flexible height container that
  has a custom graphical treatment, such as rounded
  corners or a drop shadow.
• The key is to use Normal flow to your advantage
  and figure out where your design can repeat.
  Sometimes you need to fade out a background image
  to a solid color in order to have a repeatable
  graphic.
• Common solution
• Container has the repeatable bg image
• Header has the top background
• Footer has the bottom background

5
This Week's Assignment

• Continue coding your site.
• 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?
  (BAD!)
• 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.
• Coded sub page is due next week.

6
Final Assignment
Due Week16A

• Coded HTML/CSS Web Site
• Based upon the feedback from your final (midterm)
  round of comps, transform your visual designs
  into their final format a coded web site.
• Your site must must
• Use an XHTML doctype.
• Use web-standard-compliant, well-formed, valid,
  accessible, and semantic markup (HTML) to best
  structure the content of your site.
• Use external cascading style sheets (CSS) to
  position your layout.
• Work bug-free on all browsers on both platforms
  (PC Firefox, IE6, IE7, Opera, Netscape, Safari
  MAC Safari, Firefox, Opera, Netscape).
• Validate for CSS, XHTML, and Section 508.
• Your site must not
• Use tables for layout

7
Final Assignment
Due Week16A

• Coded HTML/CSS Web Site
• Key dates
• Week 10A Coded home page is due
• Week 11A Coded sub page template is due
• Week 13A QA Test Day (1st draft of the fully
  coded site is due)?
• Week 16A Final coded site is due

8
Final Assignment
Due Week16A

• Coded HTML/CSS Web Site
• Purpose/Objectives
• To use current web programming technologies (HTML
  CSS) to build a fully interactive,
  web-standard-compliant web site
• To create 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.

9
Final Assignment
Due Week16A

• Coded HTML/CSS Web Site
• Format
• HTML web site.
• Post a link to your coded site on your class web
  page. I suggest that you post your site in a
  folder called midterm under your art249
  directory. In this case, your url will be
  http//www2.hawaii.edu/yourname/art249/midterm/
  
• Portfolio entry.
• Create a portfolio entry designed for print
  showcasing your site and the design process.
  Choose which assets/productions documents
  (sketches, site maps, page maps, comps, etc.)
  that you created in this class and prepare them
  to become a part of your personal portfolio.
  Design the layout of your portfolio entry in such
  a way that demonstrates the full design process
  from concept to final product.
• format 8.5 x 11 .pdf file of your portfolio
  entry. Post your .pdf file on your class web page
  and bring in a printed version to class.

10
(No Transcript)