01 · نظرة عامة
بعنا المرايا واشترينا مزيدًا من الأقراص
كل موقع نادٍ رياضي يبدو كمنتجع. تدرّجات ناعمة، وامرأة تبتسم لدُمبل، وصورة جاهزة لعصير سموذي. في هذا التصوّر، تخيّلت SLAB أرضية خرسانية في ديترويت فيها 41 حاملًا وبلا مرايا، تفتح 115 ساعة في الأسبوع، وكان على الموقع أن يُعرَف بأنه المبنى نفسه.
لذلك بُنيت الصفحة كما بُنيت المعدات: حدود من ثلاثة بكسلات، وظلال قاسية من ثمانية بكسلات مُزاحة نزولًا وجانبًا، وشبكة أرضية من 48 بكسلًا مسطّرة عبر كل شيء، وأصفر حمضي واحد يُستخدم سطحًا — لا نصًّا أبدًا. لا شيء ناعم، ولا شيء مستدير، ولا شيء يتلاشى: الظهورات تنطبع في تسعين ملّي ثانية من تحويل خطي بلا أي تغيير في الشفافية إطلاقًا.
02 · الفكرة
الواجهة بوصفها معدات
الظلال مادية
إزاحة قاسية 8px 8px 0 بلا أي ضباب. تُقرأ قرصًا يستقر فوق قرص، لا ارتفاعَ واجهةٍ في UI.
الحمضي سطح
الأصفر يملأ الكتل والرقاقات. وليس نصًّا أبدًا، لأن #D8F21D على الأبيض إخفاق في التباين ولا علامة تستحق ذلك.
بلا منحنى تخفيف
تسعون ملّي ثانية، خطية. التخفيف يوحي بالزخم، والزخم يوحي بالنعومة.
03 · الأهداف
ما كان على الصفحة أن تفعله
صفِّ، لا تحوّل
يُفترض بالصفحة أن تُنفّر بعض الناس. والبيان الثاني في ترتيب الصفحة لهذا السبب بالضبط.
انشر الأسبوع كاملًا
جدول حصص كامل في جدول يمكنك قراءته فعلًا على الهاتف، لأن هذا هو سؤال كل عضو محتمل.
سعّر بلا اعتذار
ثلاث فئات، بلا مسرحية خصم سنوي، تحت عنوان «ادفع مقابل الحديد، لا التصميم الداخلي».
سجّل الناس في شاشة واحدة
الاسم، والبريد، والهاتف، والهدف، والخطة. خمسة حقول، وأخطاء فورية، ومنطقة حيّة واحدة.
04 · ترتيب البناء
البرنامج
الشبكة والحدود
دخلت شبكة الأرضية من 48 بكسلًا والحدود من ثلاثة بكسلات قبل أي محتوى. وكان على كل ما جاء بعدهما أن يصمد أمامهما.
الحرف بأعلى صوته
Anton للعناوين، وRoboto Mono لـكل ما عداها — خط المتن هو أحادي المسافة، وهذا ما يجعل الصفحة تُقرأ كملصقات معدات مطبوعة.
ظهورات مختومة
تحجيم خطي في 90ms بلا تلاشٍ، مع شبكة أمان بعد
loadتكشف كل ما فاته المراقب.الأسبوع، بالحديد
جدول الحصص، بُني أخيرًا لأنه أصعب شيء في الصفحة على البقاء مقروءًا عند 375 بكسلًا.
05 · البنية
ثلاثة ملفات
├── index.html 33.9 KB — 8 أقسام، 8 صور ثنائية اللون
├── styles.css 37.4 KB — 12 خاصية مخصّصة، 7 استعلامات وسائط
└── script.js 12.2 KB — 367 سطرًا: تنقّل · ظهورات مختومة · عدّادات · نموذج · مراسٍ
الحزمة التقنية
- Semantic HTML
- CSS Grid
- Hard shadows
- requestAnimationFrame
- Anton
- Roboto Mono
الإتاحة
- aria-expanded
- aria-live
- شبكة أمان عند التحميل
- تقليل الحركة
- ترميز جدول حقيقي
06 · ما قاوَم
ما قاوَم
الأصفر الحمضي هو العلامة، وهو يخفق في التباين على الأبيض والأسود معًا بأحجام النص. استخدامه للعناوين كان سيصبح إخفاقًا صريحًا في WCAG على أعلى عنصر صوتًا في الصفحة.
عُرّف الحمضي رمزَ سطح منذ البداية. يملأ كتلًا تحمل نصًّا أسود، ولا يلوّن حرفًا أبدًا. فالعلامة حاضرة بكاملها ولا شيء في الصفحة غير مقروء.
الظهور عند التمرير يُخفي المحتوى افتراضيًّا. وفي صفحة شخصيتها كلها الصراحة، محتوى عالق في الخفاء لأن مراقبًا لم يشتغل قط سيكون أسوأ إخفاق ممكن.
شبكة أمان على window.load تمسح كل عنصر ما زال مخفيًّا وتكشفه. فالظهور تحسين له موعد نهائي صريح.
جدول حصص لسبعة أيام جدولٌ عريض، والجداول العريضة على شاشة من 375 بكسلًا هي حيث تستسلم معظم مواقع النوادي ببساطة وتُخفي المحتوى.
ترميز <table> حقيقي يتحول تحت نقطة الكسر إلى كومة من كتل الأيام، مع احتفاظ كل صف بارتباطه برأسه. معظم استعلامات الوسائط السبعة في البناء موجودة لهذا المكوّن وحده.
الرابط الداخلي الذي يمرّر فحسب يترك لوحة المفاتيح خلفه. يتحرك المنظر ولا يتحرك التركيز، وضغطة Tab التالية تكمل من حيث كان القارئ أصلًا.
يبقى التمرير في CSS؛ والسكربت ينقل التركيز فقط. كل مرساة تمنح وجهتها tabindex="-1" وتركّز عليها مع preventScroll فور استقرار التمرير — وفورًا تحت prefers-reduced-motion، حيث لا شيء ينتظر الاستقرار.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
الثِّقَل هو المقصود
ثلاثة أختام متراصة، الثالث محدَّد بإطار لا معبّأ — العلامة كلها في واجهة واحدة، بلا حاجة إلى صورة.
اختر سُمَّك
بطاقات برامج بصور ثنائية اللون مُدارة درجة ونصف درجة عن الاستقامة، فلا تبدو الشبكة مرصوفة آليًّا أبدًا.
أصحاب الصوت العالي
مدرّبون يُقدَّمون بأرقام رفعاتهم لا بشهاداتهم.
إجابات مستقيمة
أسئلة شائعة تجيب عن «هل عندكم ساونا» بـ«لا». النص والتصميم يؤديان المهمة نفسها.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمّنًا وقيد التشغيل. يُحمَّل عند الطلب — لا يُجلب شيء قبل أن تطلبه.
تخطَّ المعاينة الحية
البناء الحقيقي، يعمل داخل الصفحة. المعاينة الحية صفحة مضمّنة؛ اضغط Escape للخروج منها.
افتح في ملء الشاشة ↖
