Web+Development+04+–+Site+Planning+and+Design

Web Development 04 – Site Planning and Design
Students will plan, design, add content, and maintain web pages.

Objectives:

 * 0401 Project requirements**
 * Identify the purpose, audience, and audience needs for a website.
 * Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments. Such as using alt tags, strong instead of bold, etc..
 * Identify and follow the steps in the website planning and development process.


 * 0402 Planning site design and page layout**
 * Demonstrate knowledge of best practices for designing a website; such as, maintaining consistency, separating content from design, using standard fonts and Web-safe colors.
 * Identify basic principles of website usability, readability, and accessibility.
 * Plan a website by using sketches, website hierarchy, or a site map.
 * Communicate with others (such as peers and clients) about design and content plans.
 * *Produce website designs that work equally well on various operating systems and browser versions/configurations.
 * *Plan, communicate, or present a client’s website before, during or after website development.


 * 0403 Create content for website**
 * Create and prepare 2D images.
 * Prepare rich media; such as, video, sound, or animation.
 * *Identify when to use various image and digital media file formats.
 * *Edit, and slice images for web content.
 * *Insert navigation bars, rollover images, or buttons created in graphics editor.


 * 0404 Uploading and maintaining a site**
 * Understand and be able to describe the capabilities of web servers.
 * Upload pages to a web server.
 * Conduct basic technical tests such as validating the website (wc3 compliant), accessibility, SEO, etc.
 * Present web pages to others for quality assurances (QA) such as team members and clients for feedback and evaluation on technical merits and usability.
 * *Identify methods for collecting site feedback, such as using counters, feedback forums, Google Analytics.
 * *Provide site maintenance using bug reports, backups, and promotion.
 * *Document all aspects of website maintenance.


 * 0405* Web server** (Optional Objective)
 * Install a web server on a computer or virtual machine such as wamp, iis, apache etc.
 * Identify the benefits and drawbacks of running your own web server versus using a service provider.


 * 0406 Terminology – Review and understand the pertinent terminology.** – Review and understand the pertinent terminology.

Lessons & Activities:
Opera WSC #6 -- [|Information Architecture—planning out a web site], by Jonathan Lane. Opera WSC #7 -- [|What does a good web page need?], by Mark Norman Francis. Opera WSC #8 -- [|Colour Theory], by Linda Goin. Opera WSC #9 -- [|Building up a site wireframe], by Linda Goin. Opera WSC #10 -- [|Colour schemes and design mockups], by Linda Goin. Opera WSC #11 -- [|Typography on the web], by Paul Haine. Opera WSC #25 -- [|Accessibility basics], by Tom Hughes-Croucher. Opera WSC #26 -- [|Accessibility testing], by Benjamin Hawkes-Lewis. Expressions Web Design #3 -- [|Introduction to Web Design Using Microsoft® Expression® (Beta), Module 3 Designing for Communication] Expressions Web Design #4 -- [|Introduction to Web Design Using Microsoft® Expression® (Beta), Module 3 Designing for Communication] Expressions Web Design #5 -- [|Introduction to Web Design Using Microsoft® Expression® (Beta), Module 5 Beyond the Basics with Expression Web] Expressions Web Design #6 -- [|Introduction to Web Design Using Microsoft® Expression® (Beta), Module 6 The Design Process] Expressions Web Design #7 -- [|Introduction to Web Design Using Microsoft® Expression® (Beta), Module 7 The Production Process] Expressions Web Design #8 -- [|Introduction to Web Design Using Microsoft® Expression® (Beta), Module 8 Web Publishing and Maintenance] Adobe Digital Design -- Unit 1: Graphic design with Adobe Fireworks CS4 -- [|Instructor materials], [|Presentations], [|Student materials] Adobe Digital Design -- Unit 3: Building a basic client website -- [|Instructor materials], [|Presentations], [|Student materials], [|Media assets] Adobe Digital Design -- Unit 4: Review workshop -- [|Instructor materials], [|Student materials] Adobe Digital Design -- Unit 6: Digital narratives using Adobe Flash CS4 -- [|Instructor materials], [|Student materials], [|Media assets]