Howamesh
Howamesh مجموعة إبداعية سعودية كان لديها ملف هوية ولا موقع لها. بنيتُ لها صفحة ثنائية اللغة تعرض مبادئها ومجالات عملها وأرشيفًا من 39 عملًا منجزًا ونموذج تواصل: موقع ثابت بلا إطار عمل، وكل لغة فيه صفحة حقيقية. أما الهوية نفسها فهي من صنع المجموعة.
- HTML
- CSS
- JavaScript
- Node.js
- RTL
- Web fonts
- SEO
- Netlify
- دوري
- كل شيء عدا الهوية
- التاريخ
- 2026
- الأعمال
- 39
- الحالة
- متاح الآن
نبذة
هوامش مجموعة مبدعين سعودية: شبكة من المصممين والصانعين تعمل على الهوية البصرية والاستراتيجيات والمنتجات والمحتوى. كان لديهم ملف تعريفي للعلامة وليس لديهم موقع. بنيت لهم واحدًا: صفحة هبوط ثنائية اللغة تعرض مبادئ المجموعة، والمجالات التي تعمل فيها، وأرشيفًا لـ٣٩ عملًا منجزًا، ونموذج تواصل. وهو موقع ثابت بلا إطار عمل وبلا أي اعتماديات وقت التشغيل، واللغتان فيه صفحتان حقيقيتان لا صفحة واحدة تُترجم بـ JavaScript.
دوري
بنيته بالكامل: مسار المحتوى، والبناء، ونظام التصميم، وأعمال الخطوط، والحركة، والنشر. الشيء الوحيد الذي لم أصنعه هو العلامة نفسها: الألوان والرسوم والشعار الكتابي ملك المجموعة، والصفحة نقل لملفهم التعريفي لا إعادة اختراع له.
حدودالألوان والرسوم والشعار الكتابي من صنع المجموعة. الصفحة تنقل ملف هويتهم كما هو، ولا تعيد ابتكاره.
ما أُطلق
- ملف بناء يُصيّر دالة قالب واحدة مرتين ويكتب صفحتين كاملتين: العربية في الجذر، معيارية وباتجاه من اليمين إلى اليسار، والإنجليزية في دليل مستقل خاص بها، وكل واحدة تحمل بديل hreflang للأخرى.
- وحدتا محتوى، واحدة لكل لغة، هما المصدر الوحيد للنصوص، إضافةً إلى ملف فحص يُفشِل البناء إن نقص عمل أو عميل أو قسم من إحدى النسختين، فلا يمكن أن تفترقا أبدًا.
- المبادئ التسعة للعمل معروضة كمخطط شبكي قابل للاختيار: تختار عُقدةً فيظهر المبدأ المقابل ورسمته بتداخل هادئ.
- أرشيف لـ٣٩ عملًا من أعمال المجموعة، مرتّبة بحسب المجال داخل عناصر إفصاح أصلية، ليبقى الفهرس الطويل قصيرًا حتى يطلبه أحد فعلًا.
- نموذج تواصل على Netlify Forms مع مصيدة للسبام، وحالات انتظار وخطأ ونجاح، وبديل إرسال أصلي حين لا تتوفر JavaScript.
- مظهر فاتح وآخر داكن يتشاركان مجموعة رموز دلالية واحدة: تفضيل النظام افتراضيًا، مع اختيار يدوي يبقى محفوظًا.
- خريطة موقع وملف robots مُولّدان، ووسوم الرابط المعياري وhreflang، وبيانات منظّمة من نوع Organization، وبطاقات مشاركة: ينتجها كلها البناء نفسه.
- نشر على Netlify بنطاق مخصّص، مع ترويسات أمان، وسياسة محتوى لا تسمح بأي مصدر خارجي إطلاقًا، وسياسة تخزين تفصل الملفات الثابتة عن التي تتغير.
الخطوط والطباعة
- خطّا العلامة مستضافان ذاتيًا ومُجزّأان، فلا ترسل الصفحة أي طلب إلى طرف ثالث، ويمكن حصر سياسة الخطوط على مصدر الموقع نفسه.
- كل عائلة خط مقطوعة مرتين، لاتينية وعربية، ومُعرّفة تحت اسم عائلة واحد بمديات يونيكود غير متداخلة: وهذا ما يُبقي مئة كيلوبايت من المحارف العربية خارج الصفحة الإنجليزية.
- لا يُحمّل مسبقًا سوى جزء خط العرض الخاص بكتابة الصفحة نفسها: فالاستضافة الذاتية دون تحميل مسبق أبطأ من خادم خطوط خارجي، لأن لا شيء يكتشف الخط قبل تحليل ملف التنسيق.
- نصوص المتن العربية مضبوطة على وزن أثقل بدرجة من اللاتينية، لأن خط العرض يفقد وصلاته الرفيعة ونقاطه عند الوزن الأخف بشكل لا يحدث في اللاتيني.
- الشعار الكتابي في الواجهة هو العمل المتجهي الأصلي من ملف العلامة، مُدمج داخل الـ HTML ليُرسم مع أول إطار. وهو يستخدم أشكالًا مزخرفة لا تنتجها النسخة الافتراضية من الخط، فيبقى عملًا متجهيًا لا نصًا حيًا.
قراريُضبط نص المتن العربي بوزن أثقل بدرجة من اللاتيني، حتى تبقى الوصلات الرفيعة والنقاط ظاهرة.
قرارات تجربة المستخدم
- زر تبديل اللغة رابط عادي بين عنوانين حقيقيين، فيعمل التبديل مع تعطيل JavaScript وتبقى النسختان قابلتين للفهرسة.
- كل قاعدة اتجاهية في ملف التنسيق مكتوبة بالخصائص المنطقية بدل يمين ويسار، فتأتي النسخة المعكوسة صحيحة بطبيعة البناء لا بكومة من التجاوزات.
- السكربت اختياري بطبيعة البناء: حركات الظهور مرهونة بصنف لا تضيفه إلا JavaScript، فإن حُجِب السكربت ظهر كل قسم ببساطة.
- علامة الموقع تدور مع التمرير، مدفوعة بجدول زمني للتمرير في CSS لا بمستمع أحداث: فالتمرير للأعلى يعيد الدوران تمامًا، ولا شيء يعمل على الخيط الرئيس مع كل إطار.
- الدوران لا يُعكس في النسخة من اليمين إلى اليسار. الدوران ليس خاصية منطقية، وعكسه يجعل الصفحتين تختلفان على الاتجاه الذي يدير به التمرير للأسفل العلامة.
- كل الحركة تُطفأ عند تفضيل تقليل الحركة، بما في ذلك ارتفاع البطاقة عند المرور عليها.
ما يستحق نظرة أقرب
الدرس الذي احتفظت به من هذا المشروع يخص الخطوط العربية على الويب. أداة التجزئة المعيارية تُسقِط خصائص التشكيل السياقي افتراضيًا، فتظهر العربية صفًا من الحروف المنفصلة: بينما يبدو حجم الملف صحيحًا تمامًا وتنجح كل الفحوص الآلية. عدد البايتات الصحيح لا يثبت شيئًا عن محرك التشكيل؛ والطريقة الوحيدة للتأكد هي أن تعرض نصًا عربيًا وتنظر إليه. وملف البناء الآن يحمل هذا التحذير في ترويسته، لأنه من نوع الأعطال التي لا يراها من لم يقرأ الملف.
قراراعرض النص العربي وانظر إليه بعد كل تغيير في الخط، فحجم الملف الصحيح لا يثبت شيئًا عن تشكيل الحروف.
لقطات الشاشة
