Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs)

Title/ Length of Unit Resources: Standard/ Strand Essential Questions 1. recur throughout life 2. are key inquiries within discipline 3. help student make sense of core content Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs) Date(s) Introduced Key Vocabulary/ Concepts Evidence of Learning: Projects/Activities using Differentiated Instruction and/or Multiple Intelligences Common Formative Assessments Graphic Design.ISTE NETS: 1a,b,d 2a, b, 3a, b, c, 4a, b, c, d 5b 6a,b, c, d Principles of good design Individual and peer review process Optimization and graphic manipulation in digital photo program Four areas of focus In Project Management Students will Plan a scan Create a storyboard Follow standard copyright practices for text Review and redesign images In Design students will: Optimize JPEGs and GIFs Edit images Use composition, contrast, and balance Apply the rule of thirds Create emphasis Apply proximity and patterns Use line, shape, unity and color Use typography Design and create original page banner In Research and Communication students will: Understand graphics types Understand copyright issues Collect and analyze audience needs and purpose to inform design Communicate with peers to review and redesign images Present and communicate design principles to peers In Technical students will: Scan photographs, objects, and drawings Use a digital camera Understand panel elements and structure Create text Approx 15 days Aug. 24 Sep.17 GIF, JPEG, PNG, copyright, intellectual property, fair-use doctrine, derivative works, academic standards, bibliography, resolution, frame (framing), rule of thirds, palette, optimize, crop, image size, Tools panel, stroke, effect, object, emboss, bevel, drop shadow, panel, asymmetry (asymmetrical), axis of symmetry, balance, chroma, complementary color, composition, contrast, emphasis hue, radial symmetry, shade, storyboard, tint, tone, unity, white space Project based activity - create a logo Activities that support logo creation Principles and rules of copyright Principles of Graphic design Using I do, we do, you make - How to scan images without image-editing software Fireworks optimize panel How to optimize GIF images How to optimize JPEG images Fireworks tools Fireworks panels How to build a nameplate How to create effects How to create a page banner Page banner review and redesign Review and redesign presentation topics Douglas County School District Page 1 August 20, 2009 Unit test rubric

Title/ Length of Unit Resources: Standard/ Strand Essential Questions 1. recur throughout life 2. are key inquiries within discipline 3. help student make sense of core content Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs) Date(s) Introduced Key Vocabulary/ Concepts Evidence of Learning: Projects/Activities using Differentiated Instruction and/or Multiple Intelligences Common Formative Assessments electronic Portfolios ISTE NETS: 1a,c,d 2a, b, c, d 3a, b, c, d 4a, b, c, d 5a 6a,b, c, d Electronic portfolio design Website storyboards Quality assurance and redesign techniques Usability and accessibility Set export window options Create effects Use drawing tools Four areas of focus In Project Management Students will Manage files and using file-naming conventions Design for usability and accessibility Manage a quality assurance test Factor visitor response into redesign Synthesize content based on reflection In Design students will: Investigate and incorporate color and layout consistently Apply principles of user interface design Consider screen size Design consistent website pages Rebuild web pages based on visitor feedback In Research and Communication students will: Evaluate and analyze content validity Evaluate and analyze website navigation Design a quality assurance test Advocate and practice legal use of images In Technical students will: Use options on panels Create a root folder and site Create pages Use tables to layout content Use Design view Approx 20 days Sep 17 Oct. 22 root folder, cache, table, local site, flowchart, alternative text, currency, corroboration, source, bias, consistency, color scheme, home page, storyboard, navigation, layout hyperlink, link, absolute link, siteroot-relative link, document-relative link, link target, named anchor, pathname, multimedia, alternative text (Alt text), accessibility, usability, embedded link, navigation elements, readability, site structure, root folder, cache, FTP, local host, remote site, site map, get files, put files Project based activity - create a website Activities that support a website creation: Analyzing websites Digital Design file list How to plan a portfolio Usability Accessibility Using I do, we do, you make - How to set up a local root folder and site structure The Dreamweaver interface The Dreamweaver interface Working with text and images How to create a basic table Naming conventions File management folders Planning a home page How to lay out a web page with CSS Creating consistent content pages How to set document properties How to create lists How to add text from another document How to import spreadsheet tables How to create links How to create buttons and navigation bars How to check links How to publish web files Managing files and links by using the files panel HTML tags Unit test Project evaluation Douglas County School District Page 2 August 20, 2009

