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
šš°š² ššæš²š®šŗ š-šš¼šŗšŗš²šæš°š² šš²šæš¼ š¦š²š°šš¶š¼š» - Dynamic & Interactive UI
šÆ Central Axis & Overflow Effect: The hero pistachio cone sits strictly in the center to establish a strong vertical axis. Overlapping the bold background typography adds 3D depth and brings the product to life.
ā Concentric / Radial Navigation: The subtle orbital ring guides the user's eye in a loop around the cone, using floating benefit badges ("100% plant-based", "Zero sugar", "Dairy-free") to highlight core product attributes.
āļø Structured Chaos & White Space: Asymmetrically arranged buttons, tags, and cards create dynamic visual energy, perfectly balanced by generous light-grey background spacing.
šØ Interactive Flavor Filtering: The top-left flavor selector dynamically adapts the page's color scheme, visual assets, and content based on the selected flavor (active: Pistachio).
š± Bento Grid Layout: Rounded bottom modules ("People's Choice 2026" and "New flavor") structure secondary information cleanly without cluttering the main screen.
š¤ Typography & Palette: High-contrast pairing of an ultra-wide display font with refined details, complemented by pistachio green accents, a deep olive CTA button, and neutral background tones.
Which specific aspect of design interests you the most ā the Figma layout development, the UI/UX solutions, or the branding concept?
ā¢ 1d
Superb
Thanks a lot!šø
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic š
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Renovate | Website Design
I'm currently working on several projects in parallel. I'm also working on several parts of the upcoming case study.
Its insanely good color contrast. High-endš„ā¤ļø
The 2nd concept is so clean š
Mobile App UX Sketching ā Health Tracker UI Concept
Great digital products don't start with polished visualsāthey start with robust, user-centered wireframing. Before writing a single line of code or designing final UI components, mapping out seamless user flows is essential for building a successful health and fitness platform.
We created this detailedĀ Fitness & Health Tracker Mobile UX Wireframe SketchĀ to demonstrate how early-stage low-fidelity design solves complex data visualization challenges. Built forĀ HealthTech founders, wearable startup teams, biohacking platforms, and fitness SaaS creators, this paper wireframe concept lays the UX blueprint for tracking daily readiness, vitals, and activity metrics.
The Problem We Solved
Health and fitness apps often struggle with "data overload." Aggregating sleep scores, activity intensity, recovery stats, and daily vitals into a single screen can easily overwhelm users, leading to low retention and high app abandon rates.
This UX sketching process focuses onĀ information architecture and visual hierarchy. By structuring raw telemetry into distinct modulesāsuch as a central Readiness Score ($87$), daily vital metrics, and progress bars ($450\text{ Cal}$)āwe ensure complex health data remains clear, motivating, and actionable.
Key UX Wireframing Highlights
Readiness & Spotlight Dashboard:Ā A high-level daily readiness score ($87$) supported by quick-glance status indicators for sleep quality, activity levels, cycle tracking, and weekly trends.
Vitals & Activity Telemetry Module:Ā Structured layout balancing daily calorie burn ($257\text{ cal}$), active vs. inactive time ($10\text{h } 34\text{m}$), and total step count ($3,827$).
Time-Series Analytics Flow:Ā Clear view toggles (Today / Week / Month) paired with low-fidelity bar charts to establish intuitive data navigation.
Ergonomic Layout & Thumb-Zone Mapping:Ā Critical CTA zones and key metrics positioned within natural screen reach for effortless single-handed navigation.
Building a HealthTech App, Fitness SaaS, or Wearable Companion?
Whether you are a founder bringing a new HealthTech MVP to market or an established wellness brand redesigning your digital product, we provide end-to-end UX/UI design servicesāfrom hand-drawn wireframe strategy to high-converting, pixel-perfect production designs.
