Playing with brands and UI

Have you ever imagined SpongeBob as a button? Or Slinky Dog as a slider? Well, we did.

Our team of user interface and user experience designers (UI/UX) at Si digital, who work with interfaces daily, set themselves the challenge of imagining different characters dressed up as common interface elements found on websites. Internally we dubbed this as ‘Playing with UI’ and then we let our imaginations run wild!

All of the characters and their interactions were created with Figma, using the latest interactive components beta. They are all available to view as recorded videos (below) plus there are links to the external prototypes where you can click around and have a play for yourself.

We think brands can be more playful when it comes to UI; it’s a great opportunity to immerse fans in their favourite worlds and characters in creative– and sometimes surprising – ways.

If you would like to explore how you can bring your brand to life through creatve UI design, email me at [email protected].

Disclaimer: No brands were harmed in the making of this article. This is purely a bit of conceptual fun!

Navigate breadcrumbs with Pac-Man
Probably the most unhelpful navigational breadcrumb you’ll ever come across. Thanks Pac-Man. Interact with the PacMan prototype in Figma.

Back, Back to the Future
Oh that trusty back button that you always use in the browser. What if it took you ‘back to the future’? Interact with the Back, Back to the Future prototype in Figma.

Mario Coin Counter
Counters allow you to add quantities. What if when clicking the plus or minus boxes, you got those gold coins that Mario likes to collect. Hum the tune in your head whilst doing it! Interact with the Mario Coin Counter prototype in Figma.

Pay with Monopoly money
You can pay with card, PayPal and Apple Pay but what about Monopoly money? Seems legit. Interact with the Monopoly money prototype in Figma.

Loading Cube Spinner
They take an eternity to solve for mere mortals – like those loading spinners that never end. OSX beach ball anyone? Interact with the Loading Cube Spinner prototype in Figma.

SpongeBob SquareButton
It’s like he was made to be a button. A button has never been more fun. Interact with the SpongeBob SquareButton prototype in Figma.

Add to basket like Lebron in Space Jam
An essential for any Ecommerce website. Adding to basket, Space Jam – Dunk it like Lebron or go old school with MJ. Interact with the Add to basket like Lebron prototype in Figma.

Slinky Dog Slider
Slinky Dog is being put to good use here, becoming a slider – normally used to adjust a quantity. Interact with the Slinky Dog Slider prototype in Figma.

Transform that button
Transformers, buttons in disguise! Optimus Prime trying out a new look. Interact with the transforming button prototype in Figma.

Scroll bar-nana
Help Kevin scroll to his banana. Interact with Scroll bar-nana prototype in Figma.

That’s a wrap
Thanks for checking out our Playing with UI characters. If you’d like to chat to the Si digital team about this or anything UI/UX, please get in contact with the team at [email protected].