Title/ Length of Unit Resources: Standard/ Strand Essential Questions 1. recur throughout life 2. are key inquiries within discipline 3. help student make sense of core content Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs) Date(s) Introduced Key Vocabulary/ Concepts Evidence of Learning: Projects/Activities using Differentiated Instruction and/or Multiple Intelligences Common Formative Assessments Client Website ISTE NETS: 1a,b,c,d 2a,b,d 3a,b,c,d 4a,b,c,d, 5a,b, c, d 6a,b Effective team collaboration Designing for a client Professional web design process Insert images and text Use relative and absolute links Use alternative text (Alt text) Import interactive images from Fireworks Publish a websites Build buttons Export buttons as HTML Four areas of focus In Project Management Students will Design for a client Develop a project plan Analyze and evaluate to select best examples In Design students will: Create designs that meet client requirements Communicate ideas and information through simple screen views Provide multiple design ideas Design to others requirements Synthesize information from design review meetings Create design comps In Research and Communication students will: Listen and interpret information and feedback Finalize design with a client In Technical students will: Create Cascading Style Sheets (CSS) Create external style sheets Use templates and libraries Create forms Create a calendar Approx 19 days Oct. 26 - Dec 3 Audience, screen view. Flowchart, design comp, production storyboard, design review, launch plan, screen view, flowchart, information organization, Cascading Style Sheets (CSS), tag style, class style, selector style, linked style sheet, external style sheet, Dreamweaver template, Dreamweaver library, search engines, check in, check out, meta tags Project based activity - create a website Activities that support client website creation: Client interview Project plan How to promote a website Using I do, we do, you make - Professional web design and development process Sample screen views Production storyboard CSS styles panel How to create cascading style sheets How to use templates How to use libraries How to add Flash movies and Flash video to a website How to check files in and out How to create a calendar How to create forms How to create image maps How to create rollover images How to create pop-up menus How to prepare photographs Unit test Project evaluation Douglas County School District Page 3 August 20, 2009

Title/ Length of Unit Resources: Standard/ Strand Essential Questions 1. recur throughout life 2. are key inquiries within discipline 3. help student make sense of core content Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs) Date(s) Introduced Key Vocabulary/ Concepts Evidence of Learning: Projects/Activities using Differentiated Instruction and/or Multiple Intelligences Common Formative Assessments Create rollover images Create image maps Check files in and out Create pop-up menus Enhancing the experience with Flash ISTE NETS: 1d, 3c, 4b,c,d 5b,d 6a,b,c,d Animation and rich media for communication Building Flash skills Enhancing user experience Four areas of focus In Project Management Students will Evaluate user experience on the web for different techniques used in rich media In Design students will: In Research and Communication students will: Research audience and appropriate sites Use Flash effectively Connect goals with user interaction Research appropriate uses of multimedia Research and categorize uses of Flash In Technical students will: Identify parts of the user interface Use drawing tools Work with layers Organize layers and libraries Use animation methods Create interactive buttons Work with bitmaps Use basic ActionScript Import and compressing audio Optimize file size Produce video Publish Flash documents Approx 11 days Dec 7- Jan 7 Timeline, Stage, layer, Scene, frame, keyframe, library, symbol, instance, shape, motion tween, shape tween, action, ActionScript, button, button state, rich media, class, object, property, variable, method, function, event, Flash video, Script Assist Project based activity - create a flash video Activities that support flash video creation: The Flash workspace Analyzing Flash on the web Using I do, we do, you make - How to create an animated face Symbols, instances, and the library Frames and keyframes How to create motion and shape tweens How to get started with ActionScript How to create a button symbol Analyzing Flash on the web How to produce Flash video for use on the web How to import sound How to use guides and rulers How to create masks How to use a motion guide for animation How to create and edit symbols Unit test Project evaluation Douglas County School District Page 4 August 20, 2009

Title/ Length of Unit Resources: Standard/ Strand Essential Questions 1. recur throughout life 2. are key inquiries within discipline 3. help student make sense of core content Web Design Scope and Sequence Student Outcomes (Objectives Skills/Verbs) Date(s) Introduced Key Vocabulary/ Concepts Evidence of Learning: Projects/Activities using Differentiated Instruction and/or Multiple Intelligences Common Formative Assessments Portfolios ISTE NETS: 2a,b, 4a,b,c,d 5a,b,c Usable, effective websites Consistency in website design Peer critique and presentation Four areas of focus In Project Management Students will Conduct a review workshop Provide constructive criticism In Design students will: Design for usability Provide consistency and accessibility Provide universal navigation Adapt content for readability and emphasis In Research and Communication students will: Present a website to a group Provide meaningful but not overly critical feedback Take notes on critique Demonstrate the realization of redesign goals Approx 2 days Jan. 11-12 Project based activity - create a portfolio Activities that support portfolio creation: Using I do, we do, you make For background on writers workshops and their structure www.cs.wustl.edu/~schmidt/writersworksho p.html All Things Web: User test methodology www.pantos.org/atw/35317.html Final Test portfolio Douglas County School District Page 5 August 20, 2009

Tech Modules Web Page Design Students will learn HTML code and use Adobe Dreamweaver, Photoshop, and Flash software to create and maintain web pages. Project activities focus on developing effective communications that can be deployed on the web. Students develop a variety of graphical images, an electronic portfolio and a client website. Resources Adobe Photoshop, InDesign, Illustrator, Acrobat Student guides at Adobe.com Become certified in Adobe - http://www.adobe.com/support/certification/ace_certify.html Units of Study: Unit 1 Graphic Design Unit 2 Electronic Portfolios Unit 3 Client Website Unit 4 Enhancing the experience with Flash Unit 5 Portfolio Douglas County School District Page 6 August 20, 2009

Unit 1 Graphic Design 1. Introduce class goals and examples A good site for acquiring free image files in PNG format www.pngart.com/ Websites with more information on copyright: University of Hawaii http://kalama.doe.hawaii.edu/hern97/aes/resources/copyright-animal/index.html Stanford University http://fairuse.stanford.edu 2. Review graphics and copyright / copyleft 3. Scanning how to with practice Introduction to scanning presentation Scanning guide A comprehensive look at scanners and graphics: www.scantips.com A short article that highlights file formats, resolution, and resizing information http://sunsite.berkeley.edu/imaging/databases/scanning 4. Using a digital camera how to s basic principles taking photographs) http://malektips.com/digital_cameras_help_and_tips.html/ A site with links to tips for taking great pictures www.kodak.com/eknec/pagequerier.jhtml?pq-path=2/3/38&pq-locale=en_us 5. Optimize web graphics, review Resource for information on GIF versus JPEG image types and reduction. www.wpdfd.com/wpdgraph.htm Review the Fireworks Optimize panel guide. Review the How to optimize GIF images guide. Review the How to optimize JPEG images guide 6. Optimize web graphics look and do 7. Make a nameplate review fireworks interface 8. Design your logo A short introduction to graphic design theory, explaining the aspects of design to consider when composing a piece of fine art or producing a graphic layout www.usask.ca/education/coursework/skaalid/theory/cgdt/designtheory.htm A brief discussion of the main principles of design http://char.txa.cornell.edu/language/principl/principl.htm Logo design articles and tips www.allgraphicdesign.com/logo.html#tips Types of logos and their construction www.grantasticdesigns.com/logos1.html Definition of the storyboard concept, plus sample storyboards Douglas County School District Page 7 August 20, 2009

www.usabilitynet.org/tools/storyboarding.htm A theoretical approach to storyboards www.ibiblio.org/ism/articles/huffcorzine.html 9. Continue with logo design 10. Continue with logo design 11. Review logo design Dimitry s Design Lab has many design topics, including texture. www.webreference.com/dlab/ A short article on consistency in design http://ezinearticles.com/?consistency-builds-a-more-effective-interface-and-improves-web-site-user-experience&id=458630 Article about rule of thirds http://digital-photography-school.com/blog/rule-of-thirds/ An article that discusses proximity and alignment. Has some nice interactive examples that require the Adobe Shockwave plug-in to view. http://coe.sdsu.edu/eet/articles/designprin1/start.htm Although the focus of this article is about patterns in rugs, it has very useful general information applicable to graphic design. http://mathforum.org/geometry/rugs/symmetry/ An article about design principles, including repetition. www.thaimedia.com/html/training/design/06_graphics.html A general introduction to typography on the web. www.wpdfd.com/wpdtypo.htm A fairly comprehensive article on backgrounds and textures, with examples. www.ender-design.com/rg/backidx.html 12. Continue with banner design 13. Banner design 14. Review banner design 15. Unit test Douglas County School District Page 8 August 20, 2009

