The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Hey everyone, this is my submission for the @Rive HMI Challenge 🚀
Excited to share my Vehicle HMI (Human-Machine Interface) design, focused on a Boat Dashboard UI built using @Rive.
This project explores a modern marine interface that combines real-time data, navigation insights, and smooth interactive animations to create a seamless user experience 🌊
The experience is designed as a clear flow:
connection → system sync → navigation → monitoring → alerts → control
The interface highlights key elements like speed, fuel, GPS tracking, weather conditions, and risk indicators — all structured to keep the information clear, minimal, and easy to understand.
A major focus of this project is how motion communicates system behaviour. Each animation reflects a state change, helping users instantly understand what’s happening in the system.
Built using State Machine, Data Binding, and Layout in Rive.
Would love to hear your thoughts 👇
Coooool😍
Looks damn good man!
Thanks bro! Glad you liked it 🔥
That marine dashboard layout is super clean — using motion to signal state changes instead of alerts is the right call for a cockpit UI
Appreciate that, Stephanie! 🙌 Motion felt like a natural fit for a cockpit UI — would love to hear how you approach state feedback in similar systems.
NAVIRUN HMI SYSTEM
A modern Boat Dashboard UI built with Rive for real-time navigation and smooth interactions.
🔗 Live Preview
Explore the full interactive experience here: https://navirun.framer.website/
Best viewed on desktop for the complete experience.
navirun.framer.website
Navirun HMI
Vehicle HMI — Boat Dashboard UI A modern Human-Machine Interface designed for real-time marine navigation, built using Rive.
really nice! would love to collaborate with you on something
Thank you for appreciating. I would love to get in touch.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Recently I’ve started prototyping my designs in Figma more than I have in the past.
I tended to avoid prototyping in the past due to it being time consuming and honestly most of the projects I was working on were simple enough to not require this amount of detail.
But as the projects I work on have become more complex I’ve found that this extra attention to detail really helps align with stakeholders and sell them on a design before starting development.
With a prototyped design clients are able to interact and see how the website will function, not just how it will look. This helps reduce uncertainty in the final deliverable and ultimately helps speed up Webflow development.
In the past describing all the hover interactions and click interactions for something even as simple as the slider below would require both time for me to explain and some imagination on the client’s part.
While imagination is great, it’s not the best way to align on fine details.
Anyways, long story short, new policy is show don’t tell.
Great interactions! Reminds me Framer sites (ahah sorry had to do it as a Framer dev :))
Check it out
Redesigned a German telemedicine app in 5 weeks. The biggest design decision was restraint. Healthcare needs to feel trustworthy, not trendy. The UI is intentionally understated because when someone is booking a doctor or uploading their ID, the last thing they need is a flashy interface competing for attention. Boring done well is accessible to everyone.
Nice!
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
