IAT-102: 09 Portfolioing

IAT-102: 09 Portfolioing — A slide deck


Lecture outline

In this week's lecture

  • What is a portfolio?
  • Portfolio design considerations
  • Process analysis

Lecture slides will be available the morning of the lecture.

Close All Laptops Please

Only the back row may use laptops during lecture.

An ad for gamers featuring controller buttons
Who is this ad for? and why?
A Mother's Day sale ad covered in hearts
Who is this ad for? and why?
An ad for McCafe with a pink macaroon
Who is this ad for? and why?


Maurice Yu's Portfolio
P05: Portfolio Project

P05 Components

  • Audience: The reader and evaluator of the portfolio. This is the primary component which all the others are based on.
  • Argument: This is the overall message you want to convey to your Audience.
  • Form: This is the used to convey your message to your Audience.
  • Professional: This is the experience you create for your Audience.
The IAT-102 portfolio audiences; lay, disciplinary, professional, and instructors
Our audiences

Why Should I Care?

Industry and learning

Portfolios are all about reflective practice, and learning well involves self-reflection.

Portfolios Help

Things they help with:

  • Understand our process and skills
  • Reflect on abilities
  • Evaluate ourselves
  • Develop a professional ethos
A storyboard for an application design process
Help yourself and others understand how you came up with the solutions.

Reflect on Our Abilities

A portfolio will have us look back at old work and reflect on it.

My 2003 portfolio website
My 2015 portfolio website

Evaluate Ourselves

Process analysis:

  1. Describe the project
  2. Analyze and explain the project
  3. Identify problem(s) and resolution(s)
  4. Evaluate the effectiveness
The IAT-102 critical thinking primer document

Step 1: Describe

  • How would you describe and explain P02?

Step 2: Analyze

  • How would you describe and explain P02?
  • What might be some 'problems' encountered?

Step 3: Evaluate

  • How would you describe and explain P02?
  • What might be some 'problems' encountered?
  • What did you learn?
The IAT-102 portfolio audiences; lay, disciplinary, professional, and instructors
Our audiences

Get to the Point

As much as I might want to, I don't have time to read through everyone's portfolio in depth. Be concise, get to the point fast.
A Facebook Recruiter

Developing an Ethos

A design ethos is the understanding, characteristics and definition of oneself as a designer.

Defining a Designer

Please write, sketch, or note what you would say 'defines' you as a designer. You have 4 minutes.

Defining a Designer Visually

Please sketch out what could visually represent your 'definitions' of you as a designer. You have 4 minutes.


An artifact is any documentation produced during a project.


If you don't yet, it is a good idea to start archiving your work.

An example of an archive of work

Keep Everything

The key to having a portfolio is having materials to reflect on. Keep everything and anything process-wise.

Curate Your Work

Ask yourself: What does this work showcase?


Test, rinse, repeat. You should reflect and curate your work on occassion.

P05 Website Content

The portfolio must include:

  1. A brief bio detailing your design ethos.
  2. A detailed project view including a design thinking process analysis.

Web Basics

As we are moving your portfolios to a web-space, there are a couple of things to be conscious of the web as a medium:

  1. It is an interactive medium.
  2. We are building structures of information.
  3. The rules of digital display apply.

Web Interactivity

Some basics

This is a link, but how do we know that?

Here is a series of content that is a bit on the long side. If it appears we can scroll, we will scroll. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.

Structures of information

There are two layers we should think of this structure at:

  1. Within-page: What is a logical layout/composition of a page to convey the given information?
  2. Between-pages: What are logical connections/relationships between pages to clarify how they relate?

Sketching Within-page Structures

Let's sketch.

Sketching Between-page Structures

Let's sketch.

Digital Display Rules Apply

A reminder that because we are now dealing with digital display of information, we are working with an RGB colour model as well as predominantly pixel-based structures.

P05 What Do They Want?

How employers approach applications

How employers approach your application:

  1. Skimming the cover letter (5s): Well written and custom?
  2. Look at the resume (10s): Well designed, clear branding, good typsetting?
  3. Read the resume (20s): Have skills and experience relating to job?
  4. Look at web portfolio (30-60s): Want custom URL, non-templatey website

Care of "Burn Your Portfolio"

An Extreme Example

Let's take a look at The Worst Portfolio Ever.

Portfolio Faux Pas

Errors to avoid committing

  • Skillset uninfographics
  • Not showcasing your work
  • The work speaks for itself
  • My role is so clear, it needs no mentioning
  • Obscure vs obvious

Skillset Uninfographics

The ones that don't pay the bills

Composition (90%)
Illustrator (82%)
Web (78%)
Breakfast (62%)
Adobe CC (50%)

Show and Tell

Find projects that are rich in media, suitable for your audience, and then actually show us the work.

Showcasing Your Work

Help us understand why it is good

Ensure your project overviews cover:

  • What is the project?
  • What was the context?
  • Who was involved, and what did you do?
  • Show us your process
  • Tell us why it matters (i.e. what did you learn or accomplish)

The Work Never Speaks for Itself

What does this one say?

A photo from the Dark Room dance performanceA photo from the Dark Room dance performance
A photo from the Dark Room dance performanceA photo from the Dark Room dance performance
A photo from the Dark Room dance performance

'Ethos' Components

These should be fonts, colours, forms, and imagery that can help define you as a designer.

Sketching Websites

Remember that we are now dealing with an interactive medium. No longer are elements purely static.

Critical Thinking Primer

Meant to help you write and structure your process analysis.

The IAT-102 critical thinking primer

Iteration, Iteration, Iteration

We are working on the same materials quite repeatedly for the next four weeks. This is on purpose.

Next week: Branding Me, Myself and I

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Mondays from 8:30-9:30am and Thursdays from 8:30-9:30am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna