Aurelia House الانضباط بوصفه إشارة فخامة

01 · نظرة عامّة

الانضباط بوصفه إشارة فخامة

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

والنتيجة أكثر صفحات المجموعة تناظرًا، ونقيض صفحة Ember & Oak العريضة عن قصد. فحيث تعلّق تلك أرقام صفحاتها في هامش أيسر وتجري بأعمدة غير متناظرة، تضع هذه كل شيء على المحور الوسطي وتترك الفراغ يؤدّي العمل.

02 · الفكرة

واحد وأربعون غرفة، بلا استعجال

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

• الذهبي خطّ شعري

  اللمسة اللونية لا تملأ سطحًا أبدًا. تسطّر، وتضع خطًّا تحت، وتعلّم معيّنًا بين مقطعين، وهذا كلّ شيء. أربع من الأربع عشرة custom property هي الذهبي نفسه بدرجات شفافية نازلة — 1 و0.45 و0.22 و0.10 — وهذا مداه كلّه.

• كل شيء متوسّط

  التناظر يُقرأ رباطة جأش. اللوحات الفوتوغرافية الأعرض تكسر عمود القياس حين يلزم، لكن لا شيء في الصفحة يكسر المحور.

• أبطأ من البقيّة

  الظهور يجري على رمز زمن الظهور الخاصّ بالفندق: 1.1 ثانية، والمعرض يمسك كل صورة 5.5. لا شيء هنا يصل بسرعة.

03 · الأهداف

ما كان على الموقع أن يحمله

1. ثمانية مقاطع، صوت واحد

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

2. معرض يقود نفسه، ويتوقّف حين يُطلَب منه

   أربع صور تتلاشى بالتناوب على مؤقّت 5.5 ثانية، ونقاط معيّنة كقائمة تبويب، ومفاتيح الأسهم تمشي فيها، وزرّ إيقاف للإبهام الذي لا يستطيع التحويم.

3. طلب حجز، لا إتمام شراء

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

4. قائمة لا تتسرّب

   لوحة الجوال تُبقي Tab داخل الترويسة واللوحة في الاتّجاهين، وتعيد التركيز إلى زرّ القائمة عند إغلاقها.

04 · ترتيب البناء

الفندق عبر البناء

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

1. اللوحة قبل التخطيط

   أربع عشرة custom property، ولم يُسمح بدخول غيرها: فحمي، وعاجي، وذهبي، وبرونزي، وأردوازي، وفحمي مرفوع، وعاجي مخفوت، وثلاث درجات شفافية للذهبي، وعائلتا خطوط، ومنحنى تخفيف، وزمن الظهور.

2. الشبكة المتوسّطة

   عمود قياس واحد متوسّط داخل الحاوية — 42rem لمقدّمة القسم، و40rem لنصّ الافتتاح — مع السماح للّوحات بالخروج أعرض. بلا أعمدة جانبية وبلا لاتناظر.

3. الزخرفة

   مربّع بسبعة بكسلات مائل 45 درجة بين تدرّجين شعريّين، مرسوم بـ CSS بلا صورة. يفصل كل قسم، وهو زينة الصفحة الوحيدة.

4. مؤقّت المعرض

   تلاشٍ متبادل على فترة 5.5 ثانية، ونقاط معيّنة على tabindex متنقّل للموضع، وتوقّف تامّ لحظة استقرار مؤشّر على الإطار أو دخول التركيز إليه.

5. نموذج الطلب

   بُني أخيرًا، فورث الحروف والتباعد بدل أن يفرض ما عنده.

05 · البنية

ثلاثة ملفات

لا مُجمِّع ولا مُترجِم ولا node_modules. الفندق كلّه 78 ك.ب من المصدر عبر ثلاثة ملفات، تُقدَّم كما كُتبت تمامًا.

06 · ما الذي قاوم

ما الذي قاوم

1. التحدّي

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

   الحلّ

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

2. التحدّي

   الذهبي على الفحمي جميل وغير قانوني كثيرًا. الذهبي نفسه ينجح، لكنّ البرونزي المقترن به يرسب بحجم النصّ، ويرسب ثانيةً عند 0.72rem.

   الحلّ

   أُخرِج البرونزي من نظام الحروف تمامًا — الرمز ما زال مُعلَنًا ولا قاعدة واحدة تقرأه. وتولّى الأردوازي دور الثانوي المقروء عند 7.07:1، وحمل الذهبي عند 8.20:1 التسميات الصغيرة التي كان البرونزي سيحملها، والنسبتان مكتوبتان في ملف الأنماط إلى جانب اللونين.

3. التحدّي

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

   الحلّ

   دورة Tab مربوطة بالترويسة واللوحة معًا — اللوحة مع الشريط الذي يغلقها — وتلتفّ عند طرفَي هذه المجموعة، في الاتّجاهين. وEscape يغلق اللوحة ويعيد التركيز إلى زرّ القائمة.

4. التحدّي

   التخطيطات المتوسّطة تتفكّك عند أطوال الأسطر الطويلة. الفقرة المتوسّطة بعرض تسعين حرفًا غير مقروءة مهما كان الحرف أنيقًا.

   الحلّ

   النصّ محدود قبل أن يبلغ ذلك: 42rem لمقدّمة القسم، و40rem لنصّ الافتتاح، و780px للحاوية الضيّقة، كلٌّ متوسّط بهامش داخلي تلقائي. فيثبت المحور بينما يبقى طول السطر مريحًا.

07 · ما يستحقّ البقاء

الأجزاء التي تستحقّ البقاء

• الفندق عبر السنين

  خمس محطّات مؤرّخة من 1927 فصاعدًا، مُخرَجة سجلًّا مطبوعًا لا رسمًا معلوماتيًا — سنة، وسطر، وبلا أيقونات.

• نقاط معيّنة

  علامات موضع المعرض مائلة 45 درجة لتطابق الزخرفة، مرسومة بـ CSS بلا صورة. كلٌّ منها داخل هدف بـ26 بكسلًا فيتحقّق شرط حجم المؤشّر، بينما يبقى المعيّن نفسه سبعة بكسلات.

• كلمات النزلاء

  شهادتان مُخرَجتان اقتباسَين بارزين متوسّطين، ومدينة النزيل وسنة أول إقامة تحت الاسم — تسلسل قرطاسيّة الفندق نفسه، مستعارًا.

• طلب حجز

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

08 · شغّله حيًّا

شغّله هنا

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

aureliahouse.co.uk

شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة. المعاينة الحيّة صفحة مضمّنة. اضغط Escape لمغادرتها.

افتحه بملء الشاشة