This is the site for my year’s graduate degree show, a project on which I think it’s fair to say I was the lead web designer/coder. With help from my classmate Will Bovill, I organised, designed and created this portfolio site incorporating the work of over 70 students. Liaising with the show’s branding team (also made up of students) to ensure a consistent look and feel, we implemented the show’s central theme – Equals – in several ways, involving numerous web skills.
The main feature of the site is the parallax-scroll on the index page – a huge challenge that was effectively my first introduction to javascript/jquery. Learning as I went along, and with much trial and error, I was able to implement the two columns of text, which scroll in opposite directions, move in fixed increments, and match up each time to create different messages. I was further able to do this in a way that is functional regardless of screen resolution.
Device and resolution equality was a big consideration of mine during this project. While I wasn’t able to create a fully responsive site due to limitations of time and required features, the index page is responsive to different screen resolutions, and a mobile index page was provided to maintain the user experience for touch-screen devices, on which the parallax-scroll doesn’t work. While the rest of the site had to function on a fixed-width, this was extensively tested on mobiles and tablets, and judged an acceptable compromise. The site was far from perfectly responsive, but I believe it was a step up from the previous degree show sites, which had little or no consideration of mobile users.
The gallery page was designed with no compromises in mind – even though it had to show up to 70 students, we weren’t interested in tiny thumbnails that showed nothing of the work. The result is a page full of colourful and varied projects. However, this makes the page longer than ideal, and with a theme like ‘equals’ we couldn’t justify having only the first few in the alphabet left above the fold. To address this, I coded a script which randomises the order of the images every time the page is visited. While this may make it slightly harder to find a particular individual, it makes sure that every student has an equal chance of being seen.
Each student’s individual page has up to 5 images of their work, which can include videos, along with a description, and their contact email and website link. Each student was given free choice over what went on their page.
More Images:
