Project 4

Web portfolios

Timing: 5 to 10 hours

Project overview

Portfolios communicate accomplishments, works in progress, or personal history. Individuals use portfolios to showcase their work when applying for a job. Traditionally a portfolio is a large book or leather case containing design samples. With the Internet, portfolios can be electronic, easily and quickly sharing a designer’s work with anyone in the world.
In this project, students create the elements of a web portfolio with Adobe Fireworks and Adobe Dreamweaver. They build a website that features work they have completed and work to be completed. As students create their portfolios, they plan, implement, and test their website designs; students then reflect on and evaluate their work. The presentation of a web portfolio can be just as important as its content.

Student product: Web portfolio

Note: Portions of the Web portfolios 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

• Planning and creating a web portfolio
• Organizing and managing content
• Creating flowcharts

Design skills

• Designing consistent pages
• Designing for a specific audience and purpose
• Providing consistency and accessibility
• Providing universal navigation
• Adapting content for readability and emphasis

Research and communication skills

• Investigating and researching career areas within web design and development
• Communicating information to particular audiences
• Defining the goals and uses of a portfolio
• Soliciting and providing feedback
• Writing and editing website content

Technical skills

Fireworks

• Optimizing images
• Creating buttons
• Creating navigation bars
• Creating pop-up menus
• Exporting to Dreamweaver

Photoshop

• Resizing and rotating images

Dreamweaver

• Setting document properties
• Using the Assets panel
• Using CSS starter layouts
• Using CSS text styles
• Creating, modifying, and troubleshooting
Cascading Style Sheets

• Creating templates
• Creating forms
• Publishing web files

Project materials

• Adobe Fireworks CS6 installed on all machines
• Adobe Photoshop CS6 installed on all machines
• Adobe Dreamweaver CS6 installed on all machines
• Presentation: Writing for the web
• Guide: Writing for the web
• Guide: How to plan a portfolio
• Guide: Tips for information architecture
• Guide: How to design for usability
• Fireworks guide: How to create a wireframe
• Fireworks guide: How to create a design comp
• Fireworks guide: How to create interactive navigation
• Fireworks guide: How to optimize images
• Photoshop guide: How to resize, rotate, and crop images
• Dreamweaver and Fireworks guide: How to create interactive navigation
• Presentation: Web design for multiple screens
• Dreamweaver guide: How to set document properties
• Dreamweaver guide: How to use CSS starter layouts
• Dreamweaver guide: How to use templates
• Dreamweaver guide: How to lay out a web page with CSS
• Dreamweaver guide: How create and edit a
CSS rule
• Dreamweaver guide: How to use CSS text styles
• Dreamweaver guide: How to work with external Cascading Style Sheets
• Dreamweaver guide: How to use the Assets panel
• Dreamweaver guide: The Dreamweaver Insert panel
• Guide: How to make websites accessible
• Dreamweaver guide: How to create forms
• Worksheet: Review and redesign
• Guide: Peer review
• Dreamweaver guide: How to check links
• Dreamweaver guide: How to deploy for multi- screens
• Dreamweaver guide: How to preview and test a web project
• Dreamweaver guide: How to publish web files

Background preparation resources

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

Project steps

Designing a portfolio

(Suggested time: 100–150 minutes)

1. Introduce students to the goals of the project:

• Understand the goals and uses of portfolios.
• Research career areas in design and/or web design.
• Plan and create a flowchart for a portfolio.
• Select and organize content for a web portfolio.
• Construct, review, and redesign a web portfolio.

2. Discuss the concept of a portfolio, its purpose, and its audience.1.1

• What is a portfolio?
• What are the goals of a particular portfolio?
• What does a portfolio contain?
• Would it contain professional experiences? Coursework?
• How do you use a portfolio to communicate ideas?
• What could you use to communicate these ideas (for example, images, text, page layout, organization of the portfolio)?
• What are the long-term and short-term goals of a portfolio?
• Who is the audience for the portfolio?

3. Gather some examples of portfolios and show the class a variety of paper-based and online portfolios.

Discuss their purpose and audience with the students.

4. Ask students to research career areas and job titles in web design and development and then select the focus for their portfolios based on their research. Career areas and job titles may include:

• Web designer
• Web developer
• Web applications developer
• Interaction designer
• User interface designer
• Front-end developer

