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.

यह टेम्पलेट इस्तेमाल करें

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

स्क्रीन एक्सप्लोर करें

e-learning मोबाइल ऐप डिज़ाइन का प्रीव्यू, Sleek में पूरी तरह संपादन-योग्य।

Lesson playerस्क्रीन 4

Practice quizस्क्रीन 5

Performanceस्क्रीन 6

Profileस्क्रीन 7

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.

शामिल स्क्रीन

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.

मुख्य फ़ीचर

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

यह किसके लिए है

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

आप क्या बना सकते हैं

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

इस टेम्पलेट का इस्तेमाल कैसे करें

1
टेम्पलेट खोलें
स्क्रीन ब्राउज़ करें और पूरा डिज़ाइन प्रीव्यू करें, यह देखने के लिए कि यह आपके आइडिया पर फ़िट बैठता है या नहीं।
2
यह टेम्पलेट इस्तेमाल करें
एक क्लिक में Sleek में अपनी पूरी तरह संपादन-योग्य कॉपी खोलें।
3
AI से एडिट करें
पैलेट रीस्टाइल करें, लेआउट बदलें, और स्क्रीन जोड़ें या हटाएँ, बस बताकर कि आप क्या चाहते हैं।
4
एक्सपोर्ट करें और शिप करें
अपना डिज़ाइन एक्सपोर्ट करें या डेवलपरों को दें, और लॉन्च की ओर बनाना जारी रखें।

सवालों के जवाब। शुरू करने से पहले जानने लायक सब कुछ।

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.

कुछ और पूछना है? हमें support@sleek.design पर लिखें।