UI Design · Salla Store · Beauty Care

تصميم واجهة متجر منتجات عناية بتجربة راقية تتحرك مع الزائر

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

Full Website Preview
جزء من تصميم المتجر جزء من تصميم المتجر جزء من تصميم المتجر جزء من تصميم المتجر
↓ Auto Scroll Down / Up
Project Overview

نبذة المشروع

تصميم وتطوير واجهة متجر متخصص في منتجات العناية، مع التركيز على الهدوء البصري، وضوح الأقسام، وسهولة الوصول للمنتجات.

الفكرة الرئيسية

المتجر يستهدف منتجات العناية بالبشرة، الشعر، الجسم والمكياج؛ لذلك كان الهدف بناء واجهة ناعمة وواثقة تمنح المستخدم إحساس النظافة والجمال من أول نظرة، وتسهّل عليه اكتشاف المنتجات حسب اهتمامه.

✦
واجهة رئيسية كاملةهيرو، أقسام، منتجات، بنرات وفوتر.
◐
هوية لونية واضحةزيتوني، أسود، وأوف وايت ناعم.
◎
تجربة تصفح منظمةعرض المنتجات حسب الاهتمام والمناسبة.
Visual Identity

الهوية البصرية المستخدمة

اعتمد التصميم على لوحة ألوان هادئة تعكس النظافة، النعومة، والثقة في منتجات العناية.

#030400لون النصوص والتباين
#6F7E25لون الأزرار والعناوين
#FCFAF8خلفية ناعمة ومريحة
Typography

الخطوط وطريقة العرض

تم اختيار خطوط قوية للعناوين وواضحة للنصوص، بحيث تكون القراءة سهلة وتبقى الهوية أنيقة.

GE Contrast
للعناوين الرئيسية والرسائل التسويقية.
GE Hili
للعناوين الثانوية والنصوص العربية داخل التصميم.
Responsive Mockups

طريقة ظهور التصميم على الأجهزة

تم تجهيز الواجهة لتظهر بشكل احترافي على التابلت واللابتوب، مع الحفاظ على نفس الروح البصرية.

Mockup Tablet
Tablet Mockup

عرض تابلت واقعي

يظهر الهيرو والأقسام الأولى بطريقة راقية داخل بيئة هادئة.

Mockup Laptop
Laptop Mockup

عرض لابتوب واضح

الشعار ظاهر بشكل طبيعي، والواجهة مكتملة بدون أي Blur.

واجهة متجر جاهزة للعرض والتطوير

الكود مدمج بالكامل: HTML + CSS + JS، مع معاينة متحركة للتصميم الكامل وسلايدر تفاعلي للصور.