01 · نظرة عامة
الحذف بوصفه المنهج كله
في هذا التصوّر، تخيّلت Arke وكالة وساطة تمثّل كل سنة عددًا صغيرًا من المنازل ذات الطابع التصميمي، تُباع بتكتّم ومن دون استعراض. وكل غريزة لدى مواقع العقارات — كاروسيل المعرض، وحاسبة الرهن، وشريط «استفسر الآن» — استعراضٌ. لذلك يتحدّد هذا البناء بما ليس فيه.
هناك أربعة ألوان: أبيض، وحبري، ورمادي دافئ واحد، وخط شعري. لا بطاقات، ولا أسطح معبّأة، ولا ظلال، ولا زوايا مستديرة، ولا أيقونات. تفصل الأقسامَ مسطرةٌ ومساحةٌ رأسية تعادل تقريبًا ضعف أي صفحة أخرى في هذه المجموعة. إنه أقصر ملف أنماط بين العشرة بفارق واسع، وهذا هو التصميم.
02 · الفكرة
أفضل المنازل تنتظر أن تُفهَم
سطر الوكالة نفسه — أفضل المنازل لا تعلن عن نفسها؛ بل تنتظر، بدقة، أن تُفهَم — موجزُ تصميم متنكّر في هيئة نص. وهو يستبعد كل ما يُعلن: الحركة، والتباين، واللون، والوزن.
خط واحد، ثلاثة أوزان
Archivo بأوزان 100 و200 و300 للعناوين. لا شيء في الصفحة عريض. فالتراتبية حجم ومساحة، لا وزن أبدًا.
الشفافية وحدها
الظهورات تتلاشى ولا تنزاح أبدًا — رفضٌ متعمّد. وكالة تبيع السكينة لا ينبغي أن تنزلق أشياؤها هنا وهناك.
تصوير بالأبيض والأسود
تسع صور، كلها أحادية اللون، فيكون اللون الوحيد في الصفحة هو السعر.
03 · الأهداف
ما كان على الصفحة أن تفعله
تقديم ثلاثة منازل كما ينبغي
معماري باسمه، وموقع، وسعر، وفقرة واحدة. ما يكفي لتأهيل مشترٍ ولا شيء يضغط عليه.
شرح عملية خاصة
أربع خطوات تجعل التكتّم يبدو منهجًا لا مراوغة.
إبراز منزل واحد بإسهاب
جناح كيسلر ينال قسمًا كاملًا — إشارة العمق التي لا تستطيع شبكة مصغّرات إرسالها أبدًا.
بدء محادثة
نموذج استشارة بثلاثة حقول. ليس قمع استفسارات؛ بل تعارف.
04 · ترتيب البناء
كيف بُنيت
الرموز الأربعة
أبيض، وحبري، ورمادي، وخط شعري. كُتبت أولًا ولم يُضف إليها قط — كان على كل قرار لاحق أن يكون قابلًا للتعبير عنه بهذه الأربعة.
سلّم رأسي، لا أفقي
بلا لون ولا وزن يُشتغل بهما، يبقى المتغير الوحيد هو المساحة. نال سلّم المسافات عناية تفوق كل شيء آخر في البناء.
التنقّل الذي يُزيح الصفحة
فتح قائمة الجوال يجعل كل معلم في الخلفية
inertويحرّره فوق 900px — فاللوحة نمطية حقًّا، لا نمطية في المظهر فقط.إحصاءات بلا زخرفة
عدّادات صاعدة مصفوفة بالأوزان الثلاثة نفسها ككل شيء آخر. لا وحدات بلون مختلف، ولا أيقونات، ولا حلقات تقدّم.
الحذف
أزالت المراجعة الأخيرة نمط فاصل وحالتَي تحويم وحركة واجهة. وانتهى ملف الأنماط ذلك اليوم أصغر مما بدأ.
05 · البنية
ثلاثة ملفات
├── index.html 19.9 KB — 5 أقسام، 9 صور، 0 SVG مضمّن
├── styles.css 20.7 KB — 11 خاصية مخصّصة، 5 استعلامات وسائط
└── script.js 12.2 KB — 352 سطرًا: تنقّل · inert · ظهورات · عدّادات · نموذج
الحزمة التقنية
- Semantic HTML
- CSS Grid
- inert
- IntersectionObserver
- Archivo 100–300
- Inter
الإتاحة
- خلفية inert
- aria-expanded
- aria-live
- نقل التركيز عند الإرسال
- تقليل الحركة
06 · ما قاوَم
المشكلات، وما تغلّب عليها
الحرف فائق النحافة بحجم العناوين أنيق على حاسوب بشاشة ريتينا، وشبه غير مقروء على شاشة منخفضة الكثافة عند تكبير 100%، حيث تترقّق السيقان حتى تختفي.
الوزن 100 مسموح به فقط فوق عتبة حجم؛ ونص المتن لا ينزل عن 400 أبدًا. فالأوزان الأخف موجودة للعناوين حصرًا، وهو ما رُسمت له أصلًا.
إخفاء قائمة الجوال بصريًّا يُبقي روابطها في ترتيب Tab، فيتنقّل مستخدم لوحة المفاتيح عبر لوحة غير مرئية إلى لا شيء.
inert على معالم الخلفية ما دامت اللوحة مفتوحة، ويُحرَّر فوق 900px حيث لم تعد اللوحة موجودة. سمة واحدة تحلّ محل مسح tabindex يدوي كان سيحتاج صيانة إلى الأبد.
بلا ظلال ولا تعبئات ولا لون، قد تُقرأ الصفحة ناقصة لا متحفّظة — والفرق كله في المسافات.
ضُبط السلّم الرأسي قبل أن يستقر أي محتوى، فصار الإيقاع نظامًا لا سلسلة تعديلات موضعية. تجلس الأقسام على إحدى عشرة rem؛ ولا شيء أقرب من ذلك.
الظهورات بالشفافية وحدها لا تعطي العين شيئًا تتعقّبه، فقد تُقرأ في صفحة طويلة وميضًا لا وصولًا.
ارتفعت المدة بدل المسافة: 1.2 ثانية، أطول من أي صفحة أخرى هنا. بطيئة بما يكفي لتُقرأ تلاشيًا داخلًا، لا ومضة أبدًا.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
ثلاثة منازل، اختيرت على مهل
قسم عروض يعرض ثلاثة، انسجامًا مع النُّدرة المتخيَّلة في الموجز. والتخطيط يرفض حشوه.
قيل بهدوء، وقُصد بكامله
كلمات عملاء متخيَّلة مصفوفة بحجم المتن بلا علامات اقتباس، ولا صور شخصية، ولا تقييمات نجوم.
جناح كيسلر
منزل واحد مميَّز نال قسمًا كاملًا، مثبتًا أن الوكالة تستطيع الحديث عن العمارة لا عن الأمتار المربعة.
ابدأ بمحادثة
عنوان قسم التواصل هو استراتيجية البيع بأكملها، وللنموذج ثلاثة حقول على قدرها.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمّنًا وقيد التشغيل. يُحمَّل عند الطلب — لا يُجلب شيء قبل أن تطلبه.
تخطَّ المعاينة الحية
البناء الحقيقي، يعمل داخل الصفحة. المعاينة الحية صفحة مضمّنة؛ اضغط Escape للخروج منها.
افتح في ملء الشاشة ↖
