01 · نظرة عامة
متجر يتصرف كدفتر يوميات حقل
التجارة الإلكترونية للعناية بالبشرة لها قالب افتراضي واحد: شبكة بيضاء من الجرار عليها شارة خصم. في هذا التصوُّر، تخيّلت علامة تزرع الآذريون والقرّاص والورد الروغوزا بنفسها على فدّانين وتصبّ أربعًا وثلاثين جرة في كل دفعة. الشبكة البيضاء كانت ستسطّح الشيء الوحيد الذي يجعلها تستحق الشراء.
لذا فالصفحة ورق دافئ بحبيبات ضجيج كسوري مثبتة فوق السطح كله، واللوحات مقوّسة القمة كما صور المنتجات نفسها، والظهورات تستقر من دوران بدرجتين — لا شيء يصل مربّعًا تمامًا، لأن لا شيء هنا صناعة آلة.
02 · الفكرة
ندرة يمكنك عدّها
الموجز التخيّلي اشترط أن تكون كل دفعة مرقّمة، وكل جرة واحدة من أربع وثلاثين — قيدٌ نصمم حوله لا أداة تسويق، لذا تعامل الصفحة الرقم كمحتوى: يظهر في الترويسة، وفي التذييل، وعلى رف المنتجات.
القوس
شكل واحد — border-radius: 50% 50% 0 0 — يُستخدم على اللوحات وبطاقات المنتجات والواجهة الافتتاحية. هو كامل معجم الزخرفة في الصفحة.
حبيبات فوق كل شيء
مرشِّح feTurbulence من SVG مثبت فوق الصفحة. مضمَّن، فيكلّف سطر ترميز واحدًا ولا طلب شبكة واحدًا.
لا شيء يحطّ مستقيمًا
الظهورات تستقر من −2°، والبطاقات تميل ميلًا طفيفًا تحت المؤشر الدقيق. وكلاهما يختفي تمامًا مع تقليل الحركة.
03 · الأهداف
ما كان على الصفحة فعله
بيع أربعة منتجات كما يجب
رف للأكثر مبيعًا بمكوّنات حقيقية وأسعار حقيقية، لا شبكة مصغّرات وشريط تصفية.
حكاية الحقل مرة واحدة
حقل واحد، كل جرة — قسم المنشأ الذي يبرر السعر، موضوع قبل المتجر لا بعده.
تعليم الطقس
تسلسل مسائي في أربع خطوات، لأن المنتج لا يعمل إلا إذا استُخدم بالترتيب.
طلب البريد دون تسوّل
«رسائل على مهل، وباكورة الحصاد» — كتلة اشتراك تسمّي ما سيصلك بدل الوعد بخصم.
04 · ترتيب البناء
كيف بُني
لوحة الألوان من الحقل
عشرون خاصية مخصصة معايَنة من النباتات نفسها: شوفاني، وإسبرسو، وطحلبي، وميرمية، وأسمر، وكريمي، وطحلبي معمَّق لكل ما يجب أن يُقرأ.
ستة وأربعون SVG مضمّنًا
خربشات وأوراق نبات والخط المموّج تحت الكلمات، وكل أيقونة والختم. لا شيء نُقّط، ولا شيء من طقم أيقونات جاهز.
طبقة الحبيبات
مثبتة،
pointer-events: none، فوق الخلفية وتحت المحتوى، بعتامة منخفضة بما يكفي لتُحَس ورقًا لا ضجيجًا.منظومة القوس
رمز نصف قطر واحد مطبق على ثلاثة مقاييس — الواجهة الافتتاحية واللوحة وبطاقة المنتج — فيُقرأ الشكل منظومةً لا زخرفة عابرة.
السلة والأكورديون
إضافة إلى السلة بحارس إعادة دخول كي لا تضيف النقرة المزدوجة مرتين، وأسئلة شائعة تُبقي جوابًا واحدًا مفتوحًا.
05 · البنية
ثلاثة ملفات
├── index.html 40.0 KB — 6 أقسام، 10 صور فوتوغرافية، 46 SVG مضمّنًا
├── styles.css 31.6 KB — 20 خاصية مخصصة، 5 استعلامات وسائط
└── script.js 9.3 KB — 299 سطرًا: ترويسة · تنقل · ظهورات · إمالة · سلة · أكورديون
الحزمة التقنية
- feTurbulence
- CSS Grid
- 3D tilt
- Inline SVG
- IntersectionObserver
- Prata
- Nunito Sans
إتاحة الوصول
- aria-live basket
- aria-expanded
- Focus move on anchor
- pointer: fine gate
- Reduced motion
06 · ما عاندني
ما عاندني
طبقة حبيبات على كامل الصفحة عنصر مثبت يغطي إطار العرض، وهذه هي الطريقة الكلاسيكية لجعل كل رابط في الموقع غير قابل للنقر.
pointer-events: none على الطبقة، وهي تجلس عند z-index أدنى من المحتوى لا فوقه. الحبيبات مرئية فوق الخلفية ولا تعلو عنصر تحكم أبدًا.
إمالة ثلاثية الأبعاد تتبع الفأرة على بطاقات المنتجات تعني مستمعًا وتحويلًا لكل بطاقة — ومع رف كامل منها، هذا عمل كثير في كل إطار لأجل أثر زخرفي.
الإمالة تحويل CSS عند التحويم محكوم ببوابتي (hover: hover) and (pointer: fine) وprefers-reduced-motion: no-preference. لا مستمع ولا كلفة إطار، وعلى اللمس لا وجود لها أصلًا.
الأخضر الطحلبي على الشوفاني يبدو صحيحًا ويقيس خطأً: الدرجة الوسطى التي اخترتها للعلامة تفشل في التباين عند حجم نص المتن.
أخضران. الطحلبي الأفتح يملأ الأشكال والخطوط الفاصلة؛ وطحلبي معمَّق يحمل كل نص مميز. اللوحة كما هي للعين — وتنجح في القياس.
إضافة إلى السلة كانت تنطلق مع كل نقرة، فالنقرة المزدوجة تضيف بصمت جرتين من دفعة من أربع وثلاثين.
حارس إعادة دخول على الزر يتجاهل الضغطات المتكررة حتى يُعلَن التأكيد في المنطقة الحية — فالتغذية الراجعة والقفل يتشاركان حالة واحدة.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
رف الأكثر مبيعًا
أربع بطاقات مقوّسة القمة بالمكوّنات وأرقام الدفعات والأسعار — رف، لا شبكة.
حقل واحد، كل جرة
قسم المنشأ، موضوع قبل المتجر كي يصبح السعر مفهومًا حين تبلغه.
طقس المساء
أربع خطوات بعلامات مرسومة يدويًا — أقرب ما تصل إليه صفحة ويب من بطاقة إرشادات داخل العلبة.
الدفعة رقم 34 تُصَب الآن
سطر في التذييل يتغير مع الدفعة — المخزون التخيّلي محمول حتى آخر كلمة في الصفحة.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمَّن ويعمل. يُحمَّل عند الطلب — لا يُجلَب شيء حتى تطلبه.
تخطَّ المعاينة المباشرة
البناء الحقيقي يعمل داخل الصفحة. المعاينة المباشرة صفحة مضمَّنة؛ اضغط Escape لمغادرتها.
افتح بملء الشاشة ↗
