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.
Önizle
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen water reminder mobil uygulama tasarımını önizleyin.
Water Reminder App hakkında
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.
İçindekiler
Dahil olan ekranlar
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.
Tasarım ve özellikler
Öne çıkan özellikler
- 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
Hedef kitle
Kimler için
Kullanım alanları
Neler oluşturabilirsiniz
- 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
Bu şablon nasıl kullanılır
- 1
Şablonu aç
Ekranlara göz atın ve fikrinize uyup uymadığını görmek için tüm tasarımı önizleyin.
- 2
Bu şablonu kullan
Tek tıkla Sleek'te tamamen düzenlenebilir kendi kopyanızı açın.
- 3
Yapay zekâ ile düzenle
Ne istediğinizi anlatarak paleti yeniden tasarlayın, düzenleri değiştirin, ekran ekleyin veya kaldırın.
- 4
Dışa aktar ve yayınla
Tasarımınızı dışa aktarın ya da geliştiricilere teslim edin, lansmana kadar geliştirmeye devam edin.
Sıkça sorulan sorular
İlgili mobil uygulama şablonları
water reminder uygulamanızı tasarlamaya başlayın
Sleek'te kullanın ve kendinize göre uyarlayın: paleti yeniden tasarlayın, herhangi bir ekranı yapay zekâ ile düzenleyin, ardından koda veya Figma'ya dışa aktarın.
Bu şablonu kullan