تواصل
انتقل إلى التقرير

مفهوم بمبادرة ذاتية · سبتمبر 2020

Root & Ritual متجر كدفتر ميداني

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

القطاع
تجارة إلكترونية · عناية نباتية بالبشرة
الإخراج الفني
نباتية عضوية
SVG مضمّن
46 — الأكثر بين العشرة
المتجر
سلّة تعمل، و10 أسعار
جافاسكربت
9.3 ك.ب، 300 سطر

ما يُظهره هذا المشروع

ثلاثة تخصّصات من الأربعة، والتقرير أدناه هو الدليل على كلٍّ منها.

  • مواقع الويب إمالة بطاقات المنتجات عند التحويم CSS خلف ثلاث بوّابات — التحويم، والمؤشّر الدقيق، وعدم تفضيل تقليل الحركة — فلا يكلّف رفٌّ كامل منها شيئًا في الإطار الواحد، ولا وجود له على اللمس أصلًا.
  • التجارة الإلكترونية العمل الوحيد في المجموعة الذي فيه سلّة حقيقية: منتجات مسعّرة تحمل مكوّناتها وأرقام دفعاتها، وحارس ضدّ إعادة الدخول فلا تضيف النقرة المزدوجة مرطبانًا ثانيًا، والتأكيد مُعلَن في منطقة حالة لا مرسومًا فحسب.
  • التصميم الجرافيكي ستّة وأربعون رسم SVG مضمّنًا، الأكثر بين العشرة — تعرّجات، وأوراق، والخطّ المتموّج، وكل أيقونة، والختم، كلّها مرسومة بالوسوم، ولا شيء منها نقطي ولا من مجموعة أيقونات.
صفحة Root and Ritual كاملة في لقطة واحدة: الواجهة ذات القوس العلوي، ورفّ الأكثر مبيعًا، وقصّة الحقل، وطقس المساء، والمراجعات، وصندوق الموسم، والأسئلة الشائعة، وكتلة النشرة البريدية
الصفحة المنجزة من أوّلها إلى آخرها. مرّر داخل الإطار لقراءتها.

01 · نظرة عامّة

متجر يتصرّف كدفتر ميداني

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

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

02 · الفكرة

ندرة يمكنك عدّها

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

  • القوس

    شكل واحد، border-radius: 50% 50% 0 0، مستعمَل على اللوحات وبطاقات المنتجات والواجهة. وهو مفردات الزخرفة كلّها في الصفحة.

  • حُبيبات فوق كل شيء

    مرشّح feTurbulence مثبّت فوق الخلفية. مضمّن، فيكلّف تصريحًا واحدًا ولا طلبًا واحدًا.

  • لا شيء يحطّ مستقيمًا

    الظهور يستقرّ من سالب درجتين، والبطاقات تميل ميلًا خفيفًا جدًا تحت مؤشّر دقيق. وكلاهما يختفي تمامًا تحت تقليل الحركة.

03 · الأهداف

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

  1. بيع أربعة منتجات كما ينبغي

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

  2. رواية قصّة الحقل مرّة واحدة

    حقل واحد، وكل مرطبان — قسم المنشأ الذي يبرّر السعر، موضوعًا قبل المتجر لا بعده.

  3. تعليم الطقس

    تسلسل مسائي في أربع خطوات، لأنّ المنتج لا يعمل إلّا إن استعمله أحدهم بالترتيب.

  4. أخذ بريد إلكتروني بلا تسوّل

    رسائل بطيئة، وأوّل الحصاد: كتلة اشتراك تسمّي ما سيصل بدل أن تعد بخصم.

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

كيف بُنيت

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

  1. اللوحة من الحقل

    ثماني عشرة custom property على :root، مأخوذة من النباتات نفسها — شوفان، وإسبريسو، وطُحلبي، ومريمي، وأسمر فاتح، وكريمي، مع طُحلبي معمَّق لكل ما يجب أن يُقرأ.

  2. ستّة وأربعون رسم SVG مضمّنًا

    تعرّجات، وأوراق، والخطّ المتموّج، وكل أيقونة، والختم. لا شيء نقطي، ولا شيء من مجموعة أيقونات.

  3. طبقة الحُبيبات

    مثبّتة، وpointer-events none، فوق الخلفية وتحت المحتوى، بشفافية منخفضة بما يكفي لتُحَسّ ورقًا لا ضوضاء.

  4. نظام الأقواس

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

  5. السلّة والقائمة المنسدلة

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

05 · البنية

ثلاثة ملفات

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

root-and-ritual/

index.html
42.1 KB
6 أقسام، و10 صور، و46 SVG مضمّنًا، ونموذج واحد
styles.css
31.7 KB
18 custom property جذرية، و5 media queries، وكتلة تقليل حركة واحدة
script.js
9.3 KB
300 سطر: ترويسة، وتنقّل، وظهور، وإمالة، وسلّة، وقائمة منسدلة

المكوّنات التقنية

  • feTurbulence
  • CSS Grid
  • Inline SVG
  • CSS-only tilt
  • IntersectionObserver
  • Prata
  • Nunito Sans
  • Vanilla JavaScript

سطح سهولة الوصول

  • Live region basket
  • aria-expanded
  • Focus moved on anchor
  • hover: hover gate
  • pointer: fine gate
  • Reduced motion

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

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

  1. التحدّي

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

    الحلّ

    pointer-events none على الطبقة، وهي تحت المحتوى لا فوقه. فالحُبيبات مرئية فوق الخلفية ولا تعلو عنصر تحكّم أبدًا.

  2. التحدّي

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

    الحلّ

    الإمالة تحويل CSS عند التحويم محصور خلف التحويم والمؤشّر الدقيق واستعلام no-preference لتقليل الحركة. بلا مستمع، وبلا كلفة إطار، ولا وجود لها على اللمس إطلاقًا.

  3. التحدّي

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

    الحلّ

    طُحلبيّان. الأفتح يملأ الأشكال والخطوط؛ والمعمَّق يحمل كل نصّ لمسة عند 4.64:1، والأبيض على الطُحلبي كسب تباينًا بدل أن يخسره، من 5.79:1 إلى 6.25:1. اللوحة كما هي في النظر، وتجتاز.

  4. التحدّي

    الإضافة إلى السلّة كانت تُطلَق عند كل نقرة، فتضيف النقرة المزدوجة بصمت مرطبانين من دفعة أربعة وثلاثين.

    الحلّ

    حارس ضدّ إعادة الدخول على الزرّ يتجاهل الضغطات المكرّرة حتى يُعلَن التأكيد في المنطقة الحيّة. فالتغذية الراجعة والقفل يتشاركان حالةً واحدة.

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

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

  • رفّ الأكثر مبيعًا

    أربع بطاقات ذات أقواس علوية بمكوّنات وأرقام دفعات وأسعار. رفّ، لا شبكة.

  • حقل واحد، وكل مرطبان

    قسم المنشأ، موضوعًا قبل المتجر ليكون السعر مفهومًا حين تبلغه.

  • طقس المساء

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

  • الدفعة رقم 34 تُصبّ الآن

    سطر في التذييل يتغيّر مع الدفعة — المخزون المتخيَّل ممدودًا حتى آخر كلمة في الصفحة.

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

شغّله هنا

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

تخطَّ المعاينة الحيّة
Root and Ritual كما يظهر عند التحميل: الواجهة ذات القوس العلوي على ورق دافئ محبَّب، وأول مرطبان تحتها شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة.

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

من فضلك أدر جهازك،
هذا الموقع مبني عموديًا.