E-commerce design application Figma
تفاصيل العمل
قمت بتصميم تطبيق متجر الكتروني يقوم ببيع السماعات اللاسليكة
حيث قمت بتصميم واجهة مستخدم بسيطة للتطبيق يوضح عملية التنقل بين الصفحات و عرض الالوان الخاص بالمنتج و معرفة التفاصيل باستخدام Figma
يهدف التصميم إلى توفير تجربة مستخدم سلسة مع التركيز على عرض المنتجات بطريقة منظمة و جذابة
والشاشات تضمن الاتي:
1- شاشة الSplash screen
التصميم يحتوى على صورة تصف مضمون التطبيق وهو متجر الكترونى لبيع السماعات اللاسلكية و زر يقوم بالتنقل الى الصفحه الاتيه و يعمل عن طريق Drag transition
2- شاشة الProducts
تعرض قائمة افقية باشهر الماركات التى تقوم بتصنيع سماعات اللاسلكية وهو تصميم يسهل على المستخدمين اختيار العلامة المفضلة
و تقوم الصفحه بعرض منتجات خاصة بماركة Beats على شكل بطاقات تحتوى على اسم المنتج و سعره و تقييمه مع إمكانية إضافة المنتجات إلى المفضلة عبر أيقونة القلب
3- شاشة تفاصيل المنتج
تقوم بعرض تفاصيل المنتج بشكل كامل بما في ذلك المواصفات والألوان المتوفرة و أزرار واضحة لـ "إضافة إلى السلة" و"الشراء الآن"
التصميم ايضا يحتوى على Components لاتاحه امكانية اعادة استخدام العنصر اكثر من مرة
تم تصميم الواجهة لتكون بسيطة ومميزة تساعد المستخدم على استكشاف المنتجات وشرائها بسهولة مع الحفاظ على تجربة بصرية جذابة.
________________________________________________________________-
I designed an e-store application that sells wireless headphones
I designed a simple user interface for the application that explains the process of navigating between pages and displaying the colors of the product and knowing the details using Figma
The design aims to provide a smooth user experience with a focus on displaying the products in an organized and attractive way
The screens include the following:
1- Splash screen
The design contains an image describing the content of the application, which is an e-store for selling wireless headphones and a button that navigates to the next page and works via Drag transition
2- Products screen
Displays a horizontal list of the most famous brands that manufacture wireless headphones, a design that makes it easy for users to choose their favorite brand
The page displays products specific to the Beats brand in the form of cards containing the name of the product, its price and its rating, with the ability to add products to favorites via the heart icon
3- Product details screen
Displays the product details in full, including specifications, available colors, and clear buttons for "Add to Cart" and "Buy Now"
The design also contains Components to allow the possibility of reusing the item more than The interface is designed to be simple and distinctive, helping the user to explore and purchase products easily while maintaining an attractive visual experience.
_______________________________________________________________
Figma link: