تصميم وتطوير واجهة متجر إلكتروني لبيع الشنط والأحذية – Luvina

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

يشمل العمل مرحلتين: مرحلة التصميم باستخدام Figma و مرحلة التطوير باستخدام HTML, CSS, JavaScript, Bootstrap.

أولاً: مرحلة التصميم باستخدام Figma

تحليل الجمهور المستهدف بناءً على بحث المستخدم.

تصميم Wireframes للصفحات الأساسية.

تنفيذ تصميم واجهات احترافية متناسقة بصريًا مع العلامة التجارية.

تصميم صفحات:

الصفحة الرئيسية

صفحة عرض المنتجات Product Listing

صفحة تفاصيل المنتج Product Details

صفحة العربة Cart

صفحة تسجيل الدخول/إنشاء حساب

Admin Dashboard تشمل:

إدارة المنتجات

إدارة الطلبات (orders)

خدمة العملاء

إدارة المستخدمين

إحصائيات وأرقام (Analytics)

Seller Dashboard تشمل:

إضافة وتعديل المنتجات

متابعة الطلبات الخاصة بالبائع

متابعة المخزون

صفحة Analytics مبسطة للبائع

مراعاة الهيراركية البصرية (Visual Hierarchy)، وتباين الألوان، وقواعد الـ UX.

إنشاء نسخة كاملة متجاوبة (Responsive Design) للهواتف.

ثانيًا: مرحلة التطوير باستخدام HTML, CSS, JS, Bootstrap

تحويل التصميم من Figma إلى كود فعلي بدقة عالية.

استخدام HTML لبناء الهيكل الأساسي، و CSS لكتابة ستايل مخصص بجانب Bootstrap.

استخدام Bootstrap 5 لضمان التجاوب مع الشاشات المختلفة.

إضافة تفاعلات ديناميكية باستخدام JavaScript مثل:

تفعيل القائمة (Navbar)

تكبير الصور

منطق الـ Add To Cart (إضافة المنتجات للسلة)

تحسين الأداء وسرعة تحميل الصفحة.

كتابة كود نظيف ومنظم يسهل تطويره لاحقًا.

تطوير قسم الـ Admin Dashboard

لوحة تحكم كاملة تشمل:

عرض وإدارة المنتجات (Add / Edit / Delete)

لوحة إحصائيات عامة

إدارة المستخدمين

مراجعة الطلبات Orders Tracking

تصميم جرافيكي بسيط للـ Analytics

تطوير قسم الـ Seller Dashboard

لوحة تحكم للبائع تشمل:

إضافة منتج جديد

تعديل بيانات المنتج

متابعة مخزون المنتجات

عرض الطلبات الخاصة بالبائع

تتبع حالة الطلب

صفحة إحصائيات (عدد الطلبات – عدد المنتجات – المبيعات)

الأدوات المستخدمة في التطوير:

HTML – CSS – JavaScript – Bootstrap – VS Code