12 minute read
Advanced Web Site Design
GRADES 10‐12
The first semester develops skills that lay the foundations for producing web‐ready communications: graphic design principles,
storyboards, development, peer review, and redesign. Project activities focus on developing effective personal communications.
Students develop a variety of graphical images, an electronic portfolio, a web photo album, and interactive graphics. There is a great
deal of flexibility implied in the curriculum.
The second semester builds on student design and development skills by shifting perspective from the personal to the local.
Students now work in teams and product web communications for clients. The focus is on effective teamwork and shared project
management skills, such as interviewing and project scheduling. They product design documents and visual comps that clients
review, develop web site designs that solve specific communication challenges, and build technical skills to address client needs for
their web sites.
Prerequisite: Intro to Web Page Development
Credit: 1.0
ADVANCED WEB SITE DESIGN
GRADES 10‐12 UNIT 1: INTRODUCTION TO THE INTERNET
Objectives
Students will identify legal implications of misuse of the Internet. Students will identify, analyze and synthesize historical, social, economic, environmental, and government regulations impact on communications technology from multiple authoritative sources. Students will describe the school, district or state AUP. Students will describe a web browser’s function. Students will explain how pages are found on the Web. Students will describe the inception of the Internet. Students will list and explain historical innovations in the evolution of communications systems. Students will gather relevant information from multiple authoritative print, digital resources, using advanced researches, to predict the social, economic and environmental impacts of existing and evolving communication technologies. Students will identify key factors that have impacted the evolution of the communications technologies. Students will explain how governmental regulations impact communications.
Essential Questions
Why is there a need for an Acceptable Use Policy (AUP) when using the Internet at school? What are the Ethical Responsibilities of Internet Use? Why was the Internet developed? What are the implications of cyber‐crimes and computer hacking?
Knowledge and Skills
The internet is a vast and powerful tool used to gather and dispense information. For the most part the internet is unregulated and may contain information that is not always presented with the safety of the user coming first. There is copyrighted information on the internet, which cannot be used without permission of the copyright holder.
Instructional Strategies
Explore sample AUP’s. Discuss similarities and differences.
Develop own AUP. Research history of the internet. Identify components of a web browser.
Identify activities of cyber criminals and hackers.
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
ADVANCED WEB SITE DESIGN
GRADES 10‐12 UNIT 2: GRAPHIC DESIGN
Objectives
Students will use storyboarding to plan webpage production from start to finish. Students will use the software tools to demonstrate an understanding of the software applications used. Students will define and utilize communications technology systems domain specific words and phrases in their designs. Students will define and properly use common communication terminology. Students will read, interpret and utilize media communication equipment instruction manuals, troubleshooting guides, and specification requirements. Students will demonstrate an understanding of design elements and applications of design principles when developing projects. Students will consistently apply naming conventions to files and folders.
Essential Questions
What is the role of the web graphic designer? What are the elements and principles of design? How is a message design developed? What is a storyboard?
Knowledge and Skills
Various software packages are used in image editing program designed to create images, effects, and optimization especially for web pages. Web graphics are planned and evaluated so the images they produce meet a particular need. Digital images can be created, modified, and optimized by the web designer. Principles of design are used to evaluate projects and reflection is used to incorporate solutions into subsequent projects.
Instructional Strategies
Complete Internet Research Explore file types for graphics: .gif, .jpg, and .png. Identify copyrighted material within a website. Importing images into the computer from scanner and digital camera.
Planning and designing graphics for use on the internet. Optimizing images for internet use. Apply design elements, including composition, balance, unity, contrast, emphasis, line and color. Brainstorm and propose appropriate naming conventions for files and folders.
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
ADVANCED WEB SITE DESIGN
GRADES 10‐12 UNIT 3: ELECTRONIC PORTFOLIOS
Objectives
Students will effectively use Dreamweaver to set up a local root folder and a local site. Students will set up a web page and effectively use text, images and links. Students will apply proper conventions when naming files. Students will analyze and address all design elements of a web page. Students will test web site and repair as needed.
Essential Questions
What jobs are available in graphic communications? What steps are involved in pre‐production? What steps are involved in the production process? What processes are involved in post‐production?
Knowledge and Skills
Portfolios communicate accomplishments, works in progress, or personal history. Designers use a portfolio to showcase their previous work when applying for a job. With the Internet, portfolios can be electronic, easily and quickly sharing a designer’s work with anyone in the world. The presentation of an electronic portfolio can be just as important as its content.
Instructional Strategies
In this unit, students create the elements of an electronic portfolio with Macromedia Dreamweaver. They build a Web site that features work they have completed and work to be completed. As they create their portfolios, students plan, implement, and test their Web site design; students then reflect on and evaluate their work. Incorporating graphic design techniques is essential in this unit.
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
ADVANCED WEB SITE DESIGN
GRADES 10‐12 UNIT 4: BUILDING A WEB PAGE WITH A TEMPLATE
Objectives
Students will define a template web site project. Students will plan a template project. Students will structure a template web site. Students will design a template web site. Students will build a template web site. Students will test a template web site.
Essential Questions
Why is a template used to build a web page? What does the template communicate between the web designer and the client? What part does storyboarding play in designing a template website? What happens to a website if a template needs to be changed? How is testing the web site useful when designing a template web site?
Knowledge and Skills
The template portrays: the style, and recurring information, as well as the type of information included in the website. The template is used to understand the designer’s intent for the website. There is a need to evaluate the strengths of the design in template layout.
Instructional Strategies
Project Management Skills Designing a template style website Developing a project storyboard Design Skills Creating designs that meet template requirements Making simple storyboards to convey ideas Providing multiple design ideas Use the design process Creating various template ideas Finalizing design in the design process Technical Skills (Macromedia Dreamweaver) Using templates Creating links Checking links
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
ADVANCED WEB SITE DESIGN
GRADES 10‐12 UNIT 5: INTERACTIVE DESIGN WITH ADOBE CS6 ‐ FIREWORKS
Objectives
Students will identify a variety of methods and reasons for organizing and displaying information. Students will view and analyze visual information design on the Web. Students will create a presentation and report on visual information. Students will understand the uses of frames, layers, and behaviors in Fireworks and/or Photoshop. Students will plan an interactive image. Students will produce a storyboard for an interactive image. Students will use a storyboard to create an interactive image. Students will create simple and disjoint rollover images. Students will link image slices to other Web pages. Students will export an interactive image from Macromedia Fireworks and/or Photoshop as an HTML document.
Essential Questions
What is an interactive image? Why are interactive images uses in the development of web pages? Why is there a need to storyboard interactive images? What advantages are gained by integrating interactive components into a web site? How can Fireworks MX be used to create interactive images?
Knowledge and Skills
The graphic design of an image conveys one level of information, while interactivity presents another level of information. Graphic design principles, information design, and software packages are used to create an interactive image. Interactivity is an important tool for creating usable and appealing Web sites.
Instructional Strategies
Project Management Skill Planning an interactive image Evaluating and integrating interactive components into a Web site
Design Skills Creating storyboards for interactive components Analyzing images as a means of information display Research and Communication Skills Investigating the structure and visual information design of images Evaluating the effectiveness and appropriateness of
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
Knowledge and Skills
ADVANCED WEB SITE DESIGN
GRADES 10‐12
Instructional Strategies
interactive images Technical Skills (Macromedia Dreamweaver in Adobe CS6) Importing interactive images Technical Skills (Macromedia Fireworks and/or Photoshop in Adobe CS6) Using layers, frames, and behaviors Working with bitmap images Creating disjoint and simple rollover images Troubleshooting interactive images
Evidence of Learning
ADVANCED WEB SITE DESIGN
GRADES 10‐12 UNIT 6: BUILDING A CLIENT WEB PAGE
Objectives
Students will define a client web site project. Students will plan a client project. Students will structure a client web site. Students will design a client web site. Students will review and revise to client specifications. Students will build a client web site. Students will test and launch a client web site.
Essential Questions
What client background information is needed to build a client web page? Why is communication important between the web designer and the client? Why is there a need to storyboard a client web site? Why do client web sites need to be reviewed and revised during the design process? How is testing the web site beneficial to the designing process of a client web site? Why are libraries used when designing a web site?
Knowledge and Skills
The website portrays to the audience; the purpose, and goals, as well as the type of information included in the website. There is a need to understand the designer’s intent for the website. There is a need to evaluate the strengths of the design in client web page.
Instructional Strategies
Project Management Skill Designing for a client rather than yourself Developing a project plan Design Skills Creating designs that meet client requirements Making simple screen views to convey ideas Providing multiple design ideas Designing to others’ requirements Participating in design review meetings Creating design comps’ Research and Communication Skills Asking questions to focus and clarify Communicating ideas clearly
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
Knowledge and Skills
ADVANCED WEB SITE DESIGN
GRADES 10‐12
Instructional Strategies
Listening and interpreting information and feedback Finalizing design with the client Technical Skills (Macromedia Dreamweaver) Using templates Using libraries Checking files in and out
Evidence of Learning
ADVANCED WEB SITE DESIGN
Objectives
Students will create a template for the site. Students will create the redesign components of the home page. Students will create the redesign components of the content page. Students will make a class presentation on using technical skills in Dreamweaver and Fireworks and/or Photoshop.
Essential Questions
What client background information is needed to build a client web page? Why is communication important between the web designer and the client? Why is there a need to storyboard a client web site? Why do client web sites need to be reviewed and revised during the design process? How is testing the web site beneficial to the designing process of a client web site? Why are libraries used when designing a web site?
Knowledge and Skills
The client’s needs dictate the topic of the site and specifies the content to be included on the site. The web designer interprets the client’s needs in designing the navigation, the look and the feel, and the content flow. The client determines which site design most closely meets their needs.
Instructional Strategies
Analyze the client’s site and identify three or four major design challenges. Write a design document. Present a design document to a client. Respond constructively to client feedback. Make necessary changes to a design document, based on client feedback.
Build a Web page layout based on a design document. Design a Dreamweaver document as a Dreamweaver template, using Cascading Style Sheets. Create various technical features, as required (calendars, forms, image maps, rollover images, tables from imported spreadsheets, pop‐up menus, preparation of photographs, and animated images).
Evidence of Learning
Appropriate performance on student evaluation and/or classroom participation.
Student Name:
Web Project:
Score
Development of Storyboard/plan
Follows storyboard and plan to produce project.
On Task; proper use of class time.
Timeliness; completes project on time.
Presentation/Grammar
ADVANCED WEB SITE DESIGN
Date:
Due:
0‐5 pts.
Not completed or sloppily presented. Many parts missing, some sections not presentable. Some parts missing, could improve for presentation. Complete, neat, professional presentation.
Did not follow storyboard.
Followed some of storyboard, but dismisses other parts to produce required outcome. Most of the time, but had some problems with all directions. Always, follows precise directions, is able to solve project problems.
Wastes class time, constantly talking to others often, off task.
Not using time effectively, strays to unrelated topics. Usually on task but talks to others occasionally. Works full class periods.
Three or more days late. Two days late. One day late. Met original date and time.
Multiple grammatical and stylistic errors. Some errors in grammar and/or stylistic errors.
Few grammatical and/or stylistic errors Nearly error free and reflects a clear understanding of design principles.
6‐10 pts. 11‐15 pts. 16‐20 pts. Your Score
Total Score: Final Grade = Total Score
Final Grade:
ADVANCED WEB SITE DESIGN
GRADES 10‐12 RESOURCES
Digital Design, Aho, Kirsti, Dharkar, Anuja and Miller, Gloria. 2003. Thompson Course Technology, Boston, MA. Dreamweaver Fireworks Flash
PACING GUIDE
Unit
Unit 1: Introduction to the Internet Unit 2: Graphic Design Unit 3: Electronic Portfolios Unit 4: Building a Web Page with a Template Unit 5: Interactive Design with Adobe Fireworks and/or Photoshop Unit 6: Building a Client Web Page Unit 7: Redesigning a Client Web Site
Semester 1 Semester 2
X X X X X X X X
