Banana
تحليل المنافسين
أجريت تحليل SWOT لأربع منصات للعثور على الفجوة بين الدورات المصورة السلبية والألعاب السطحية.
Coursera
مصداقية أكاديمية وشهادات، لكن تعلّم مصوّر سلبي، وتفاعل قليل، وتكلفة مرتفعة.
Udemy
مكتبة ضخمة وأسعار مناسبة، لكن بلا عناصر تحفيز ولا مسار واضح، وجودة متفاوتة.
Duolingo
طابع ألعاب قوي وممتاز في بناء العادة اليومية، لكنه محصور في اللغات وقد يصبح مكررًا.
edX
شراكات مع جامعات كبرى ودورات عالية الجودة، لكن الشهادات مكلفة وأدوات التحفيز قليلة.
الورق أولًا
بدأت بالتفكير المتشعب ورسمت على الورق أكبر عدد ممكن من التخطيطات وآليات اللعب، ثم انتقلت للتفكير المركّز واحتفظت بالأفكار الأكثر واقعية. ثم جاءت خريطة الموقع: الدورات، ومسارات التعلم، والمكتبة، وسيف المعرفة، ولوحة المتصدرين، والأخبار، وكلها على بُعد خطوة من الرئيسية.
- الدوراتشاشة واحدة
- صفحة الدورة
- المسارات التعليميةشاشتان
- صفحة المسار
- صفحة الدورة
- صفحة المسار
- المكتبةشاشة واحدة
- صفحة الكتاب
- سيف المعرفة
- لوحة المتصدرين
- الأخبار
- الدخول والتسجيل
التصميم والمبادئ
- قانون Jakob: بطاقات دورات وتنقل جانبي واختبارات مألوفة، فيبدأ المستخدم دون تعلم شيء جديد.
- قانون Hick: تركّز كل صفحة على إجراءاتها الأساسية فقط.
- قانون Fitts: أزرار كبيرة وسهلة الوصول للاختبارات والتنقل.
- التقارب: نقاط الخبرة والتقدم والترتيب متجاورة لتُقرأ بنظرة.
كانت الإتاحة جزءًا من التصميم: ألوان عالية التباين وأحجام خطوط مقروءة، ولغة بسيطة، وتخطيطات ثابتة. وتنقل متغيرات الألوان بوضعي النهار والليل المنصة كلها إلى الوضع الداكن بخطوة واحدة، أما إعدادات حجم النص والتباين فكانت ضمن الفكرة لكنها لم تُصمَّم كشاشات بعد.
من Figma مبني بمتغيرات Figma (رموز التصميم). مأخوذة من ملف Banana في Figma: 10 متغيرات ألوان بوضعي النهار والليل، و40 لونًا أساسيًا، و23 نمط نص، و8 متغيرات للمسافات و3 للزوايا.
- الألوان: معرّف
- الخطوط: معرّف
- سلّم الخطوط: معرّف
- المسافات: معرّف
- الزوايا: معرّف
- الظلال: غير معرّف في الملف
النظام قيد الاستخدام
متغيرات الألوان: النهار والليل
| المتغيّر | النهار | الليل |
|---|---|---|
| الزر الأساسي | #FFD400 | #FFD400 |
| الزر الثانوي | #FFF4C2 | #FFAE00 |
| النص | #000000 | #FFFFFF |
| الخلفية | #F8F8F8 | #181818 |
| البطاقات | #FFFFFF | #1E1E1E |
| شارة الملاحظة | #FFE082 | #FFC947 |
| حدود الحقول | #D1D1D1 | #454545 |
| النجوم | #FFDF13 | #FFDF13 |
الألوان
يُحسب التباين مع الأبيض أو أغمق لون نص، أيهما أعلى. اضغط على أي لون لنسخ قيمته.
الأخضر الأساسي
الخطوط
- PoppinsLight وRegular وMedium وSemiBold
سلّم الخطوط
- XXLarge · 64 · 600تصميم يفهمه الناس
- XLarge · 40 · 600تصميم يفهمه الناس
- Large · 32 · 500تصميم يفهمه الناس
- Body · 24 · 400تصميم يفهمه الناس
- Medium · 20 · 500تصميم يفهمه الناس
- Small · 16 · 400تصميم يفهمه الناس
- XSmall · 12 · 400تصميم يفهمه الناس
ارتفاع السطر 110% في كل الأحجام.
المسافات
- 4
- 8
- 12
- 16
- 20
- 24
- 32
- 64
استدارة الزوايا
- 12
- 20
- 32
النموذج التفاعلي: استكشاف المنصة
تنقّل بين صفحات سطح المكتب الرئيسية من نموذج Figma.
1 / 5 الصفحة التعريفية
اضغط على الشاشة أو اسحب أو استخدم الأسهم للتنقل بين الشاشات.
ما تعلّمته
كان الجزء الأصعب أن يكون التقدم مُرضيًا دون أن يصبح طفوليًا. والخطوة التالية: اختبار حلقة الاختبارات مع طلاب المدارس والجامعات.
