برايم جراج

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

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

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

• الرئيسية، والمجموعة، وصفحة لكل سيارة، وبيع سيارتك، ولماذا برايم، والتواصل، وصفحة ٤٠٤
• واجهة معرض تتبدّل فيها السيارات على المنصة، مع بطاقة كتالوج تعرض السنة والمسافة والقوة والسعر
• تصفية المجموعة حسب نوع الهيكل والماركة والميزانية والسنة، مع أربعة ترتيبات — كلها محفوظة في الرابط
• صفحات سيارات بمعرض من أربع لقطات، ومواصفات مجمّعة، وتجهيزات، وبطاقة سعر ثابتة، وسيارات مشابهة
• نموذجا حجز معاينة وبيع سيارة بتحقق من أرقام الموبايل المصرية، يُسلَّمان إلى واتساب مكتوبين جاهزين
• حالة المعرض لحظيًا بتوقيت القاهرة؛ وبيانات وصفية لكل صفحة، وخريطة موقع، وبيانات منظَّمة لتاجر السيارات والسيارة

صفحة سيارة، مُولّدة مسبقًا

12صفحة سيارة، مُولّدة مسبقًا

سطر TypeScript

4,400+سطر TypeScript

صورة ويب، من ٢٣ ملفًا مُسلَّمًا

56صورة ويب، من ٢٣ ملفًا مُسلَّمًا

ميجابايت صور، بعد المعالجة

43 → 6ميجابايت صور، بعد المعالجة

سرد التقنيات المستخدمة لا يقول شيئًا. المفيد في دراسة الحالة هو القرارات التي كان لها بديل حقيقي — لذلك يذكر كل قرار هنا ثمنه، لا ما تم اختياره فحسب.

1. ٠١

   الطلبات تذهب إلى واتساب، لا إلى خادم

   النماذج تتحقق من المدخلات، ثم تفتح واتساب والرسالة مكتوبة جاهزة.

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

   الثمن · المحادثة تعيش في واتساب التاجر نفسه لا على الموقع. وحقول الرسالة هي الحمولة بالفعل، فتوجيهها إلى خادم لاحقًا تعديل صغير لا إعادة بناء.

2. ٠٢

   الواجهة منصة دوّارة، لا عرض شرائح

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

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

   الثمن · التأثير يعتمد على اتساق التصوير، فصارت نقطة الكاميرا جزءًا من المطلوب لكل سيارة جديدة — وهو ما يُبقي المجموعة كلها تبدو كمعرض واحد.

3. ٠٣

   صورة واحدة لكل سيارة صارت معرضًا من أربع لقطات

   لقطات الواجهة والجانب والوقفة تُقتطع من الصورة الأصلية وقت البناء.

   وصلت كل سيارة في صورة واحدة، وصفحة التفاصيل بصورة واحدة تبدو غير مكتملة. فيقتطع خط معالجة الصور ثلاث لقطات مؤطَّرة من كل صورة أصلية إلى جانب المنظر الكامل، ويكتب نصًا بديلًا يصف اللقطة الفعلية، ويولّد صورة ضبابية مؤقتة لكل ملف. فتحوّلت ٢٣ صورة PNG بحجم ٤٣٫٣ ميجابايت إلى ٥٦ ملف WebP بحجم ٦٫١ ميجابايت.

   الثمن · اللقطات مأخوذة من صورة أصلية واحدة، وأي تصوير متعدد الزوايا يدخل في المعرض نفسه مباشرةً يوم وصوله.

4. ٠٤

   الذهبي المُسلَّم استُبعد

   حبر «بلاك سافاير» ولمسة بوردو حلّا محل ذهبي دليل الهوية.

   حدد نظام الألوان «ذهبي برايم» ‏#C9A96A. وعلى أرضية داكنة جاء شبيهًا بمشروع آخر في هذا البورتفوليو، فاختار المالك الابتعاد عنه. فصار الحبر ‏#161B22 — أزرق مسوَدّ مأخوذ من لون طلاء حقيقي لا أسود افتراضي — وبقي البوردو ‏#7A1C2C للمصابيح الدالّة والتفاصيل الصغيرة. وقيس كل لون نص مقابل السطح الذي يجلس عليه فعلًا.

   الثمن · لوحة الألوان مجموعة صغيرة من الـ tokens المسمّاة، فأي لون من دليل الهوية يمكن أن يعود بتعديل سطر واحد.

5. ٠٥

   الفخامة من الخامة، لا من العتمة

   الأزرار مُشطَّبة مثل الأسود اللامع في مقصورة السيارة، بمصباح دالّ يضيء عند المرور.

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

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

