Case Study

Overview

Class

Web 3: Animation and Dynamic Websites

Software Used

VSCode

Date

Fall 2023

About After Hours

For this project, I started with a basic timer app provided by our teacher and enhanced it with interactive elements and subtle animations. I aimed for a neon cyberpunk aesthetic, using vibrant colors.

Challenges

Micro-interactions

The interface must contain relevant animations/transitions throughout that highlight the interactions.

Consistency

The app’s design have a consistent style and visual language.

Custom properties

I have to apply a custom design to all the elements of the app’s interface.

Process

I started by researching the aesthetic I wanted to achieve, drawing inspiration from neon signs and cyberpunk cityscapes I found on Pinterest. My goal was to replicate the glow effect in my design. To do this, I layered multiple strokes with varying opacities to create depth.

The first version of the app didn’t fully capture the look I envisioned, but I successfully implemented a flicker animation on the title and on buttons when hovered. This added an interactive, dynamic element to the design, enhancing the overall cyberpunk feel.

I then discovered the box-shadow property, which allowed me to perfectly replicate the neon glow effect I was aiming for. I applied this technique in the second version of my design, which I created for my web improvement project in my Becoming 2 class.