Project 2

Web design and planning

Timing: 12 to 18 hours

Project overview

In this project, student teams work on a project to build a website for a client. Each team might have a different client, depending on the availability of resources. The instructor can play the role of the client, a hypothetical organization. The client selects the topic of the site and specifies the content to be included. Each student team interprets the client’s needs in proposing design solutions for the site’s navigation scheme, page layout, look and feel, and content flow. Students write specific design documents to help them communicate clearly with the client.
The focus of this project is working on a team and designing for someone else, emphasizing the following: the design-team process for website development, team-client interaction for incorporating feedback and changes throughout the development of the site, and team-client communication using the design document and evaluating websites in preparation for the design. In Project 3: Web development and deployment, student teams will build and launch the client website, completing the full website production process.

Student product: Web production project plan and design document; website prototype, storyboard, wireframes, and design comps

Note: Portions of the Web design and planning project align to the Adobe Certified Associate, Web Communication objectives. Within the instruction steps and technical guides, the specific learning objectives for the exam are referenced with the following format: 1.1

Project objectives

At the completion of the project, students will have developed the following skills:

Project management skills

• Developing a project plan
• Developing a design document
• Analyzing to select best examples
• Synthesizing content based on analysis and reflection
• Managing and organizing multiple tasks involved in design versus production
• Understanding roles and responsibilities
• Meeting deliverables

Design skills

• Communicating ideas and information through simple wireframes
• Providing multiple design ideas
• Synthesizing information from design review meetings
• Creating wireframes
• Creating design comps
• Creating storyboards
• Creating prototypes
• Applying design principles
• Applying information architecture
• Designing for usability and accessibility
• Designing consistent website pages
• Understanding and applying design aspects such as color theory, layout, contrast, and composition

• Designing for usability and accessibility
• Designing for a specific audience and purpose
• Planning graphics and rich media content based on needs and audience
• Designing for a client while meeting client requirements

Research and communication skills

• Evaluating and analyzing content validity
• Editing website content
• Evaluating and analyzing website navigation
• Understanding and practicing legal use of images
• Understanding tools for creating animation and interactive content
• Critiquing designs
• Communicating purpose and goal
• Communicating and presenting design decisions
• Giving feedback on a project
• Asking questions to focus and clarify
• Listening and interpreting feedback
• Understanding and addressing client design issues
• Finalizing design with a client

Technical skills

Fireworks

• Understanding the Fireworks workspace
• Creating a wireframe
• Creating design comps
• Creating a prototype
• Exporting a prototype to Dreamweaver

Dreamweaver

• Understanding accessibility

Project materials

• Adobe Fireworks CS6 installed on all machines
• Adobe Dreamweaver CS6 installed on all machines
• Guide: How to design for usability
• Presentation: Web design for multiple screens
• Dreamweaver guide: How to make websites accessible
• Worksheet: Usability and accessibility
• Presentation: Web project production phases
• Presentation: Writing for the web
• Worksheet: Client interview
• Worksheet: Design review
• Worksheet: Project plan
• Presentation: Introduction to information architecture
• Guide: Tips for information architecture
• Worksheet: Design document
• Guide: Principles and rules of copyright
• Fireworks guide: Overview of Adobe
Fireworks CS6 workspace
• Fireworks guide: How to create a wireframe
• Electronic file: GG_Bridge- rough_comp_1.fw.png
• Electronic file: GG_Bridge- rough_comp_2.fw.png
• Electronic file: GG_Bridge- rough_comp_3.fw.png
• Fireworks guide: How to create a design comp
• Presentation: Storyboards
• Worksheet: Production storyboard
• Electronic file: prototype-export.zip
• Fireworks guide: How to create a prototype

Background preparation resources

• Technical and content information
• Key terms
• ISTE NETS*S Standard for Students
• Adobe Certified Associate, Web Communication objectives

Project steps

1. Introduce students to the goals of the project:

• Analyze websites for purpose, audience, usability, and accessibility
• Define a plan for the web project and work with a client
• Structure the information architecture and create wireframes
• Create design comps, storyboard, and a project prototype

Website analysis

(Suggested time: 50–100 minutes)

2. Remind students of the design principles discussion and website design analysis from Project 1.

