تيليجرام، WhatsApp+380637610482
فاليري دانيوك
فاليري دانيوكالمطورتطوير أدوات الذكاء الاصطناعي للشركات. جودة عالية. بأسعار معقولة.راسلنا على Telegram
Shopify — معاينة لموقع بهذا النمط

Shopify

دفيئة منتصف الليل - تتفتح العلامات التجارية على خلفية فيروزية عميقة، مضاءة بشرارة واحدة من النعناع

نظام تصميم Shopify أشبه بورشة عمل ليلية للتجارة: لوحة سوداء تقريبًا مُلوّنة بلون أخضر فيروزي داكن، وخط sans-serif عريض وواثق، ولمسة نعناع نابضة بالحياة تُفعّل اللحظات التفاعلية. تُشبه واجهة المستخدم غرفة مظلمة، حيث تُشكّل المنتجات والعلامات التجارية مصدر الضوء - تتوهج الصور وواجهات المتاجر على أسطح سوداء تقريبًا، بينما تتراجع عناصر الكروم. المكونات هندسية لكنها ناعمة: بطاقات بنصف قطر 12 بكسل ذات حدود رفيعة، وأزرار بيضاوية الشكل، وخط بوزن 330 يُوحي بالحجم بدلًا من الصراخ. تُستخدم علامة ترقيم لونية واحدة (#36f4a4) باعتدال على الروابط والوسوم وحالات التركيز، مع الاحتفاظ بالألوان للحظات الوظيفية لضمان بقاء قصص التجار هي النقطة المحورية البصرية.

يبلغ الحد الأقصى للعرض حوالي ١٢٨٠ بكسل، مع توسيط الصفحة، وتمتد مربعات العرض الكاملة خارج حاوية الصور. يتناوب تصميم الصفحة بين: (١) صفحة عرض داكنة بعرض كامل مع عنوان رئيسي وأزرار دعوة لاتخاذ إجراء، (٢) أقسام داكنة مريحة مع نصوص وصور بعرض كامل في عمودين أو شبكات صور في ثلاثة أعمدة، (٣) لوحات عرض تفاعلية (بطاقة المنتج، حاسبة الشحن، خريطة العالم) معروضة كبطاقات بارزة على خلفية أعمق. يتكون شريط التنقل العلوي من الشعار + ٣ عناصر تنقل + روابط ثانوية + زر الدعوة لاتخاذ إجراء الرئيسي، جميعها محاذية لليمين. يستخدم التصميم الرأسي فواصل ٨٠ بكسل بين الأقسام مع انتقال سلس - بدون فواصل بين الأقسام الداكنة، فقط تغيير في لون الخلفية.

يركز التصميم المرئي بشكل أساسي على المتجر: حيث تستحوذ صور المنتجات بالحجم الكامل وصور فعاليات العلامة التجارية على الجزء الأكبر من التصميم، وغالبًا ما تأتي على شكل خلفيات كبيرة مع نص أبيض مُضاف. تتميز الصور باقتصاصها الدقيق وتباينها العالي وطابعها الاحتفالي (مثل رنين جرس ناسداك، والتحيات الجماعية، ولقطات مقرّبة للمنتجات). تُوحي الخلفية الداكنة بأن هذه الصور مُضاءة بأضواء كاشفة. أما الرسوم التوضيحية فهي بسيطة، حيث يتم شرح المنتجات بشكل أساسي من خلال صور المنتجات المُضمنة ولقطات شاشة واجهات المتاجر. الأيقونات أحادية اللون، بعرض خط يتراوح بين 1.5 و2 بكسل، وعادةً ما تكون بيضاء أو #36f4a4 للحالات النشطة.

لوحة الألوان

ماركة

  • Shopify Mint #36f4a4 — تُعد مؤشرات التنقل النشطة، وحلقات التركيز، وإبرازات العلامات، وإبرازات التمرير على الروابط هي البريق اللوني الوحيد الذي يخلق إحساسًا بالتفاعل المُمكّن على خلفية داكنة.

حيادي

  • Midnight Forest #02090a — مساحة الصفحة، صور خلفية رأس الصفحة، صور خلفية الأقسام
  • Deep Lichen #061a1c — أسطح البطاقات الرئيسية، واللوحات المرتفعة، وكتل المحتوى.
  • Shaded Fern #072720 — لوحة التنقل، بطاقات إضافية، ارتفاع طفيف للوحة بالكاد يمكن ملاحظته.
  • Spruce Border #1e2c31 — حدود رفيعة للبطاقات، وخطوط فاصلة، ومخططات حقول الإدخال.
  • Abyss Indigo #000a1e — مساحة إضافية لتضمين المنتجات/العروض التوضيحية، ولوحات تحتوي على وصف للوظائف.
  • Pure White #ffffff — النص الرئيسي، تعبئة الزر، العنوان، الشعارات.

الطباعة

من 12 إلى 70 بكسل · 8 خطوات

  • Neue Haas Grotesk — الاستبدال: Inter · الخطوط العريضة 330, 400, 500, 550, 600 · يتألف النظام الطباعي الأساسي من عناوين رئيسية بخط يتراوح وزنه بين 70 و96 بكسل (330-400)، يتميز بالرقة والوضوح؛ ونصوص رئيسية بخط يتراوح وزنه بين 16 و18 بكسل (400-500)؛ وعناصر التنقل وواجهة المستخدم بخط يتراوح وزنه بين 14 و16 بكسل (500-550). ويُعدّ وزن الخط الخفيف للغاية البالغ 330 بكسل على الشاشات الكبيرة سمةً مميزة، إذ يُضفي ثقةً من خلال الرصانة لا الحجم الكبير.
  • Inter Variable — الاستبدال: Inter · الخطوط العريضة 400, 420, 450, 550 · نوع خط ثانوي يُستخدم في عناصر واجهة التنقل، والملاحظات الصغيرة، وعناصر التحكم في علامات التبويب، والنصوص القصيرة في التذييلات. حروفه الصغيرة الأكبر قليلاً والمسافات القياسية بين الأحرف تجعله أكثر وضوحًا في الأحجام الصغيرة. كما أنه مناسب للحالات التي يُستخدم فيها خط بوزن 420 لسد الفجوة بين الخط العادي والخط متوسط الحجم.

الفترات والشكل

غايةمعنى
كثافةمتوسط
الخطوة الأساسية12px
نصف قطر الزر9999px
نصف قطر البطاقة12px
الظلاللا - حدود بدلاً من الظلال
بين الأقسام80px
عرض الصفحة1280px

سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Shopify وتعبئته.

  • املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
  • انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
  • تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
  • تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.

أنماط مشابهة

  • Retool — ورشة عمل دافئة من حجر الأوبسيديان - سطح لأدوات دقيقة، مضاءة بجمر متوهج، حيث يتم صنع كل شيء
  • Elektron — لوحة التحكم بالمعدات في منتصف الليل عبارة عن لوحة سوداء تقريبًا، حيث تتألق صور المنتجات بينما تظل واجهة المستخدم غير مرئية تقريبًا.
  • REKKI — لوحة التحكم في الطيران في مختبر الصور
  • OFFFICE : — معرضٌ ذو طابعٍ سوداويّ مُحاطٌ بخطٍّ ضخمٍ.
  • Clyde — صالة العرض، المزودة بضوء كاشف واحد، عبارة عن معرض شبه مظلم حيث اللون الوحيد في الغرفة هو كرة متدرجة الألوان دافئة.
  • Channel Studio — مختبر تصوير استوديو مزود بمصباح واحد من المرجان
  • Electronic Materials Office — جمرة متوهجة في معرض مزين بالفحم
  • ORYZO AI — مقال مصور عن غرفة مظلمة. جسم وحيد يحوم في الظلام الدافئ، والخط الكريمي هو الزخرفة الوحيدة.
  • Factory — محطة "غرفة العمليات" في منتصف الليل. "المصنع" عبارة عن لوحة تحكم سوداء قاتمة حيث تسقط بطاقة بيضاء وحيدة مثل رسالة مضاءة بمصباح يدوي - الشيء الوحيد الموجود في الغرفة هو العمل نفسه.
  • Hungry Tiger — رسومات جدارية بلون الكركم الزاهي على جدار التندور. لوحة ألوان موحدة من الذهبي والبني الصدئ، بخط كبير جدًا يبدو أشبه بلوحة سوق توابل منه بموقع إلكتروني.
  • Bibliothèque — معرض أسود مكعب الشكل تحت ضوء كاشف - لوحة مضيئة وحيدة في قاعة واسعة مظلمة
  • Apple (España) — مسرح أسود بتجهيزات مضاءة