مشروع 05 · 2026
Ruelle Coffee
قهوة / علامة أغذية ومشروبات · 2026
موقع يركز على العلامة التجارية لمفهوم قهوة مختصة، محوره الأجواء والهوية البصرية وعرض القائمة والتواصل مع العملاء.
سياق المشروع
Ruelle علامة قهوة ومخبوزات تبيع قهوة مختصة إلى جانب كرواسون محشو يدويًا ومعجّنات فرنسية حرفية تُخبز يوميًا. ونادرًا ما يبحث أحد عن مقهى كما يبحث عن خدمة: يُفتح الموقع من الجوال، غالبًا من مكان قريب، وغالبًا خلال دقيقة من قرار الذهاب إلى مكان ما. ومهمته أن تجعل ذلك القرار سريعًا وأن تجعل المكان قابلًا للوصول.
المستخدمون المستهدفون
- زوار قريبون يقررون أين يذهبون خلال دقائق، من الجوال
- أشخاص يتحققون مما يقدّمه المخبز فعلًا قبل التوجّه إليه
- زوار وصلوا للعلامة عبر السوشال ميديا ويريدون التأكد أنه مكان حقيقي بموقع حقيقي
- عملاء عائدون يبحثون فقط عن أوقات العمل أو الموقع
رحلة المستخدم الأساسية
- الوصول من الجوال، غالبًا من السوشال ميديا أو بحث في الخرائط
- معرفة ما هو المكان من الشاشة الأولى: قهوة أم مخبز أم الاثنان
- تصفّح القائمة للتأكد أنه يقدّم ما جاؤوا لأجله
- رؤية المكان نفسه، لأن الأجواء جزء من القرار في المقهى
- إيجاد الموقع والذهاب
القيود
- هويتان في علامة واحدة — قهوة مختصة ومخبز حرفي — ولا يمكن اختزال إحداهما لتكون عنوانًا فرعيًا للأخرى
- جمهور يقرر من الجوال في أقل من دقيقة، ما يلغي إمكانية تمرير طويل قبل القائمة
- الصور من العميل هي المحتوى الأساسي، فكان على التخطيط أن يُبنى حول الصور لا حول النص
- أصناف القائمة تتغيّر، فلم يكن ممكنًا افتراض طول ثابت للقائمة
دوري في المشروع
- تصميم UI/UX، تطوير React، دمج الهوية، تصميم متجاوب، تحسين المحتوى البصري
ما الذي نفّذته بالضبط
- تصميم UI/UX ودمج الهوية: من تصميم مؤيد الدالاتي
- تطوير الواجهة الأمامية بـ React: بناه مؤيد الدالاتي
- التنفيذ المتجاوب وتحسين المحتوى البصري: من مؤيد الدالاتي
- توجيه هوية العلامة ومحتوى القائمة والتصوير: من العميل
- الحالة: تم التحقق من أن الموقع يعمل على ruellecoffee.com
أبرز ما عملت عليه
- سرد العلامة وعرض القائمة
- أقسام الموقع والمعرض
- تجربة متجاوبة
- هوية بصرية قوية
قرارات التصميم وتجربة الاستخدام
- الشاشة الأولى تقول ما هو المكان بدل أن تبدأ بجملة عن العلامة، لأن الزائر الذي يقرر في أقل من دقيقة يجيب على سؤال واحد: هل هذا ما أريده
- القائمة متاحة دون تحميل صفحة جديدة، لأنها أكثر معلومة يطلبها زائر موقع مقهى
- الصور معاملَة كمحتوى لا كزينة: المعرض يعرض المكان والمنتجات لأن الأجواء هي ما يقيّمه الزائر فعلًا
- الموقع الجغرافي في نهاية التمرير ومتاح من الأعلى أيضًا، لأنه آخر ما يحتاجه الزائر الجديد وأول ما يحتاجه العائد
- التخطيط مبني للجوال أولًا، ونسخة سطح المكتب مشتقة منه لا العكس
النتيجة الموثقة
تم التسليم والإطلاق على ruellecoffee.com: موقع React متجاوب بأقسام القائمة والمعرض والموقع، ينقل هوية العلامة من البداية للنهاية.
التقنيات والأدوات
لديك منتج أو رحلة مشابهة؟
أرسل رابط المنتج أو الموقع والمشكلة التي تحاول حلها، وستحصل على قراءة صادقة للنطاق ونوع التعاون.