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.
画面を探索
online courseモバイルアプリデザインをプレビュー。Sleekで完全に編集可能です。
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.
含まれる画面
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.
主な機能
- 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
誰向けか
何が作れるか
- 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
このテンプレートの使い方
- 1
テンプレートを開く
画面をブラウズし、フルデザインをプレビューして、アイデアに合うか確認しましょう。
- 2
このテンプレートを使う
ワンクリックで、完全に編集可能な自分用のコピーをSleekで開けます。
- 3
AIで編集
パレットの変更、レイアウトの調整、画面の追加や削除も、欲しいものを説明するだけでできます。
- 4
エクスポートして公開へ
デザインをエクスポートするか開発者に渡し、ローンチに向けて作り続けましょう。
疑問にお答えします。 始める前に知っておきたいことを、すべてまとめました。
How do I build an online course app from this template?
What screens are included in this online course app UI design?
Can I customize the course app UI design?
Is this online course app design template free to use?
Can I export the design to code or Figma?
Is this template suitable for a skills or tutoring app?
ほかにご質問があれば、support@sleek.designまでご連絡ください。
online courseアプリのデザインを始める
Sleekで使って、自分好みに仕上げましょう。パレットを変えたり、どの画面もAIで編集したり、コードやFigmaにエクスポートしたりできます。