St George’s
Student’s Union
A fresh new site for tech savvy students.
🎓
Role — UI
Tools — Sketch, Principle
Agency — Personal client
BRIEF
To redesign the student union site and create new visual identity. With a small budget it was key to deliver a design system that developers could use to create further pages in the future.
My responsibilities — Branding · UI design · Design system · Dev delivery
Style
Designing a new brand identity in tandem with creating page layouts meant that fonts, photography treatment and UI elements were chosen to work in the digital environment. I aimed to set an on trend look to the site, with a dark feel and bold colours. Duo tone images were also created as a nod to the x-ray world of a medical university.
Design system
I created a basic design system that included fonts, colours, images, spacing, components and patterns. The intention of creating the system was that the developers could use this as their source of truth and foundation for creating further pages.
I use atomic design in my projects to create a well defined and cohesive library of atoms, molecules, organisms and templates.
The use of capital letters was chosen as it tied in nicely with the only fixed element of the project which was the logo.
Using Principle I created videos to show the developers my intention for interactions on key elements.