Explain they will now look at websites to determine their purpose, usability, and accessibility. Show students a variety of websites and help them identify how each serves a specific purpose and functionality.1.1, 1.2, 2.2, 2.3 Discuss the following:
• What is the purpose of the website?
• What is its functionality?
• Who is the audience?
• Who created the website?
• How will the audience view the website? On desktop or laptop computers? On mobile devices
(tablet computers or smartphones)?

3. Show students websites that use rich media and discuss how designers use it to enhance the user experience. Discuss how the device the audience will view the website on will influence the use of rich media and what elements you can include in the site content and design. Some elements to discuss include:

• Navigation systems
• Integrated user interface
• Animated screen elements
• Rich media advertising
• Social media

Note: Rich media advertising consists of using a combination of graphics with video, audio, or animation. An example is banner ads.

4. Explain that in addition to the importance of using design principles, user-friendly websites also employ appropriate navigation and usability standards. Show students some websites and discuss some of these questions:

• What categories of information do you find in the websites?
• Where are these categories located?
• What can you say about the amount of information you can find in any particular area? On the entire website?
• What type of navigation appears on the pages? Is it consistent?
• What navigation choices are provided?
• How does the design create consistency?
• Is the appearance consistent?
• Are design elements common among the pages?
• What page elements identify the site?
• Name some benefits of consistency, such as improved usability.
• Is the website consistent across different devices and screen sizes?

Guide: How to design for usability 2.3, 2.4

Presentation: Web design for multiple screens

Note: You can use the information from the www.usability.gov , www.useit.com, and www.w3.org/ WAI/intro/isable sites to guide your discussion on usability.
5. Discuss accessibility and why it matters to website visitors as well as website sponsors. Discuss assistive technologies such as screen readers, text and media alternatives, and accessible navigation. Describe the Web Content Accessibility Guidelines (WCAG) 2.0 by using the W3C’s Before and After Demonstrations (BAD) showing how inaccessible websites were turned into accessible websites: www.w3.org/WAI/demos/bad/.

Dreamweaver guide: How to make websites accessible 1.4

Note: You can also use the information from the Adobe Accessibility Resource Center and the World Wide Web Consortium (W3C) to guide your discussion: www.adobe.com/accessibility/, www.w3.org/ WAI/eval/Overview.html, www.w3.org/TR/WCAG10/full-checklist.html , www.webaim.org/articles/ pour/, and www.w3.org/WAI/intro/aria.

6. Put students into pairs and assign each pair two websites that address the same topic and have the same purpose so students can compare ease of use and accessibility. Choose topics of interest to your students, such as the following examples:

• Sports: www.fifa.com , www.ussoccer.com, and www.wnba.com
• Safe driving: www.cyberdriveillinois.com/publications/rules_of_the_road/rr_chap10.html and www.crashprevention.org
• Skin cancer: www.melanoma.com and www.maui.net/~southsky/introto.html

7. Put students into pairs and assign each pair two websites that address the same topic and have the same purpose so students can compare ease of use and accessibility. Choose topics of interest to your students, such as the following examples:

• What types of navigation elements are used: menus, hyperlinks, images, something else?
• As you navigate, how many clicks does it generally take to get to information you are seeking?
• As you navigate, do you get to the information you are expecting?
• Is the site structure apparent?

• How long does it take for pages to load? (Typical visitors will wait three to five seconds for a page to load before moving on.)
• Does the website look the same in different browsers, on different operating systems, and on different devices?
• Is the text readable? Is the text uniquely styled? If so, does the styling add value to the purpose?
• How does the use of text, navigation, and site structure make the site easier or more difficult for visitors?
• Are there clear titles, headings, or other visual elements that specifically help organize the information?
• Does the site contain rich media? Does rich media add to the purpose and usability of the site or is it unnecessary?
• Is the color contrast and brightness between the foreground and the background appropriate for users with impaired vision?

Worksheet: Usability and accessibility 1.4, 2.1, 2.2, 2.3, 2.4

8. Ask students to return to their two sites and rank the sites for accessibility, just as they did for usability, ranging from easy to difficult. Questions for guiding student inquiry might include the following:

• Do the images have alternative text (Alt text) so the text descriptions can be read by screen readers?
• Are all the links, including embedded links, labeled so they can stand alone?
• If there is tabular data, do tables have header rows?
• Are there clear titles and headings that help organize the information for someone using a screen reader?
• Is the navigation scheme positioned conveniently for someone using a screen reader?
• Can a site visitor use the tab button to access all elements on the page/site?
• Is color the only element used to convey emphasis?

