Chalk & Coral Scholarship
Education App Design Template
Lumio is a course-learning app design with a warm chalk-and-coral look, built for founders and designers shipping an online-education product.
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen education mobil uygulama tasarımını önizleyin.
Education App hakkında
Lumio is an education app design template built around a "Chalk & Coral Scholarship" look: a warm chalk-white canvas, deep slate text, and a confident coral accent reserved for progress and primary actions. A study-blue marks in-progress courses and mint signals completion, so color encodes status instead of decorating the screen. Crisp flat cards sit on a tonal background with a single hairline shadow, and the signature "momentum ring" recurs across the app as a chunky split-arc progress ring that fills coral as lessons complete.
The template ships seven connected screens that form a complete learning flow: a Home with a streak ring and daily goals, a searchable Course catalog of subjects, a Course detail with instructor and syllabus, a Lesson player with video and a "Mark Complete" slab, a multiple-choice Quiz with instant feedback, a Progress dashboard with weekly activity and badges, and a Profile with enrolled courses and stats. Together they cover the habit-building loop that makes a learning app feel motivating, from browsing courses to completing units and watching XP climb.
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 with no plugin, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
Dahil olan ekranlar
Home
A personalized greeting with an XP chip and a large coral streak ring, plus a 'Continue learning' card showing a Spanish unit at 60% and a daily goals list with progress states. This is the daily-habit hub that pulls learners back in.
Course Catalog
A searchable grid of subjects such as Languages, Mathematics, Design, and Coding, each an illustrated card with course counts and star ratings. The browse-and-enroll surface.
Course Detail
A course hero illustration, title, rating, instructor avatar, and a vertical syllabus of modules with completion checks and momentum rings, anchored by a coral 'Continue Learning' button. It frames the full course before a learner commits.
Lesson Player
A video pane with a segmented chapter progress bar, lesson number and title, descriptive lesson text, and a firm coral 'Mark Complete' slab. The focused screen where actual learning happens.
Quiz
A single multiple-choice question with tappable lettered answer slabs, a 14-day streak chip, a progress dots row, and an instant 'You got it!' mint feedback state. It reinforces learning with quick, rewarding checks.
Progress
Total hours and XP earned as hero figures, a weekly activity bar chart with the current day highlighted in coral, and a row of earned badges. It turns effort into visible momentum.
Profile
A coral-ringed avatar, level and learner title, a stats row for streak, courses, and points, plus enrolled courses with progress bars and account settings. The personal home base for the learner.
Öne çıkan özellikler
- Chalk & Coral Scholarship aesthetic: warm chalk-white, slate ink, one coral accent
- Status-encoding color: coral for progress, study-blue for in-progress, mint for complete
- Signature 'momentum ring' progress arc on the home header and course cards
- Thick segmented progress bars across courses and lessons
- Labeled bottom navigation with an active coral pill
- Searchable subject catalog with course counts and ratings
- Lesson player with segmented progress and a 'Mark Complete' slab
- Quiz screen with instant coral and mint feedback states
Kimler için
Neler oluşturabilirsiniz
- Launch an MVP for an online-learning product
- Mock up education app screens for an investor pitch
- Hand a consistent education app UI off to developers
- Explore a redesign of an existing course or language app
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.
Sorularınızın yanıtları. Başlamadan önce bilmeniz gereken her şey.
How do I build an education app from this template?
What screens are included in this education app design template?
Can I customize the education app UI design?
Can I edit this design in Figma?
Is this education app design template free to use?
Is this template suitable for a language-learning or skills app?
Başka bir sorunuz mu var? support@sleek.design adresine yazın.
İlgili mobil uygulama şablonları
education 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.