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
Arcade Pixel: an experience-bar seek and a brass-horn volume meter
Crisp 8-bit UI for an indie game studio's trailer page: purple pixel tiles on a plain navy band, an orange experience bar for the seek with its knob hanging below, a meter of brass horns for the volume, and a PRESS START center play. The tiles, the bar, the knob, and the horns share one pixel grid; the bars are stock Video.js sliders underneath, the controls and PRESS START move in stepped frames instead of easing, and captions stay in a plain face instead of the pixel font.
Try it: https://videojs-skins-test.pages.dev/b07-arcade-pixel/
Video hosted on Mux, public playback ID: 8yxCaRsijLJsebpsqnXtVq5FlLVtt5W8RIpaKgzUlJQ
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
Good UI animation is not about making every element move.
It is about showing the viewer where to look first.
One clear action, one visual priority and enough time to understand what happened.
When everything moves at once, the interface becomes harder to follow.
The best motion usually feels almost invisible — it simply makes the product easier to understand.
Amazing work!
Deep Focus is a fictional macOS app that silences notifications so people can do deep work. The catch is the audience: people who need a productivity app are already tired of apps. Every competitor promises more features, so this page had to promise relief and turn it into a download within seconds.
What I did
I started from the pain, not the product. The second screen lists what a normal day looks like: push notifications, endless pings, 142 unread emails, context switching. I styled those chips like the four benefit chips in the hero, only white instead of frosted, so the visitor reads before and after without a line of explanation.
The hero section design shows no interface on purpose. This product is about absence, and a screenshot would add noise, so a person alone in a field does the proving. The headline “Deep focus. Anywhere.” is a high-contrast serif because every tool in this category speaks in a grotesque, and a serif sounds calm and human.
I kept one action, Download for macOS, with no pricing and no form. The first job of this landing page design is a download, and everything else can wait until after it.
Would you keep the serif for the headline, or switch to a grotesque so it feels more like software?
Love this!
Design Agency Website
Only one cell on this homepage is black.
The rest of the page is a grid of rounded white cells: the headline, an event card, a white 3D spiral and a list of services. The black one, top right, holds the "Follow the future" button and stands out against all that white.
On the phone, the cells stack into a single column. The navigation folds into a menu icon, and the event card and spiral merge into one cell.
The headline reads "Designing Digital Experiences That Feel Effortless", so the grid has to look organized before anyone reads a word.
Designed by the Hue & Machine team.
#DesignAgency #WebDesign #AgencyWebsite #LandingPage #BentoGrid #MinimalDesign #UIDesign #ResponsiveDesign #MobileDesign #FigmaDesign
Looks cool