Week Five: July 23-27

Tuesday   Thursday   TO DO

 

WEEK'S OBJECTIVE

Discuss website design sitemap, comps, website workflow, website layouts/styles, time management, and finding website content. Continue basic and Head Section CS coding. Book: Introduction, Chapters 1-3, 5.

 

DUE Thursday, July 26: Assignment 5

 

Tuesday

 

GAMEPLAN

  • About sitemaps - Chapter 5
  • Comps - Chapter 5
  • Getting Content - images and text
  • Powerpoint Tutorial
  • Templating Assignment 4 for Assignments 5 and 6

 

DISCUSSION

 

Usability

  • Information flow
  • Ease of reading
  • Visitor-centered
  • Client Centered
  • Designer-centered

 

Website required components

  • Identification
  • Navigation
  • Content

 

Determining needed pages - Basic

  • Home page
  • Disclaimer page
  • Contact information

 

Determining needed pages - Specific

  • About
  • Products
  • Services
  • Testimonials
  • Instructions/How to do
  • Purchasing
  • Networking info
  • Gallery
  • Privacy Policy
  • News and Updates
  • FAQs
  • Info Sitemap

 

Navigation order

  • Main - sections of web site, like products
  • Sub - sections of sections, like product categories
  • Footer - web site support links, like disclaimer, email, form, etc.

 

About layout comps

 

Your Final Project Website

  • Layout comps for pre-coding approval
  • DO NOT code before doing layout comps, or try to replace comps stage with code.
  • Translating wireframes to comps if you do wireframes.
  • Using Photoshop/Pixlr or other image editing program for images/resizing.

 

Getting information

  • Use your AIA table to solidify your aim
  • Use your sitemap to determine the number of pages
  • Use your wireframes layout without distracting colors/styles
  • Create a basic 2-page comp to illustrate before you start coding

 

Your Final Project Website

  • Layout comps for pre-coding approval
  • DO NOT code before doing layout comps, or try to replace comps stage with code.
  • Translating wireframes to comps if you do wireframes.
  • Using Photoshop/Pixlr or other image editing program for images/resizing.

 

Determining needs versus capabilities

  • Match client's core needs with your abilities
  • Don't stress beyond what this class teaches.
  • Use occasional free snippets online if super-easy to use

 

Getting website content

  • Get text and graphics from client
  • Use lorem ipsum if needed
  • Get graphics from free sources - take pics, public domain, Google Images
  • If 'borrowing', use content comment on all client pages

 

Images and Content

  • Image and Content Rights
  • Image sources
  • Do not use faces without a signed contract or provided from the client's stock art.
  • Do not use any children's faces, particularly if they can be traced through the web site.
  • When taking pictures of your own, note the date and time of what
  • Do not use any children's faces, particularly if they can be traced through the web site.

 

DEMO - Using Powerpoint - 20 minutes

  • Basic open/clean-up
  • SmartArt- Insert/SmartArt
  • Hierarchy sitemap chart shapes
  • Page levels
  • Save as jpg or gif
  • Use what you know about images to place in your assignment 5.

 

DEMO - Templating - 20 minutes

  • Use Assignment 4 page
  • Save a copy in a5 as index.html
  • Personlize head section
  • Personalize body section: banner/id, updated navigation links
  • Remove Nested AIA Table module
  • Create new comment code and inserted image module
  • Validate to verify that you have "earned" the W3C Validator link icon code
  • When you have time, repeat the process to prepare a waiting page for your Assignment 6.

 

TASKS

  • Reading: Chapters 4-5, 16

 

BACK TO TOP

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

Thursday

 

GAMEPLAN

  • Time management
  • Brainstorming/Resources
  • Page Comps
  • Deciding on extras
  • Quick and Dirty Comping

 

DISCUSSION

Planning your time management

  • Gather information and resources
  • Plan general layout
  • Determine your capabilities, time and resources first

 

Layout types

  • Standard left nav
  • Right nav
  • Top nav
  • Image maps

 

Your Client Website

  • Sketch ideas by hand
  • Choosing colors - pay attention to contrast, complementry
  • Arranging content areas

 

Getting Ideas

 

Brainstorming

 

About layout comps - Chapter 5

 

Your Final Project Website

  • Layout comps for pre-coding approval
  • DO NOT code before doing layout comps, or try to replace comps stage with code.
  • Translating wireframes to comps if you do wireframes.
  • Using Photoshop/Pixlr or other image editing program for images/resizing.

 

Some fun extras to spice up a site

  • Media
  • Plug-ins
  • Maps for directions
  • RSS feeds
  • Much, much more. . .

 

DEMO - Quick and Dirty Comping

  • Using PowerPoint (you can apply this to any image-editing/layout design program)
  • Use basic slide-sized page.
  • Build the layout structure with Banner/ID, global navigation, footer, content area, sidebar(s)
  • Choose color palette, and write in the HEX colors for reference
  • Block in areas using bordered boxes, like wireframing
  • Block in heading and subheading text
  • Block in images
  • Add the comp images when you have them
  • Add REAL headings, sub headings and nav link wording, but use Lorem Ipsum for generic text.
  • Duplicate the page, and MODIFY for differences in content and layout (like removing sidebar(s), using larger images, etc.

 

 

BACK TO TOP

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

TO DO

 

  • Reading: Chapters 1-3, 5

 

ASSIGNMENTS

  • Assignment 5 - Sitemap, due THIS Thursday, July 26.
  • Assignment 6 - Comps, due NEXT Thursday, August 2 - be working NOW!

 

 
BACK TO TOP