HONEY HIGHWAY

Honey Highway is a Concept UI project showcasing a Color Selection menu using my other 3D modeling project, Honey Highway3D.

Key Word - Game, UIUX

OVERVIEW

DURATION

TOOLS

3 Months

Blender, Figma, After Effect, Photoshop

UI Motion/Animation

▲ Final Motion Display

▲ First Test

▲ Motion Test 2 with Background Exploration

THE LOGO

The icon design draws inspiration from the distinctive features of the Honey Highway bee car, incorporating elements like the antenna-like detector, ball-shaped tail, grabbing arm, and side wings. The concept revolves around three main keywords: playful, futuristic, and distinctive. I faced a creative challenge when deciding on the head shape—whether to lean towards a traditional bee head or adapt it to resemble the actual vehicle's design.

ABILITIES

The Honey Highway continuously fires attacks at the enemy, reloading every 20 bullets. While each shot deals smaller damage, the sustained rate of fire ensures a constant stream of hits.

The push ability enables Honey Highway to generate a force that repels enemies and objects away from it. The attack pattern consists of two quick pushes, followed by a stronger push on the third attempt, and then another quick push. Each round of pushes has a cooldown time of 0.5 seconds.

The bomb ability is straightforward. It produces a balloon-like honey bomb and throws it at the enemy, creating a large, gooey explosion of honey that restricts enemy movement for 0.35 seconds. Each bomb has a cooldown time of 0.2 seconds between creations.

Behind the Style & Motion

1

2

3

Layout 1

Layout 2

Layout 1 is a relatively more conservative design, where I aim to explore additional elements in the background.

Although Layout 2 presents a more interesting sector division, I feel it reduces the space available for experimenting with additional design elements in the background to enhance the car's personality.

✦ Experimenting on Backgrounds ✦

The design aimed to create a clear contrast between the foreground and background. The foreground is cleaner and serves as the focus, while the background is more visually impactful, adding thematic identity to Honey Highway.

The concept I wanted to achieve was to incorporate the vibe of torn magazine collages into the UI motions, with a collage of visual components coming together to form the complete picture. The foreground UI is intentionally less packed to leave space for selection options.

However, the flaws are apparent.

(1) The background draws too much attention, detracting focus from the car.

(2) The page features inconsistent alignments and shape language.

(3) Thin text is further weakened by the overpowering background.

(4) The background disrupts the visual hierarchy, making the layout less clear.

(5) The background fails to add depth to the visual, instead making it appear flat.

✦ Experimenting on Backgrounds ✦

Major Changes:

Simplifying and removing excess elements from the background.
Refining the selection holder by adding edges to reinforce the idea of 3D screen panels.
Replacing thin fonts with more stylized ones.
Updating the control guide holders at the bottom with more asymmetrical designs.
Aligning tabs to the 3D panels to create consistency.
Making it apparent that the holders mimic AR screens.
Adding shadows behind the cars for added depth.

✦ Motion Design Inspiration ✦

When planning the UI motions for this project, I divided the process into two parts: creating the core motion design and adding thematic elements. For the core design and motions, I drew inspiration from a futuristic aesthetic to evoke the feel of virtual reality/3D panels. This concept is also reflected in how the UI elements appear, emerging as horizontal scan lines. Selections holders are presented in a way where the most prominent choice is displayed as the largest, framed by a slightly black and white border for emphasis.

Persona 5 main menu

Zenless Zone Zero Character Display

Inspired by the dynamic motion in Persona 5 and Zenless Zone Zero, I explored how angle shifts and character movements can enhance UI interactions. While both examples share a similar concept, they differ in presentation due to their focus on different numbers of targets. In Persona 5, the camera angle shifts to accommodate multiple characters in a scene, while in Zenless Zone Zero, it feels as though the character itself is moving and turning. This inspired me to create a similar effect, making vehicle customization a vibrant and engaging experience, rather than just a simple, static selection process. This approach enhances feedback and responsiveness, contributing to greater immersion.