أمثلة

خمسة أنظمة تصميم، بألوان متجرك

نظام التصميم هو شكل كل شيء: الصفحات والأزرار والتنقل والحركة. يأخذ كل نظام شعار متجرك وألوانه وخطه. هذه الرئيسية في كل نظام، لمتجر نموذجي.

  • ناعم

    أخضر · أطباق صحية · متجر نموذجي

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

    • زر «+» دائري يصبح «− 1 +» في مكانه
    • شريط تنقّل عائم على شكل حبة، يُظهر اسم التبويب النشط فقط
    • أقسام بألوان فاتحة، وسلة على شكل كبسولة بصور الأطباق
  • طلبات

    كرسبي · دجاج مقرمش وبرغر · متجر نموذجي

    أبيض نظيف بلون دافئ واحد، صفوف قائمة بصورة وزر «+»، وشريط «عرض السلة».

    • صفوف بخطوط رفيعة بدل البطاقات، بصورة كبيرة وزر «+» مربّع
    • شريط «عرض السلة» ممتد بلون واحد فوق شريط التبويب
    • عروض متتالية يطلّ منها العرض التالي مع عدّاد 1/3
  • شفق

    قامة · ملابس رجالية · متجر نموذجي

    ضباب ألوان ناعم في الزوايا، منتج في الوسط يكبر مع التمرير، وشريط أسود عائم.

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

    لمسة · مستحضرات تجميل وعناية · متجر نموذجي

    خلفية ملوّنة ناعمة، بطاقات مستديرة بظلال ملوّنة، وزر متدرّج.

    • تدرّج واحد من لونك الرئيسي إلى الثاني لكل زر رئيسي
    • رزمة عروض مكدّسة بنقاط مرقّمة
    • سلة دائرية مرفوعة في وسط شريط التبويب
  • طفو

    فورنو · بيتزا ومعكرونة · متجر نموذجي

    المحتوى يملأ الشاشة، والأزرار تطفو فوقه في جزر تنزلق وتستقر مع التمرير.

    • صور الأطباق تملأ الشاشة من الحافة إلى الحافة
    • الأزرار تطفو فوق المحتوى في جزر خفيفة
    • الجزر تصغر عند التمرير لأسفل وتعود عند الصعود

روابط متاجر حقيقية تُضاف هنا عندما يبدأ التجار ويوافقون على عرضها.