Health & Fitness · Liquid Glass Hydration
Water Reminder App UI Template
Dewdrop is a hydration-tracking app design with a frosted liquid-glass look, built for founders and designers shipping a water reminder product.



Aperçu
Explorer les écrans
Prévisualisez le design d'app mobile water reminder, entièrement modifiable dans Sleek.
À propos de Water Reminder App
Dewdrop is a water reminder app UI built around a "Liquid Glass Hydration" aesthetic: a soft mist-white base, deep-aqua ink, and a cyan-to-teal gradient reserved for water fills and primary actions. Surfaces read as frosted-glass panels floating over a faint water wash, with wide tonal capsule buttons and a floating pill dock at the bottom. The signature is a tall living-glass vessel on the home screen that fills with cyan water as intake is logged, with a percentage floating inside.
The template ships six connected screens that form a complete hydration flow: a Today home with the living glass at 58% and a "Log Water" button, a Log a Drink sheet for choosing water, coffee, herbal tea, or sparkling with portion steppers, a Smart Nudges schedule for reminder intervals and sip pace, an Insights view with a goal ring and hydration-by-hour bars, a History screen with weekly bars and a 12-day streak, and a Profile with weight goal, daily goal, units, and Apple Health sync.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, a far faster start than a blank canvas.
Ce qu'il y a dedans
Écrans inclus
Today
A home screen with the oversized "1,450 / 2,500 ml" intake number above a living-glass vessel filled to 58%, plus a cyan-to-teal "Log Water" capsule. The at-a-glance daily progress that keeps users sipping.
Log a Drink
A sheet asking "What are you sipping on?" with drink cards for Water, Coffee, Herbal Tea, and Sparkling, each tagged with a hydration multiplier, plus a portion stepper and a "Confirm Log" button. Makes logging any drink quick and accurate.
Smart Nudges
A reminder schedule with an Active Hours toggle, interval (every 90 min) and time window controls, a Sip Pace selector (Chilled, Steady, Intense), and a timeline of upcoming nudges. The heart of the water reminder experience.
Insights
A "Your Insights" view with a hydration goal ring at 58%, logged and remaining figures, and a hydration-by-hour bar chart. Surfaces patterns like drinking most before noon.
History
A trends screen with a 12-day streak badge, a 2,180 ml daily average, weekly bars for the last 7 days, and a monthly report link. Shows long-term hydration habits at a glance.
Profile
A profile with the user's name and Premium tier, a health profile for weight goal, daily goal, and units, plus Apple Health sync and reminder sound settings. Where users tune their hydration targets.
Design et fonctionnalités
Fonctionnalités clés
- Liquid Glass Hydration aesthetic: mist white, deep aqua, cyan-to-teal fills
- Signature living-glass vessel that fills as intake is logged
- Frosted-glass panels with soft 28px corners and no hard shadows
- Floating pill navigation dock with a glowing active icon
- Drink logger with hydration multipliers and portion steppers
- Smart reminder scheduling with interval, window, and sip-pace controls
- Insights goal ring and hydration-by-hour bar chart
- History view with weekly bars, daily average, and streak badge
Public
Pour qui c'est fait
Cas d'usage
Ce que vous pouvez créer
- Launch an MVP for a water reminder or hydration app
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent hydration UI off to developers
- Explore a redesign of an existing wellness tracker
Comment utiliser ce template
- 1
Ouvrir le template
Parcourez les écrans et prévisualisez le design complet pour voir s'il correspond à votre idée.
- 2
Utiliser ce template
Ouvrez votre propre copie entièrement modifiable dans Sleek en un clic.
- 3
Modifier avec l'IA
Restylez la palette, changez les mises en page, et ajoutez ou supprimez des écrans simplement en décrivant ce que vous voulez.
- 4
Exportez et lancez
Exportez votre design ou confiez-le aux développeurs, et poursuivez le développement jusqu'au lancement.
Questions fréquentes
Templates d'apps mobiles associés
Commencez à designer votre app water reminder
Utilisez-le dans Sleek et faites-en le vôtre : restylez la palette, modifiez n'importe quel écran avec l'IA, et exportez en code ou Figma.
Utiliser ce template







