interface design 2 week 7. interface design 2 :: week 7 :: calendar
TRANSCRIPT
Interface Design 2Week 7
Interface Design 2 :: Week 7
:: Calendar
Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8
8.21 8.23 8.28 8.30 9.4 9.6 9.11 9.13 9.18 9.20 9.25 9.27 10.2 10.4 10.9 10.11
INTRO DAY CRITIQUE CRITIQUE CRITIQUE WORK DAY WORK DAY WORK DAY WORK DAY CRITIQUE WORK DAY CRITIQUE WORK DAY WORK DAY WORK DAY CRITIQUE CRITIQUE
HW - options for your site are due. Lesson: Creative Brief
HW - 1 creative brief is due. Lesson: Site Map & wireframes
HW - site map and wireframes are due. Lesson: Designing on paper and in Photoshop.
Lesson: Design Tips
Lesson: Design Tips
Lesson: Design Tips
Lesson: Design Tips
HW - 3 home pg. comps - round 1 - due.
Lesson: Design Tips
HW - 3 home pg. comps - round 2 - due.
Lesson: Review of XHTML & CSS; setting up a site in DW, folder structure, new CSS file
Lesson: Basic CSS setup tricks, Basic HTML setup, container & bg
Lesson: Positioning, (static, relative, & absolute) * normal flow & floats
MID-TERM - all final comps due.
MID-TERM - all final comps due.
Interface Design 2 :: Week 7
:: Calendar
Week 9 Week 10 Week11 Week 12 Week 13 Week 14 Week 15 Week 16
10.16 10.18 10.23 10.25 10.30 11.1 11.6 11.8 11.13 11.15 11.20 11.22 11.27 11.29 12.4 12.6
QA Test CRITIQUE CRITIQUE
Lesson: From Photoshop to HTML – coding a home page
Lesson: Coding Tips
HW - coded home page is due.
Lesson: Coding Tips
HW - coded sub page template is due.
Lesson: Coding Tips
Lesson: Coding Tips
Lesson: Coding Tips
QA Test DAY
Lesson: Coding Tips
Lesson: Coding Tips
NO CLASS – THANKSGIVING
NO CLASS – WORK WEEK
NO CLASS – WORK WEEK
FINAL - w eb site
FINAL - w eb site
WORK DAY
WORK DAY
WORK DAY
WORK DAY
WORK DAY
WORK DAY
WORK DAY
WORK DAY
WORK DAY
WORK DAY
Interface Design 2 :: Week 7
:: Examples Vloerwerken FD Comm.V
http://vloerwerken-fd.be/
Unstructure http://www.unstructure.com/
Interface Design 2 :: Week 7
:: Examples
Vine Media http://www.vinemedia.net
Accentuate Clothing http://www.accentuateonline.com
Interface Design 2 :: Week 7
:: This Week's Agenda How to create a comp mini site Lesson on setting up your html, div tags, and css Lesson on HTML and CSS Positioning Work on your designs in class
Be sure to ask me for feedback 1-1 Meetings
Interface Design 2 :: Week 7
:: 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! Main Body
Content inside of main body Footer
Interface Design 2 :: Week 7
:: LessonHow to begin coding your HTML and CSS
Set up all your of your most commonly used elements 1st (h1, h2, h3, p, a, a:hover, font, font size, body background, etc.)
Two approaches to setting up an html page: 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.
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.
Interface Design 2 :: Week 7
:: LessonCSS Positioning
The box model margin, border, padding
Normal flow Three positioning states:
static relative absolute
Floats
Online learning guides: BarelyFitz Design’s Learn CSS
Positioning in Ten Steps http://www.barelyfitz.com/
screencast/html-training/css/positioning/
BrianJar’s CSS Positioning http://www.brainjar.com/css/
positioning/
W3Schools Positioning Model:
http://www.w3.org/TR/REC-CSS2/visuren.html
Box Model: http://www.w3.org/TR/REC-CSS2/box.html
Interface Design 2 :: Week 7
:: Lesson Box Model
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
Interface Design 2 :: Week 7
:: LessonPosition Schemes
In CSS2, a box may be laid out according to three positioning schemes: Normal flow (default)
In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes.
Floats In the float model, a box is first laid out according to the normal flow, then
taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
Absolute positioning In the absolute positioning model, a box is removed from the normal flow
entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
Interface Design 2 :: Week 7
:: Lesson Normal Flow
The default positioning scheme for all elements on a given page.
Block-level elements stack on top of each other by default.
Inline-level elements remain on the same line and follow one another.
Interface Design 2 :: Week 7
:: Lesson Block-level vs. Inline-level Elements
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs)
Examples: <div>, <p>
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.).
Examples: <a>, <i>
Interface Design 2 :: Week 7
:: Lesson Absolute Positioning
using top and left to control the location of an element in relation to it’s parent. This method breaks normal flow.
Relative Positioning using top and left to control the location of an element in
relation to itself. This still works with normal flow.
Floats using float:left and float:right to control how different
elements align themselves on a page and to each other. This still works with normal flow, especially if you use a clear:both.
Interface Design 2 :: Week 7
:: Reading Assignment HTML, XHTML, and CSS Resources and Tutorials on
w3schools.com. READ EVERYTHING!!! HTML:
http://www.w3schools.com/html/default.asp XHTML:
http://www.w3schools.com/xhtml/default.asp CSS:
http://www.w3schools.com/css/default.asp Difference between XHTML and HTML
http://www.w3schools.com/xhtml/xhtml_html.asp XHTML syntax:
http://www.w3schools.com/xhtml/xhtml_syntax.asp
due by next class!!
Interface Design 2 :: Week 7
Final Designs 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 thematic 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).
:: Mid-term Assignment Due : Week8A
Interface Design 2 :: Week 7
:: Mid-term Assignment Final Designs
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.
Due : Week8A
Interface Design 2 :: Week 7
Final Designs format:
no less than two 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 an interactive client “comp site” that includes “x” number of JPEG images (the number x depends upon how many home and sub pages you have in your site map; 1000 x 800 pixels in dimension or larger, 100% max quality compression). Label your designs with thematic titles. Use a clear and recognizable naming convention - these designs are meant to be given to the client to take home with them.
Post your 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.
:: Mid-term Assignment Due : Week8A