What To Put In An Online Portfolio

What To Put In An Online Portfolio

By: Melissa Chungfat | SIAT & CMPT Co-op Student Advisor
  5321 reads

An online portfolio is a visual representation of your abilities, personality and style. Why not show what you can do instead of talking about it?

Even if having a portfolio isn’t a requirement in your current field of study, it will definitely help make you stand out. I had a Computing Science student ask me if they could bring a portfolio to an interview to demonstrate their projects and code. Of course I said, "Go for it!"

For Co-op students in the School of Interactive Arts and Technology, having an online portfolio is a required piece for Co-op job applications. Some employers go directly to a student’s portfolio first before even glancing at their resume.

No matter what department you are in, we have received valuable advice from employers and Co-op students on the important elements of a portfolio.

Why make a portfolio if you have a resume?

A portfolio reflects your personality, style and any other attributes that would be valuable to an employer.  Ask yourself what your portfolio’s purpose is. Are you looking to secure a Co-op job? Get more freelance work? Find a job after graduation? The answers will guide the look, feel and content of your online portfolio. See Stanley Lai’s introduction on his portfolio.

Remember, just like a resume, everything in design is a conscious choice. There has to be a reason why you choose to put graphics, order your content a certain way, and the colours you choose. No choice is neutral. The portfolio should be able to stand alone without a resume and have enough detail and visual elements to reflect your personality, inspirations, style and skills.

Make it user-friendly

Employers often want to see what types of work you’ve done. You can make it easier for them by categorizing your work under major headings such as Print, Web Design, Videos and so on. If you simply put “School Projects,” the user has to click and read more to find the related projects. Make it easy for the user to find the types of work you’ve done. See Jeffrey Qua’s portfolio sections as an example.

Make sure you break up your paragraphs so the reader doesn’t have to go through big chunks of text. Also ensure that the content is easy to read by having an appropriate font size and background colour that doesn’t strain the eyes. I’ve seen a few first portfolio drafts where words faded with the background colour, which made the words harder to read.

It’s important to structure your portfolio in a way that is easy to navigate and has all of the information on a page for each project. Test your site with your friends and family who have never seen it and ask them if they can find all the information without having to scroll down or click in a hidden place to find the related information.

Tell your story

We could easily spend an entire session on getting students to tell us why they love design, teaching, software development and so on. Everyone has a unique story and this often gets left out in job applications.

Many students think that talking about their motivations and inspirations may be “unprofessional.”  Actually, it’s your authentic drive that will set you apart from other students who look very similar on paper since many students list the same school projects and technical skills. Tell your story, what your strengths are, your philosophy and anything that reflects your drive and personality.

Justin Lim’s portfolio, for example, discusses his design approach and his views on what good design is. He says, “I approach my design with simplicity and honesty. There are no secrets, just a detailed understanding of the problem, purpose and people.”

Got skills? Tell the readers what they are

One employer advised one of our Co-op students to add a Skills section on their portfolio site. This page will demonstrate not only your technical skills but also your ability to work with people, social skills and leadership potential. See Ryan Budd’s portfolio as an example.

This section can also include related concepts you are learning that would be valuable to an employer such as design drawing and user testing. This kind of information helps your portfolio fully reflect your abilities and knowledge.  

Which projects to put in?

Choose your best work. You don’t need to post 20 projects to show all of the projects you’ve done. Like your resume and cover letter, you want to choose your best and most related work.  Co-op students recommend fixing any kinks that you didn’t have time to complete if you are putting up a related school project.

Provide context for your projects

Employers want to be able to see a clear breakdown and detail of the:

  1. Background: Like the resume and cover letters, remember to give detailed and meaningful background information to put your projects and skills in context. For example, don’t simply give the title of a project such as “NaviFinder.” This won’t make sense to the reader. The background should explain what the project is and what you attempted to do. Instead of “NaviFinder,” you can write “iPhone Application developed to navigate shops in Granville Island.”
  2. Role(s): Outline what role(s) you took within a project.
  3. Programs used: If it’s related, you can mention if you used Illustrator, Adobe Premiere and so on.
  4. Outcomes: How did your work help a client? How did you make life easier for your department?  What challenges did you overcome? What skills did you develop? These are all answers that you could include in your outcome.  

For example you could say, “I used Illustrator for the first time during this project and since then I have grown to love the program,” or “I became proficient in C++ and Java after completing these projects.”

If it’s related to the job, you can display wireframes and have demo reels to show your process and demonstrate your work.

Additional Work

You can also include a section on projects or work you do that relate to your field if it reflects your interests, passion and personality. Students often ask me if it’s ok to include their photography work in their portfolio. If the page reflects their artistic side and their passion for visual communication, then why not? 

Like resumes and cover letters, the portfolio should be ordered by related work. So you can have an introductory section about yourself, related work and any additional content that reflects related attributes.

Co-op Student Portfolios

Here are some good examples of student portfolios:

Websites to Create Portfolios

These are a few suggested websites that students have used to create portfolios. If you want more resources that continuously get updated, feel free to contact me at melissa_chungfat@sfu.ca.

Portfolio sites for people who are not strongly technology oriented:

Portfolio site that is good for 3D design, motion pictures:

Portfolio sites for people who know a bit of web coding:

Posted on March 21, 2012