Unit 2 Electronic Portfolios 1. Introduction to Dreamweaver and web design software 2. More dreamweaver make a basic page 3. Analyze websites look over some for structure, bias etc Great Plains Alliance for Computers and Writing. Three papers on web validity http://web.stcloudstate.edu/jmkilborn//gpacw.html Apponequet Regional High School Library website on testing for validity http://jimgrasela.tripod.com/websitecritique 4. Create a portfolio Examples and instructions for visualizing information and using flowcharts www.jjg.net/ia/visvocab/ - page U.S. Department of Education, Office of Research and Improvement, Classroom Uses of Student Portfolios www.ed.gov/pubs/or/consumerguides/classuse.html Website Production Management Techniques (select Content and Site View from the Structure menu on the right side of the screen)www.adobe.com/resources/techniques/structure/ 5. File management review, look at others 6. Plan your home page Examples and instructions for visualizing information and using flowcharts www.jjg.net/ia/visvocab/ - page Review the Storyboards and Principles of graphic design presentations in Unit 1, Activity 1.6: Planning a logo. Resources about information architecture (click the topic Screen View for specific information about creating a storyboard or schematic and determining navigation) www.adobe.com/resources/techniques/structure/ 7. Create your home page 8. Create the content pages of site 9. More content pages 10. Link those pages 11. Usability vs accessibility For full details, check www.w3.org/wai/ or www.adobe.com/accessibility/ Images and animations: Use alternative text descriptions (Alt text) to describe the function of each visual element. Multimedia: Provide captioning and transcripts of audio and descriptions of video. Links: Use text that makes sense when read out of context. For example, avoid click here. Page organization: Use headings, lists, and consistent structure. Graphs and charts: Summarize or use the long description attribute. Tables: Make line-by-line reading sensible. Summarize. W3C Priority 1 Checkpoints www.w3.org/tr/wcag/checkpoint-list.html Dreamweaver has a built-in check for accessibility: Select File > Check Page > Accessibility A list of accessibility resources:www.crittur.com/access An excellent site that contains various usability topics:http://usability.gov/guidelines Douglas County School District Page 9 August 20, 2009

A site that has lists of sites about usability:www.usableweb.com/ 12. Create a navigation bar 13. Navigation bar 14. Review and test site 15. Redesign if necessary 16. Publish the site 17. HTML review 18. HTML review the future XML and CSS 19. Unit review 20. Unit test Douglas County School District Page 10 August 20, 2009

Unit 3 Client Website 1. Introduce project review possible clients right side of the page for information on defining goals and objectives, creating a project plan, and establishing requirements) www.adobe.com/resources/techniques/ A client survey you can download and use www.adobe.com/resources/techniques/resources/define/client_survey.rtf 2. Interview client and needs / purpose of site 3. Organize for client create flowchart 4. Organize flowchart 5. Design client comps 6. Design client comps 7. Review with client 8. Review and redesign 9. Implement a new design- css 10. Implement design 11. Build website Adobe s Website Production Management Techniques (read the information under Build and Test on the right side of the page) www.adobe.com/resources/techniques/ Description of meta tags and how to build them when building your pages http://searchenginewatch.com/webmasters/article.php/2167931 12. Build website 13. Build site 14. Build site 15. Build site 16. Test site 17. Test site 18. Publish site 19. Review and final test Douglas County School District Page 11 August 20, 2009

Unit 4 Enhancing the Experience with Flash 11 days 1. Introduce flash examples, websites, simple movie 2. Flash shapes, layers and images 3. Flash animation and movie 4. Flash buttons / action script 5. Flash morphing and more Flash Showcase www.adobe.com/showcase/ Links to free downloadable music loops and sound effect clips www.flashkit.com Access tutorials, articles, and other resources in the Flash developer center www.adobe.com/devnet/flash/ Access video tutorials on Flash www.adobe.com/designcenter/video_workshop/about.html Resources and technical material available for Flash www.adobe.com/support/flash/ 6. Incorporating flash video uses and examples Video trailers of upcoming movies (QuickTime) www.apple.com/trailers/ Television show previews (RealPlayer) www.pbs.org/wnet/nature/preview.html News videos (Windows Media Player) http://video.msn.com/video/p.htm?rf=http://www.msn.com/ Case studies (Flash video in Flash Player) www.adobe.com/education/products/creativesuite/customers/hed/index.html 7. Video conversion into web ready use 8. Embedding video CNN uses Flash video to provide recent news and events. www.cnn.com/video/ ImaginAsian TV (IATV) uses Flash video to show the latest Asian music videos. www.iatv.tv/music/ Online polls using video interactivity as part of the poll (click Take a Sample Poll) http://hertzresearch.com/software.html User submitted videos on YouTube: www.youtube.com 9. Apply to website 10. Flash application to website review 11. Unit review / test Douglas County School District Page 12 August 20, 2009

Douglas County School District Page 13 August 20, 2009