Back to Portfolio
Gallery Hover Effect


This project is to add extra details to the items on gallery page of my personal website. Currently there are bright, simple graphics for each project but there are no titles or any information about the projects available to the user.

User Requirements

For this project, initial research was done to determine what pieces of information are valuable to users when browsing the gallery. For example, do users want to know which projects are recent, or be able to tell whether a project is available on iOS or the web? Answers to those questions determine what content should be visible when the user hovers over each item. Interviews were conducted to answers those questions and find out what users expect to happen when browsing the website on a touch interface where hovering an item is not possible.

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

User 1

User 1 commented that while browsing portfolio galleries, they selected which item to look at next based on the information provided about it. Often this included the graphic associated with it but sometimes they would be looking for specific types of work such as 3D, motion or interface. They mentioned that some portfolio websites had a sort of caption or tagline to draw the user in, but that if the projects were on the smaller end of the scale, the taglines could come off as overselling the work. Finally User 1 stated that in general, they only looked at the newest work, going deeper only if they liked what they saw of the newer stuff.

User 2

User 2’s main priority when browsing portfolios of potential hires was recent work, and work that is related to the position they are hiring for. Without having to click in and out of each project, they wanted the ability to see which projects were relevant to them and skip the unrelated content.


Based on the research conducted in the previous section, a basic layout was created to address the needs of the users.

Gallery Hover Layout

This layout contains a simple left aligned title, along with information about the date and platform/type of the project. Shown above are layouts for the three aspect ratios found in the main gallery

High Fidelity Mockup

Gallery Hover Mock

In this mockup, both the key colour background and the key image have a black overlay with 75% opacity to reduce the contrast and darken them, leaving room for bright text to stand out on top. I thought that it was important to still show the key image to maintain context when the user hovers and to ensure the connection between the title and the image.

For the text, a variation on Rubik was used, Rubik Bold Italic. The rest of the website uses Rubik in various weights for headings and Karla for content so Rubik was an easy choice for consistency but the Italic variation is not used anywhere else on the site and provides a little extra flair to the information. The project title is set in white providing the greatest contrast, locking it in as the top most element in the visual hierarchy. The secondary information elements are set in the key colour, further increasing the project-colour relationship but also setting it against the faded key colour secures its place as the secondary element in the visual hierarchy.

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