Worksheet: Usability and accessibility 1.4, 2.1, 2.2, 2.3, 2.4

Define a web project

(Suggested time: 150–250 minutes)

9. Introduce the project, with information about the client organization, such as the following:

• Name of organization
• Organization mission and goals
• Product or service provided by the organization and explanation of how it works
• Background and history
• Why the organization is in search of a web-design team

10. Remind students of the phases of a client website project discussed in Project 1 and review each phase and task.

Website production phases

• Define:
◦ Goals, target audience, content, and delivery requirements for the project
◦ Project plan
◦ Content production
• Structure:
◦ Information architecture and design document
◦ Flowchart to portray the overall structure of the site
◦ Wireframes to block out the basic structure of site pages
• Design:
◦ Design of comps to provide detailed alternative designs
◦ Review of comps with client to ascertain client’s design preferences
◦ Redesign based on client feedback
◦ Production storyboard
◦ Prototype
• Build and test:
◦ Site production based on storyboards
◦ Technical and usability testing, recording bugs and design-change requirements
◦ Revision based on test results
◦ Technical and usability testing of revised site
◦ Final presentation to client and final revision
• Launch
◦ Launch plan

Presentation: Web project production phases 1.6

11. Form student design teams and, where possible, mix members with complementary strengths, such as visual design, technical skill, and project management. Discuss the concept of working as a team.1.6

12. Introduce the concept of writing for the web. Explain that, depending on the project, sometimes the client provides the content and sometimes the designer is expected to take the content and make it web ready. In either case, a review of the general rules of writing for the web will facilitate giving advice to the client and/or explaining how the content is written and presented.

Presentation: Writing for the web 1.2

Note: For this project we recommend having the client provide the content; students will practice writing their own web content in Project 4: Portfolios. If you will not complete Project 4, you may want students to follow the steps for writing for the web at this juncture.

13. In preparation for the client interview, discuss the kind of information design teams need from their clients about the clients’ goals and target audience. Help students identify criteria for determining whether content is relevant to the site goals and appropriate for the target audience. 1.2 Have students conduct an interview with the client.

Worksheet: Client interview 2.6

Note: It is recommended for this project that the student teams build a website from scratch. However, they can also revise an existing site for a client. If the latter, use the Design review worksheet in place of the Client interview worksheet.

Worksheet: Design review

14. After the interview, have teams review websites recommended by the client. Encourage teams to collect potential assets and design ideas as they review sites.

15. Ask teams to organize and outline their content. Have them consider technical features that might be relevant to convey the content provided by the client, such as forms, widgets, rollover images, pop-up menus, animations, rich media, video, or preparation of photographs.1.2

16. Introduce and discuss Adobe Flash, JavaScript, CSS3, and other rich media tools and their ability to create animation and interactive media. Discuss and analyze with your students what kind of rich media they can realistically create for their client sites.4.8

17. Discuss the website production phases again in the context of creating the client websites. Some things to discuss include:1.6

• When the completed client site is due
• Reasonable time frames for each phase
• Setting due dates
• Designating task owners for each task on their lists
• Responsibility of the task owner, especially who is accountable for getting a task completed regardless of who actually works on the task

18. Ask students to create a project plan for organizing their tasks within the project phases.

Worksheet: Project plan 1.6

Structure a web project

(Suggested time: 150–250 minutes)

19. Introduce information architecture to the students. Some guiding points are:

• Research the needs of the audience and users.
• Identify a clear purpose and audience for the site: who they are, why they will come to the site, the goals of the site, and so on.
• Determine how to organize content by determining the site’s information structure (single page, flat structure, index page, daisy, strict hierarchy, coexisting hierarchy).
• Collect site content and develop a content inventory.
• Create a flowchart of the site.
• Define the navigation systems (global, local, utility links).

Presentation: Introduction to information architecture 1.1, 1.2, 1.5, 2.5

Guide: Tips for information architecture 1.1, 1.2, 1.5, 2.5

20. Discuss how a flowchart communicates information organization. Explain the structure of a flowchart.

Discuss the definition of a home page. Point out that the home page is the default page that opens in a browser if the visitor does not specify another page. Mention that the home page is sometimes called a menu page because it usually contains the main menu links to the first set of content pages. Some of these first content pages might contain submenus to other content pages.2.5

