Your Portfolio

CPSC581.PortfolioMaterials History

Hide minor edits - Show changes to markup

Changed line 11 from:

The project learning portfolio captures the essence of your individual projects through a variety of media. As each project is completed, you will create a detailed portfolio documenting and archiving what you have done. It takes two forms, both done for every project.

to:

The project learning portfolio captures the essence of your individual projects. As each project is completed, you will create a detailed portfolio documenting and archiving what you have done. It takes two forms, both done for every project.

Changed lines 13-14 from:
  1. You will use more traditional media to create a physical visual summary. The chosen media can vary, but can cover a range including paper-based posters, booklets, a short self-contained video, etc.
to:
  1. For one of your projects, you will be asked to create a visual summary of a project using more traditional media. The chosen media can vary, but can cover a range including paper-based posters, booklets, etc.
Changed lines 17-22 from:

The professional portfolio is created at the end of the term. Its intent is to be used as a living resume, where you can bring it to your job interviews and show potential employees and/or clients about the kinds of work you did as well as the scope of your many achievements. The emphasis is that these portfolios must serve as a conversational prop: you should be able to conveniently carry it to a job interview, where its contents are easy to show, browse and discuss as opportunities appear. Thus both paper-based and electronic portfolios are encouraged *I also suggest they include electronic medium (e.g., a CD) that can be quickly load into a computer if time and facilities allow for further elaboration and demonstration). These portfolios can come in quite different form factors, although the two main styles are booklets or modest-sized posters held in a portfolio case. I should note that the professional portfolio is rarely a mere rebundling of the learning portfolio entries: students create or remix entries to exploit the form factor and visual effect of their professional portfolio.

In practice, I have found that students take great pride in their project and professional portfolios. Many are quite creative in building the portfolio web site, to the point that the web site itself demonstrates the student’s skills. Similarly, many pay considerable attention to their professional portfolios. They construct it out of high quality materials, and extend it to include projects outside the course. A variety of students described how they used the portfolios during actual job interviews, and how they believed it made the difference in setting them apart from other applicants.

I include a brief instruction manual for the portfolio below.

to:

The professional portfolio is created at the end of the term. Its intent is to be used as a living resume, where you can bring it to your job interviews and show potential employees and/or clients about the kinds of work you did as well as the scope of your many achievements. The emphasis is that these portfolios must serve as a conversational prop: you should be able to conveniently carry it to a job interview, where its contents are easy to show, browse and discuss as opportunities appear. Thus both paper-based and electronic portfolios are encouraged. Portfolios can be stand alone as well, e.g., a CD or memory stick, that can be quickly loaded into a computer or left with a person. Note that the professional portfolio is rarely a mere rebundling of the learning portfolio entries: you should create or remix entries to exploit the form factor and visual effect of your professional portfolio, and include entries of projects from other courses or things you have done.

In practice, you should take great pride in your project and professional portfolios. You can be quite creative in building the portfolio web site, to the point that the web site itself demonstrates your technical and creative skills. A variety of past students described how they used the portfolios during actual job interviews, and how they believed it made the difference in setting them apart from other applicants.

Changed lines 52-55 from:
  • Keeping all summaries organized but separate will allow you to selectively rearrange your portfolio to fit your need (e.g., for a job interview).
  • The simplest form sees it as separate summaries collected in some kind of binder e.g., an accordion file or an artist's portfolio case. I recommend you buy an accordion file to hold and protect these.
  • You can also paste summaries into a large high-quality (but very good looking, maybe even hand made) scrapbook/ yet this may make it difficult for you to rearrange items later on.

(:cellnr:) Styles

to:
  • Keeping all summaries organized but separate will allow you to selectively rearrange your paper portfolio to fit your need (e.g., for a job interview), or reconstruct your web portfolio to portray your projects in different ways..
  • The simplest form sees it as separate summaries collected in some kind of binder or web site e.g., an accordion file or an artist's portfolio case, or a web site with a table of contents.

(:cellnr:) Style

Changed lines 56-61 from:

