DURHAM COLLEGE IMD WEBSITE
A collaborative one-page website designed to showcase the Interactive Media Design program at Durham College through engaging visuals, motion, and clear information hierarchy.
Challenge
How can we design a one-page website that effectively communicates the Interactive Media Design program at Durham College while keeping users engaged through motion, clarity, and strong visual storytelling?
Overview
This collaborative project involved designing and developing a one-page website to promote Durham College’s Interactive Media Design program. Working as a team of five, we focused on creating a visually engaging and informative experience that highlights the program’s structure, opportunities, and creative focus. The final design balances motion, layout, and content to guide users through the page in a clear and engaging way.
Role
I contributed to both the development and motion design of the website. My primary focus was implementing GSAP animations to enhance user interaction and flow, while also collaborating on front-end development to ensure a cohesive and polished final product.
Research & Process
Our process began with researching university and college websites that promote specific programs. This helped us understand how information is structured, how content is prioritized, and how visual design can support clarity and engagement. From there, we developed layout concepts, content hierarchy, and interaction ideas as a team. Iteration focused on refining the balance between motion and usability, ensuring that animations enhanced the experience without overwhelming the content. The final result is a streamlined, visually engaging one-page website that communicates the program effectively.
Website Experience
Introduction & Navigation
The landing section introduces the Interactive Media Design program through bold typography and clear navigation cues. Content is structured to immediately communicate the program’s identity while guiding users naturally down the page.
Program Overview
This section outlines key aspects of the program, including skills, tools, and learning outcomes. Information is broken into digestible sections, allowing users to quickly understand what the program offers while maintaining visual clarity.
Student Experience
The student experience section highlights hands-on learning and creative opportunities within the program. Visuals and layout work together to create an engaging narrative that reflects the dynamic nature of interactive media.
Motion & Interaction
Motion design plays a key role in enhancing the user experience. GSAP animations are used to guide attention, create smooth transitions, and add a layer of interactivity that makes the website feel dynamic and engaging without compromising usability.