21. Ask teams to draw a flowchart for the client site.

Note: Students have several options for building their flowcharts. They can draw by hand, use visual design software such as Inspiration (Inspiration Software), or use the Organization Chart feature in Microsoft PowerPoint or Microsoft Word.

22. Ask students to think about their websites and what design elements would make their sites consistent,2.1 Some guiding questions include the following:
• What font will you use for titles or headings in your content pages?
• What color will you use for titles or headings in your content pages?
• What font will you use for descriptions in your content pages?
• What color will you use for the description font?
• Where will you place the navigation bar on the page?
• What content will be on the navigation bar?
• Will the navigation bar be on every page?
• Will every page have text navigation?
• How will your navigation bar and text navigation help visitors know which page they are on?
• Does the client have a logo or other design element that could drive the design?

23. Introduce the concept of a design document by outlining the sections students need to include, with a brief explanation of each section:

• Project overview: List site challenges and possible solutions to address the challenges. Students might include examples from other sites that address these challenges well.
• Goals, objectives, and messages: List goals, objectives, and messages of the site.
• Audience: Write a brief description of the intended audience for this site.
• Delivery requirements: List the delivery requirements for this site (browsers supported, devices supported, minimum connection speed). Be sure to include any constraints the delivery requirements place on the site content.
• Site content: Give an inventory of the home page and content pages, including standard structures on the pages. Be sure to indicate the use of tables, headings, and indentation to maintain page structure consistency and hierarchy.
• Site structure: Draw a flowchart of the site to illustrate the information architecture.
• Visual design: Include at least two color and font samples.

Worksheet: Design document 1.1, 1.2, 1.5, 2.5, 2.6

24. Have teams write a design document, using their conclusions from the client interview and their knowledge of information architecture and usability.

Note: Make sure students identify any copyrighted material they plan to include on their sites. Ask teams to identify in the content section of the design document any copyrighted material they plan to include, as well as their strategy for acquiring permission to use such material.

Guide: Principles and rules of copyright 1.3

25. Remind students of the wireframe they created in Project 1. Briefly review design principles, what’s involved in creating a wireframe, and why wireframes are an important part of the website design process.2.2, 2.5 Discuss how web page layout and design must change depending on what viewing devices the client wishes to support. Ask students to use Fireworks to complete the wireframes for their website home page and any subsequent home pages. Remind them to consider the following:
• Graphics choice and placement
• Text choice and placement
• Navigation choice and placement (for both graphical and text navigation bars)
• Color choices
• Clear visual hierarchy
• Design limitations created by delivery requirements
• Multiple design options for screens of varying sizes on a variety of viewing devices

Fireworks guide: Overview of Adobe Fireworks CS6 workspace

Fireworks guide: How to create a wireframe 2.5

Note: If you did not teach Project 1, you can refer there for more detailed steps on teaching your students about the function of wireframes and how to use Fireworks to create them.

Note: If the client requires the site layout and design to be viewable on several different-sized devices, students may need to create a separate wireframe for each device. They may choose to create a wireframe for desktop and laptop computers, a wireframe for tablet computers, and a wireframe for smartphones.

26. Ask students to present their design documents (including flowcharts), wireframes, and project plans to the client.2.6 Ask the client to give an assessment of how the information organization, visual placement, and project schedule meet their goals and address their target audience. Make sure at least one member of each team takes notes on the client’s comments.

27. Have teams revise their design documents, flowcharts, wireframes, and project plans in response to the client’s feedback.

Design a web project

(Suggested time: 200–300 minutes)

28. Remind students of the design comp they created for their widget in Project 1. Explain that they will create a design comp, using their wireframe, for the client website. Show students some sample design comps.1.6, 2.3

Electronic file: GG_Bridge-rough_comp_1.fw.png

Electronic file: GG_Bridge-rough_comp_2.fw.png

Electronic file: GG_Bridge-rough_comp_3.fw.png

Note: If you did not teach Project 1, you can refer there for more detailed steps on teaching your students about the function of design comps and how to create them.

29. Ask each team to make two or more design comps of the home page and a sample content page, using Fireworks. Encourage teams to create comps that show varying perspectives on the pages, but remind them to consider the value of consistency between the home page and the content pages. 2.3 If teams have more than one wireframe for multiple viewing devices, have them create a design comp for each wireframe.

