Provide a refreshed, responsive website to go correspond with a new visual identity for the university.
A component-based set of 6 page templates to cover the range of core content on the site, and allow the client to create further templates from a consistent, predefined visual language if necessary.
My role on this project sat across design and front-end development, putting me in the privileged position where I could help inform design decisions knowing what was achievable in code.
From early on in the rebranding process (also undertaken by Precedent) we discussed typeface choices, in which I was able to recommend that a typeface was chosen with web rendering in mind. This ensured that the visual identity being created would be consistent both online and off.
As part of the brand work, suggested homepage and content page designs were created, but the full suite of templates was yet to be defined.
I sat down with one of the team’s UX architects to discuss the content required for each, and we quickly realised that various types of content were being used in multiple places across the site.
Based on this, I decided to tackle the remaining design work in a component-based fashion, using Photoshop’s linked smart objects to design once, and place in multiple files.
I used this method to design the 4 remaining page templates and update the initial designs where changes had cropped up as a result of brand development.
In a similar way to the design, the development process was very modular. Each component needed to be defined for use in a series of locations across the site, keeping a consistent visual appearance but accommodating different types of content based on its context.
To do this, I approached the front-end development using Sass and a flexible grid system. This allowed me to define each component in a separate file to keep things easily maintainable, and to set up a series of media queries for each component to define specifically how it should behave in each context.
To ensure crisp, fast rendering on mobile devices without affecting page weight, the majority of the image assets on the site are set up as SVGs with PNG fallback images to accommodate older devices.