Trinity College Dublin Homepage

As Lead digital designer, I was given the responsibility of leading the new design through the entire process, from initial wireframing to the completed design you see here.

Through extensive research, we collated and analysed the key items for inclusion and their order of importance for both the colleges’ requirements and the expectations of its audiences.

  • Trinity College Dublin
  • Education
  • Product design
  • www.tcd.ie
Concepts

Armed with this data and with approval from senior Board, I mapped out a series of wireframes and flows for the page. When satisfied with the progress of the page, I produced a series of mid res mockups to help guide the direction and tease out any visual and priority issues that we came across.

From the outset, the homepage was designed and built in a modular mobile-first approach.

As this sits over several hundred individual websites within the collegeand the previous navigation systems were disjointed throughout the sites on the college network.

We set to work firstly on creating a unified navigation solution that could carry across all websites and the homepage became the sandbox to test and build this.

Timeless foundations

Moving on from the navigation we prioritised the key elements needed on the homepage and began work on designing these and building them as responsive and modular sections.

We looked at various colour options to complement the branding Trinity Blue and refined these down to a palette that evokes professionalism, integrity and classic timelessness. This was complemented by a selection of clear typography choices to help augment the college’s design aesthetic.

A new chapter

With the layout decided, I began work on applying the style and design vision into the individual modules. Handing finished designs over to the developers the page quickly began to take shape.

A rigorous set of testing checks were conducted across a range of devices to establish a consistent display and ensuring the site was compliant for both accessibility and responsiveness.