Design a Client Website

8/6/2019 Design a Client Website

http://slidepdf.com/reader/full/design-a-client-website 1/22



Activity Summary

The unit contains the following activities, with handouts and other materials.

Activity Activity Materials

Activity 7.1: Defining Client Design Needs Worksheet: Design ReviewGuide: Technical Features and Their Design

Solutions

Guide: How to Make Websites Accessible

Activity 7.2: Writing a Design Document Guide: Sample Design Document

Worksheet: Design Document

Guide: Design Principles for Macromedia FlashContent

Sample assets (electronic files)

Activity 7.3: Reviewing and Revising with Clients None

Activity 7.4: Building Elements of a Client Site Guide: How to Create Cascading Style Sheets (from

unit 3)

Guide: Creating and Modifying Text in Macromedia

Flash

Guide: How to Create Timeline Effects

Guide: How to Use Transparent or Invisible Buttons

Activity 7.5: Evaluating and Presenting a Client Site Worksheet: Design Review

Guide: Technical Features and Their Design

Solutions

7 - 2 Instructor Activity Plans



Activity 7.1

Defining Client Design Needs

Objectives

• Evaluate how the design of a client website meets the client’s goals and audience.

• Evaluate the navigation, consistency, visual layout, and use of color in a client website

design.

• Analyze similar sites and site structures to compare and contrast the effectiveness of

navigation, consistency, visual layout, and use of color.

Materials

• Worksheet: Design Review

• Guide: Technical Features and Their Design Solutions

• Guide: How to Make Websites Accessible

Time

135–180 minutes

Overview

The instructor introduces students to the design project. Students conduct a design review of their

client’s site, identifying three or four challenges in the site. Students compare the way similar

sites address the challenges they have identified in their client’s site.

Student Product: Website analysis for major challenges in the site and comparisons to similar

websites

Activity Steps

1. Introduce the design project and how it differs from creating a client site from scratch as was

done in Unit 3. Outline the steps students will take during the redesign process (only the first

two steps are completed in this activity):

• Analyze the client’s site and identify three or four major design challenges.

• Review designs on similar sites.

• Write a design document to present to the client.

• Review and revise the design document with clients.

• Build examples of the home page and content page.

Instructor Activity Plans 7 - 3



• Present the redesign ideas to the client.

• Refine the redesign ideas based on client feedback.

2. Group students into design teams. If you have identified one or more outside clients, have the

clients briefly explain goals and audience for their present sites. If the clients are not available

to meet with design teams, give students documentation that describes client goals andaudience.

3. Ask students to conduct a design review of their client’s site and identify three or four major

challenges encountered in the site. Ask students to take notes or document the design review

discussion. Guidelines for the design review might include the following:

• One team member summarizes the client’s audience, purpose, and goals to confirm the

teams’ understanding.

• The team discusses strengths of the website’s design. Design elements might include

• Consistency

• Ease of use

• Use of color

• Universal navigation

• Layout

• Links

• Usability

• Accessibility

• Relevance and appropriateness of content to goals and audience

• The team discusses suggested improvements to the design elements of the website.

• One team member summarizes the website’s strengths.

Worksheet: Design Review

4. Have students search the web to find sites similar in content or design to the client site and

compare how these sites address the navigation and layout challenges encountered in the

client site. Some guiding questions include

• How does a site for a similar organization address navigation and layout?

• What kind of solution does the comparison site implement?

• Is the solution more effective than the client site?

Note: Although students may identify a wide variety of challenges, have them focus the rest

of the activity on navigation and page layout challenges.

5. In preparation for writing their design documents, have students make notes and take

screenshots to illustrate possible solutions to the design challenges they are seeking to

address.

Guide: Technical Features and Their Design Solutions

Guide: How to Make Web Sites Accessible




6. You might want to have a class discussion to identify the different types of challenges

students found.

• Are there common problems?

• Why do they happen consistently?

• What might be some possible solutions for these challenges?

Preparation

• If you have identified outside clients, prepare to have them come to class and discuss the

goals and audience with their assigned teams, or have a goals and audience document

prepared by the client.

• If there isn’t a real client for this design project, have student teams pick sites for other teams

to redesign. In preparation, have the selecting teams determine what they think are the goals

and audience for “their” site. You can assign the site, with goals and audience descriptions, to

other teams to complete the redesign as outlined in this activity.

• If you plan to use the worksheet or guides, make photocopies.

Extensions

Milestones: To help students manage their time during longer 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 the following:

• Complete the design review.

• Write up the challenges in the design review.

• Research similar sites.

• Write up the site analysis and save screenshots from the site.

Team Roles: To increase the realism of students’ experience with design teams, assign roles such

as content manager, art director, technical engineer, and project manager to team members. These

roles should not be interpreted too exclusively. Teams should work cooperatively so all members

have opportunities to experience some aspect of each team task, but each member should take

responsibility for the tasks that fall under his or her role. You can combine or split roles as

necessary to accommodate the number of members on a team.

Additional Challenges: If time allows, have students choose two other challenges they identified

in the site to redesign in addition to page layout and navigation. Limit the number of challengesstudents address, depending on the time available for students to complete the project.

Constructive Feedback: To help students use feedback words that are more concrete, brainstorm

a list of design features and critique terms with the class and place these terms in a hat. Have each

student pick a term and use it when critiquing the site.




Rationale

Redesign occurs for many reasons, such as ineffective original design, new company goals,

changed user expectations, or enhanced system capabilities. The challenge of redesign is to keep

the successful elements in the new design.

Background Resources

• Webmonkey’s Site Redesign tutorial

hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial4.html

• Web Usability checklist

www.ddj.com/documents/s=3579/nam1012432501/index.html

• Macromedia Website Production Management Techniques Client Survey

www.macromedia.com/resources/techniques/resources/define/client_survey.rtf

Assessment

• How well do students identify problematic design elements?

• How thorough are students’ critiques?

• How well do students identify solutions implemented on similar websites?

Macromedia Web Media 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 thetarget audience.

1.4 Demonstrate knowledge of website accessibility standards that address the needs of people

with visual and motor impairments.

2.1 Demonstrate knowledge of best practices for designing a website (maintain consistency, use

styles, use standard fonts, and use web-safe colors).

2.3 Demonstrate knowledge of page layout design elements and principles.

2.4 Identify basic principles of website usability, readability, and accessibility.

Key Terms• redesign




Activity 7.2

Writing a Design Document

Objectives

At the completion of this activity, students should be able to write a design document for a client

website that includes:

• An analysis of the design of the website

• A flowchart

• Page layout solutions (design comps) with font and color samples

• Visual layouts

• A navigation solution

Materials

• Macromedia Fireworks 8 installed on instructor and student workstations

• Projection system for instructor workstation or overhead slides with screenshots

• Guide: Sample Design Document

• Worksheet: Design Document

• Guide: Design Principles for Macromedia Flash Content

• Fireworks template for font and color samples (electronic files)• Font_Color_Samples_Template.png

Time

135–180 minutes

Overview

The instructor introduces the components of a design document and then demonstrates color and

font samples. Students design their own samples and create visual mock-ups or design comps of the home and content pages for their client websites. Students then complete their design

documents.

Student Product: Design document for client website design




Activity Steps

1. 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 the 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.

• Goals for redesign: List the client’s goals for redesigning the site. Be sure to include

ways in which the content will be relevant to the goals and appropriate to the audience in

the redesign.

