رنا أبو ديبنماذج ومفاهيم
½M هاف مليون
تجربة إطلاق أكواب بأسلوب مواقع Awwwards: لونك، ومقاسك، واسمك محفورًا على الكوب.
حين يصبح الاختيار نفسه هو التجربة.
- النوع
- مفهوم شخصي غير رسمي
- الدور
- الإخراج الفني والتصميم والنموذج
- الأدوات
- Claude Code, Three.js, GSAP
- الحالة
- نموذج منشور
- المشكلة
- منتج قائم على الاختيار الشخصي يُعرض عادةً شبكة صور متشابهة.
- مساهمتي
- مفهوم شخصي غير رسمي: الإخراج الفني، والتصميم، والنموذج.
- القرار الأهم
- فصل لكل لون ثم المقاس، ولحظة حفر الاسم ذروةً للتجربة.
- الدليل
- نموذج منشور يعمل على الويب.
- النتيجة
- تجربة مفاهيمية، وليست منتجاً تجارياً مطلقاً. لم تُقَس أي نتائج.
السؤال
متجرٌ يعرض المنتج، أم تجربةٌ تعرّفك به؟
كنتُ أتابع أكواب Half Million على تيك توك: أربعة ألوان، ومقاسان، واسم يُحفر بالليزر. منتج يقوم على الاختيار الشخصي، لكنه يُعرض عادةً شبكةً من الصور المتشابهة. فسألت: ماذا لو صُمّم الإطلاق بحيث يصبح الاختيار نفسه هو التجربة؟
الترتيب
اللون أولاً، ثم المقاس.
بدل شبكة من 8 منتجات متساوية، فصل لكل لون، ثم المقاس: 355 مل أو 500 مل. قرار واحد في كل مرة.
الخامة
مطفي وناعم، لا لامع.
أي لمعان في العرض ثلاثي الأبعاد كان سيُظهر الأكواب رخيصة، فضبطتُ المادة والإضاءة لتحاكيا السطح المطفي، وطبعتُ العلامة بدرجة أعمق من لون الكوب نفسه.
الحفر
اسمك، محفوراً على الكوب.
يكتب الزائر اسمه فيظهر على الكوب كأنه محفور فعلاً، كاشفاً المعدن تحت الطلاء.
طريقة البناء
من سؤال إلى نموذج منشور.
- 01
المراجع
درستُ إيقاع مواقع Awwwards دون نسخ بصمة أيٍّ منها؛ انتقال المشروع الخاص هو حلقة الغطاء.
- 02
البناء مع الذكاء الاصطناعي
أصف المشهد والحركة، ثم أراجع النتيجة وأوجّه التعديل حتى تطابق التصوّر.
- 03
التقنية
Three.js للمشهد، وGSAP للحركة، والنشر على Vercel.
الخلاصة
نموذج تفاعلي منشور، لا منتج تجاري.
يضمّ النموذج الألوان الأربعة والمقاسين والتفاصيل وتجربة الحفر، ويعمل الآن على الويب.
ما سُلّم
- تجربة إطلاق ثلاثية الأبعاد
- فصول للألوان ثم المقاسات
- لحظة حفر تفاعلية
ما لم يُقَس بعد
لم يُقَس بعد: الأداء على الأجهزة الأضعف، وأي أثر فعلي في قرار الشراء.