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

Path to Pixar - watch videos

Examples of Successful Portfolios online 

HTML5 Portfolio Sites

More great examples

2. Planning

Choose authoring technology

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

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.

 2. Project Lead In

6 Steps to Create a Knockout Online Portfolio     5%

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.

Due Next week. Hand in on Blackboard.


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)
  • file must be tested and functional

Work on Implementing final Design into working Web Component.

7.Finalizing Web portfolio Aply 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.


©2017 Daniel Ouellette

Tools to Build your HTML5 Website

WIX - FREE Website Builder

Adobe Creative Cloud Portfolio Blog

Adobe Portfolio Builder


Muse Tutorials

1a. Muse - Intro to site plans, new pages and Navigation 
assignment_part 1    assignment_part 2    material

2a. Muse - Content creation and Publishing  
assignment_part 1
    assignment_part 2

3a. Muse - Creating PSD Buttons with States  
PSD Buttons
 Apply PSD Buttons in Muse 

4b. Muse - Add Youtube Videos, Google Maps & forms  

5c. Muse - Outputting to HTML 

6a. Muse - Developing for Mobile Devices  

7a. Muse - Menu for Mobile Devices  

8a. Muse - Blogs - RSS Feed 
Download RSS FEED Widget

How To Embed a Blog Feed in Muse

Video - How to add RSS Feed Widget

How To Add a Blog

Create a Blog in Wordpress

Wordpress Feeds

9a. Muse - Scroll Animation (Parallax Scrolling)  
(You need a account )
tutorial 1
tutorial 2 (

Download assets

10a. FTP to Loyalist Server using Muse - instructions
10b. Set-up Account & FTP on Dreamweaver   instructions 


Adobe Muse | Comprehensive Muse Tutorial - 1 hr
Getting started tutorial

Adobe Muse | Introducing Responsive Design  


All Student Deliverables

  1. Project Lead In- 5% Due class 2
  2. Produce Reel - 50% Due class 9
  3. Digital Portfolio - 30% - Due class 10
  4. Bonus - Muse Exercises - 10%