Note: You might want to explain that in researching career areas they should document a specific job description with qualifications, expected skill set, expected technical knowledge, necessary training, and expected salary. You might also want to explain that they can collect websites containing specific job-related information and, if appropriate, link to them within their portfolios.

5. Explain the expectations of the portfolio. Some things to include might be:

• Portfolio introduction that explains their skill set, training, projects included in the portfolio, career interests and goals, and any professional experience
• An image or representative visual to use on the welcome page of their portfolio
• Narrative introductions to each project, explaining the ways their work highlights their skills
• Narrative introductions including specific examples comparing their skills with the career area they are interested in
• A learning plan that identifies skills or concepts they might be lacking at this point but would want to learn about and focus on during the next semester
• A web photo gallery of images to link to their work

Note: You may consider reusing the Spry Widget Slideshow with Filmstrip from Project 1 and have students customize it to match their personal web portfolios.

6. Introduce the concept of writing for the web. Explain that the students need to create a narrative for their web portfolios. To do so they need to understand the following about best practices for creating web content:

• Reading and scanning behaviors of their audience
• Writing for their audience
• Best practices for writing for the web
• Ways to optimize page content
• Best practices for working with organizations
• Methods for testing their content

Presentation: Writing for the web 1.2

Guide: Writing for the web

7. Pair students and ask them to consider the work they’ve done and to identify which files they could include in their portfolios.

8. When they have selected their content, allow students time to write an introduction for the portfolio.

9. Discuss how to organize the contents of the portfolio. Demonstrate how to create category outlines and corresponding flowcharts for the type of portfolio chosen.

Guide: Student portfolio

10. Review flowcharts and ask students to create a flowchart for their portfolios, including background information as follows:

• Describe the purpose of the portfolio.
• Create a list of assets in the portfolio and organize files and projects into categories.
• Using the category outline as a guide, draw a flowchart for the web portfolio.

Guide: How to plan a portfolio 2.5

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

Guide: How to design for usability 2.4

11. Briefly review wireframes and design comps and ask students to create a wireframe and a few design comps for their portfolios.

Fireworks guide: How to create a wireframe 2.5

Fireworks guide: How to create a design comp 2.3

12. Ask your students to begin to write the narrative for the web portfolio for each project. For example, one way to integrate the client site (which students created in Projects 2 & 3) into the portfolio is to create a summary web page in the portfolio and link it to the client site, instead of adding a client site link to the main navigation. This summary page should contain a description of the client site, its goals, and its audience. The students can add the main navigation bar of their electronic portfolio to this summary page without any need to modify the client site.

13. Ask your students to build any assets and graphic elements for their portfolios. Remind students to edit and optimize their images. Ask students to use Photoshop, Illustrator, and/or Fireworks to create the common graphic page elements. Remind them that the look of their graphic elements should coordinate with their site designs.

Fireworks guide: How to optimize images

Photoshop guide: How to resize, rotate, and crop images

Dreamweaver and Fireworks guide: How to create interactive navigation 4.9

Constructing a portfolio

(Suggested time: 100–250 minutes)

14. Remind students of the design principles and page design principles for website design. Remind students about designing for multiple screens and how to optimize website design and content for viewing on a variety of devices.

Presentation: Web design for multiple screens 2.2

15. Remind students of the benefits of reusable design. Ask students to select the best design comp and then to use a combination of CSS, templates, and HTML to build their web portfolios based on their wireframes, flowcharts, and design comps.2.1

Dreamweaver guide: How to set document properties 3.3, 5.1

Dreamweaver guide: How to use CSS starter layouts 5.8

Dreamweaver guide: How to use templates 5.5

Dreamweaver guide: How to lay out a web page with CSS 5.2

Dreamweaver guide: How to create and edit a CSS rule 3.3, 5.1, 5.2, 5.8

Dreamweaver guide: How to use CSS text styles 5.3, 5.8

Dreamweaver guide: How to work with external Cascading Style Sheets 5.8

16. Ask students to add their images, written content, links, and so on to their web portfolios. Ask students to add alternative text to all images. 4.4, 4.5, 4.6

Dreamweaver guide: How to use the Assets panel 3.4

Dreamweaver guide: The Dreamweaver Insert panel 3.2, 4.5

Dreamweaver guide: How to make websites accessible 1.4, 2.4

Note: Ideally they will be able to reuse their assets from the Dreamweaver library or the Assets panel.