Fireworks guide: How to create a design comp

Note: It is recommended to have your students create their color palettes by using Adobe Kuler (http:/

/kuler.adobe.com).

30. After individuals have completed their comps, ask each team to select their two best home page comps and their two best content page comps to share with clients.

31. Ask students to prepare a presentation for the client that includes some or all of the following:2.6

• How their two design comps address the client’s goals, audience, and content requirements
• Screenshots of the color, font, and page samples, accompanied by the reasons for the design, page layout, and navigation choices
• Question-and-answer session in which the client gives feedback

32. Ask the clients to give feedback to each team. At this point have each team ask their client to select the color and font samples and the visual layouts they prefer, indicating any changes they believe should be made. (If a person from outside the classroom is acting as the client, the instructor might mediate the question-and-answer sessions to help student teams take note of the requested changes.) Teams should actively listen to the clients’ feedback by doing the following:2.6

• Take notes.
• Summarize what they heard the clients say, based on their notes.
• Ask clarifying questions such as the following:
◦ Can you identify online examples that solve this problem?
◦ How would you solve this problem?
◦ Would this solve the problem?

33. Ask teams to revise the design comps based on client feedback and present their comps to the clients again. Ask students to get client approval for the finalized color and font samples and the page layout and navigation designs. Students should document these elements in their design documents before proceeding to production. Teams can begin to incorporate final graphics and content as parts of the comps are approved.2.6

34. Introduce the storyboard concept as follows:

• The typical use of a storyboard is in designing movies or animated cartoons to depict what happens in the story. A storyboard contains scene-by-scene drawings of the sequence of action, camera angles, background, and so on. As the name implies, the storyboard is meant to tell the story visually, with sufficient detail to enable the production crew to understand what they will create.
• A graphics storyboard shows all the elements of the graphics, indicating size, location, color, and font.

• A website storyboard might go through several iterations before going into production.
• First create rough sketches to convey the big picture and the basic site structure so all team members understand the scope of the project. Convert these rough sketches to finished sketches that can be shared with other parts of an organization or an outside client.

Presentation: Storyboards 2.5

35. Help students prepare for creating their storyboards. Show them a sample production storyboard and describe the level of detail required. Perhaps use one team’s design comps to create a sample storyboard page on the board or online. Make sure students understand that their storyboards are how they communicate page layout as well as font and color decisions within the team, so the storyboards must include a high level of detail.

Worksheet: Production storyboard 2.5

36. Have teams use the Production storyboard worksheet to create storyboards for all the pages in their sites. Storyboards should include the following elements for each site page:

• Site name
• Page title
• Document name
• Wireframe (layout)
• Background
• Heading texts (specification of fonts, font sizes, styles, borders, margins, alignment, padding, and colors)
• Body texts (specification of fonts, font sizes, styles, borders, margins, alignment, padding, and colors)
• Description of all text, graphics, Flash movies, and video, including the order in which these elements are displayed
• Buttons, links, and their destinations
• Graphics, video, or Flash movie files needed for the page
37. Discuss how wireframes, design comps, and storyboards lead to building a prototype.2.5 Briefly explain the following:
• A prototype is a semifunctional web page that gives a realistic preview of what the page will look like and how the site will work.
• Students can combine wireframes and design comps in Fireworks to make a detailed and comprehensive prototype they can preview for their clients.
• Prototypes made in Fireworks can also be exported as HTML and CSS files that can be used in
Dreamweaver for previewing the website in a web browser.

38. Using the “I do, we do, you do” method, demonstrate how to combine a wireframe and a design comp into a prototype. Demonstrate how to export the prototype as HTML and CSS files.

Electronic file: prototype-export.zip

Fireworks guide: How to create a prototype

39. Allow each team time to build a prototype of the home page and several content pages based on their storyboards.

40. Have each team present the prototype to their client for approval in preparation of the technical site build.2.6 Allow time for any necessary revisions based on client feedback.

Extension activities

