كيف بنيت تجربة
موقع المحاميد؟

ابدأ من هون

شو رح تقدر
تعمل بهالدليل؟

تقدر ترتّب مشروع موقع بصري: من الفكرة والمراجع، لتوزيع المشاهد والحركة، ثم مراجعة النتيجة.

رح أمشي معك بنفس مراحل مشروع المحاميد، بما فيها التجارب اللي غيّرت اتجاهها. كل مرحلة إلها قرار ونتيجة؛ مش كل شي انعمل من أول محاولة.

الموقع تصوّر مستقل غير رسمي. الصور والمشاهد المولّدة ما بتمثّل توثيقًا للمطبخ أو تجربة عميل فعلية. معلومات المنيو والفروع إلها بحث منفصل عن تصميم المشاهد.

الدليل مجاني. بعض أدوات التوليد اللي استخدمتها احتاجت رصيدًا مدفوعًا. الأسعار والنتائج بتختلف؛ الملف ما بشمل كود الموقع أو أصوله القابلة لإعادة الاستخدام.

1. 01الفكرة والمراجع
2. 02الصور والحركة
3. 03البناء والمراجعة

01 / تحديد التجربة

حدّدت الرحلة
قبل شكل الصفحة.

البداية كانت فكرة عن تحضير المنسف. بعدها تطوّرت لرحلة من الشارع، لجوا المطعم، للمطبخ، وبالنهاية للعائلة.

راجعت شكل المكان وطريقة تقديم المنسف من مراجع المطعم العامة، وفصلت المعلومة المؤكدة عن تخيّل المشهد. ما اعتبرت الصور المولّدة دليلًا على تفاصيل حقيقية بالمطعم.

حدّدت كمان الوظائف: منيو قابل للتصفّح، خيارات وجبات، وفروع مع اتصال واتجاهات. الطلب بيكمل على Talabat؛ ما بنيت نظام دفع أو توصيل داخل الموقع.

1. 01واجهة المطعم
2. 02الصالة والمطبخ
3. 03السدر والعائلة

02 / الستوريبورد

بنيت المشاهد
صورة ورا صورة.

ولّدت 12 إطارًا للستوريبورد باستخدام ImageGen داخل Codex، مع مراجع من الصور السابقة.

ما طلبت كل صورة كأنها عالم جديد. ثبّتت مدخل المطعم، الكاشير، باب المطبخ، الأشخاص ومكان الطاولة؛ وبكل إطار شرحت شو بتغيّر بموضع الكاميرا.

المراجع إلها أدوار مختلفة: صورة لضبط المكان، وصورة للشخصية ولبسها، وصورة للطبق. مرجع الشخصية ما لازم يغيّر تصميم الغرفة.

03 / مراجعة الاستمرارية

الصورة الحلوة
لحالها ما بتكفي.

راجعت التفاصيل اللي بتفضح تغيّر المشهد: الأشخاص، عدد قطع اللحم، الثلاجة، واتجاه الرجعة من المطبخ.

بنسخ الستوريبورد صحّحت قطعة لحم إضافية، تكرار العامل وثلاجة زايدة. وبنهاية الرحلة عدّلت العائلة حتى تتشارك سدرًا واحدًا بالأيدي، بدل أدوات أو حصص منفصلة.

هالتصحيحات صارت قبل ما أتعامل مع الصور كمرجع حركة. صورة منفردة ممكن تكون مقنعة، لكن الاختلاف بيبان لما تحطها جنب اللي قبلها.

• نفس الأشخاص والملابس ومواقع الجلوس.
• نفس الباب والطاولة والأجهزة بين الزوايا.
• نفس حجم السدر وعدد قطع اللحم.
• الانتقال بين الصور مفهوم مكانيًا.

04 / حركة الكاميرا

جرّبت الطريق
قبل الفيديو الواقعي.

جهّزت معاينة محلية في Blender مدتها 30 ثانية لمسار كاميرا واحد داخل مكان تقريبي.

المعاينة كانت مجسّمًا بسيطًا للأبواب والطاولات والأشخاص، حتى أراجع المرور من الصالة للمطبخ والرجعة للطاولة. دورها ضبط المسار والإيقاع؛ ما كانت الشكل النهائي.

فحصت الفيديو محليًا وتشغيله بالمتصفح، وجرّبت تقديمه وترجيعه بالتمرير. بعدين صار مرجع الحركة منفصلًا عن مراجع الشكل الفوتوغرافي.

1. 01مجسّم تقريبي
2. 02مراجعة المسار
3. 03مرجع حركة

05 / تجارب الفيديو

راجعت الحركة
قبل اعتمادها.

جهّزت حزمة فيها 20 صورة ومرجع كاميرا. وجرّبت Seedance 2.5 عبر Higgsfield بنسخة مسودة مدتها 15 ثانية.

