Portfolio Production & Job Search

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

Examples of Successful Portfolios online 

HTML5 Portfolio Sites

More great examples

2. Planning

Choose authoring technology

  • Dreamweaver
  • Wix
  • Wordpress
  • or any variety of available technologies

Explore main ingredients of a successful portfolio:

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

Begin collecting assets for Online Portfolio.

 2. Project Lead In

6 Steps to Create a Knockout Online Portfolio 

Choose a project you have created or are working on.

Contextualize the project with a short paragraph.

Add a title that makes sense and gives a hint of what this project is about. You want this to be quick reading — you need to be able to glance at it and understand what it’s about.

The title, a short paragraph, and first image should be engaging enough to make people want to look at the entire project.


3. Collecting and Preparing featured art for portfolios

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.


Reel requirements:(examples)
Lyp sync
Environment design

  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

*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

Site should include the following:
Career Objective, Gallery, Profile/Bio and Contact Info ( at the very least)

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

6. Implementing Designs

  • finalize artwork
  • 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)
  • site must be tested and functional

Work on Implementing final Design into working Web Component.

7.Finalizing Web portfolio - Apply and test on many browsers and platforms.

Assessment interviews with students.

8. General Requirements

  1. Start with your strongest piece
  2. Include labels and description as part of each slide in portfolio.
    • They want to know what you did on this image.
  3. Include Design Storyboards (if you have any)
  4. Montages showing process
  5. testimonials (printed emails, letters, etc...
  6. newspaper or magazine clippings of you or projects you worked on
  7. Graphically tie in your brand to your resume and include link on the site.


©2023 Daniel Ouellette

Tools to Build your HTML5 Website

WIX - FREE Website Builder

Adobe Portfolio Builder