فن الطهي & التراث

Les Halles de Lyon Paul Bocuse

ستون تاجرًا في مكان واحد: كان على الموقع أن يكون دليلًا بقدر ما هو واجهة عرض.

السنة
2026
مدة التصميم
5 أسابيع
التقنيات
Next.js · React · Tailwind · Vercel
  • هندسة المعلومات
  • التصميم
  • التطوير
  • SEO

نسخة تجريبية نشرتها Kayzen Web على عنوان Vercel؛ أما النطاق النهائي فهو ملك للعميل.

https://halles-paul-bocuse-master.vercel.app/
الصفحة الرئيسية لموقع Les Halles de Lyon Paul Bocuse — فن الطهي & التراث، من إنجاز Kayzen Web
بيتًا مُدرَجًا
60
إتاحة الوصول في Lighthouse
97/100
الأداء في Lighthouseدون هدفنا البالغ 90: دليل من ستين بيتًا مع صورها ثقيل بطبيعته؛ وتخفيف هذا الوزن (التحميل المؤجَّل، وصيغ أكثر إحكامًا) هو الورشة ذات الأولوية في الدورة القادمة.
76/100
نقطة الانطلاق

ما كان يجب حلّه.

السياق

تجمع Halles de Lyon Paul Bocuse نحو ستين بيتًا تجاريًا — جزّارين، وصانعي أجبان، وبائعي محار، وحلوانيين، بينهم عدد من الحائزين على لقب Meilleur Ouvrier de France (أفضل حِرفي في فرنسا). وقد صنّفت مجلة Food & Wine المكان ثالث أفضل سوق في العالم.

القيد

موقع المكان الجماعي ممزَّق بين اتجاهين: إن تحدث عن المكان وحده، لم يساعد أحدًا على إيجاد تاجر بعينه؛ وإن كان مجرد دليل، فقد كل ما يحفّز على المجيء. كان لا بد من خدمة الزائر الذي يكتشف، ومن يبحث عن «صانع الأجبان في الـ Halles».

الحل

طبقتان متراكبتان. طبقة سردية — التاريخ، والصور، والأجواء — لإثارة الرغبة. وطبقة دليل — 60 بطاقة، قابلة للتصفية بحسب المهنة، مع الموقع والمواعيد — لتكون مفيدة. الأولى تجلب الزائر، والثانية تستبقيه.

نتائج مقيسة لا مُعلنة

النتائج المسجّلة عند التسليم.

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

PageSpeed
76
الأداء: 76 من 100
97
إمكانية الوصول: 97 من 100
100
أفضل الممارسات: 100 من 100
92
تحسين محركات البحث: 92 من 100
التصميم والإدارة الفنية

كل خيار، وسببه.

  1. بطاقة لكل بيت

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

  2. تصفية بحسب المهنة

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

  3. صور بملء الإطار، لكن بمقدار

    التراث يُعرض. الصور عريضة ومتقنة، لكنها تُحمَّل تدريجيًا: معرض الصور لا يُثقل بطاقة صانع الأجبان التي يبحث عنها الزائر.

لوحة ألوان المشروع

  • أحمر السوق

    #9B2C2C

    الهوية

  • أبيض البلاط

    #FAFAF8

    الخلفية

  • أردوازي

    #2B2E33

    النص

  • نحاسي

    #B99247

    الخطوط الفاصلة وأوسمة MOF

النظام الطباعي

العناوين

Playfair Display

النص الأساسي

Inter 400

اللغة التراثية تتطلب خط Serif؛ والدليل يتطلب خط Sans-serif كثيفًا. يتعايشان بحسب المنطقة، لا في كتلة واحدة أبدًا.

الهندسة

ما يوجد تحت الغطاء.

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. دليل في بيانات منظَّمة

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

  2. أداء عند 76: موازنة مُعلَنة

    النتيجة دون معاييرنا، ونوثّقها بدل أن نخفيها: معرض الصور التراثي ثقيل. إنه أول ورشة تحسين محددة — الانتقال إلى AVIF وتقسيم أدق لمعرض الصور.

تحسين محركات البحث

كيف يصبح الموقع قابلًا للعثور عليه.

  1. صفحة لكل مهنة

    «صانع أجبان في Halles Paul Bocuse»، «بائع محار في ليون»: لكل مهنة صفحة تجميعية تلتقط استعلامًا لا تستطيع الصفحة الرئيسية استهدافه.

  2. ترميز المكان والمتاجر

    يحمل المكان عقدة Place، ويحمل كل بيت عقدة LocalBusiness مرتبطة بها. التسلسل الهرمي صريح لمحركات البحث وللمساعدات الذكية على حدّ سواء.

إمكانية الوصول

قابل للاستخدام من الجميع.

منذ يونيو 2025، يفرض القانون الأوروبي لإمكانية الوصول (European Accessibility Act) إتاحة الوصول الرقمي على شريحة واسعة من الخدمات الإلكترونية. نتعامل معها منذ مرحلة التصميم، لا كتدارك لاحق.

  1. مرشّحات ونتائج مُعلَنة

    تغيير المرشّح يحدّث عدّاد النتائج في منطقة حيّة (live region). ومن دون ذلك، لا يعرف المستخدم الكفيف أن القائمة قد تغيّرت.

هيكل الموقع

ما تم تسليمه.

  • الرئيسية — المكان
  • البيوت الستون — دليل قابل للتصفية
  • صفحات بحسب المهنة
  • التاريخ والتراث
  • الوصول، والمواعيد، والخريطة
المنهجية

مراحل سير المشروع.

  1. الحصر

    البيوت الستون، ومهنها، ومواقعها، ومواعيدها.

  2. الهندسة

    طبقة سردية وطبقة دليل، ومرشّحات بحسب المهنة.

  3. التصميم

    لغة تراثية، ومعرض صور، وبطاقات.

  4. SEO

    صفحات المهن، وترميز Place وLocalBusiness.

أسئلة

ما يُطرح علينا كثيرًا.

لأن إخفاءها لن يحسّن الموقع. تُفسَّر هذه النتيجة بمعرض صور تراثي ضخم، وهي محددة، وخطة التحسين مكتوبة. معرض أعمال لا يُظهر إلا نتائج الـ 95 لا يعلّم أحدًا شيئًا.

مستوى الإتقان نفسه، لموقعك.

تدقيق مجاني لموقعك الحالي، وعرض سعر خلال 24 ساعة، وتعليل مكتوب — مثل الذي قرأته للتو. الدفع على ثلاث دفعات دون رسوم إضافية، مع التحقق من برامج الدعم المحلية قبل التوقيع.

مشاركة