أكاديمية سراج — من الهوية البصرية حتى إطلاق الموقع
من اسمٍ إلى موقع يعمل: بنينا هوية أكاديمية سراج، وأدرنا المنتج، وصمّمنا تجربة المستخدم والواجهات، وطوّرنا الموقع على WordPress وأشرفنا على إطلاقه.
زيارة الموقع sirajj.comمشروع واحد، أربع مراحل، ولم نسلّم أي مرحلة لغيرنا
أكاديمية سراج (Sirajj Academy) أكاديمية تعليم رقمية تخاطب متعلّمين ناطقين بالإنجليزية حول العالم، وتقوم على مبدأ واضح: الفهم قبل الحفظ. جاءتنا باسم وقناعة، ولا شيء غيرهما. وتولّى فريق تكويد كل ما بعد ذلك: الهوية البصرية، وإدارة المنتج، وتصميم تجربة المستخدم والواجهات، وتطوير الموقع على WordPress، والإشراف على نشره على الخادم، ثم سلّمنا فريق الأكاديمية موقعاً يديره بنفسه.
- الدور
- من الهوية حتى الإطلاق
- المنصّة
- WordPress بثيم بلوكات مخصّص
- الجمهور
- متعلّمون ناطقون بالإنجليزية حول العالم
- الحالة
- منشور ويعمل
التحدي: منهج لم يُعرض من قبل
تعلّم سراج بطريقة تختلف عن أغلب الأكاديميات الرقمية، لكن هذا الاختلاف كان يعيش في طريقة بناء الدروس، لا في شيء يراه الزائر خلال عشر ثوانٍ على الصفحة الرئيسية. ولم تكن هناك هوية يُبنى عليها أصلاً: لا شعار ولا ألوان ولا خطوط. ورحلة المتعلّم تمتدّ سنوات من الحروف الأولى حتى شهادة معتمدة، والمطلوب عرضها في زيارة واحدة دون أن تُثقل على مبتدئ. فصار سؤال واحد يحكم المراحل الأربع كلها: كيف تجعل منهج التعليم مرئياً، وتحوّل رحلة تمتدّ سنوات إلى خطوة يبدؤها الزائر اليوم؟
أهداف اتفقنا عليها قبل أي تصميم
قبل أي عمل بصري، اتفقنا مع العميل على أربعة أهداف يُحكم بها على المشروع، حتى يُحسم أي خلاف لاحق بالرجوع إلى الاتفاق لا إلى الذوق: أن يفهم الزائر المنهج دون أن يقرأ فقرة عنه، وأن تكون الهوية نظاماً يتّسع لدورات ومعلمين ومحتوى لم يُخطَّط له بعد، وأن تتحوّل الرحلة الطويلة إلى خطوة أولى واضحة بدعوة واحدة تتكرّر عند كل نقطة قرار، وأن يُسلَّم موقع يديره فريق الأكاديمية بنفسه.
الهوية البصرية: كل شيء يبدأ من معنى الاسم
سراج تعني المصباح، أي الضوء الذي يهدي. ومن هذه الفكرة بُنيت الهوية على خمس مراحل: مقابلات مع المؤسسين، ثم الفكرة، ثم الشعار، ثم الألوان والخطوط، ثم دليل استخدام مكتوب. الشعار شعلة فوق كتاب مفتوح على حامل، مع اسم ثنائي اللغة جُرّب بأحجام صغيرة وعلى خلفيات داكنة وفي الطباعة. وكان القرار الأهم أن تكون الهوية دافئة لا مهيبة: المواقع التعليمية في هذا المجال تميل إلى الأخضر الداكن والذهبي والزخرفة الكثيفة، وهي قد تُربك من يبدأ، فاخترنا شعلة برتقالية دافئة على ورق فاتح. ويقوم نظام الألوان على أربعة أدوار: البرتقالي للضوء، والأزرق للكتاب، والأحمر للتمييز، والأبيض للمساحة، مع خط Merriweather للحروف اللاتينية وAlmarai للعربية بأوزان متطابقة.
إدارة المنتج: سبع صفحات، لكلٍّ منها مهمة واحدة
بدأ العمل على المنتج بدراسة المنافسين وبالمخاوف الحقيقية للكبار الذين يبدؤون التعلّم من الصفر، ومنها خرجت بنية الموقع: الرئيسية، ومن نحن، ورحلة التعلّم، والدورات، والمعلمون، والمدونة، وصفحة المقال. سبعة قوالب، لكلٍّ منها مهمة واحدة، وكلها تقود إلى دعوة واحدة للبدء. وأدار فريقنا المشروع من أول مقابلة حتى التسليم، فبقي كل قرار مرتبطاً بالأهداف التي اتُّفق عليها في البداية.
تجربة المستخدم والواجهات: أظهِر المنهج ولا تصفه
حوّلنا مراحل التعلّم الأربع إلى مسار مسمّى ومرقّم يعرف فيه الزائر موقعه، من التأسيس حتى الشهادة المعتمدة. ثم بنينا خمسة اتجاهات كاملة للواجهة الرئيسية، وفاضلنا بينها مع العميل بالأدلة لا بالذوق. والاتجاه المختار يعرض لوحة طالب حقيقية بدل أن يصف ميزة تتبّع التقدّم: المستوى، وأيام الالتزام المتتالية، ونسبة الإنجاز، والدرس المنجَز والدرس التالي. وكُتبت الأسس — الألوان والخطوط والمسافات والظلال — رموزاً تصميمية موثّقة (Design Tokens) يبني عليها المطوّرون مباشرة، بدل أن تبقى داخل الشاشات.
التطوير على WordPress: موقع يعدّله العميل دون الرجوع إلينا
بنينا ثيم بلوكات مخصّصاً من الصفر، ورُبطت الرموز التصميمية بإعداداته، فبقيت الألوان والخطوط في مكان واحد. وتحوّل كل قسم مصمَّم إلى بلوك قابل للتحرير — القسم الرئيسي والمراحل والمميزات والمعلمون والمقالات — فتُركَّب الصفحة الجديدة من مكتبة البلوكات بدل أن تُطلب من جديد. ونُظّمت الدورات والمعلمون والمقالات محتوىً مهيكلاً يمكن عرضه وتصفيته وإعادة استخدامه، ثم رُوجع البناء مقابل التصاميم المعتمدة قسماً قسماً.
الإطلاق والتسليم: الموقع يعمل، والعميل يملكه
راجعنا كل صفحة مقابل التصميم المعتمد على مختلف المقاسات والمتصفحات قبل النشر، وخفّفنا الصور والخطوط والملفات لأن كثيراً من المتعلّمين يدخلون من اتصالات بطيئة. ثم أشرفنا على نشر الموقع على الخادم وتحقّقنا منه وهو يعمل، مع العميل خطوة بخطوة، وسلّمنا دليل الهوية ومرجع الرموز التصميمية وتعليمات مكتوبة لتعديل البلوكات وإضافة المحتوى. ولا ندّعي أرقاماً: لم يكن القياس جزءاً من هذا المشروع، فلا نملك أرقام زيارات أو تحويل ننسبها إليه. ما نقف خلفه أن الأكاديمية انتقلت من اسم إلى موقع منشور يديره فريقها، دون أن تخرج أي مرحلة من فريقنا.
