Creative Interaction

The beguiling allure of the siren

Interaction Design | Front End Programming | typography | UI/UX Design


Interaction Design | Front End Programming | typography | UI/UX Design


Overview
The beguiling Allure of the Siren is an interactive web experience where the myth of the siren is brought to life. The exploration focuses on how immersive effects through computer vision can be used to recreate the sensation of being lured by these mythical creatures through monochrome creative typography alone without using imagery as a challenge for my interaction design class.

Duration:

3 weeks, February 2025

Type:

Solo Project

Tools:

HTML | CSS | javascript | Figma | MediaPipe

Role:

Content

Live Project:

gglliiddeexx..ffrraammeerr..wweebbssiittee
Next Project
The beguiling Allure of the Siren is an interactive web experience where the myth of the siren is brought to life. The exploration focuses on how immersive effects through computer vision can be used to recreate the sensation of being lured by these mythical creatures through monochrome creative typography alone without using imagery as a challenge for my interaction design class.
Base image

Sienna

Web design

Branding

Framer development

Coming Soon
Coming Soon
Coming Soon
Coming Soon
Approach(04)

Creative
Approach

Every project is different, but the path to great work stays the same — a balance of research, clarity, creativity, and refinement.

Every project is different, but the path to great work stays the same — a balance of research, clarity, creativity, and refinement.

Minimal laptop with coffee
01/

Discovery & Insight

I start by understanding your world — your audience, your goals, and the challenges behind them.

01/

Discovery & Insight

I start by understanding your world — your audience, your goals, and the challenges behind them.

02/

Structure & Strategy

Uuser flows, content direction, and the overall framework. This is where ideas take shape.

02/

Structure & Strategy

Uuser flows, content direction, and the overall framework. This is where ideas take shape.

03/

Design & Build

I explore visuals and layouts that elevate your brand while staying aligned with your goals.

03/

Design & Build

I explore visuals and layouts that elevate your brand while staying aligned with your goals.

04/

Refine & Finalize

This final phase ensures your project feels cohesive, intuitive, and ready for real-world use.

04/

Refine & Finalize

This final phase ensures your project feels cohesive, intuitive, and ready for real-world use.

Awards & Recognitions

Awards That Define the Craft

Over the years, my work in development, design, and modern web development has been recognized for its clarity, creativity, and technical precision.

01/

Awwwards (3×)

Recognized on the Awwwards platform a milestone that celebrates both direction and technical execution.

01/

Awwwards (3×)

Recognized on the Awwwards platform a milestone that celebrates both direction and technical execution.

02/

CSSDA (9×)

Featured on CSS Design Awards with Best Innovation, Best Creativity, Best Animation, and multiple Developer Awards.

02/

CSSDA (9×)

Featured on CSS Design Awards with Best Innovation, Best Creativity, Best Animation, and multiple Developer Awards.

03/

Framer Gallery (8×)

I earned a spot in the Framer Gallery twice and received the Framer Expert Badge, showcasing high-quality execution.

03/

Framer Gallery (8×)

I earned a spot in the Framer Gallery twice and received the Framer Expert Badge, showcasing high-quality execution.

04/

Behance (3×)

Awarded across Behance with badges in Figma, Adobe Illustrator, UI/UX, and multiple case study features.

04/

Behance (3×)

Awarded across Behance with badges in Figma, Adobe Illustrator, UI/UX, and multiple case study features.

Next Project
Base image

Sienna

Web design

Branding

Framer development

Coming Soon
Coming Soon
Coming Soon
Coming Soon