• Delivery requirements: List the delivery requirements for this site (browsers 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.

• Visual design: Include at least two color and font samples. Then create and include at

least two sample page layouts (design comps). Be sure to consider whether the site will

be viewed on Macintosh computers or in Windows when selecting fonts and colors.

Guide: Sample Design Document

Worksheet: Design Document

Guide: Design Principles for Macromedia Flash Content

2. Show students how to create color and font samples from a website. Explain that these

samples are to help clients visualize the colors, textures, and fonts (types and sizes) to use on

their sites.

3. To help students understand font and color samples, have them go to a website and identify

the major and minor colors, the font sizes, and the font styles used. Ask students to use

Macromedia Fireworks 8 to create a document of these samples, describing the use of each

color and font on the site. To help students create the document, you might have them fill in

the Fireworks template for font and color samples.

Electronic file: Font_Color_Samples_Template.png

4. Ask student teams to create two different color and font samples for their client websites.Have students include the samples in their design documents, with a supporting statement for

their design decisions regarding colors and text. Ask teams to build two different visual

layouts each for the home page and sample content page, using their color and font samples.

5. Ask students to create screenshots of their visual layouts and include them in their design

documents, with an explanation of the layout and navigation design.

6. Have students complete the remaining sections of the design document.




Preparation

• Find a website for students to analyze and create font and color samples.

• You might want to save the Sample Design Document guide on your computer so you can

show students examples of color-font treatments and visual layouts in color.

• If you plan to use the guides, make photocopies.

Extensions



discussion to identify deadlines for each section of the design document. The sections are:

• Project overview

• 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 come to class and talk about

creating design documents, explaining how they are helpful in the production process and as a

tool for communicating with the client.

Rationale

Design documents are a communication tool between designers and clients. Designers use this

document as the first way to describe to clients how their design concepts address the goals and

audience of the site. Design documents enable designers and clients to share design ideas without

building web pages.


• Indiana University’s Websites Design Profileswww.indiana.edu/~iirg/ARTICLES/AECT97/guidelines.html#followmodels

• Sample design document process from the Center for Advancement in Teaching

cat.xula.edu/tutorials/planning/designdoc




Assessment

• How do students’ font and color samples address the goals and audience of the site?

• How well do the visual layouts incorporate the color and font samples?

• How well do the visual layouts address the goals and audience of the site?

• How well do the visual layouts address the challenges identified in the site?

• How complete is the design document?



1.2 Identify web page content that is relevant to the website purpose and appropriate for the

target audience.

1.5 Follow design specifications.



2.2 Produce website designs that work equally well on Windows and Macintosh operating

systems.

2.5 Demonstrate knowledge of flowcharts and storyboards to create web pages and a site map

(site index) that maintain the planned website hierarchy.

Macromedia Multimedia Objectives

2.3 Identify techniques to create rich media elements that are accessible and readable.

Key Terms

• font sample

• color sample

• site assessment




Activity 7.3

Reviewing and Revising with Clients

Objectives

• Present a design document to a client.

• Respond constructively to client feedback.

• Make necessary changes to a design document, based on client feedback.

Materials

• None

Time

90–135 minutes

Overview

Students create presentations for their clients, outlining the changes they advocate in their design

documents. After receiving feedback from the clients, students make necessary changes to the

design documents and then review them again with the clients. Students continue this cycle until

the clients approve a color-font sample and the page layouts.

Student Product: Final design document

Activity Steps

1. Ask students to prepare a presentation for the client. They might include the following:

• Introduction that highlights the site goals and audience as well as the redesign goals.

• Screenshots of the present home page and content pages, summarizing the strengths and

challenges of the site as documented in the design review.

• Screenshots of solutions other sites have used to address such challenges.

• 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.

2. Ask the 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.)




3. Ask students to make changes in the design document that reflect the understanding reached

with the client.

4. Have students 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.

Preparation

• You might plan with your students some questions to ask during the client review process.

Extensions




• Complete the presentation for the review meeting.

• Implement revisions from the first review meeting.

• Implement revisions from the final review meeting (the last changes that will be made to the

design document before production).

Ask a Designer: How do you keep the redesign cycle from going on indefinitely?

• “Set clear boundaries at the beginning of the project and make sure the whole team agrees on

these boundaries, such as when new content will no longer be added and who is responsible

for particular tasks.

“Set clear, specific goals for the redesign. For example, redesign will focus only on solving

problems with navigation within the site.

“Make sure the team agrees on a method to cut off the process, such as hard deadlines or a

single manager decision.”

—Ann Gallenson, Designer

• “We’re currently redesigning our website, and before anybody sat down we drafted a creative

brief. This document states the background and goals of the project, resources needed, and a

timeline. Once everyone involved agrees to the brief, you have a solid framework from which

to judge whether new revisions are warranted or not. Changes, if any, should be backed up by

solid reasons, not ‘because I like blue better.’ And the timeline, of course, forces you to make

a decision eventually.”

—Misho Stawnychy, Graphic Artist




Simulated Clients: If there is no external client for this redesign project, you can take one of the

following approaches:

• Have each student team present its redesign solution to the class. Have the class act as a

client, giving feedback and assessing the design.

• Pair two student teams together to serve as clients for each other.