You can extend the project in the following ways:
• Map an existing site: To help students understand flowcharts, have them create a flowchart for a simple site on the Internet. You might find a small site for students to map. For example, students would draw the pages linked to the home page of this site and then the pages linked to those pages. By clicking through the links, students will begin to understand how a flowchart relates to a constructed site and will be able to create their own flowcharts more easily.
• Milestones: To help students manage their time during long projects, you can create milestones that give intermediate deadlines within the larger project. For this activity, you might have a class discussion to identify deadlines for each section of the design document. The sections are
◦ Goals, objectives, and site messages
◦ Audience
◦ Goals for redesign
◦ Technical specifications
◦ Site content
◦ Site structure
◦ Visual design
• Professional designer: You might ask a professional designer to talk to the class about creating design documents, explaining how they are helpful in the production process and in communicating with the client.
• Cascading Style Sheets: To provide students with more of a foundation in Cascading Style Sheets, you might have teams of students research topics and then present their findings to the class. Topics could include the following:
◦ The emergence of CSS
◦ The current CSS standards from the W3C
◦ The benefits of using CSS

Assessment

• Project rubric

Background preparation resources

• Review the student step-by-step guides referenced in this project.
• To view video tutorials aligned with the skills required to complete this project, visit the Digital Design
CS6 show on Adobe TV: http://tv.adobe.com/show/digital-design-cs6/

• For more teaching and learning resources on web design, planning and other topics in this project, search for resources from the community on the Adobe Education Exchange: http://edexchange.adobe.com
• For an overview of the interface and for more information on the technical aspects of Fireworks, see
Fireworks Help.
• For an overview of the interface and for more information on the technical aspects of Dreamweaver, see Dreamweaver Help.
• Adobe’s Website Production Management Techniques (read the information under Define on the right side of the page): www.adobe.com/resources/techniques/.
• View a tutorial on information architecture:
www.webmonkey.com/2010/02/information_architecture_tutorial/

Usability and accessibility

• Adobe Accessibility Resource Center: www.adobe.com/accessibility/
• World Wide Web Consortium (W3C): www.w3.org/WAI/eval/Overview.html
• W3C Priority 1 Checkpoints for website accessibility: www.w3.org/TR/WCAG10/full-checklist.html
• W3C Priority 2 POUR principles for website accessibility: www.webaim.org/articles/pour/
• The primary government source for information on usability and user-centered design:
www.usability.gov
• Jakob Nielsen’s website on usability: www.useit.com
• Web usability checklist: www.ddj.com/184412660

Wireframes

• A free wireframe stencil kit for Adobe Fireworks that includes a variety of UI elements such as buttons, drop-downs, and tabs: www.dragnet.se/webbdesign/websitewireframes.html
• Adobe Proto, a Touch App for creating interactive wireframes and prototypes of websites and mobile apps on a tablet: www.adobe.com/products/proto.edu.html
• Sqetch, an Adobe Illustrator toolkit that includes a number of templates and elements, including iPad and browser chrome, GUI elements, and form elements:
www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/

Clients

• A resource for creative ways of finding clients for school classroom projects:
http://edexchange.adobe.com/posts/b6fde4a10e
• A client survey you can download and use:
www.adobe.com/resources/techniques/resources/define/client_survey.rtf

Design document

• A sample design document process from the Center for Advancement in Teaching:
http://cat.xula.edu/tutorials/planning/designdoc

Key terms

• audience
• client communication
• design comp
• design document
• design review
• flowchart
• information architecture
• navigation
• production storyboard
• project plan
• purpose
• wireframe

ISTE NETS*S Standard for Students

This project is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and content area the student selects you may research your own state content standards to see how this project aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
1. Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students:
a. apply existing knowledge to generate new ideas, products, or processes. b. create original works as a means of personal or group expression.
2. Communication and Collaboration
Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students:
a. interact, collaborate, and publish with peers, experts or others employing a variety of digital environments and media.
b. communicate information and ideas effectively to multiple audiences using a variety of media and formats
d. contribute to project teams to produce original works or solve problems
3. Research and Information Retrieval
Students apply digital tools to gather, evaluate, and use information. Students:
b. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media.
c. evaluate and select information sources and digital tools based on the appropriateness to specific tasks
4. Critical Thinking and Problem Solving
Students use critical thinking skills to plan and conduct research, manage projects, solve problems and make informed decisions using appropriate digital tools and resources. Students:
b. plan and manage activities to develop a solution or complete a project.
d. use multiple processes and diverse perspectives to explore alternative solutions
5. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students:

a. advocate and practice safe, legal, and responsible use of information and technology.
b. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity.
6. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems, and operations. Students:
a. understand and use technology systems.
b. select and use applications effectively and productively.
d. transfer current knowledge to learning of new technologies.

