|
|
||
 | ||
       | ||
INVITATION How do we engage students in creating professional-looking QuickTime movies and graphics for sensory aspects of Web page design? How can we direct students toward graphic and Web design analysis and utilize cognitive and reasoning skills to differentiate between Web design content and design overload? |
 |
|
|
TASKS Students create QuickTime movies, graphics, and animations for use in Web page development. This project can be used for class Web pages, school Web pages, or personal Web pages. Students will also critique current Web sites and analyze the difference between content and Web design overload. |
||
|
TOOLS Computers; the Internet; Sherlock. AppleWorks; Cinema 4D XL; Final Cut Pro; Inspiration; Photoshop LE or Photoshop Elements; QuickTime; Web-authoring software such as PageMill, Freeway, Dreamweaver, or Netscape Composer. Electrifier Pro or The VR Worx (optional). |
||
|
INTERACTIONS Students work in pairs during Web page analysis and discussion and individually with the teacher during Web page development. |
||
|
STANDARDS To identify the curriculum standards for your state that correlate to this student project, select the state in the popup menu below and then click the Go button. View Detailed Standards in |
||
|
SITUATIONS Students work in the classroom, in the computer lab, and in the media center. The project can be completed in four or five class periods but learning outcomes will be enhanced if more time for analysis and construction is given. This is also a project that can continue to grow throughout the school year. |
||
|
ASSESSMENT The teacher assesses student designs based on their creativity and detail, the understanding they demonstrate of principles of development tools, and the understanding they demonstrate of the basic principles of Web development and construction. Students will also participate in peer critiques of each other's work utilizing a Web Design Rubric developed by the teacher. |
||
 |
||
|
One misleading concept about Web design is that one has to be a brilliant programmer, talented graphic artist, or possess a heightened sense of design in order to be capable of the task. These characteristics are all involved in good Web design, but the synthesis of these traits is what makes good Web design happen. This project asks students to conceptualize the elements of good Web design and analyze Web sites for strong Web design layout and content. Students will also create Web pages and incorporate text, QuickTime movies, graphics, and animation for enhanced Web page design. |
||
|
Phase 1: Catching the eye Discuss with students the elements from current media that attract the eye's attention. Examples can include movies, art, Web pages, cartoons, nature, ballets, or anything that involves the eyes and brain making sensory associations. As a class, students should try to analyze what it is about the image or video game that catches the eye's interest. Synthesize the discussion and create a database in AppleWorks that categorizes the student's responses. Database fields can include color, movement, dimension, contrast, speed of moving objects, and more. Through analysis of media, students will be able to study the database and find similarities and differences in ways classmates perceive certain visual media. |
|
|
|
Phase 2: Surfing the Web Hand out the prepared Web Evaluation Rubric for students to use. Create a list of 20 pre-visited Web sites that contrast in rubric scores, and ask students to visit the sites. Students should score each site they visit and compare and contrast perceptions with the rest of the class. Again, the discussion can be added to the current database. Students should then be allowed to visit their top ten favorite, school-appropriate Web sites and use the rubric to evaluate those. Each student then presents five of the Web sites to the class and offers discussion concerning his/her evaluation of each site. |
|
|
|
Phase 3: Web design startup During this phase, each student creates a simple Web page. The topic of the Web page should be one that students can use in another discipline. For example, Web page topics can include the human bone structure (science), the science of foods (family/consumer sciences), the Civil War (history), functions of algorithms (math) and more. The initial phase of Web page creation should be an outline of what the Web page will look like. Students can do this in either AppleWorks or Inspiration. Outlines need to be as specific as possible as students envision creating the perfect Web site. Students should also list any graphics, animations, or sounds they want to include, whether they have the ability to actually create them or not. Once the outline has been created, students divide the Web page into logical sections, taken from the outline, and create the text-based portion of the page. |
|
|
|
Phase 4: Expanding the site Suggest to students that they first create sketch drawings, either on paper, or using Photoshop LE, Photoshop Elements, or AppleWorks. Discuss the importance of substance and content during Web page design. Students need to know that flashy animations and graphic-heavy Web pages lack substance if the pages do not provide significant content. Students should plan the graphics and animations so they enhance and add to the Web page rather than simply distract. Once the sketch drawings have been added, students meet with you to discuss the importance of the additional multimedia elements. Students should be able to clearly articulate why a particular multimedia element is included in the design of the Web page. A simple question to pose to students is "Will the Web page be as powerful or lack content information if this multimedia element is not included?" Refer to the "Web Page Design Checklist" included in this kit for additional information. |
|
|
|
Phase 5: Creative and content multimedia Students begin to create the multimedia elements for their Web page by using Photoshop LE or Photoshop Elements, Cinema 4D XL, AppleWorks, and Final Cut Pro. Encourage students to create their own multimedia elements rather than use borrowed or pre-created elements. It is important for students to understand the responsibility of taking ownership of Web design and the importance of adding their own multimedia elements. Simply stated, anyone can copy but not all can create. |
|
|
|
PREPARATION
Prepare students to use the necessary software, especially HTML. Search the Internet with Sherlock to find examples of Web page design, layout, and dynamic content. Bookmark the Web pages to create Web rubrics. Compare and contrast examples of what makes an outstanding Web page, and use this information when creating the Web rubric. Create Web templates for students to use. |
|
|
|
OPTIONS AND EXTENSION ACTIVITIES
Students can work in groups and apply the unit to developing a school Web site. Invite local Web designers to the classroom to speak with students. Develop an activity to test what types of media elements your students respond to: video games, movies, digital media, cartoons, and others. Develop an activity to test what types of media elements your students respond to: videogames, movies, digital media, cartoons, and others. Develop a school Web page design contest. Enter the student designs into local, state, and national Web design competitions. Have students become the experts of a particular piece of software and let them teach other students. Use Electrifier Pro or The VR Worx to add interactivity to your Web pages. |
|
|
 BOOKS Creating Great Web Graphics by Laurie McCanna Effective Web Design: Master the Essentials by Ann Navarro Great Web Architecture by Clay Andres Looking Good on the Web by Daniel Gray Photoshop for the Web by Mikkel Aaland 3D and Web Masters: The Latest Artwork & Techniques from the World's Top Digital Artists, Inc. by Agosto (editor) |
||
|
INTERNET RESOURCES
Electrifier Pro
Electrifier Pro: Showcase
Adobe Photoshop Products
Photoshop Central
Web Developer
CNET Builder.com - Graphics 101
|
||