• You serve as the client and give feedback to student teams.

Classroom Techniques: When listening to feedback, sometimes students might not understand

client requests. A technique that can help students clarify their understanding of client requests is

for them to explain the client’s request back to them. This helps make sure they understand each

other.

Rationale

Designers review the design document with a client to agree on the overall design of a project. By

presentation and discussion, clients and designers learn each other’s goals more clearly. Through

an iterative process, both parties reach a design agreement and can proceed to the production

phase.


• “Anatomy of a Redesign, Lesson 3” from Webmonkey

hotwired.lycos.com/webmonkey/98/36/index3a.html

Assessment

• How constructive were students with feedback from the client?

• How well did students ask clarifying questions about client comments?

• How well did students connect the audience and purpose of the site to the redesign?

• How well did students justify their redesign decisions?


2.6 Communicate with others (such as peers and clients) about design and content plans.

6.3 Present web pages to others (such as team members and clients) for feedback and

evaluation.






Activity 7.4

Building Elements of a Client Site

Objectives

• 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, masked photographs, and sound, video, or

other rich media on the site).

Materials

• Macromedia Dreamweaver 8, Macromedia Flash 8, and Macromedia Fireworks 8 installed oninstructor and student workstations

• Projection system for instructor workstation or overhead slides with screenshots

• Guide: How to Create Cascading Style Sheets (from Unit 3)

• Guide: Creating and Modifying Text in Macromedia Flash

• Guide: How to Create Timeline Effects

• Guide: How to Use Transparent or Invisible Buttons

Time

225–250 minutes

Overview

The instructor demonstrates how to design a Dreamweaver template using Cascading Style

Sheets (CSS). Students create a page layout based on their design documents, using CSS. Then

students use CSS and other technical features of Dreamweaver, Fireworks, and Flash to complete

their redesigned home pages and content pages.

Student Product: Redesigned home page and one content page

Activity Steps

1. Remind students about Cascading Style Sheets (CSS). You might discuss the importance of

CSS as follows:

• Enable flexible text formatting.

• Enable design of consistent-looking pages.




• Enable site-wide changes.

2. Have students create a style sheet for their client sites, using the font decisions in their design

documents. Ask students to create a template page they will apply to their content pages,

incorporating the style sheets.

Guide: How to Create Cascading Style Sheets

3. From the specifications in the design document, ask students to build a home page and a

content page, using their CSS and other technical features. Remind teams to check their files

in and out as they work on Dreamweaver pages. (See Unit 3, Activity 3.6: Building a Client

Website.)

4. Remind students of the techniques they learned in previous units, such as producing video,

creating masks, creating path animations, using filmmaking effects, and using transition

effects. Suggest that teams consider applying some of these techniques to their client site.

5. Have students select specific technical features in Dreamweaver, Fireworks, or Flash they

would like to learn about and apply to their client sites.

Guide: Creating and Modifying Text in Macromedia Flash

Guide: How to Create Timeline Effects

Guide: How to Use Transparent or Invisible Buttons

Preparation

• If you plan to use the guides, make photocopies.

Extensions

Advanced topics in CSS: If students seem to be more advanced, you might have them research the

Dreamweaver help system and articles from the Developer Center

(www.macromedia.com/devnet/mx/Dreamweaver/css.html) to understand how they can use CSS

for positioning.




• Create CSS styles for the site.

• Create the redesign components of the home page.

• Create the redesign components of the content page.

• Make a class presentation on using technical skills in Dreamweaver and Fireworks.




Peer Teaching: If some groups use a guide to learn about a technical feature, have them hold a

mini-seminar to teach the rest of the class. Their presentation could include

• A working example

• Short explanations of when and why to use this feature (design challenge it helps to solve)

• Step-by-step demonstration of how to create the feature

Rationale

Designers use a combination of Cascading Style Sheets and templates to make overall design and

management of the site easier. Designers can then change or update even large sites at a global

level by implementing a few changes to the style sheet or template.


• Using Cascading Style Sheets in the Dreamweaver Support Centerwww.macromedia.com/support/dreamweaver/layout/css/

• Review the tutorial materials in Dreamweaver: Start Dreamweaver and select Getting Started

with Dreamweaver on the Help menu.

Assessment