17. Explain that because they will use this portfolio for potential employers, they may want to provide a contact or feedback form as a way for people to contact them. Using the “I do, we do, you do” method, demonstrate how to create a form.

Dreamweaver guide: How to create forms 4.13

18. Ask students to finalize their web portfolio design and content.

Review and redesign of portfolio

(Suggested time: 50–100 minutes)

19. Have students work in groups and conduct technical tests and peer reviews of their web portfolios.

Following are some possible guiding questions:

Design:

• Uniformity and consistency:
◦ Are elements repeated on content pages to help identify the portfolio as a complete site? What attributes of the website maintain or violate consistency?
◦ Universal navigation: Where is the main navigation for the site located, and does it appear on all pages?
• Layout:
◦ Is the layout logical, or do page elements appear to be placed randomly? Does the page require excessive scrolling?
• Colors and fonts:
◦ Do the colors and fonts used for all design elements match the design comp?
• Links:
◦ Are the links labeled clearly?
• Usability:
◦ Does the page load quickly?
◦ Can site visitors find information easily?
• Readability:
◦ Is there formatting that improves or reduces readability?
• Accessibility:
◦ Are all images labeled with alternative text (Alt tags)?
◦ Are the text and titles clear and easy for all site visitors to read (color, size, and so on)?
◦ Do image links and hotspots (image maps) have alternative text labels?
◦ What features can or cannot be read by screen readers?

Content:

• What is the purpose of the website? How does the purpose of the portfolio differ from the purpose of other websites, such as the client website? How does the purpose affect the content?
• Who is the intended audience for the website? How does the audience of the portfolio differ from the audience of other websites, such as the client website? How does the audience affect the content?
• Is the content relevant for the audience and the goals of the site?
• Does the content address the goals of the website?

• Do the content and structure match the flowchart and wireframes used to design them?
• Is the language level appropriate for the intended audience?
• Do the pages have any spelling errors, punctuation errors, or grammatical errors?

Worksheet: Review and redesign

Guide: Peer review 2.6

Dreamweaver guide: How to check links 6.1

Dreamweaver guide: How to deploy for multiple screens 1.5, 2.1, 2.2

Dreamweaver guide: How to preview and test a web project 6.1

20. Considering the feedback, allow students time to implement any changes to their portfolios based on the results of the technical test and peer review.

21. Instruct students to finalize and publish their web portfolios.

Dreamweaver guide: How to publish web files 6.5

22. Ask students to present their portfolios to the class. They might want to include the first iterations of their portfolios in the presentation to show how they improved or changed their design or content and explain why they chose to make those changes.2.6

Extension activities

You can extend the project in the following ways:
• Portfolios: Ask students to plan a portfolio that showcases their best work from all their courses.
• Reflection supplement: Ask students to write up the decisions they made in the planning process for their portfolios. This document will help students reflect on their process and provide a framework for the next time they plan a website.
• Reviewing audience and purpose: Constructing a wireframe for a website is difficult the first time.
Looking at examples of portfolios can help students better understand the possibilities for their own designs. Have a student seminar group find examples and report to the class about the audience and purpose of each portfolio. This presentation can serve as a good introduction to the activity.
• Fast finishers: For students who complete their portfolios early, have them use PhoneGap to create a mobile version of their portfolio.

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 portfolios 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.
• For an overview of the interface and for more information on the technical aspects of Photoshop, see
Photoshop Help.
• •Review Website Production Management Techniques (select Content and Site View from the
Structure menu on the right side of the screen): www.adobe.com/resources/techniques/structure/.

Information architecture and flowcharts

• Examples and instructions for visualizing information and using flowcharts:
www.jjg.net/ia/visvocab/#page
• Resources about information architecture (click the topic Screen View for specific information about creating a storyboard or schematic and determining navigation): www.adobe.com/resources/techniques/structure/
• Information architecture tutorial: www.webmonkey.com/2010/02/information_architecture_tutorial/

Portfolios

• U.S. Department of Education, Office of Research and Improvement, Classroom Uses of Student
Portfolios: www.ed.gov/pubs/OR/ConsumerGuides/classuse.html
• Advice from web professionals for building great web portfolios: www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/ and http://speckyboy.com/2011/05/08/building-a-great-web-design-portfolio-–-10-best-tips-40-examples/
• Five styles for organizing the content of a web portfolio:
http://sixrevisions.com/web_design/five-popular-design-portfolio-website-styles/
• Examples of online portfolios:
◦ Twenty-five recommended web portfolios:
http://sixrevisions.com/design-showcase-inspiration/25-impressive-portfolio-web-designs/
◦ Information and examples of a variety of electronic portfolios:
http://eduscapes.com/tap/topic82.htm
◦ Elements of great portfolios with examples:
http://webdesign.tutsplus.com/articles/general/elements-of-a-great-web-design-portfolio/