For each assignment, you will create both an electronic web summary (including code archive). You will also be asked to augment your summaries with other types of visual summaries, selected from the list below.

  • Paper. Each visual summary (screen snapshots, storyboards, etc) are pasted onto a high-quality mat or backing (e.g. poster cardboard). Poster sizes of at least 16"x20" will give you enough space to create an effective visual summary. Alternatively, you may want to create it as a flip-book of screen-shots showing how the interaction flows.
  • Packaging. The visual summary is created as packaging, e.g., a paper box that would contain your software and other materials.
  • Web. Many Web designers often create web-based portfolios of their work: these often include thumbnails of screens and accompanying descriptions. Clicking on the thumbnail often brings the viewer to the web site itself (or a full sized version of the page). While you can have web pages that do this, you must print them out and include them as a paper version in your physical portfolio.
  • Video. Creating a video of you(but maybr system is a very effective way of showing your work. Digital video is even better, because you can play it back on any computer. I have a camera that can do this, and may be able to get you some screen capture software that does this as well. If you do decide to try video, you will still need a paper or electronic summary to introduce what is in it.
  • Interactive multimedia. You can also create a project summary using a multimedia presentation tool e.g., Powerpoint or Flash.
to:

For each assignment, you will create an electronic web summary (including code archive).

  • Web. Many Web designers often create web-based portfolios of their work: these often include thumbnails of screens and accompanying descriptions. Clicking on the thumbnail often brings the viewer to the web site itself (or a full sized version of the page).
  • Video. Creating a digital video is a very effective way of showing your work. You can play it back on any computer, access it via the web, or load it on a public site such as youtube or vimeo. Most digital cameras now shoot video. As well, there are various software package that will capture your screen as a video (and will even let you add voice to it and annotate it).
  • Interactive multimedia. You can create a project summary using a multimedia presentation tool e.g., Powerpoint or Flash.
Changed line 63 from:
  • Stress visuals over text. A common error is to include overly long text descriptions.'-'
to:
  • Stress visuals over text. A common error is to include overly long text descriptions.
Changed line 66 from:
  • Prototype a few different approaches for each summary. Your first idea may not be your best one.
to:
  • Sketch and prototype a few different approaches for each summary. Your first idea may not be your best one.
Changed line 70 from:
  • If possible, print out your screens in color.
to:
  • If you print out your portfolio, do it in color and on high quality paper.
Changed line 74 from:
  • Make sure you can 'disassemble' your portfolio summaries or that you have archived electronic copies of images so that you can regenerate them on paper. In the future, you may want to recreate a portion of your portfolio, perhaps in a more expensive book or some other medium, only to find that you cannot unglue your images from the pages.
to:
  • Make sure you can 'disassemble' your portfolio summaries or that you have archived electronic copies of images so that you can regenerate them later. In the future, you may want to recreate your portfolio with a different look.
Changed lines 11-14 from:

The project learning portfolio captures the essence of your individual projects through a variety of media. As each project is completed, you will create a detailed portfolio documenting and archiving what you have done. It takes two forms, both done for every project. First, you will create a web site with a project portfolio entry: this web site includes a brief executive summary, then a visual summary of what you did (captured as annotated screen snapshots, simple animations and/or storyboards, slide show), downloadable executables so that others can try your system, and an archive of your source code. Second, you will use more traditional media to create an alternate visual summary. The chosen media varies per project, and covers a range including paper-based posters, booklets, commercial packaging (e.g., a box), and a short self-contained video. The goals of these two portfolio styles is to encourage you to create a stand-alone electronic presence of your work (through the web site), and to give you practice creating portfolio entries with alternate media that can be quickly shown to others. As a side effect, the project portfolios are an easy way for the course instructor to access and review each project after the demonstrations, where details can be explored.

The professional portfolio is created at the end of the term. Its intent is to be used as a living resume, where you can bring it to your job interviews and show potential employees and/or clients about the kinds of work you did as well as the scope of your many achievements. The emphasis is that these portfolios must serve as a conversational prop: you should be able to conveniently carry it to a job interview, where its contents are easy to show, browse and discuss as opportunities appear. Thus paper-based portfolios are encouraged, although I also suggest they include electronic medium (e.g., a CD) that they can quickly load into a computer if time and facilities allow for further elaboration and demonstration. These portfolios can come in quite different form factors, although the two main styles are booklets or modest-sized posters held in a portfolio case. I should note that the professional portfolio is rarely a rebundling of the learning portfolio entries: students create or remix entries to exploit the form factor and visual effect of their professional portfolio.

to:

The project learning portfolio captures the essence of your individual projects through a variety of media. As each project is completed, you will create a detailed portfolio documenting and archiving what you have done. It takes two forms, both done for every project.

  1. You will create a web site with a project portfolio entry: this web site includes a brief executive summary, then a visual summary of what you did (captured as annotated screen snapshots, simple animations and/or storyboards, slide show. video, etc.), downloadable executables so that others can try your system, and an archive of your source code.
  2. You will use more traditional media to create a physical visual summary. The chosen media can vary, but can cover a range including paper-based posters, booklets, a short self-contained video, etc.

The goals of these two portfolio styles is to encourage you to create a stand-alone electronic presence of your work (through the web site), and to give you practice creating portfolio entries with alternate media that can be quickly shown to others. As a side effect, the project portfolios are an easy way for the course instructor to access and review each project after the demonstrations, where details can be explored.

The professional portfolio is created at the end of the term. Its intent is to be used as a living resume, where you can bring it to your job interviews and show potential employees and/or clients about the kinds of work you did as well as the scope of your many achievements. The emphasis is that these portfolios must serve as a conversational prop: you should be able to conveniently carry it to a job interview, where its contents are easy to show, browse and discuss as opportunities appear. Thus both paper-based and electronic portfolios are encouraged *I also suggest they include electronic medium (e.g., a CD) that can be quickly load into a computer if time and facilities allow for further elaboration and demonstration). These portfolios can come in quite different form factors, although the two main styles are booklets or modest-sized posters held in a portfolio case. I should note that the professional portfolio is rarely a mere rebundling of the learning portfolio entries: students create or remix entries to exploit the form factor and visual effect of their professional portfolio.

