Focused Scholar

Online Course App UI Design

Lumen is an online course app design with a calm, textbook-like layout, built for founders and designers shipping an e-learning or skills product.

Usa questo template

Online course app home screen with a resume-learning card and recommended courses

Online course app catalog screen with search, topic filters, and course cards

Online course app course detail screen with instructor and syllabus tabs

Esplora le schermate

Anteprima del design dell'app mobile online course, completamente modificabile in Sleek.

Lesson playerSchermata 4

Your ProgressSchermata 5

ProfileSchermata 6

Info su Online Course App

Lumen is an online course app UI design built around a "Focused Scholar" look: a warm paper-white canvas, deep ink charcoal text, and a single confident cobalt accent reserved for progress fills and primary buttons. Surfaces sit on flat chalk-gray fills separated by hairline rules with no drop shadows, while a muted sage marks completed states. Sturdy slab-serif course titles pair with a precise neutral UI font, and large tabular numbers carry durations and progress percentages.

The template ships six connected screens that form a complete learning flow: a Home that resumes the current module, a searchable Catalog with topic filters, a Course detail with instructor and syllabus tabs, a Lesson player with notes and resources, a Progress screen with a study streak and hours learned, and a Profile with skills and certificates. A signature tracked-out eyebrow ("MODULE 03 · LESSON 12") sits above every title so the whole app reads like a well-structured textbook.

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 course product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

Schermate incluse

Home

A "Welcome back" greeting with a large current-module card showing the lesson, 62% completion, minutes left, and a cobalt progress bar, plus a horizontal row of recommended courses with illustrated thumbnails and durations. The resume-where-you-left-off entry point.

Catalog

An "Explore Knowledge" header with a search field, topic filter chips like Design, Coding, and Business, and course cards carrying flat-illustrated covers, star ratings, lesson counts, and total hours. The browse-and-discover surface.

Course detail

An illustrated hero with the module eyebrow and slab-serif title, an instructor row with portrait and credentials, Syllabus, Overview, and Reviews tabs, and a cobalt "Resume Learning" button. Where learners decide and dive in.

Lesson player

A 16:9 video frame with a scrubber and timestamps, the lesson eyebrow and title, Notes, Resources, and Discussions tabs with a highlighted key insight, and Prev, Mark Complete, and Next controls. The core study screen.

Your Progress

A hero hours-invested number, a weekly study-streak row with sage checkmarks and a cobalt flame for today, and a "My Courses" list with per-course progress bars and completion states. Keeps learners motivated and on track.

Profile

A circular avatar with points and rank stats, an acquired-skills chip cloud, and certificate cards with issue dates and IDs. The learner's achievement record.

Funzionalità principali

Focused Scholar aesthetic: paper white, ink charcoal, one cobalt accent
Tonal-stack surfaces with hairline rules and no drop shadows
Slab-serif titles paired with a neutral UI font and tabular numbers
Signature module-number eyebrow above every title
Determinate cobalt progress bars against gray tracks
Searchable catalog with topic filter chips and star ratings
Lesson player with Notes, Resources, and Discussions tabs
Weekly study-streak counter with sage completion states

A chi è rivolto

Founders validating an e-learning or online-course MVP

Product designers needing a course-app starting point

Indie developers building a skills or tutoring app

EdTech teams prototyping a learning experience

Cosa puoi creare

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

Come usare questo template

1
Apri il template
Sfoglia le schermate e guarda l'anteprima del design completo per capire se si adatta alla tua idea.
2
Usa questo template
Apri la tua copia completamente modificabile in Sleek con un clic.
3
Modifica con l'AI
Cambia la palette, i layout e aggiungi o rimuovi schermate descrivendo semplicemente cosa vuoi.
4
Esporta e lancia
Esporta il tuo design o passalo agli sviluppatori, e continua a costruire verso il lancio.

Domande e risposte. Tutto quello che devi sapere prima di iniziare.

How do I build an online course app from this template?

Click "Use this template" to open it 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 course product needs. You start from six complete screens instead of a blank canvas, so you reach a working online course app UI design far faster.

What screens are included in this online course app UI design?

Six connected screens: Home, Catalog, Course detail, Lesson player, Your Progress, and Profile. Together they cover the core flow of a real e-learning app, from browsing courses to playing lessons and tracking streaks and certificates.

Can I customize the course app UI design?

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

Is this online course 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.

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 skills or tutoring app?

Absolutely. The catalog, course detail, lesson player, and progress screens map cleanly onto micro-courses, professional skills, or tutoring products. Adjust the topics and content to fit your niche.

Per tutto il resto, scrivi a support@sleek.design.