![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 960 123" xmlns="http://www.w3.org/2000/svg"><g d="M 116.703 56.118 C 132.578 45.382 143.612 28.037 145.902 8.035 C 146.373 3.926 143.157 0.308 139.013 0.308 L 6.935 0.308 C 2.791 0.308 -0.426 3.926 0.046 8.035 C 2.337 28.02 13.37 45.365 29.245 56.118 C 33.004 58.67 33.004 64.178 29.245 66.714 C 13.37 77.449 2.319 94.794 0.046 114.795 C -0.426 118.904 2.791 122.524 6.935 122.524 L 139.013 122.524 C 143.157 122.524 146.373 118.904 145.902 114.795 C 143.612 94.81 132.562 77.466 116.703 66.714 C 112.926 64.16 112.926 58.652 116.703 56.118 Z M 334.911 59.412 L 306.777 59.412 C 303.939 59.412 303.01 55.636 305.527 54.341 C 324.932 44.378 338.57 27.073 341.159 6.968 C 341.64 3.262 338.677 0 334.911 0 L 199.312 0 C 195.545 0 192.582 3.262 193.064 6.968 C 195.652 27.091 209.291 44.378 228.695 54.341 C 231.195 55.617 230.284 59.412 227.446 59.412 L 199.312 59.412 C 195.545 59.412 192.582 62.674 193.064 66.38 C 197.152 98.133 228.731 122.831 267.093 122.831 C 305.456 122.831 337.053 98.116 341.124 66.38 C 341.605 62.674 338.642 59.412 334.875 59.412 L 334.929 59.412 Z M 394.468 0 L 535.639 0 C 539.049 0 541.813 2.802 541.813 6.262 L 541.813 71.162 C 541.813 72.971 541.043 74.674 539.697 75.863 L 488.617 121.269 C 487.497 122.263 486.045 122.831 484.558 122.831 L 430.941 122.831 C 427.53 122.831 424.766 120.028 424.766 116.569 L 424.766 67.686 C 424.766 64.227 422.002 61.424 418.591 61.424 L 394.45 61.424 C 391.039 61.424 388.275 58.622 388.275 55.163 L 388.275 6.279 C 388.275 2.821 391.039 0.018 394.45 0.018 Z M 622.768 0 L 703.498 0 C 706.937 0 710.231 1.504 712.488 4.118 L 746.782 43.88 C 748.268 45.617 749.092 47.836 749.092 50.127 L 749.092 115.867 C 749.092 119.715 745.976 122.831 742.126 122.831 L 652.209 122.831 C 648.753 122.831 645.476 121.327 643.219 118.712 L 591.196 58.362 C 588.546 55.283 588.133 50.898 590.14 47.371 L 614.513 4.78 C 616.196 1.826 619.347 0 622.768 0 Z M 796.156 57.853 L 796.156 98.752 C 796.156 112.059 806.87 122.831 820.105 122.831 L 936.423 122.831 C 949.667 122.831 960.371 112.059 960.371 98.752 L 960.371 57.853 C 960.371 49.254 955.807 41.305 948.397 36.997 L 890.24 3.232 C 882.822 -1.077 873.711 -1.077 866.292 3.232 L 808.131 36.997 C 800.712 41.305 796.156 49.254 796.156 57.853 Z" fill="transparent" height="122.83114427860698px" id="uS6zJJHrf" width="960.3711687048158px"><path d="M 116.703 55.81 C 132.578 45.075 143.612 27.73 145.902 7.727 C 146.373 3.619 143.157 0 139.013 0 L 6.935 0 C 2.791 0 -0.426 3.619 0.046 7.727 C 2.337 27.712 13.37 45.057 29.245 55.81 C 33.004 58.362 33.004 63.87 29.245 66.406 C 13.37 77.141 2.319 94.486 0.046 114.488 C -0.426 118.596 2.791 122.216 6.935 122.216 L 139.013 122.216 C 143.157 122.216 146.373 118.596 145.902 114.488 C 143.612 94.503 132.562 77.159 116.703 66.406 C 112.926 63.853 112.926 58.345 116.703 55.81 Z" fill="rgb(0, 73, 86)" height="122.21601990049754px" id="iP3DKf_lb" transform="translate(0 0.308)" width="145.9476193093225px"/><path d="M 141.899 59.412 L 113.765 59.412 C 110.927 59.412 109.998 55.636 112.515 54.341 C 131.92 44.378 145.558 27.073 148.146 6.968 C 148.628 3.262 145.665 0 141.899 0 L 6.3 0 C 2.533 0 -0.43 3.262 0.051 6.968 C 2.64 27.091 16.279 44.378 35.683 54.341 C 38.183 55.617 37.272 59.412 34.434 59.412 L 6.3 59.412 C 2.533 59.412 -0.43 62.674 0.051 66.38 C 4.14 98.133 35.719 122.831 74.081 122.831 C 112.444 122.831 144.041 98.116 148.111 66.38 C 148.593 62.674 145.63 59.412 141.863 59.412 L 141.916 59.412 Z" fill="rgb(0, 73, 86)" height="122.83114427860687px" id="P6BFFSozp" transform="translate(193.012 0)" width="148.19790700483696px"/><path d="M 6.193 0 L 147.364 0 C 150.774 0 153.538 2.802 153.538 6.262 L 153.538 71.162 C 153.538 72.971 152.769 74.674 151.422 75.863 L 100.342 121.269 C 99.222 122.263 97.77 122.831 96.283 122.831 L 42.666 122.831 C 39.255 122.831 36.492 120.028 36.492 116.569 L 36.492 67.686 C 36.492 64.227 33.727 61.424 30.316 61.424 L 6.175 61.424 C 2.764 61.424 0 58.622 0 55.163 L 0 6.279 C 0 2.821 2.764 0.018 6.175 0.018 Z" fill="rgb(0, 73, 86)" height="122.83114427860687px" id="G1zjzdYFS" transform="translate(388.275 0)" width="153.53810945273642px"/><path d="M 33.889 0 L 114.619 0 C 118.058 0 121.353 1.504 123.61 4.118 L 157.903 43.88 C 159.39 45.617 160.214 47.836 160.214 50.127 L 160.214 115.867 C 160.214 119.715 157.098 122.831 153.247 122.831 L 63.331 122.831 C 59.874 122.831 56.597 121.327 54.34 118.712 L 2.318 58.362 C -0.332 55.283 -0.745 50.898 1.261 47.371 L 25.634 4.78 C 27.318 1.826 30.469 0 33.889 0 Z" fill="rgb(0, 73, 86)" height="122.83114427860687px" id="UB7WroRYy" transform="translate(588.878 0)" width="160.21402448490323px"/><path d="M 0 57.853 L 0 98.751 C 0 112.059 10.714 122.831 23.949 122.831 L 140.267 122.831 C 153.511 122.831 164.215 112.059 164.215 98.751 L 164.215 57.853 C 164.215 49.253 159.651 41.305 152.241 36.997 L 94.084 3.232 C 86.666 -1.077 77.555 -1.077 70.136 3.232 L 11.975 36.997 C 4.557 41.305 0 49.253 0 57.853 Z" fill="rgb(0, 73, 86)" height="122.83087064676607px" id="Dd2w_tLuU" transform="translate(796.156 0)" width="164.21522388059702px"/></g></svg>)
فخم وغالي
(Premium & Luxury)
يعتمد على المساحات الفارغة الواسعة، الألوان الداكنة (مثل استخدام الـ Dark Mode)، الخطوط النحيفة والأنيقة، والصور شديدة الدقة بأسلوب درامي.
بسيط وعملي
(Minimal & Practical)
واجهات نظيفة جدًا، ألوان محايدة (أبيض، رمادي، أسود) مع لون بارز واحد، وتركيز مباشر وسريع على المنتج وفوائده.
اقتصادي/في متناول الجميع
(Affordable)
ألوان حيوية ومتباينة، نصوص كبيرة جدًا، وإبراز واضح لتخفيضات الأسعار واللافتات (Banners).
تحديد التوجه
التنفيذ
لا تستخدم مولدات الشعارات العشوائية.
توجه إلى منصات العمل الحر مثل (خدمات التاجر في سلة)
أو ابحث عن مصمم عبر (Behance).
التكيف والمرونة (Scalability)
لا بد أن يكون الشعار واضحًا سواء كان أيقونة صغيرة في تطبيق (Favicon)، أو مطبوعًا على كرتون شحن كبير.
التباين والاستقلالية (Contrast & Versatility)
لا بد أن يعمل الشعار بنسخة بيضاء بالكامل على الخلفيات الداكنة، ونسخة سوداء أو ملونة على الخلفيات الفاتحة دون أن يفقد تفاصيله.
الخطي (Wordmark)
اسم المتجر بخط مميز
الرمزي (Pictorial)
أيقونة تعبر عن المتجر
الحرفي (Lettermark)
اختصار لأحرف المتجر
المركب (Combination)
نص + رمز
الابتعاد عن القوالب المستهلكة
تجنب تمامًا استخدام الأيقونات البديهية والمكررة في الشعار (مثل، عربة الشراء، أو حقيبة الهدايا). العميل يعرف أنه في متجر إلكتروني، لا تحتاج لتذكيره بذلك في شعارك.
الأصالة تصنع الهوية
ادرس شعارات منافسيك لتعرف التوجه العام للسوق، ثم تعمَّد الذهاب في مسار بصري مختلف تمامًا لتبرز بينهم.
البساطة لا تعني النقل
الشعار الناجح يجب أن يكون بسيطًا، مسطَّحًا (Flat)، دون زخارف أو نقوش معقدة ليسهل تذكره وطباعته، ولا بد أن يحمل فكرة فريدة أو زاوية مبتكرة تخص علامتك وحدك.
ترك مساحة آمنة (فراغ)
حول الشعار في كل التصاميم.
✅ صحيحة (Do)
استخدام نسخة الأيقونة
فقط (Logomark) في المساحات الضيقة.
✅ صحيحة (Do)
تصميم الشعار ليكون مسطحًا (Flat)
دون مؤثرات بصرية مبالغ فيها.
✅ صحيحة (Do)
وضع الشعار داخل مربع أبيض
بوضوح وإلصاقه على خلفية ملونة.
❌ خاطئة (Don't)
مط (تغيير أبعاد) الشعار بالطول
أو العرض ليتناسب مع مساحة معينة.
❌ خاطئة (Don't)
استخدام الظلال (Drop Shadows) أو التدرجات
المعقدة (Gradients) داخل الشعار نفسه.
❌ خاطئة (Don't)
الألوان هي التي تحدد "مزاج" المتجر وتوجِّه عين المستخدم نحو الشراء.
الأسود والذهبي/الفضي
الفخامة، الساعات، العطور، الأزياء الراقية.
الأزرق
الثقة، التقنية، الإلكترونيات، المدفوعات.
الأخضر
النمو، المنتجات العضوية، الطبيعة.
البرتقالي/الأحمر
الحماس، التخفيضات، الوجبات السريعة (يُستخدم بحذر كلون للأزرار CTA).
60%
اللون الأساسي
(غالبًا أبيض أو رمادي فاتح جدًا، أو داكن جداً إذا كان المتجر Dark Mode) لراحة العين.
30%
اللون الثانوي
لون هوية المتجر (يُستخدم في العناوين،
الأشرطة العلوية).
10%
لون التمييز (Accent)
لون واضح أو متباين جدًا (يُستخدم فقط لأزرار الشراء، الخصومات، والروابط).
استخدام ألوان نيون فاقعة كخلفية للمتجر
ترهق عين المستخدم.
تلوين كل قسم في المتجر بلون مختلف
مما يخلق تلوثًا بصريًا.
التأكد من تباين الألوان (Contrast Ratio) لضمان وضوح النص فوق الخلفية.
توحيد لون أزرار "أضف للسلة" في جميع أنحاء المتجر ليتبرمج عقل المستخدم عليها.
اختر خطًا واحدًا يدعم أوزانًا متعددة
(عريض، عادي، خفيف).
تأكد من وضوح الأرقام
(مهم جدًا للأسعار في المتاجر).
نصيحة بصرية
العناوين الكبيرة يمكن أن تكون بخط مميز ذو شخصية، بينما النصوص الطويلة (وصف المنتج) يجب أن تكون بخط (Sans-Serif) نظيف وبسيط.
استخدام أكثر من خطين في نفس الواجهة
أفضل منتج
01
أفضل منتج
02
03
أفضل منتج
تصغير الخطوط لأقل من 14px أو 16px (يصعب قراءتها على الجوال).
أفضل منتج
أكثر من 16px
أفضل منتج
اصغر من 16px
أفضل منتج
اصغر من 14px
تقليل المسافة بين الأسطر (Line Height) مما يجعل النصوص متكدسة ومزعجة للعين.
أفضل منتج في السوق الكمية محدودة أشتري الاآن
أفضل منتج في السوق الكمية محدودة أشتري الاآن
البطاقات الرقمية
استخدام (Mockups) احترافية تظهر البطاقة بشكل مائل أو بارز (3D) مع شعار اللعبة/الخدمة، وتوضيح القيمة بخط كبير وواضح على التصميم نفسه.
الإلكترونيات
صور بخلفية بيضاء ومن زوايا متعددة، مع لقطة قريبة للتفاصيل والخامات. لا تحتاج لتصوير جهاز iPhone مثلًا، استخدم صور Apple الرسمية.
الحجوزات والخدمات
بيع "النتيجة" و"الشعور". استخدم صور احترافية لبيئة العمل (مثل صورة صالون نظيف ومرتب، أو صورة شخص يستمتع بالخدمة).
الأزياء والملابس
صوِّر المنتجات على عارضين (لإظهار المقاس والقصة)، ثم صور للمنتج المسطح
(Flat lay)، وصورة قريبة لإظهار خامة القماش.
الطباعة حسب الطلب
لا تعرض التصميم كصورة مسطحة؛ استخدم Lifestyle Mockups لوضعه على منتجات حقيقية مثل التيشيرتات والأكواب.
توحيد أبعاد جميع صور المنتجات (مثلًا كلها 1:1 مربعة، أو 4:5 طولية).
اضغط الصور قبل رفعها للحفاظ على سرعة المتجر دون فقدان الجودة.
صمّم البنرات بنصوص قليلة مع زر وهمي لاتخاذ إجراء (CTA) واضح.
توظيف المساحات السلبية (الفراغ)
في البنر لراحة العين.
رفع صور بأحجام غير موحدة يفسد شكل الشبكة (Grid).
استخدام أسماء صور عشوائية مثل IMG_001 يضعف SEO والتنظيم.
حشو البنرات بالعروض والنصوص والتصاميم المزدحمة يقلل الاحترافية.
ضعف التباين بين النص والخلفية يجعل البنر غير واضح وصعب القراءة.
