Portfolio Production      Course Outline

1. Introduction & Overview of Principles in producing a digital portfolio

  • Planning
  • Collecting and Preparing
  • Production
  • Distributing/Marketing

- Presentation of assignments, workload and resources
- Discuss strategic approaches
- Review portfolios online

Path to Pixar - watch videos

Examples of Successful Flash & HTML5 Portfolios 

Flash Portfolios

HTML5 Portfolio Sites

Final Project discussed – To be delivered as Online Portfolio (using Flash, HTML5 or any online technology) & Print Portfolio.

2. Planning

Preparing Content for Digital Portfolio

Explore main ingredients of a successful portfolio:

  • Variety
  • Style
  • Technology and craft
  • Process
  • Concepts/ creativity

Begin collecting assets for Online Portfolio.

3. Collecting and Preparing featured art for portfolios


  1. Determine the criteria of your targeted employer (as found in Job Search)
  2. FIND or CREATE shots to accomodate those requirements
  3. Process the clips for editing
  4. apply appropriate (legal) audio track to fit your reel or none if that's what's asked.
  5. Include your contact info & credits at beginning and end of reel
  6. output your video file and make available online

Static & other Art:

  • Organizing your work
  • Digitizing Traditional Work
  • Repurposing and optimizing
  • Creating written content (for descriptions and labels)
  • *show examples of process in your content (voice over animations, slidewhow, video, etc.)
  • Highlight at least one achievement or success that would be included or referenced in your portfolio.

*Work on a Process component
These will ultimately be applied to both print & online components of your portfolio.


- Objective is to show a methodology leading to success (technical, educational, financial, etc.)
- Identify your biggest challenge and possible solutions
- Tell a story
- possible approaches could be storyboards, sophisticated page designs (eg. magazine style, etc.)

4. Design Looks & Feels + Information Design

  • Begin Design for interactive portfolio - Establish branding (fonts, colour schemes, metaphors, etc.)
  • Looks & feels (1 concept) Show Landing page and a category page.
  • Navigational Design (how information is distributed) - make a site map

Work on Designs for Online Portfolio

*Interviews with students to assess portfolio content (this may take a couple of classes).

Design Concept Assignment:

Site should include the following:
Reel, Gallery, Profile/Bio and Contact Info ( at the very least)
Hand in 1 printed design concept ( 2 pages, ie. Landing page and a Category page)

  1. Establish Screen size in pixels or ratio - for absolute sizes recommend smaller than 1024 x 768 to accomodate browser window
  2. Hand in 1 Design concept showing 1 Home page and 1 Display page (2 items in total)
  3. Designs must address functionality - Navigation, Button Names, Interactive features
  4. Designs must address Looks & Feels - Theme, Screen Layout, Colours, Textures (backgrounds)
  5. If you need to add notes on the sides with arrows to clarify an idea then do so
  6. Consider sound and add notes if necessary to describe sound features
  7. Include a schematic site map

FREE Website Builder
Everything Needed to Build your HTML5 Website

5. Interactive Design

  • Designing a portfolio interface with emphasis on navigation, functionality & branding
    • Designing effective interface to suit delivery method (mobile, web, etc.) and complement not compete with your work
    • Create digital templates
    • Allow for easy editing of content

Design concepts for digital portfolio due next class.
*Interviews with students to assess portfolio content (this may take a couple of classes).

6. Implementing Designs - Design Concepts Due (Hard copy) - 10%

  • finalize artwork
  • ensure your movie dimensions are suitable for browsers
  • consider pre-loaders
  • suggested to build site as modules if using Flash™(multiple Flash swf files loaded into main movie)
  • build and test Navigation
  • process all assets into proper formats ( animated elements, videos, graphics, etc.)
  • if you lack finished art or videos create placeholders
  • all sections should be completed (again placeholders for samples of work if necessary is the only exception)
  • file must be tested and functional

Work on Implementing final Design into working Web Component.

7.Finalizing Web portfolio Reels are Due for review

Assessment interviews with students.
Should be designing and prinitng artwork for print component now.

8. Print Component Requirements - Completed Reel Due - 25%

  1. Start with your strongest piece
  2. Include labels and description as part of each page in portfolio.
    • They want to know what you did on this image. Here's a shot of a Luxo lamp jumping over a ball. Did you model the lamp? Do the animation? Shade it? Light it? Render it? Write the story? Executive-produce it?
    • "Sleeping ball: (June 2003) Group project; I shaded the plastic sphere in Slim/Renderman" is a good entry.
    • "Group project; project used Maya, Slim, Renderman, and Perl" is less useful.
  3. Include Design Storyboards (if you have any)
  4. Include Storyboards of screen captures from finished videos or animations with descriptions
  5. Montages showing process
  6. testimonials (printed emails, letters, etc...
  7. newspaper or magazine clip pings of you or projects you worked on
  8. Graphically tie in your brand to your resume and include on the last page.

Work on Print & Digital Portfolio

9. Web Portfolio Due

- Web Potfolio Due Today (Hand in on CD or email link to live site) - 30%

10. Print Portfolio Due - Print Component Due – 20%
including - Process Component 10% and Branded Resume - 5%


Resource Links    Portfolio Highlight  - well designed Flash intro pg.74  - Portfolio Highlight – When 1 portfolio isn’t enough pg.66  -   Free portfolio site  pg.67, 196 - Portfolio Highlight – Collective of talents   pg.200  - Portfolio Highlight – slideshow as viable professional alternative  pg.205 - Portfolio Highlights – Navigation and architecture  pg. 249  - Portfolio Highlight – what you don’t see! Portfolio Highlight – Collective of talents  - Detailed copyright information and several useful contracts and agreements

©2013 Daniel Ouellette

Recommended Reading

Designing a Digital Portfolio
by Cynthia Baron

All page references
under Resources Links
refer to this book.

Purchase at

I have a copy you may borrow in class.


All Student Deliverables

  1. Completed Reel - Due class 8
    (or 3 web sites for web stream) - 25%
  2. Branded Resume - 5% - Due class 10
  3. Design Concepts with Site Map - 10% - Due class 6
  4. Process component (print + web) - 10% - Due class 10
  5. Print Portfolio - 20% - Due class 10
  6. Digital Portfolio - 30% - Due class 9
  7. Optional Slide show Exercises - Bonus 10%

All assignments late up to 7 days lose 50%.
After 7 days lose 100%.

Playing computer games during class time will not be tolerated.

FREE Website Builder
Everything Needed to Build your HTML5 Website


Optional Slide Show Tutorial - 10%

Build animated slideshow with sound
Download assets     Tutorial ActionScript 3

Convert footage into Flash video
 Download assets    tutorial

*You may recreate this with alternate technology.

Creating Slide show with Lightbox2
lightbox resources


Customized course for those wishing to focus on applying to Pixar Canada
speak to me if you wish to follow this stream

Download criteria

link to Pixar site

Path to Pixar - watch videos


Game Reels for Animators
What EA looks for in a Reel

EA Youtube Channel

EA Newsletter

Other Gamer Resources

Riot Games Careers