Adobe Certified Associate, Web Communication objectives

1.1 Identify the purpose, audience, and audience needs for a website.
1.2 Identify web page content that is relevant to the website purpose and appropriate for the target audience.
1.3 Demonstrate knowledge of standard copyright rules (related terms, obtaining permission, and citing copyrighted material).
1.5 Make website development decisions based on your analysis and interpretation of design specifications.
1.6 Understand project management tasks and responsibilities.
2.1 Demonstrate general and Dreamweaver-specific knowledge of best practices for designing a website, such as maintaining consistency, separating content from design, using standard fonts, and utilizing visual hierarchy.
2.2 Produce website designs that work equally well on various operating systems, browser versions/
configurations, and devices.
2.3 Demonstrate knowledge of page layout design concepts and principles.
2.4 Identify basic principles of website usability, readability, and accessibility.
2.5 Demonstrate knowledge of flowcharts, storyboards, and wireframes to create web pages and a site map
(site index) that maintain the planned website hierarchy.
2.6 Communicate with others (such as peers and clients) about design plans.

Assessment

	0 - Does not meet expectations	3 - Meets expectations	5 - Exceeds expectations
Client interview	Absent or incomplete.	The interview identifies the client’s goals, the target audience, and the intended purpose of the website. The interview identifies the content and information crucial to the website. The interview identifies the client’s preferred design requirements and includes any additional relevant questions.	The interview clearly identifies the client’s goals, the target audience, and the intended purpose of the website. The interview clearly identifies the content (both original and repurposed) and information crucial to the website. The interview identifies the client’s preferred design requirements and documents specific examples. The interview includes additional relevant and thorough questions to get or clarify specific information.
Project plan	Absent or incomplete.	Students set milestones, assign tasks that reflect equal workload among team members, and set final deadlines to plan each phase of the project.	Students set milestones that include detailed descriptions of tasks, assign tasks that reflect equal workload among team members, and set final deadlines to plan each phase of the project.
Design document	Absent or incomplete.	Students create design documents that include site goals, objectives, and messages; site audience; delivery requirements; site content overview; site flowchart; font and color samples; and visual design mocks.	Students create design documents that include detailed analysis of the site goals, objectives, and messages; site audience; delivery requirements; site content overview; site flowchart; font and color samples; and visual design mocks.
Website wireframe	Absent or incomplete.	Students create wireframes based on design principles and delivery requirements to organize content on pages.	Students create wireframes based on design principles and delivery requirements to organize content on pages. Students support each decision on elements in the wireframes with data and information gathered from research and clients.

	0 - Does not meet expectations	3 - Meets expectations	5 - Exceeds expectations
Website design comps	Absent or incomplete.	Students create design comps that accurately reflect audience, goals, color choices, mood, images, text, and navigation choices. The selected comps reflect varied approaches to the design.	Students create design comps that accurately reflect audience, goals, color choices, mood, images, text, and navigation choices. The selected comps reflect varied approaches to the design. Students can clearly articulate the ways design principles are implemented to impact the audience.
Website storyboards	Absent or incomplete.	Students create production storyboards, with information for design and structure of the site and its elements.	Students create detailed production storyboards, with information for design and structure of the site and its elements.
Website prototype	Absent or incomplete.	Students create prototypes of the home page and 1–2 content pages based on wireframes, design comps, and storyboards. The prototypes are semifunctional in Fireworks and can be exported as HTML and CSS for Dreamweaver.	Students create prototypes of the home page and 2–4 content pages based on wireframes, design comps, and storyboards. The prototypes are realistic, semifunctional in Fireworks, and use client- approved colors, fonts, page layout, and navigation. Prototypes are exported as HTML and CSS for Dreamweaver.
Teamwork	Absent or incomplete.	Student collaborates with other students as required to provide feedback or assistance. Fulfills assigned team roles and contributes equally to project work. Sometimes consults with other team members on major project decisions but makes minimal effort to help others build skills.	Student collaborates freely with other students to provide feedback or assistance. Fulfills assigned team roles and contributes equally to project work. Consults with other team members on major project decisions and voluntarily helps others build skills to complete the project.
Time management	Absent or incomplete.	Student allots time for each phase of the design and development process. Completes most phases on schedule.	Student thoughtfully and effectively allots time for each phase of the design and development process. Completes all phases on schedule.