المراجع شملت مشاهد، هويات شخصيات وتوزيع المكان. فصلت دور كل مجموعة حتى ما تتحوّل صورة الشخصية إلى مرجع لتغيير المطعم.

التجربة اكتملت، لكن المراجعة كشفت قطعًا واضحًا قرب الثانية 7.2. وجود طلب «لقطة متصلة» بالبرومبت ما كان كافيًا لاعتبار الفيديو متصلًا.

لاحقًا استخدمت فيلم رحلة المطعم ذي الـ30 ثانية اللي اخترته وورّدته للموقع. سجل المحادثة يذكر توليده في Higgsfield؛ لا أنسبه لنفس تجربة الـ15 ثانية أو لنفس إيصالها.

• راقب انتقال الكاميرا بين الأبواب.
• شوف حمل السدر ووضعه على الطاولة.
• راجع الأيدي، الوجوه، والصبّ.
• شغّل الفيديو كاملًا، مش أول وآخر إطار بس.

06 / بدء بناء الموقع

فصلت المشهد
عن عناصر الموقع.

بدأ البناء محليًا مع Codex: ظهور الشعار، بعده الفيديو، ونص عربي منفصل عن الميديا.

بنيت الصفحات بـHTML وCSS وJavaScript، واستخدمت Vite للتطوير وتجهيز الملفات. بالمرحلة الأولى كان فيديو معرض المكوّنات هو الواجهة؛ فيلم رحلة المطعم أخد هالمكان بتعديل لاحق.

الشعار انجهّز كصورة شفافة واعتمدته قبل التنفيذ. النصوص والقوائم والأزرار ظلت عناصر HTML؛ هيك قدرت أضبط العربي وأغيّر الكابشن بدون إعادة توليد الفيديو.

بعد تثبيت البداية، وسّعت الموقع للمنيو والفروع والمشاهد الداعمة. راجعت الوظائف والحركة بChrome خلال الشغل.

07 / إعادة اتجاه التصميم

رجعت للمرجع
وغيّرت البناء.

النسخة الأولى ما أعطتني الإحساس اللي بدي إياه. اخترت موقع YODEZEEN كمرجع، وراجعت حركته على سطح المكتب ومحاكاة الموبايل.

راجعت توقيت العناوين، تثبيت المشاهد، توسّع الصور، الأقسام وطريقة فتح معلومات التواصل. بعدها أعدت ترتيب التجربة بما يناسب المنسف والمنيو والفروع.

بالدفعة الجديدة استُخدمت أدوات صور وفيديو عبر Higgsfield: طلب صور Nano Banana Pro، ومقاطع Kling قصيرة. هاي مرحلة مختلفة عن صور الستوريبورد اللي تولّدت داخل Codex.

لاحقًا اعتمدت Alexandria للعربي. الدرس من التعديل: راجع سلوك المرجع بمقاسات مختلفة، ولا تعتمد على صورة طويلة للصفحة حتى تفهم التمرير.

08 / النسخة المختارة

فيلم واحد
يتحكّم فيه التمرير.

بعد ملاحظة تكرار الفيديو، رجعت لفيلم رحلة المطعم اللي فضّلته، ورتّبت باقي الميديا حواليه.

الترتيب اللي اعتمدته: الشعار ← رحلة المطعم ← بقية القصة والمنيو والفروع. رحلة المطعم صارت وحدها تتحرّك للأمام والخلف مع التمرير.

فيديو معرض المكوّنات ذو الـ10 ثوانٍ صار يعمل طبيعيًا بقسم مستقل. ومقطع بخار المطبخ العمودي ذو الـ5 ثوانٍ انحط بجانب قصة التحضير.

الصورة اللي كانت بالواجهة مع البارالاكس انتقلت لداخل الصفحة قبل خيارات المنيو. حافظت على المشاهد الأصلية بدل إعادة توليدها لحل التكرار.

09 / تنفيذ الحركة

ربطت الكابشن
بالمشهد الظاهر.

استخدمت GSAP وScrollTrigger لمزامنة تقدّم التمرير مع مشاهد الرحلة، وLenis لتنسيق التمرير السلس.

القيمة اللي بتتغيّر مع التمرير بتحدد إطار الفيلم المطلوب. عند عكس التمرير، بترجع الرحلة للخلف؛ وعند الوقوف، بتثبت الصورة.

قسمت النص على لحظات بالمشهد: المدخل، الصالة، المطبخ، العودة للسدر والعائلة. الكابشن بيتحرّك مع المشهد المرسوم فعلًا، وبيختفي وقت الصبّ أو التقديم المزدحم.

