من أرض خالية إلى أول عشاء: موقع شركة لبناء المنازل الفاخرة

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

Play video

يتتبّع الفيديو مراحل العمل بالترتيب. أما هذه المقالة فتتحدث أكثر عن طريقة التفكير: لماذا يبدأ الموقع بفيلم، ولماذا يتحرك أفقيًا، وما الذي حذفتُه حين صار يعمل فعلًا في المتصفح.

أربعة أسئلة قبل أي تصميم

تلخّص المطلوب في أربعة أمور على الموقع أن يحققها:

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

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

كانت النقطة الأولى الأهم. عبارة «فريق واحد من البداية إلى النهاية» سهلة الادعاء وسهلة التجاوز، فكل شركة بناء تقولها. لذلك أردتُ أن يرى الزائر ذلك يحدث أمامه بدل أن يقرأه.

جملة واحدة، تسع لقطات

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

قبل إنشاء أي صورة، قسّمتُ هذه الرحلة إلى تسع لقطات:

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

هذا الصف الأخير هو جوهر الفيلم. كان يمكن لموقع شركة بناء أن يتوقف عند «المنزل المكتمل». لكن العميل لا يشتري مبنى، بل يشتري يوم انتقاله إليه. لذلك يدخل الفيلم إلى الداخل قبل أن ينتهي.

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

على الموقع، يحمل الفيلم بعض البيانات الحية: عدّاد أيام من Day 001 إلى Day 412، واسم المرحلة الحالية (الموقع والأساسات، الهيكل، الغلاف الخارجي، تنسيق الحديقة والتشطيبات). عنوان البداية هو «Every estate starts as dirt.» وعنوان النهاية «From first dig to first dinner.» وحين تستقر الكاميرا على المنظر الجوي تظهر خمس علامات على المنزل (المنور، والمسبح، وساحة السيارات، وبستان الزيتون، والواجهة الحجرية)، وكل منها يفتح بطاقة صغيرة بلقطة مقرّبة.

لماذا أفقيًا، ولماذا لوحات رسم

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

الفكرة التي ربطت كل شيء جاءت من عالم العميل نفسه. يسلّم المعماريون المنزل على شكل مجموعة لوحات: A-00، A-01، A-02 وهكذا. فصارت كل شاشة لوحة، مرقّمة من A-00 إلى A-06، والانتقال إلى الشاشة التالية يشبه قلب الصفحة إلى الرسم التالي. الخطوط، والخطوط الرفيعة، ولون الورق الدافئ، واللون البرونزي الوحيد للتمييز، كلها نابعة من هذه الفكرة.

قبل أي تصميم بصري، أعطيتُ كل لوحة مهمة واحدة:

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

نصوص تبدو كأن شركة بناء تتكلم

قبل كتابة العناوين، وضعتُ بضع قواعد للنصوص: جمل قصيرة وتقريرية، وأرقام كلما أمكن: أيام، وأقدام مربعة، وأشهر. ولا «dream home» ولا «luxury living» ولا «world-class». هذه العبارات تجعل الموقع يبدو إعلانًا، وهذا الجمهور رأى ما يكفي من الإعلانات.

صارت العناوين عبارات بسيطة، كل منها تطرح ادعاءً تُثبته لوحتها بعد ذلك:

• Designed in-house. Built by the same hands. (مصمَّم لدينا. مبنيّ بالأيدي نفسها.)
• Light is a material. (الضوء مادة بناء.)
• Finished by the team that framed it. (يُشطّبه الفريق نفسه الذي أقام هيكله.)
• A simpler, faster path to an exceptional home. (طريق أبسط وأسرع إلى منزل استثنائي.)
• What will your home cost? (كم سيكلّف منزلك؟)
• One team. From dirt to dinner. (فريق واحد. من التراب إلى العشاء.)

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

الحاسبة تجيب عن أصعب سؤال

أكثر سؤال يتحرّج الناس من طرحه على شركة البناء هو «كم؟». لذلك خصصتُ له لوحة مستقلة.

خمسة مدخلات: المساحة، ومستوى التشطيب، وحالة الأرض، وعدد الطوابق، والمسبح مع المساحات الخارجية. والنتيجة نطاق وليست رقمًا واحدًا: مع القيم الافتراضية $3.8M–$4.6M و14–18 شهرًا، مقسّمة بين التصميم والبناء والتصميم الداخلي. وتحتها سطر يوضح أن النطاق إرشادي لمنطقة دالاس الكبرى، وأن السعر النهائي يأتي بعد معاينة الأرض.

بعض القرارات كانت مهمة هنا:

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

