← Back

04 · The sun as an interaction

IDP Meridian

A landing page concept for IDP Meridian, an education concept built around the meridian: the point where the sun reaches its highest position. The sun became the central interactive element.

Context
Internship at Because · concept pitch
Focus
Concept · Visual composition · UI/UX · Interaction · AI-assisted web design
IDP Meridian concept with the bird holding the sun above a podium, surrounded by clouds and greenery.
IDP Meridian: the sun as an interaction
Sun conceptFinal website

Concept

I developed a hero interaction where the bird from the Meridian identity holds the sun above a podium. As the cursor moves, the sun follows it, shifting the direction and intensity of the shadows across the composition. When the cursor leaves, the sun returns to the bird's hand.

Iterations

Iteration 01

First Meridian composition with the bird partly outside the frame.

Why it was revised: the bird was not supposed to be cut off. The next version gives the complete character space within the scene and makes the sun the focal interaction.

Iteration 02

Second Meridian composition with the complete bird and interactive sun.

Sun positions within the interaction

The bird holding the sun above a podium.The sun following the cursor to another position.

Building the visual

Individual elements were composed in Photoshop to set the visual direction before being translated into the interactive site. As a concept pitch, its content and UI were still exploratory.

  1. 01

    Scene composition

    Bird, pedestal, sun, clouds, branches and bushes were assembled in Photoshop before moving into the interactive website.

  2. 02

    Supporting character assets

    Reading, flying, resting and achievement scenes extended the same sun-and-shadow language.

Visual assets

Meridian bird, sun, clouds and supporting character illustrations.

Responding to constraints

The original concept was considered too elaborate for the project’s scope. Following the team’s feedback, I simplified the direction while retaining movement and brand identity.

Logo animation

The final direction centres on the animated IDP Meridian identity, paired with a school introduction, campus information and admissions enquiry. The mark builds from basic shapes, adds colour and resolves into the complete logo before revealing the landing page.

Key learning

A strong concept also has to respond to scope and client expectations. I learned to develop ambitious interactive ideas, communicate them through prototypes, and adjust the complexity when the project needed a different direction.