Back to Portfolio
Project Page Navigation


This project aims to add additional navigation options to the user to streamline the experience of browsing the work. As it stands when the user is on a project page, in order to see any other projects, the user needs to back out to the gallery and select a new project. This could be simplified by giving users links to other potentially related projects directly on the existing project page. That way when the user is finished with any given project, they are only one click away from reading more

User Requirements

Research was conducted for this project by interviewing potential users about their navigation habits on the project pages of other portfolios in order to get a sense of their issues and needs.

See the User Appendix at the bottom of the page for background information on each user.

User 1

User 1 stated in the interview they don’t actually use this type of navigation much. Instead of project to project navigation they like to back out to the main gallery when they are finished with one project and select another. They liked to compare all the projects together in order to decide what to view next.

User 2

User 2 was interested in reverse chronological viewing of the projects from the most recent to the least recent. When screening potential candidates the importance of their projects diminished with time and being able to instantly jump to the next oldest project helped their

Neither user enjoyed scrolling back up to the top once they were finished reading about a specific project.


Based on the research conducted in the previous section a basic layout was created

Project Navigation Layout

The feedback from User 1 proved valuable in determining that some users do like navigating back out to the gallery and back in to a project. A Back to Gallery button was included for this reason. Above that are the older and newer projects adjacent to the current one in chronological order. This easily allows users to navigate the collection over time.

High Fidelity Mockup

From the low-fi layout that was mocked up above, a high fidelity mockup was designed:

Project Navigation Mock

The background for the two navigation buttons is pulled from the key color for the project (the same colour as the background on the gallery page) in order to strengthen the users familiarity with each project since the key image is not used here. Users of the site will build up associations of the project to the key colour through its ubiquitous use.

The fonts were an easy choice. The rest of the website uses Rubik in various weights for headings and Karla for content so Rubik Bold was chosen here for consistency. The project title text has a large 36 point size leaving plenty of space on the side for visual breathing room as well as potential compression for mobile layouts. The year text has a smaller 26 point size and only has a 70% opacity in order to deprioritize it and maintain visual hierarchy.

Finally, the return to gallery link uses a similar 36 point Rubik Bold but is positioned off of the “page” (the lighter centered rectangle that holds the content) in order to indicate that this link is separate from the project contents and is more of a “meta” link and relates to website navigation rather than a link in the content. This is further emphasized by the link not getting the key colour treatment that links in the page content get.

User Appendix

Since this website is primarily targeted at heavy users of similar products (users who look at other portfolio sites), two users were chosen who browse portfolio websites either for inspiration or as potential hires

User 1

  • 22 years old
  • Male
  • Graduate from York/Sheridan Graphic Design
Use of tech
  • Very tech savvy
  • Graphic design background
  • Heavy, mostly desktop web browsing
Use of the product
  • Looks at portfolios almost every day
  • Familiar with common portfolio elements and design patterns
  • Critical with a high attention to detail

User 2

  • 28 years old
  • Female
  • Background in marketing and digital media
  • Has reviewed resumes, websites and conducted interviews
Use of tech
  • Comptent computer user
  • Digital media background
  • Mostly desktop work related web use
  • Mostly mobile social related web use
Use of the product
  • Browses resumes and portfolios during times of hiring
  • Familiar with common portfolio elements and design patterns
  • An employers point of view