Research websites (e.g. other institutions) and/or themes that provide a similar UX/UI to the presented brand refresh vision

[mmafe]

Research websites (e.g. other institutions) that provide a similar UX/UI to the presented brand refresh vision

Keeping track of Site Research + Functionality

[mmafe]

Full Background Images

Sites that use large hero images

• University of British Columbia: https://www.ubc.ca/about
• OCAD: http://www.ocadu.ca/
• University of Waterloo: https://uwaterloo.ca/
• Rijksmuseum: https://www.rijksmuseum.nl/en

Grids

Sites that use grids

• John Hopkins University: https://www.jhu.edu/
• Guelph Humber: https://www.guelphhumber.ca/
• University of British Columbia: https://www.ubc.ca/
• Wilfrid Laurier University: https://www.wlu.ca/programs/
• Rijksmuseum Explore: https://www.rijksmuseum.nl/en/rijksstudio

Note: the wlu grid page requires a lot of scrolling, so this may not be an ideal solution for listing pages

Video in Background

Sites that use large (repeating) videos in background

Note: some of these sites have a still image on the mobile view instead of the video

• John Hopkins University: https://www.jhu.edu/
• Digital Echidna: https://www.echidna.ca/
• Drexel University: http://www.getgoingtoday.org/beyond

Notes

• Video background usability best practices
• List of "inspirational" video background websites
• We'll need to let users stop the video easily (video background can be distracting)
• May need to be optional (ie. clients able to just have a static image instead of a video)

[ushenoyuog]

More sites with grids and videos

• Artcenter
• Wellesey effect
  • 125 stanford
  • Bucknell University Grid images with text overlay and links
  • Univ of Nebraska
  • Oberlin Grids with onhover

[nevantan]

Johns Hopkins

Just expanding on the site. Link: https://www.jhu.edu

The video background provides a fairly eye-catching feature while still making the important aspects easily accessible (Apply, Visit, etc.) as a handful of links on the right-hand side. It is actually fairly accessible:

• Fully keyboard accessible
• "Skip to main content" link hidden at the top
• The video has a text alternative in the lower left, referenced by an "aria-describedby" attribute
• The video plays through once and stops when it's done
• The mobile site uses a still image instead of a video
• They use Javascript to keep text alternatives in sync with the video, but fall back on a still image when Javascript is disabled

There is some good information on video backgrounds in this article: http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

[mmafe]

@ushenoyuog @nevantan These examples are fantastic! Since we have a good starting list of sites to look into technically, I'm going to move this issue to the Done pile for the sprint. We can still add ideas as we think of them here.

[mmafe]

Other things to think about

• which of these sites use Drupal?
• how would we accomplish sidebar menu?
• is it available in both Drupal and Wordpress?
• how would we handle the pause/play for the background video?
• what happens at the end of the video - does it repeat?
• look at some main UG areas (eg. Admissions) - how would we handle?
• the Parallax thing
• the full-width div
• minimal navigation - what do we do with all the other navigation (eg. for already established sites)?
• page load time

Next directions

• Consider picking a college
• Keep the homepage in mind
• Aim for a solution that solves both the college landing and the homepage

[mmafe]

From @chyatt: https://www.trentu.ca/ is another good example for you to refer to

[bdavey07]

http://hcaconsulting.ca/