• How well do students implement other design solutions for their site?

• How closely do the actual designs follow the design document?

• How well did groups present technical features to the class?




3.2 Use the Insert bar.

3.3 Use the Property inspector.

4.4 Add text to a web page.

4.9 Build image maps.

4.10 Import tabular data to a web page.

Macromedia Multimedia Objectives

4.4 Use tools on the Tools panel to select, create, and manipulate graphics and text.

4.5 Import and modify graphics.

4.6 Create text.




4.8 Create objects and convert them to symbols, including graphics, movie clips, and buttons.

4.10 Edit symbols and instances.

4.12 Create animations (changes in shape, position, size, color, and transparency).




Activity 7.5

Evaluating and Presenting a Client Site

Objectives

• Evaluate the design features of a client website based on the redesign goals and target

audience.

• Implement changes to make a client site usable and accessible.

• Present a final site design to a client.

Materials

• Worksheet: Design Review (from Activity 7.1)

• Guide: Technical Features and Their Design Solutions (from Activity 7.1)

Time

135–180 minutes

Overview

Students work with peers to help them evaluate the design of the client website. After receiving

peer feedback, students implement any changes and create presentations to show the clients the

completed products.

Student Product: Final design presentation

Activity Steps

1. Pair each team with another team. Inform teams that they will again conduct a design review

like the one at the beginning of this unit.

Worksheet: Design Review

2. Have one team select a member to show the home page and the content page; to explain theclient’s audience, purpose, and goals; and to explain the redesign goals.

3. Ask a member of the evaluating team to summarize the client’s audience, purpose, and goals

as well as the other team’s redesign goals to confirm the understanding of the evaluating

team.




4. Have the evaluating team discuss the following:

• Strengths of the project design in relation to the stated goals and target audience

• Suggested improvements to the project design

Guide: Technical Features and Their Design Solutions

5. At the end, have one evaluating team member summarize the project’s strengths.

6. After both teams have reviewed the designs of the other team, ask each team to implement

any changes, based on comments during the design review.

7. Have student teams create a presentation to show clients the following:

• Original site

• Redesign changes made

• Explanation that supports the redesign decisions

Preparation

• If you plan to use the worksheet and guide from Activity 7.1, make photocopies.

• Students complete the client website redesign project in this activity. If you want to do a full

project assessment, use the sample project rubric in the Course Overview and Setup.

Extensions

Milestones: To help students manage their time, help them identify deadlines for the following:

• Complete the design review.

• Create the final presentation.

• Present the redesign solutions to the client.

Alternative Feedback: For a different type of feedback process, you can have the evaluating team

rate both the original design and the redesign with point values. For example, navigation would

be scored on a scale of 1 to 10, where 1 means the navigation is very difficult to use and not

designed well and 10 means the navigation is completely usable and designed effectively. After

scoring the original design, the evaluating team would similarly score the redesign. The design

team and evaluating team can then discuss how the scores are similar or different between the

original and redesign, what is necessary to make the redesign scores better, and how the design

team can implement the necessary changes.

Simulated Clients: If there isn’t a real client for the final presentations, have students present their

redesign solutions to the class.

Rationale

Peer review is an effective way to do a preliminary evaluation of a design. It allows designers to

improve a design before presenting it to the client.





• Webmonkey’s Site Redesign Tutorial

hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial4.html

• Web Usability checklist

www.ddj.com/documents/s=3579/nam1012432501/index.html

• Macromedia Website Production Management Techniques Client Survey

www.macromedia.com/resources/techniques/resources/define/client_survey.rtf

Assessment

• How constructive are student evaluations of each other’s work with respect to goals,

audience, and form?

• How clear and complete are team project presentations to the client?

• How well does the redesigned site reflect the goals and audience the design document

intended to reach?



1.2 Identify web page content that is relevant to the website purpose and appropriate for the

target audience.

1.4 Demonstrate knowledge of website accessibility standards that address the needs of people

with visual and motor impairments.

2.1 Demonstrate knowledge of best practices for designing a website (maintain consistency, usestyles, use standard fonts, and use web-safe colors).

2.3 Demonstrate knowledge of page layout design elements and principles.

2.4 Identify basic principles of website usability, readability, and accessibility.




Documents

Design a Client Website