العربي ظل كلمات أو أسطر متصلة. ما فصلت الحروف عشان الأنيميشن، وما حطّيت النص فوق الوجه أو الفعل المهم.

10 / الموبايل

حافظت على المشهد
بدل قصّه بقسوة.

الفيلم الأصلي أفقي. على الموبايل عرضت تركيبته كاملة، وخليت للكابشن مساحة منفصلة.

سطح المكتب بيملأ المساحة بالمشهد. على الموبايل، الحفاظ على المدخل والعائلة أهم من تعبئة كل الشاشة بقصّة بتشيل أجزاء من الحكاية.

راجعت القائمة والفروع وتغيير اتجاه الشاشة، وقدّمت نسخة أخف من الميديا. خيار تقليل الحركة بيعطي تجربة أبسط، بدون تثبيت الرحلة الطويل.

الاختبارات كانت بChrome ومحاكاة الهاتف. هالشي ما بساوي اختبارًا على أجهزة iPhone وAndroid فعلية أو على Safari.

11 / إصلاح مشكلة حقيقية

لما التمرير
كان يسبق التحميل.

المشكلة: طلبات الصور كانت تنلغى كل ما قفز الزائر بعيدًا بالتمرير. على اتصال بارد، المشهد كان يعلق.

بدل تبديل الأنيميشن كله، غيّرت طريقة توصيل الفيلم. قسمت نفس الإطارات إلى مقاطع H.264 قصيرة، أغلبها 3 ثوانٍ، مع مقطع للإطار الأخير.

Canvas بيرسم الإطار بعد ما يجهز فكّه. حفظت المقاطع المحمّلة للرجعة، وحدّدت النقل وفك الفيديو، وخليت بديل صور عند فشل التشغيل.

بهذا التعديل بقيت الكاميرا وترتيب المشاهد مثل الأصل. ضغط الميديا ما رفع جودة المصدر؛ التفاصيل بقيت محدودة بدقة 480p.

1. 01التمرير يحدد الهدف
2. 02تحميل وفك المقطع
3. 03رسم الإطار الجاهز

12 / الفحص والتجهيز

اختبرت الأفعال
والحركة مع بعض.

قبل تجهيز النسخة للاستضافة على Cloudflare Pages، راجعت الرحلة كاملة بدل الاكتفاء بصورة للواجهة.

جهّزت صورًا وخطوطًا أخف ونسخة نشر تحتوي الملفات المستخدمة. وفصلت كود مشاهد الرئيسية عن صفحة المنيو لتخفيف شغلها.

المراجعة كشفت إصلاحات فعلية: تداخل القائمة بالعرض الأفقي، مناطق لمس صغيرة، نصوص مقصوصة وفيديو يشتغل خلف القائمة. فحص واحد ما أنهى كل المشاكل.

• التمرير للأمام والخلف، الوقوف، والقفز السريع.
• ظهور الشعار، تخطّيه، وإعادة البداية.
• المنيو والفلاتر وفتح الصور والرجوع بالمتصفح.
• معلومات الفروع وأزرار الاتصال والاتجاهات.
• الفيديوهات العادية: إيقاف، إعادة تشغيل، وتوقف خارج القسم.
• العرض العمودي والأفقي، الكيبورد، وتقليل الحركة.

خريطة الأدوات

كل أداة
إلها شغلة واضحة.

Codex

تنظيم التنفيذ، كتابة وتعديل الموقع، وتشغيل الفحوص خلال العمل.

ImageGen

ستوريبورد داخل Codex، وصور بمراحل من تطوير الاتجاه.

Blender

معاينة مسار الكاميرا قبل الفيديو الواقعي.

Higgsfield

تجارب Seedance 2.5، ودفعة صور Nano Banana Pro ومقاطع Kling الداعمة.

Vite + HTML / CSS / JS

بناء الموقع وتجهيز نسخة النشر.

GSAP + ScrollTrigger + Lenis

تزامن المشاهد مع التمرير والحركة. استُخدم Motion أيضًا لتحسين استجابة عناصر واجهة.

Chrome + Cloudflare Pages

فحص التجربة محليًا، ثم استضافة النسخة التاريخية.

جرّب على مشروعك

ابدأ برحلة
من 3 مشاهد.

هذا تمرين جديد مستخلص من التجربة، حتى تطبّق طريقة التفكير على فكرة من عندك.

اختار مشروعًا بتفهمه. اكتب من وين الزائر ببلّش، شو لازم يشوف بالنص، وشو لازم يفهم أو يعمل بالنهاية.

لكل مشهد سجّل: مرجع الشكل، حركة الكاميرا، الجملة المناسبة، والأشياء اللي لازم تظل ثابتة. بعدين اطلب خطة بناء لأول قسم، وراجعه قبل توسيع الموقع.

أحمد رصاص · Rasas