E‑commerce · Gadgets

تایم‌لند — فروشگاه ساعت هوشمند

فروشگاه گجت با تم تیره و ویترین محصولات پرکنتراست؛ ساخته‌شده برای این‌که خودِ محصول درخشان‌ترین عنصر صفحه باشد.

گجت هوشمندتم تیرهفیلتر محصولRTL
نقش ما
طراحی UI و توسعه فرانت‌اند
دسته
فروشگاهی
وزن صفحه‌ی دمو
۳۴۸ کیلوبایت
عناصر تعاملی
۲۴ دکمه · ۷ آیکون برداری

دموی زنده — همین‌جا قابل استفاده است

../../demo/timeland/index.html

این قاب، خودِ پروژه است و داخل آن می‌توانید اسکرول و کلیک کنید. داده‌ها نمونه هستند و به سرویس واقعی وصل نیستند. برای تجربه‌ی کامل، دمو را در تب جدید باز کنید.

چالش پروژه

تم تیره برای گجت جذاب است، اما اگر کنتراست دقیق تنظیم نشود، محصول در پس‌زمینه گم می‌شود و خوانایی قیمت‌ها پایین می‌آید.

همچنین باید تعداد زیادی مدل با مشخصات نزدیک به هم قابل مقایسه می‌شد.

راهکار تیم

  • لایه‌بندی تیره با هایلایت‌های نقطه‌ای روی مرز کارت‌ها تا محصول از پس‌زمینه جدا شود.
  • گرید بنتو برای ویترین؛ محصولات شاخص بزرگ‌تر و بقیه در ریتم منظم.
  • جدول مشخصات فشرده و قابل اسکن برای مقایسه‌ی سریع مدل‌ها.
  • فونت و ارقام فارسی با وزن‌های متفاوت برای سلسله‌مراتب قیمت و تخفیف.
نمای کامل رابط کاربری تایم‌لند — فروشگاه ساعت هوشمند
نمای کامل رابط کاربری — نسخه‌ی دسکتاپ

استک فنی

HTML5TailwindJavaScriptوب‌فونت فارسی
پروژه‌ی بعدیشاپ — فروشگاه کالای دیجیتال
مطالعه موردی بعدی