SLAB Strength Club الثِّقَل هو المقصود

01 · نظرة عامّة

بعنا المرايا واشترينا أقراصًا أكثر

كل موقع صالة رياضية يبدو كمنتجع. تدرّجات ناعمة، وامرأة تبتسم لدمبل، وصورة مخزنية لعصير. تخيّلت في هذا المفهوم أنّ SLAB أرضية خرسانية في ديترويت بـ41 حاملًا وبلا مرايا، تفتح 115 ساعة أسبوعيًا — وكان على الموقع أن يكون المبنى نفسه على نحو يُعرَف.

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

02 · الفكرة

الواجهة بوصفها جهازًا

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

• الظلال مادّية

  إزاحة قاسية 8px 8px 0 بلا أي ضبابية. تُقرأ قرصًا يستقرّ فوق قرص، لا ارتفاعًا في واجهة استعمال.

• الحادّ سطح

  الأصفر يملأ الكتل والشرائح. وليس نصًّا أبدًا، لأنّ #D8F21D على الأبيض رسوب في التباين، ولا علامة تستحقّ ذلك.

• بلا منحنى تخفيف

  تسعون مللي ثانية، خطّية. التخفيف يوحي بزخم، والزخم يوحي بنعومة.

03 · الأهداف

ما كان على الصفحة أن تفعله

1. الترشيح، لا التحويل

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

2. نشر الأسبوع كلّه

   جدول حصص كامل في جدول تستطيع قراءته فعلًا على الهاتف، لأنّ هذا هو أول سؤال لدى كل عضو محتمل.

3. التسعير بلا اعتذار

   ثلاث درجات، وبلا مسرحية خصم سنوي، بعنوان «ادفع مقابل الحديد لا مقابل الديكور».

4. تسجيل الناس في شاشة واحدة

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

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

البرنامج

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

1. الشبكة والحدّ

   دخلت الشبكة الأرضية بـ48 بكسلًا والحدّ بثلاثة بكسلات قبل أي محتوى. وكان على كل ما بعدهما أن ينجو منهما.

2. الحرف بأعلى صوت

   Anton للعرض، وRoboto Mono لكل ما عداه. خطّ الجسد أحادي المسافة، وهذا ما يجعل الصفحة تُقرأ وسمَ أجهزة مطبوعًا.

3. ظهور كالختم

   تحجيم خطّي في 90 مللي ثانية بلا تلاشٍ، مع شبكة أمان بعد التحميل تُظهر كل ما فات المراقب.

4. الأسبوع، بالحديد

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

05 · البنية

ثلاثة ملفات

لا مُجمِّع، ولا إطار عمل، ولا خطّ أيقونات، ولا node_modules. ثلاثة ملفات تُقدَّم كما كُتبت، وإحدى عشرة custom property تحمل المظهر كلّه.

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

مشكلات، وما تغلّب عليها

1. التحدّي

   الأصفر الحادّ هو العلامة، وهو يرسب في التباين بإزاء الأبيض والأسود معًا بأحجام النصّ. واستعماله للعناوين كان سيصير رسوبًا صريحًا في WCAG على أعلى عناصر الصفحة صوتًا.

   الحلّ

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

2. التحدّي

   الظهور عند التمرير يخبّئ المحتوى افتراضيًا. وفي صفحة شخصيّتها كلّها الصراحة، يكون المحتوى العالق غير مرئي لأنّ مراقبًا لم يعمل هو أسوأ إخفاق ممكن.

   الحلّ

   شبكة أمان عند window load تمسح كل عنصر ما زال مخبّأً وتُظهره. فالظهور إضافة لها موعد نهائي صريح.

3. التحدّي

   جدول حصص لسبعة أيام جدول عريض، والجداول العريضة عند 375 بكسلًا هي حيث تستسلم معظم مواقع الصالات وتخبّئ المحتوى.

   الحلّ

   وسوم جدول حقيقية تتحوّل إلى رزمة كتل يومية تحت نقطة الانكسار، مع احتفاظ كل صفّ بارتباطه بترويسته. ومعظم media queries السبعة في العمل موجودة لهذا المكوّن وحده.

4. التحدّي

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

   الحلّ

   التمرير يبقى في CSS، والسكربت ينقل التركيز فقط. كل مرساة تمنح وجهتها tabindex بقيمة -1 وتركّز عليها بـpreventScroll حالما يستقرّ التمرير — وفورًا تحت تقليل الحركة، حيث لا شيء يستقرّ.

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

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

• الثِّقَل هو المقصود

  ثلاثة أختام مرصوصة، ثالثها مفرّغ لا معبّأ. العلامة كلّها في واجهة واحدة، بلا حاجة إلى صورة.

• اختر سُمّك

  بطاقات برامج بصور ثنائية اللون مائلة درجةً ونصفًا عن الاستقامة، فلا تبدو الشبكة أبدًا مضبوطة بآلة.

• الأعلى صوتًا

  مدرّبون يُقدَّمون بأرقام رفعاتهم لا بشهاداتهم.

• إجابات مباشرة

  أسئلة شائعة تجيب عن «هل عندكم ساونا» بـ«لا». النصّ والتصميم يؤدّيان العمل نفسه.

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

شغّله هنا

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

slabstrength.club

شغّله هنا

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

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