Project 8

Final web portfolios

Timing: 5 to 10 hours

Project overview

Portfolios communicate accomplishments, works in progress, or personal history. Individuals use a portfolio 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 update their web portfolios from Project 4. 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 and then reflect on and evaluate their work. The presentation of a web portfolio can be just as important as its content.

Student product: Final web portfolio

Note: Portions of the Final web portfolio 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

• Conducting a review workshop
• Providing constructive criticism
• Planning and updating an existing web portfolio
• Organizing and managing content
• Creating flowcharts
• Creating a launch plan

Design skills

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

Research and communication skills

• Evaluating and assessing skills
• Evaluating and assessing an existing portfolio
• Writing and editing portfolio content
• Presenting a web portfolio to a group
• Soliciting and providing feedback
• Taking notes on critique
• Investigating and researching career areas within web design and development
• Planning for future careers
• Understanding and practicing lifelong career skills:
◦ Job research skills
◦ Presentation skills

Technical skills

Dreamweaver

• Updating a web portfolio
• Adding rich media to a web portfolio

Project materials

• Adobe Dreamweaver CS6 installed on all machines
• Adobe Fireworks CS6 installed on all machines
• Adobe Flash Professional CS6 installed on all machines
• Adobe Photoshop CS6 installed on all machines
• Adobe Illustrator CS6 installed on all machines
• Guide: How to plan a portfolio
• Guide: Tips for information architecture
• Guide: How to design for usability
• Guide: Peer review
• Guide: Writing for the web
• Worksheet: How to promote a website

Background preparation resources

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

Project steps

Updating a web portfolio

(Suggested time: 250–300 minutes)

1. Introduce this culminating activity as a way for students to reflect on their completed project work.

Students have been focusing on the design and development of various projects; this is a good time for them to focus on the type of work they plan to pursue after this course.

2. Introduce students to the goals of this project:

• Select and organize content for a web portfolio.
• Update their web portfolio.
• Create a basic marketing plan.
• Launch their web portfolio online.

3. Review the concept of a portfolio, its purpose, and its audience.

4. In a class brainstorm, discuss the ways in which students plan to use their portfolios going forward and how that might change their target audience and purpose. Questions to aid the discussion might include:

• Do you plan to look for a job or internship? If so, what kind of job or internship?
• Do you plan to apply for a program or school? If so, what type of program or school?
• How would the goals of the portfolio differ depending on where you plan to go next?
• What should the portfolio contain?
• How should the content be presented?

5. To prepare students for real-world experience, allow them to research job opportunities and requirements on recruitment sites to help them visualize and plan for career goals and expectations.

6. Allow students time to review their portfolios and analyze how they might change these to represent their new skills and career ambitions. Explain that students are to engage in a review similar to what they did in Project 4, but this time reviewing their portfolios with respect to the career and learning goals and type of audience they plan to focus on after they finish this course.

7. Allow students time to look through their work over the entire course and reconsider the content and design of their portfolios. They should consider the following when writing up their lists of redesign tasks:

Content:

• What is the purpose of the portfolio? How does the purpose affect the type of content you should include? 1.1, 1.2
• Who is the intended audience for the portfolio? How does the audience affect the type of content you should include? 1.1, 1.2
• Does the content address the goals of the website? 1.1, 1.2
• Is the current content relevant to the purpose and audience? If not, what should you remove and what other projects should you include? 1.1, 1.2
• Is the language level appropriate for your intended audience? 1.2
• Do the pages have any spelling errors, punctuation errors, or grammatical errors? 1.2

Design:

• Uniformity and Consistency: Are elements repeated on content pages to help identify the portfolio as a complete site? What attributes of the portfolio maintain or violate consistency?2.1, 2.3
• Universal navigation: Where is the main navigation for the site located, and does it appear on all pages? 2.1
• Layout: Is the layout logical, or do page elements appear to be placed randomly? 2.3
• Links: Are links labeled clearly? 2.3
• Usability: Does the page load quickly? Are site visitors able to find information easily? 2.4
• Readability: Is there formatting that improves or reduces readability? 2.4
• Accessibility: Are all images labeled with alternative text (Alt tags)? Are the text and titles clear and easy to read for all site visitors (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? 1.4, 2.4
• Rich media: How can rich media be used to enhance the portfolio? 1.5 Should rich media be incorporated into the design of the portfolio? 4.7, 4.8

8. Review the concept of a flowchart from Project 4 and ask students to create a new flowchart for this portfolio, incorporating the changes from the redesign tasks.

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

9. After students have had some time to devise their redesign plans, divide them into groups of three or four. Ask each group to review each student portfolio, one at a time, discussing the designer’s revised goal, target audience, and plan for redesign. Each group should provide thoughtful feedback to the designer with respect to planned changes. Explain that students should determine which redesign suggestions to implement in their own web portfolios.

Guide: Peer review 2.6

10. Allow students time to create a final list of projects and elements to include in their portfolios.

Encourage them to add interactive elements and navigation and rich media to their portfolios.

11. Allow students time to update their portfolios and create any additional assets in Photoshop, Illustrator, Fireworks, Dreamweaver, and Flash, using the various techniques they have learned. Ask students to create a final portfolio using a combination of what they learned in previous projects, emphasizing the use of CSS, templates, HTML, and Flash to create consistent, well-designed, interactive portfolios. Ask students to build their web portfolios based on their flowcharts.

Note: Encourage students to use the technical guides from previous projects.

12. Review the best practices of writing for the web and ask students to update any of their content as necessary, especially considering the goals and audience for their portfolios.

Guide: Writing for the web 1.2

Presenting and launching a web portfolio

(Suggested time: 50–100 minutes)

13. Explain that because the purpose of their portfolio is to market their skills to potential employers and/

or clients, they need to determine the following:
• How and where they will launch the portfolio.
• Who they will market the portfolio to.
• How they will promote and drive traffic to the portfolio.

14. Introduce Search Engine Optimization (SEO) and the primary components of a website that search engines crawl to find relevant search results. Explain that students can optimize their websites for certain keywords that could increase their page rank in search engines. Allow time for students to identify the keywords that might be useful to include in the meta tags of their sites to make their pages easier for search engines to find. 5.7

15. Ask students to investigate how to use web search engines to promote or market a website. They can find information on search engines on the Submission Tips page at http://searchenginewatch.com/ webmasters/. Students should explore and contrast the following two options:
• Find a search engine that offers free submission of websites. Make a list of their submission procedures.
• Find a search engine or promotion site for which you pay to submit your site. State the cost and discuss whether the benefits of the service are worth the cost.

Worksheet: How to promote a website

16. Ask students to outline a brief launch and marketing plan for their portfolios based on their career research. In creating their plans, encourage students to think about the following:

• Their target audience and goals when selecting the organizations and methods they might use for promoting the site
• How they will market their skills and approach jobs of interest (for example, personal communication, submitting to directories)
• How they can use social media (Twitter, Facebook, Google+, blogging) to market the portfolio site

17. Instruct students to finalize and publish their web portfolios, being sure to include SEO techniques.

18. After students devise a plan, discuss how to organize a formal presentation in which they present their portfolio and explain the following: 2.6

• The types of jobs they are seeking, using specific examples from their research
• A plan for meeting the requirements and skill set of the jobs they are seeking
• The skills, qualifications, training, and so on necessary for a job in their career area
• What they have learned by making a portfolio and throughout the course
• What they feel they still need to learn to realize their career goals
• How they improved or changed their content or design and how the changes grew out of their revised purpose and target audience (they might want to include old pages of the portfolio to show the changes)
• Explanation of their launch and marketing plan

19. Allow students time to present their portfolios to the class.

Extension activities

You can extend the project in the following ways:
• Career/education planning: Ask students to create a five-year plan outlining the steps necessary to reach their career goals. This may include education, internships, jobs, and so on. Also ask students to begin to research and plan a resume appropriate for their desired career field.
• Reflection supplement: Ask students to write up their career goal plans and how those plans impacted the decisions they made in planning their portfolios. This document will help students reflect on their process and provide a framework for continued evolution of their portfolios as they begin to conduct a job search.
• ePortfolios: Ask students to create a PDF portfolio. You can use the materials from Project 5: PDF Portfolios, using Adobe Photoshop CS6 and Acrobat X from the Visual Design curriculum.
• Social media and blogging: Students could research ways to use social media to raise awareness of their web portfolios. Students can establish a social media presence by opening professional accounts on Twitter, Facebook, Google+, LinkedIn, or other social networks. Students could then integrate their social media activity into their web portfolios through social media feeds that allow students to post real-time news or information on their portfolios. In addition, students could start blogs and begin to write about their areas of interest.

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 Dreamweaver, see Dreamweaver Help.
• 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 Flash, see Flash
Help.
• For an overview of the interface and for more information on the technical aspects of Photoshop, see
Photoshop Help.
• For an overview of the interface and for more information on the technical aspects of Illustrator, see
Illustrator Help.

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/2008/03/04/creating-a-successful-online-portfolio/; www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/; 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/
• Information and tips for marketing a personal web portfolio:
www.thewebsqueeze.com/web-design-articles/how-to-market-your-web-design-portfolio.html
• 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/
◦ Gallery of Flash portfolio sites: www.pixelperfectportfolios.com/
◦ Dave Werner’s portfolio uses Flash skills and well-narrated video to give visitors a sense of his personal story and adds a strong voice and context to his featured work: http://okaydave.com/

Web career information

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

Key terms

• audience
• flowchart
• information architecture
• portfolio
• purpose

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.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.
4.7 Include video and sound in a web page.
4.8 Add animation and interactivity to content.
5.7 Add head content to make a web page visible to search engines.

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.

Final web portfolio

Absent or incomplete.

Portfolio 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 reflects flowchart elements. Design and layout of the home page reflect good application of design principles and include elements of rich media. 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.