6. ٠٦

   التصفية تعيش في الرابط

   كل تركيبة تصفية صفحة مُولّدة على الخادم يمكن مشاركتها.

   المشتري الذي يجد «سيارات SUV بأقل من ٣٫٥ مليون» يستطيع إرسال هذا العرض بالضبط إلى شريكه. وخيارات القوائم مشتقة من المخزون نفسه، فلا خيار يعيد صفحة فارغة — وحين لا تطابق تركيبة أي سيارة، تقول الصفحة ذلك وتعرض توفير السيارة.

   الثمن · كل تغيير في التصفية انتقال صفحة لا تبديل فوري في المتصفح، ومع مجموعة بهذا الحجم لا يُلاحَظ ذلك.

7. ٠٧

   طبقة البيانات غير متزامنة من اليوم الأول

   الصفحات تنادي دوال المخزون، ولا تلمس قائمة السيارات مباشرةً.

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

   الثمن · طبقة وسيطة رقيقة واحدة اليوم — وهي بالضبط ما يجعل «إضافة لوحة إدارة لاحقًا» مهمة صغيرة لا إعادة بناء.

8. ٠٨

   الوصولية قِيست، ولم تُفترض

   ‏١٩ فحصًا آليًا تعمل على الصفحات الحقيقية على سطح المكتب والهاتف ووضع تقليل الحركة.

   تغطي الفحوص التصفية، والترتيب، والمعرض، والتحقق من النماذج، وتركيز لوحة المفاتيح، وتباين النص مقابل خلفية كل عنصر الفعلية، ومساحات لمس ٤٤ بكسل، والتمرير الجانبي، وقائمة الهاتف. وأثبتت قيمتها قبل الإطلاق: أمسكت زرًا في الترويسة يزاحم القائمة خارج الشاشات الصغيرة، ولونًا رماديًا من الهوية دون تباين AA، وروابط تذييل أصغر من أن تُلمس بارتياح — وأُصلحت كلها.

   الثمن · الفحوص تعمل على نسخة مبنية فعلًا لا على الكود — وهذا هو المقصود: تختبر ما يصل إلى الزائر، لا ما ينويه الكود.

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

عند التحميل يرتفع سطرا العنوان من أقنعتهما، وتنفتح منصة المعرض من شقّ رفيع إلى إطار كامل بنسبة ٢٫٣٩:١ — النسبة التي تُصوَّر بها أفلام السيارات — كما يُرفع الغطاء عن سيارة في حفل إطلاق. وترتفع بطاقة الكتالوج أخيرًا. وبعدها تتبدّل السيارات كل ٦٫٥ ثانية بانتقال مدته ١٫٤ ثانية، وتتوقف عند تمرير المؤشر، وعند تركيز لوحة المفاتيح، وكلما اختفى التبويب.

كل ما تحت الواجهة لا يتحرك إلا حين يُبلَغ: الأقسام ترتفع ١٨ بكسل خلال ٠٫٧ ثانية، وصور السيارات تنساب بضع بكسلات داخل إطاراتها على سطح المكتب، والتمرير فوق سيارة يرسم خطًا لونيًا واحدًا تحتها، والحقل المُركَّز يرسم خطه السفلي من اليسار لليمين، والترويسة ترتفع إلى كبسولة عائمة ضبابية بمجرد تحرك الصفحة، وعلى الهاتف تنزل القائمة مثل باب جراج. وكل الانتقالات تتشارك منحنى تسارع واحدًا، cubic-bezier(0.16, 1, 0.3, 1)، فيتباطأ الموقع كله بشخصية واحدة.

و‏prefers-reduced-motion محترمة كما ينبغي: الحركات تستقر على إطارها الأخير، ويُزال التمرير الناعم والـ parallax، وتتوقف الواجهة الدوّارة على سيارتها الأولى. ولأن الحركة لا تضبط موضع بدايتها إلا بعد اكتمال تحميل الصفحة، فالترميز الذي يصل إلى محرك البحث أو إلى متصفح بلا JavaScript يكون دائمًا كاملًا ومقروءًا.

ضبط النطاق جزء من العمل. كل بند هنا دُرس ثم استُبعد لسبب مذكور.

حسابات العملاء والمفضلة

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

حاسبة تمويل

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

الدفع أونلاين

لا أحد يدفع ثمن سيارة بهذا السعر دون أن يراها. والتحويل الحقيقي هو المعاينة.

لوحة تحكم للتاجر

اثنتا عشرة سيارة تتغير ببطء؛ وطبقة البيانات جاهزة لها حين يكبر المخزون.

دردشة مباشرة

واتساب هو حيث يوجد هؤلاء المشترون أصلًا. وقناة دردشة ثانية تقسم المحادثة.

بيانات التواصل في النسخة التجريبية قيم مؤقتة، والسيارات الاثنتا عشرة مخزون تجريبي مبني من الصور المُسلَّمة.