Bold Scholar

E-Learning Mobile App Design Template

Lumen is a course-learning app design with a bold, paper-bright Scholar look, built for founders and designers shipping an online-learning product.

Dieses Template nutzen

E-learning mobile app home screen with streak counter, resume card, and daily goals

E-learning app discover catalog screen with course cards and search bar

E-learning app course detail screen with instructor and course syllabus

Screens erkunden

Sehen Sie das e-learning-Mobile-App-Design in der Vorschau, vollständig editierbar in Sleek.

Lesson playerScreen 4

Practice quizScreen 5

PerformanceScreen 6

ProfileScreen 7

Über E-Learning App

Lumen is an e-learning mobile app design built around a "Bold Scholar" aesthetic: warm chalk-paper backgrounds, deep-ink text and outlines, electric indigo reserved for progress and primary actions, and warm marigold saved for streaks and earned badges. Every surface is an outlined index card with a hard offset shadow, so screens feel like stacked, printed flashcards rather than soft, generic panels.

The template ships seven connected screens that form a complete learning flow: a personalised Today home with a streak counter and daily goals, a Discover catalog with filterable course cards, a Course detail with instructor and syllabus, a Lesson player with transcript tabs, a Practice quiz with instant feedback, a Performance dashboard, and a Profile. A signature "ink ribbon" runs down each course card and across the top of the lesson player, filling with indigo as lessons complete and doubling as a bookmark.

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, all far faster than starting from a blank canvas.

Enthaltene Screens

Today

A personalised home greeting ("Back to it, Priya"), a marigold streak counter, a large "Resume" card for the next lesson, and a list of daily goals with XP rewards. It pulls the learner straight back into their course.

Discover

A searchable course catalog with category chips (Design, Languages, Business) and outlined course cards showing illustrated covers, ratings, lesson counts, and an indigo "Enroll" button. This is the browse-and-enroll surface.

Course detail

A bold illustrated hero cover, a difficulty tag and 4.9 rating, instructor portrait and name, and an expandable numbered syllabus with per-module progress. It sets expectations before a learner commits.

Lesson player

A video frame topped by the chapter progress ribbon, a module and lesson label, tabs for Transcript, Notes, and Resources, and a marigold "Mark Complete" chip. The core place learners spend their time.

Practice quiz

One question per card with four outlined answer options, an indigo progress-dots row, and instant correct and incorrect ink states. It reinforces what was just learned.

Performance

A hero total-learning-hours number with month-over-month change, a contribution-style activity calendar in indigo intensity, earned marigold badges, and per-skill progress bars. It turns effort into visible momentum.

Profile

An editable avatar, role and location, headline stats for active, completed, and certified courses, an active-learning shortcut, and account settings. The learner's home base.

Wichtige Features

Bold Scholar aesthetic: chalk paper, deep ink, indigo and marigold accents
Outlined index-card surfaces with a hard offset drop-shadow
Signature 'ink ribbon' progress bar on course cards and lesson player
Personalised Today home with streak counter and daily goals
Filterable course catalog with ratings and enroll buttons
Lesson player with Transcript, Notes, and Resources tabs
Practice quizzes with instant correct and incorrect states
Performance dashboard with activity calendar, badges, and skill bars

Für wen es ist

Founders validating an e-learning or online-course MVP

Product designers needing a polished course-app starting point

Indie developers building a language or skills-learning app

EdTech teams prototyping a learning experience

Was Sie bauen können

Launch an MVP for an online-learning or tutoring product
Mock up screens for an investor or stakeholder pitch
Hand a complete, consistent UI off to developers
Explore a redesign of an existing course app

So nutzen Sie dieses Template

1
Template öffnen
Stöbern Sie in den Screens und sehen Sie das komplette Design in der Vorschau, um zu prüfen, ob es zu Ihrer Idee passt.
2
Dieses Template nutzen
Öffnen Sie mit einem Klick Ihre eigene, vollständig editierbare Kopie in Sleek.
3
Mit KI bearbeiten
Palette umstylen, Layouts ändern und Screens hinzufügen oder entfernen – einfach indem Sie beschreiben, was Sie wollen.
4
Exportieren und launchen
Exportieren Sie Ihr Design oder geben Sie es an Entwickler weiter, und bauen Sie weiter Richtung Launch.

Ihre Fragen, unsere Antworten. Alles, was Sie vor dem Start wissen sollten.

How do I build an e-learning app from this template?

Click "Use this template" to open Lumen in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from seven complete screens instead of a blank canvas, so you reach a working e-learning mobile app design far faster.

What screens are included in this e-learning app UI design?

Seven connected screens: Today, Discover, Course detail, Lesson player, Practice quiz, Performance, and Profile. Together they cover the core flow of a real online-learning app, from browsing and enrolling to completing lessons and tracking progress.

Can I customize the e-learning app UI?

Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the indigo and marigold palette, change layouts, swap course content, and add or remove flows. There's no manual redraw; you describe the change and it's applied.

Is this e-learning app design template free to use?

You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans, so there's no separate UI kit to download.

Can I export the design to code or Figma?

Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.

Is this template suitable for a language-learning or skills app?

Absolutely. The catalog, course detail, lesson player, quiz, and progress screens map cleanly onto language learning, micro-courses, or professional skills apps. Adjust the categories, illustrations, and content to fit your niche.

Ihre Frage ist nicht dabei? Schreiben Sie an support@sleek.design.