Playing with UI

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.
Disclaimer: No brands were harmed in the making of Playing with UI. This is purely a bit of conceptual fun.
Probably the most unhelpful navigational breadcrumb you’ll ever come across. Thanks Pac-Man. Interact with the PacMan prototype in Figma.
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.
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.
You can pay with card, PayPal and Apple Pay but what about Monopoly money? Seems legit. Interact with the Monopoly money prototype in Figma.
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.
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 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.
Transformers, buttons in disguise! Optimus Prime trying out a new look. Interact with the transforming button prototype in Figma.
Help Kevin scroll to his banana. Interact with Scroll bar-nana prototype in Figma.
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.
We'd be happy to tell you more about the services we provide and how we can help you with your business challenges.
Get started
Plan your project