Changed line 40 from:

(:cellnr:) Be organized

to:

(:cellnr:) Portfolio grading

Added lines 42-48:

Every project requires a learning portfolio entry. You will also create a professional portfolio at the end of the course. Portfolios and contents should impress me with both your vision and how well you have mastered the technical aspects of interaction design. Other grading aspects include:

  • completeness
  • quality (how well the portfolio captures your work and the techniques we have asked you to include in it);
  • professional appearance (including overall organization).
  • effectiveness of your code archive.

(:cellnr:) Be organized (:cell:)

Changed lines 62-76 from:

(:cellnr:) Portfolio grading (:cell:) Every project requires a learning portfolio entry. You will also create a professional portfolio at the end of the course. Portfolios and contents should impress me with both your vision and how well you have mastered the technical aspects of interaction design. Other grading aspects include:

  • completeness
  • quality (how well the portfolio captures your work and the techniques we have asked you to include in it);
  • professional appearance (including overall organization).
  • effectiveness of your code archive.

(:tableend:)

Strategies for portfolio summaries

Hint. Stress visuals over text. A common error is to include overly long text descriptions.
  • You have the freedom to be creative in your portfolio, as long as the project requirements are met.
to:

(:cellnr :) Strategies for portfolio summaries (:cell :)

  • Stress visuals over text. A common error is to include overly long text descriptions.'-'
  • You have the freedom to be creative in your portfolio, as long as the project requirements are met.
Changed lines 76-80 from:

Strategies for code archives

Hint. Test your archive by trying it on a different machine.
to:

(:cellnr :)Strategies for code archives (:cell :)

Added lines 82-83:
  • Test your archive by trying it on a different machine.

(:tableend :)

Changed lines 1-2 from:
Hint. Keep a printout of this page with your portfolio and refer to it periodically.
to:

(:title Your Portfolio :) back to CPSC 581
Keep a printout of this page with your portfolio and refer to it periodically

The portfolio is another ‘best practice’ found within design disciplines. A portfolio serves as a living resume, where designers use them to collect and illustrate their (usually completed) projects. Designers show portfolios to others both to highlight individual achievements, and – as a collection – to suggest the scope, breadth, depth and quality of the professional's design proficiency. Thus a good portfolio will summarize the professional's abilities, strengths and styles. Portfolios can vary greatly: they can be stand-alone artifacts for others to review, or can serve as a conversational prop where designers tell stories about the artifact to peers, employers, and clients.

Sadly, computer science students rarely create portfolios. Instead, they typically describe their ability to others through a skills-oriented resume format: the programming languages they know, the courses they have taken, and related employment history. This is somewhat surprising, for most computer science students – like designers – spend immense effort developing projects as part of their course work. In spite of these creative experiences, computer science students portray themselves to their potential employers as skill-oriented technicians rather than as people well-practiced in the art of invention.

To encourage you to capture your work in a way that you can present it to others, you are required to construct a portfolio as the course progresses. Two types of portfolios are required, as described below.