خلفها معادلة بسيطة واحدة (المساحة × سعر مستوى التشطيب، مع مبالغ ثابتة للمسبح أو للهدم وإعادة البناء)، وكل الأرقام في ملف واحد. حين يريد العميل تغيير سعر، يكفي تعديل واحد.

تجيب لوحة Process عن سؤال «كم يستغرق؟» بالروح نفسها. جدولان زمنيان على مقياس واحد: الطريق التقليدي، حيث تتتابع مراحل التصميم والتراخيص والمناقصة والبناء والتشطيب على مدى 18–24 شهرًا، والتصميم والبناء معًا، حيث تتداخل المراحل وتنتهي في 12–16 شهرًا. يظهر الفرق قبل قراءة أي كلمة.

من الصور التصورية إلى المتصفح الحقيقي

قبل التطوير، أنشأتُ صورًا تصورية مفصّلة لكل لوحة، لأتأكد من أن الصور والخطوط والألوان تعمل معًا وأن الإيقاع صحيح. ثم حوّلتُ كل ذلك إلى نظام تصميم في Claude Design، وسلّمتُ التصميم والمطلوب وملاحظات التطوير إلى Claude Code.

بلغت النسخة الأولى نحو 80% من الهدف، فالبنية والصور الرئيسية طابقت الخطة. لكن ثوانٍ قليلة من الاستخدام الفعلي كانت كافية لملاحظة ما ليس صحيحًا: للتمرير قصور ذاتي غريب، والانتقال بين الشاشات متقطع، وبعض الخطوط لم تكن كما أردت.

لا تستطيع الصور التصورية إظهار أي من ذلك، فهي لا تتحرك. لذلك تمحورت المرحلة التالية حول الإحساس باستخدام الموقع، وكان كثير منها حذفًا:

• شاشة واحدة لكل سحبة. تواصل لوحة اللمس إرسال أحداث التمرير بعد رفع الأصابع، فكانت سحبة قوية واحدة تتخطى شاشتين. الآن تنقل الحركة شاشة واحدة بالضبط، والدفعة الخفيفة ترتد إلى مكانها.
• الفيلم يعمل وحده. في البداية كان التمرير يقدّم الفيلم إطارًا بإطار. يبدو ذلك ذكيًا، لكنه سلّم إيقاع القصة لمعصم الزائر، فكان معظم الناس إما يستعجلون أو يعلقون في المنتصف. الآن يعمل من تلقاء نفسه، مختصرًا إلى خمس عشرة ثانية، وتظهر العلامات عند نهايته.
• زخارف أقل من لوحات الرسم. كان في النسخة الأولى مسطرة تقدّم، وخانة عنوان على كل لوحة، وشبكة تمر فوق الشاشة بين اللوحات، وأرقام فوق الفيلم. كل منها كان في التصور، ومجتمعة كانت ضجيجًا. حذفتُها كلها. بقيت فكرة لوحات الرسم في البنية والخطوط ولون الورق، وصارت أقوى لأنها أهدأ.
• للهواتف تصميمها الخاص. التمرير الأفقي فكرة لشاشات الحاسوب. على الهاتف تتراص اللوحات عموديًا، وتصبح الحلقة زرًّا «Back to the beginning»، ومن يفضّل تقليل الحركة يرى المنظر الجوي ثابتًا مع زر لتشغيل الفيلم.

ما سآخذه إلى المشروع التالي

1. اعثر على الجملة الواحدة التي يجب أن يوصلها العميل. هنا كانت «فريق واحد من البداية إلى النهاية»، ومنها نما الفيلم والبنية ومعظم النصوص.
2. لوحة القصة قبل التوليد. حدّدت تسعة رسوم ما يجب أن تقوله كل لحظة، فصار للصور اتجاه بدل اختيارها واحدة تلو الأخرى.
3. احكم على الصور كمجموعة. الاستمرارية أهم من أي صورة جميلة منفردة.
4. أعطِ كل شاشة سؤالًا واحدًا تجيب عنه، ورتّبها بالترتيب الذي سيسأل به العميل.
5. توقّع أن يغيّر المتصفح الخطة. التصور يحدد الشكل؛ أما الإحساس فلا يظهر إلا حين تستطيع التمرير، وكثيرًا ما يكون الحل حذف شيء ما.

يمكنك رؤية الشاشات والفيلم الكامل في صفحة مشروع Structiv، أو تجربة الموقع الحي بنفسك.

أي جزء تريدني أن أتعمّق فيه أكثر: فيلم البناء، أم التمرير الأفقي، أم الانتقال من Claude Design إلى Claude Code؟ أخبرني في تعليقات YouTube، واشترك في الأسفل لتصلك المقالة التالية.