دراسة حالة
كيف بنيت موقعي كأنه منتج، مو صفحة تعريفية
موقع المبرمج هو أول مشروع يشوفه العميل. هنا أشرح القرارات اللي أخذتها في بناء ithamersa.com، من أول سطر في نظام التصميم إلى آخر تفصيلة على الجوال.
- 80KBالصفحة وتنسيقاتها المضمّنة
- 16KBملفات CSS
- 41KBJavaScript كله
الموقع نفسه لازم يكون الدليل
العميل اللي يدوّر مبرمج ما يقرأ سيرة ذاتية. يفتح الموقع، ويحكم من أول شاشة. فكان لازم الموقع يثبت اللي أقوله عن شغلي بدون ما أقوله: واجهة واضحة، وسرعة، وعناية بالتفاصيل الصغيرة.
وش كان المطلوب من الموقع
- يشرح سبع خدمات مختلفة بدون ما يتوّه الزائر.
- يطلع بنفس الجودة على الجوال والكمبيوتر.
- يكون عربي من الأساس، مو واجهة مترجمة.
- يفهمه قوقل ومحركات البحث بالذكاء الاصطناعي.
- أقدر أضيف عليه خدمة أو صفحة بدون ما ينكسر شي.
ستة قرارات صنعت الفرق
كل قرار منها أخذته قبل ما أكتب الكود، وكل واحد له سبب.
قالب مبرمج من الصفر
بدل قالب جاهز أو أداة بناء صفحات، كتبت قالب WordPress خاص بالموقع. كل سطر في الصفحة له سبب، وما فيه كود زايد يثقّل التحميل.
نظام تصميم قبل أول صفحة
حددت الألوان ومقاسات الخطوط والزوايا والمكوّنات أول، وبعدها بنيت الصفحات منها. عشان كذا أي صفحة جديدة تطلع بنفس الروح.
رسومات مكتوبة بالكود
الرسمة اللي فوق مو صورة، هي كود CSS. كل رسومات الموقع كذا: حادّة على أي شاشة، ووزنها يكاد ما ينحسب.
عربي من الأساس
الاتجاه من اليمين لليسار من أول سطر، والخطوط مختارة للقراءة العربية، والنصوص بلهجة العميل نفسه.
الجوال يتجرّب على جهاز حقيقي
اختبرت الصفحات على جوال فعلي، وعدّلت مقاسات الخطوط والحركة لين صارت مريحة وخفيفة.
جاهز لقوقل وللذكاء الاصطناعي
كل صفحة خدمة تعرّف نفسها لمحركات البحث ببيانات منظّمة مثل اللي في المثال، ومعها أسئلتها الشائعة. وملف llms.txt يعرّف المساعدات الذكية بالخدمات، وخريطة الموقع تتحدّث لحالها.
لونين، وخطّين، ومكوّنات تتكرر
كل صفحة في الموقع مبنية من هذي اللوحة فقط.
#081421كحلي#0F2236ذهبي#C9A063رملي#F4EAD9ورقي#F7F4EEAlexandria · 500 – 800ونص مريح للقراءة الطويلة، بتباعد أسطر مضبوط للعربية وأوزان واضحة على الجوال.
IBM Plex Sans Arabic · 400 – 700أزرار وشارات وأيقونات بنفس الزوايا والمسافات في كل مكان، فالزائر يتعلم الواجهة مرة وحدة.
جولة تفاعلية في الموقع
اضغط على أي تبويب، وشوف التفاصيل المقصودة في كل صفحة.
123- عنوان يقول وش أسويسطرين يشرحون الخدمة والفايدة، بدون مقدمات.
- زر للبدء وزر للاستكشافالذهبي للي جاهز، والهادئ للي يبي يشوف الخدمات أول.
- ثلاث نقاط تطمّناستلام الكود، والتسليم على مراحل، ودعم نتفق عليه.
123- عنوان يقول الفايدةيتكلم عن اللي يكسبه العميل، مو عن اسم الخدمة.
- مشهد يشرح قبل النصرسمة متحركة بالكود تبيّن فكرة الخدمة في ثواني.
- خطوة واحدة واضحةزر ذهبي واحد للبدء، والثاني أهدأ للي يبي يقرأ أكثر.
123- معلومات قبل العنوانالتصنيف والتاريخ ومدة القراءة، عشان القارئ يعرف وش ينتظره.
- عنوان في الوسطكبير وواضح، وما حوله شي يشتت.
- غلاف مرسوم لكل مقالرسمة خاصة بالموضوع، بدل صور جاهزة مكررة.
- مقاسات خطوط ثابتةنفس الحجم في سفاري وكروم، بدون مفاجآت.
- حركة أخف على الجوالالتأثيرات الثقيلة تتوقف تلقائيا على الأجهزة الصغيرة.
- أزرار بحجم الإصبعالأزرار عريضة وسهلة، والقائمة توصلها بيد وحدة.
كيف مشى الشغل
أربع مراحل، وكل مرحلة تنتهي بشي تشوفه وتجرّبه.
الهيكل والمحتوى
رتّبت الخدمات والرسالة قبل أي تصميم: وش يقرأ الزائر أول، ووش الخطوة اللي بعدها.
نظام التصميم
الألوان والخطوط والمكوّنات، وتجربتها كلها على الصفحة الرئيسية.
البرمجة والحركة
قالب WordPress مخصص، ومشهد متحرك خاص بكل خدمة.
الاختبار والإطلاق
اختبار على الجوال والمتصفحات، وضبط السيو، ثم النشر.
موقع صار هو نفسه أول دراسة حالة
أدوات قليلة ومختارة، ونتيجة تقدر تقيسها.
- WordPressقالب بلوكات مخصص
- HTML + CSSالواجهات والرسومات
- JavaScriptبدون مكتبات ثقيلة
- SVGالأيقونات والمشاهد
- GSAPحركة الرئيسية فقط
- JSON-LDبيانات منظّمة للبحث
- llms.txtتعريف للمساعدات الذكية
وش طلع في النهاية
- سبع صفحات خدمات ومدونة، كلها من نظام تصميم واحد.
- صفحة رئيسية كودها أقل من 150 كيلوبايت، وتتحمّل في 14 طلب.
- كل صفحة خدمة معرّفة لمحركات البحث ببياناتها وأسئلتها الشائعة.
- إضافة خدمة جديدة صارت شغل ساعات، مو أيام.
وش يعني هذا لمشروعك
- نفس الطريقة اللي أشتغل فيها على منصتك: قرار واضح قبل كل سطر كود.
- تصميم وبرمجة من شخص واحد، فما يضيع شي بين المصمم والمبرمج.
- تستلم كود مرتب تقدر تبني عليه بعدين.
- تفاصيل الجوال والسرعة والبحث محسوبة من البداية، مو مؤجلة.