The project learning portfolio captures the essence of your individual projects through a variety of media. As each project is completed, you will create a detailed portfolio documenting and archiving what you have done. It takes two forms, both done for every project. First, you will create a web site with a project portfolio entry: this web site includes a brief executive summary, then a visual summary of what you did (captured as annotated screen snapshots, simple animations and/or storyboards, slide show), downloadable executables so that others can try your system, and an archive of your source code. Second, you will use more traditional media to create an alternate visual summary. The chosen media varies per project, and covers a range including paper-based posters, booklets, commercial packaging (e.g., a box), and a short self-contained video. The goals of these two portfolio styles is to encourage you to create a stand-alone electronic presence of your work (through the web site), and to give you practice creating portfolio entries with alternate media that can be quickly shown to others. As a side effect, the project portfolios are an easy way for the course instructor to access and review each project after the demonstrations, where details can be explored.

The professional portfolio is created at the end of the term. Its intent is to be used as a living resume, where you can bring it to your job interviews and show potential employees and/or clients about the kinds of work you did as well as the scope of your many achievements. The emphasis is that these portfolios must serve as a conversational prop: you should be able to conveniently carry it to a job interview, where its contents are easy to show, browse and discuss as opportunities appear. Thus paper-based portfolios are encouraged, although I also suggest they include electronic medium (e.g., a CD) that they can quickly load into a computer if time and facilities allow for further elaboration and demonstration. These portfolios can come in quite different form factors, although the two main styles are booklets or modest-sized posters held in a portfolio case. I should note that the professional portfolio is rarely a rebundling of the learning portfolio entries: students create or remix entries to exploit the form factor and visual effect of their professional portfolio.

In practice, I have found that students take great pride in their project and professional portfolios. Many are quite creative in building the portfolio web site, to the point that the web site itself demonstrates the student’s skills. Similarly, many pay considerable attention to their professional portfolios. They construct it out of high quality materials, and extend it to include projects outside the course. A variety of students described how they used the portfolios during actual job interviews, and how they believed it made the difference in setting them apart from other applicants.

I include a brief instruction manual for the portfolio below.

Deleted line 19:
February 06, 2007, at 11:32 AM by 136.159.7.242 -
Changed lines 51-52 from:


to:
February 06, 2007, at 11:31 AM by 136.159.7.242 -
Changed lines 48-74 from:

(:tableend:)

to:

(:tableend:)

Strategies for portfolio summaries

Hint. Stress visuals over text. A common error is to include overly long text descriptions.
  • You have the freedom to be creative in your portfolio, as long as the project requirements are met.
  • Carefully decide what parts of your exercise and project you want to use in your portfolio summary.
  • Prototype a few different approaches for each summary. Your first idea may not be your best one.
  • Label each summary with a descriptive title and its date of completion. You may include short explanatory annotations and paragraphs, but don't go overboard: this should be a visual summary rather than a textual one.
  • If you are using screen snapshots, make sure they are interesting ones i.e., the screen is populated with meaningful data, and the screens are in an interesting visual state.
  • Use storyboards to show how an interesting interaction sequence progresses over time.
  • If possible, print out your screens in color.
  • You can also include screen fragments to embellish your story. For example, a blow-up of a screen portion can show hard to see details (and can include annotations); a mini-storyboard of an interaction component can illustrate how a particular interaction technique works.
  • Emphasize any uses of novel interaction techniques.
  • Search the web (e.g., try the terms Interface Web Design Portfolio) for examples of how other people have created on-line portfolios.
  • Make sure you can 'disassemble' your portfolio summaries or that you have archived electronic copies of images so that you can regenerate them on paper. In the future, you may want to recreate a portion of your portfolio, perhaps in a more expensive book or some other medium, only to find that you cannot unglue your images from the pages.

Strategies for code archives

Hint. Test your archive by trying it on a different machine.
  • Create an archive of your software and any dependancies, including an executable version, and copy it onto a good medium e.g., a CD-R. The archive should include a README file saying exactly what the archive is and any instructions to use it.
  • Do not include absolute paths anywhere in your archive.
  • Keep electronic copies of all images and include it in your archive. You may want that image a year from now, and it is unlikely that you will be able to regenerate it because your software won't run!
  • The archive should also be organized into a well-named directory system e.g., the root may be "single display groupware: which in turn contains the subdirectories "source", "documentation", "screen snapshots", "executable".
February 06, 2007, at 11:29 AM by 136.159.7.242 -
Added lines 1-48:
Hint. Keep a printout of this page with your portfolio and refer to it periodically.

(:table border=1 cellspacing=0 :)

