Portfolio Concepts


Kitchen Sink Studios

Creative + Collaborative + Design Consultancy 

Why it works:

  • Navigation through projects is easy. Each page is limited to 4 projects which allows the viewer to look closer at each one as opposed to one massive page of all the projects. 
  • Clicking on a project brings the viewer to a scrolling gallery of images. The only text is the brand name and type of project so the images are the dominating force
  • Websites are shown in the context of a computer screen which allows the viewer to see the project in action
  • A button labeled "return to project list" makes it easy to go back and forth between projects

Cast Iron Design

Environmentally Responsible Design Studio

Why it works:

  • The list of projects are arranged in a vertical scroll 
  • Clicking on a project pulls down the description so navigation through projects is fast and easy
  • The brand's colors are used in the text colors
  • Information that is not included in the case study but that is interesting/relevant is show at the bottom of the page, rotating through a moving gallery which is framed by an iPad

 


Deux Huit Huit

Web & Design Agency

Why it works:

  • Projects on the portfolio home page are not horizontally lined up. They are arranged similar to a Pinterest board and the columns move out of alignment as the viewer scrolls down
  • Scrolling over an image reveals what type of work was done 
  • The project description includes a "details" section and a box that reads "visit the website" where you can see the work yourself

Juicebox

Branding & Marketing

Why it works:

  • Project home page is a seamless grid of images. Scrolling over an image reveals the name of the brand.
  • Project description includes a quick overview with a boxed link to the brand's website. Under this is then a collage of images of the work

Planet Propaganda

Design + Advertising + Digital

Why it works:

  • Bold colors pop against white and black details
  • Project directory is simple - a lot of negative space ensures lack of clutter & white logos against black backgrounds are easy to read
  • Scrolling over a logo pulls up a black and white sample image of the project
  • Clicking on a logo takes you to a quick overview of the project and a button that reads "view the work" which takes you to a horizontally scrolling gallery of the work

 


Playground Inc.

Digital Creative Agency

Why it works:

  • There is a clear division between each aspect of the project's process. Descriptions are simple and easy to read/understand.
  • Case study include a section on the team that worked on it with their photos, putting faces to the work

The Neighbourhood

Creative Communications Agency

Why it works:

  • The site opens to a "featured projects" section, directing the viewer immediately to their best work and then to the rest of their projects.  
  • Clicking on a project takes you to a large image with the brand name over it which is simple, clean, and easy to read. An arrow at the bottom takes the viewer to the case study. 
  • The background colors of each case study differs depending on the brand's color and style. 
  • There's a diverse mix of text, still images, videos, animations, etc.
  • At the bottom of each case study there is a "related projects" section which takes you directly to more of their work

Super Awesome

Website Makers

Why it works:

  • Text in the project description is simple and easy to read. The project title is in a creative font which works to contrast against the simple text below.
  • The most important things about the project are highlighted in a box with bigger text, guiding the viewer to what should be emphasized. This is especially useful if the viewer is quickly scrolling through and only picks up a couple of things.
  • Reasons why they are a good hire are scattered within the portfolio (i.e. "we're small", "no middle man", "we deliver") - a sneaky way to quietly advertise

Duotone

Creative Production House

Why it works:

  • Portfolio home page is an array of eye-pleasing photos, though maybe a little too tumblr-esque
  • Clicking on a project pulls the home page open like a curtain to make room for the project description in the middle
  • Project descriptions incorporate both collections of images and individual images, depending on what is most fitting for the type of project
  • Simple, short, to the point blurb - images are strong enough to do most of the communicating

 


Trokit

Creative Agency 

Why it works:

  • "Filter" option allows viewer to select type of project they want to view, guiding a potential client directly to the type of work they are looking for.
  • A slideshow of work opens above the gallery of projects. This makes it easy to go through all of the images and quickly move on to another project.

Social Forces

Digital Advertising Agency

Why it works:

  • Not aesthetically pleasing but has some good formatting ideas such as including a selection of their favorite projects which highlights their best work. There is also an option to like the projects. Clicking on the project pulls up a large, single photo that is most important to the project and therefore most emphasized. Under this are some smaller images of the project.

Will Do

Design and Development Studio

Why it works:

  • Portfolio home page is a mix of logos and product examples
  • Cohesive colors
  • Includes a link to awards won
  • Clicking on a project pulls up a tab of the work which is easily closed so can switch through projects quickly (don't have to use back button)

 


Workstead

Design Studio

Why it works:

  • Description comes up over the image so you can see everything all at once
  • Must click on the "description" button to pull down the description - viewer chooses if they want to look at the photo with or without the project description

BOOREILAND

Strategic Interaction Design Studio

Why it works:

  • Bold colors/images are eye-catching
  • Easy to navigate projects on side tab

Strange Planet

Digital Creative Agency

Why it works:

  • The description of the project and basic information, such as clients, are displayed side by side which shortens the page length and is easy to take in all at once
  • Project images are arranged in a collage format
  • Includes photos of the product in real life context

SUPER TOP SECRET

Advertising Agency

Why it works:

  • Text colors are consistent with the agencies colors (black, white, gold)
  • Case studies are divided into labeled sections emphasizing that the work is a process
  • Each case study concludes with a "results" section, explaining how many people were on the team, how many hours were spent, and the eventual awards won/articles written.
  • Scrolling down further brings viewer to other case studies they might be interested in viewing 

BLK Box Labs

Creative & Branding Agency

Why it works:

  • The copy is intriguing and interesting and brings in the personality of the brand which then communicates the creative personality/ability of the agency behind it
  • The fonts for each brand differs on the project home page but they are united by the consistent white text 
  • Filmstrip at the bottom of the page has extra, creatively-taken, photos of the project in real life context

Talk PR

Global Communications Agency

Why it works:

  • Project description is short and sweet. It opens to a large photo relevant to the brand. It then has a large-text sentence that functions as an overview of the project worked on, followed by a few paragraphs of the work done, a gallery of images, and sometimes a video. The top bar remains at the top on the page while you scroll.

Anchour

Branding, Design & Web Development

Why it works:

  • On the project home page, each project is represented by a photo. The photo has a color filter on top of it, allowing the creator of the site to control the cohesiveness of the site's colors. On top of this is the brand's logo. Scrolling over the photo pulls up the full name of the brand.
  • Each project starts with a large image that exemplifies the work and is followed shortly by a list of services/type of work provided for that specific project.
  • The work is laid out in a collage style and labeled by the type of work done, which also works to separate the different images since there is no space between them. Clicking on an image pulls up a larger version of it that fills the screen.
  • At the bottom of each project is a link that reads "want to work with us? get started!" that then directs the viewer/potential client directly to their contact page

Vertical Loop

Digital Design Studio

Why it works:

  • Project description begins immediately with an eye-pleasing arrangement of images - brand name and motto, color palette used, and examples of brand logos
  • The background is mostly white/neutral which allows the color pallet to be emphasized and not have to fight other colors
  • There are photos of the products in context including an image of the website pulled up on an iPad that is placed into a work setting