rayman buttons

rayman buttons

For this 4-5 week project, I was tasked with designing buttons for a company/design system of my choice. I chose the Rayman game series because I felt as though the personality of the games was not reflected in the UI . My main goal was to craft buttons that were intentionally impractical yet retain usability and capture the style of UbiArt Framework.


Category

Case Studies

Year

2024

The slider features a draggable eyeball icon, while the toggle states transition between a "Play" (intact eyeball) and "Pause" (damaged eyeball) state. Hovering triggers a subtle twitch animation, adding character while maintaining clear user feedback.

The slider features a draggable eyeball icon, while the toggle states transition between a "Play" (intact eyeball) and "Pause" (damaged eyeball) state. Hovering triggers a subtle twitch animation, adding character while maintaining clear user feedback.

The slider features a draggable eyeball icon, while the toggle states transition between a "Play" (intact eyeball) and "Pause" (damaged eyeball) state. Hovering triggers a subtle twitch animation, adding character while maintaining clear user feedback.

Research

Research

Research

Research

The interface uses a wheel-based system where selected characters’ panels enlarge and shift to indicate activation. In its collapsed state, the toolbar shows minimal information.

The interface uses a wheel-based system where selected characters’ panels enlarge and shift to indicate activation. In its collapsed state, the toolbar shows minimal information.

Initially, a "3" appeared in the center of the collapsed state to indicate how many characters could be swapped. However, this raised confusion—why not have the number on all panels or above/below? And if the player unlocked more than three characters, where does that number go?? To maintain a cleaner interface, the "3" GOT SCRAPPED!

Initially, a "3" appeared in the center of the collapsed state to indicate how many characters could be swapped. However, this raised confusion—why not have the number on all panels or above/below? And if the player unlocked more than three characters, where does that number go?? To maintain a cleaner interface, the "3" GOT SCRAPPED!

Research

The interface uses a wheel-based system where selected characters’ panels enlarge and shift to indicate activation. In its collapsed state, the toolbar shows minimal information.

Initially, a "3" appeared in the center of the collapsed state to indicate how many characters could be swapped. However, this raised confusion—why not have the number on all panels or above/below? And if the player unlocked more than three characters, where does that number go?? To maintain a cleaner interface, the "3" GOT SCRAPPED!

YEAHHBUDYYY

YEAHHBUDYYY

YEAHHBUDYYY

YEAHHBUDYYY

PATRICK OKOLO ©2024

GO BACK TO TOP

PATRICK OKOLO ©2024

GO BACK TO TOP

PATRICK OKOLO ©2024

GO BACK TO TOP

PATRICK OKOLO ©2024

GO BACK TO TOP