Web career information

• What is a web professional: http://www.markdubois.info/weblog/2012/01/what-is-a-web-professional/
• The World Organization of Webmasters (an organization providing community education and certification resources to Web professionals in all phases of their careers): http://webprofessionals.org/

Writing for the web

• Writing for the Web: Guidelines for MIT Libraries: http://libstaff.mit.edu/webgroup/writing/less.html
• Writing web content: http://www.usability.gov/pdfs/chapter15.pdf
• Content and usability: Writing for the web:
http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-content.shtml

• Web writing for many interest levels:
http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-content.shtml
• Writing for the web: Tips and common mistakes we make:
http://www.hongkiat.com/blog/writing-for-the-web-tips-common-mistakes-we-make/
• Writing for the web: http://www.useit.com/papers/webwriting/

Key terms

• audience
• flowchart
• information architecture
• portfolio
• purpose
• visualization

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.
d. identify trends and forecast possibilities.
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:
b. communicate information and ideas effectively to multiple audiences using a variety of media and formats
3. Research and Information Retrieval
Students apply digital tools to gather, evaluate, and use information. Students:
a. plan strategies to guide inquiry.
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::
a. identify and define authentic problems and significant questions for investigation. 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.
c. demonstrate personal responsibility for lifelong learning.
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.4 Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments.
1.5 Make website development decisions based on your analysis and interpretation of design specifications.
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.
3.2 Use the Insert bar.
3.3 Use the Property inspector.
3.4 Use the Assets panel.
4.4 Add text to a web page.
4.5 Insert images and apply alternative text on a web page.
4.6 Link web content, using hyperlinks, e-mail links, and named anchors.
4.9 Insert navigation bars, rollover images, and buttons created in a drawing program on a web page.
4.13 Create forms.
5.1 Set and modify document properties.
5.2 Organize web-page layout with relative and absolutely positioned div tags and CSS styles.
5.3 Modify text and text properties.?
5.5 Create web page templates.
5.8 Use CSS to implement reusable design
6.1 Conduct basic technical tests.
6.5 Publish and update site files to a remote server.

Assessment

	0 - Does not meet expectations	3 - Meets expectations	5 - Exceeds expectations
Portfolio flowchart	Absent or incomplete.	Flowchart shows clear organization of content and appropriate selection of content.	Flowchart shows clear organization of content and appropriate and complete selection of content relevant to goals and purpose.
Portfolio design comps	Absent or incomplete.	Design comps are consistent with portfolio flowchart and include information on color, placement, and navigation choices. Students clearly explain design decisions for home-page plan.	Design comps are consistent with portfolio flowchart and include information on color, placement, and navigation choices. Students clearly explain design decisions for home-page plan. Explanations also include synthesis of information from portfolio analysis.
Web portfolio	Absent or incomplete.	Portfolio home page reflects design comps, and text navigation reflects flowchart elements. Portfolio content pages reflect flowchart elements, have a common structure, and include consistent design elements that improve usability for visitors. Portfolio content includes information about future goals, highlights exemplary projects that support goals, and includes good usability and accessibility.	Portfolio home page reflects design comps, and text navigation reflects flowchart elements. Design and layout of the home page reflect good application of design principles. Portfolio content pages reflect flowchart elements, have a common structure, and include consistent design elements that improve usability for visitors. Content pages apply principles learned through portfolio analysis. Portfolio content includes information about future goals, highlights exemplary projects that support goals, and includes good usability and accessibility.

	0 - Does not meet expectations	3 - Meets expectations	5 - Exceeds expectations
Published portfolio	Absent or incomplete.	Students can define terms related to website publishing and articulate the differences between local and remote sites. Students understand the main components of the Files panel used in remote site setup. Published portfolios function as they did when tested locally.	Students can define terms related to website publishing and articulate the differences between local and remote sites. Students understand and can explain to others the main components of the Files panel used in remote site setup and how the panel is used for publishing. Published portfolios function as they did when tested locally.