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.
If you’ve got an idea for another character based UI element – tweet us. If we receive enough of your great ideas, we will look to release a follow up post with the best contributions.
Disclaimer: No brands were harmed in the making of Playing with UI. 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.
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.
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 using the form below.
Leave your details for a callback
We'd be happy to tell you more about the services we provide and how we can help you with your business challenges.
Plan your project