(:cellnr:) What is a portfolio? (:cell:) A portfolio is a representative or selective collection of one's work.

  • Design professionals (e.g., architects, industrial designers, artists) often create professional portfolios, and use these to illustrate their work to potential employers or clients. A portfolio is a living resume. They are an expected part of how professionals in many disciplines portray their achievements . A good professional design portfolio will contain visual samplings that collectively suggest the scope, breadth, depth and quality of the professional's design proficiency. It summarizes the professional's abilities, strengths and styles.
  • Some educational programs also have students create learning portfolios, where students document their work (sometimes over years). These portfolios are used by instructors to evaluate students, and by students to help them reflect on what they have learnt over that time.
  • Unlike sketchbooks, portfolios are neat, orderly and professional in appearance. You critically select and craft what goes into it. Because this is a design-oriented portfolio, its contents should be highly visual. Each visual summary should tell its own story with only modest labeling and textual descriptions.

(:cellnr:) Your portfolio (:cell:) You will create your own learning and professional portfolio

  • You will create your own learning portfolio to show your projects. You will document your developing abilities as an interaction designer by creating visual summaries of how you solved your exercises and assignments. As the course progresses, you will see what you have accomplished to date.
  • Near the end of the course, you can will use this learning portfolio to seed a demonstration professional portfolio. You can add to your professional portfolio samplings of any other relevant work you have done.
  • After the course, you can maintain and modify this portfolio into something that will help you present yourself to future employers.

(:cellnr:) Learning objectives (:cell:) Your portfolio will help you learn the following.

  • You will develop skills creating visual summaries of individual designs by using screen snapshots, story boards, videos, and other techniques.
  • You will demonstrate in these summaries how you have used particular interaction techniques.
  • You will learn how to effectively archive your code and supporting documents so you can easily install and demonstrate your system on any handy machine.
  • You will develop your skills in creating both a professional-looking learning and professional portfolio
  • You will use the portfolio as a personal reference summarizing your course accomplishments.

(:cellnr:) Be organized (:cell:) A professional portfolio can be packaged in many ways.

  • Keeping all summaries organized but separate will allow you to selectively rearrange your portfolio to fit your need (e.g., for a job interview).
  • The simplest form sees it as separate summaries collected in some kind of binder e.g., an accordion file or an artist's portfolio case. I recommend you buy an accordion file to hold and protect these.
  • You can also paste summaries into a large high-quality (but very good looking, maybe even hand made) scrapbook/ yet this may make it difficult for you to rearrange items later on.

(:cellnr:) Styles (:cell:) For each assignment, you will create both an electronic web summary (including code archive). You will also be asked to augment your summaries with other types of visual summaries, selected from the list below.

  • Paper. Each visual summary (screen snapshots, storyboards, etc) are pasted onto a high-quality mat or backing (e.g. poster cardboard). Poster sizes of at least 16"x20" will give you enough space to create an effective visual summary. Alternatively, you may want to create it as a flip-book of screen-shots showing how the interaction flows.
  • Packaging. The visual summary is created as packaging, e.g., a paper box that would contain your software and other materials.
  • Web. Many Web designers often create web-based portfolios of their work: these often include thumbnails of screens and accompanying descriptions. Clicking on the thumbnail often brings the viewer to the web site itself (or a full sized version of the page). While you can have web pages that do this, you must print them out and include them as a paper version in your physical portfolio.
  • Video. Creating a video of you(but maybr system is a very effective way of showing your work. Digital video is even better, because you can play it back on any computer. I have a camera that can do this, and may be able to get you some screen capture software that does this as well. If you do decide to try video, you will still need a paper or electronic summary to introduce what is in it.
  • Interactive multimedia. You can also create a project summary using a multimedia presentation tool e.g., Powerpoint or Flash.
  • Running software. Of course, you will be asked to include the system itself so that it demonstrates itself. The problem that I have found, however, is that it becomes less and less likely that your system will run as time goes on due to changes in operating systems and expectations of installed software. Thus you should see this as a way to supplement rather than replace one of the above methods.

(:cellnr:) Portfolio grading (:cell:) Every project requires a learning portfolio entry. You will also create a professional portfolio at the end of the course. Portfolios and contents should impress me with both your vision and how well you have mastered the technical aspects of interaction design. Other grading aspects include:

  • completeness
  • quality (how well the portfolio captures your work and the techniques we have asked you to include in it);
  • professional appearance (including overall organization).
  • effectiveness of your code archive.

(:tableend:)