Shop
كوكبة تجارية عائمة على الرخام الأبيض
يعتمد المتجر الإلكتروني على نموذج "اللوحة البيضاء"، حيث تُعرض المنتجات على شكل بطاقات صور كبيرة ومنحنية بدلاً من شبكات الصور المصغرة. تتميز واجهة المستخدم بسلاسة فائقة: بنصف قطر يتراوح بين 20 و28 بكسل، وأزرار تحكم بيضاوية الشكل، وهيكل مدمج بحجم 16 بكسل وفقًا لمعيار GT Standard مع تباعد سلبي دقيق يجعل النص واضحًا وجريئًا. اللون الجريء الوحيد في النظام هو اللون الأرجواني النابض بالحياة (#5433eb)، والذي يظهر في الشعار، وحقل نتائج البحث الدائري، وكظل خفيف على الزر نفسه. أما باقي عناصر التصميم فهي محايدة دافئة: أسطح بيضاء، ولوحة رمادية باردة خفيفة، وحدود دقيقة، ونص أسود تقريبًا. يظل التصميم مضغوطًا مع هوامش 12 بكسل، لكن شريطَي الصفحة الرئيسية والفئات يبرزان بفضل إيقاع رأسي واسع يتراوح بين 64 و80 بكسل، مما يجعل تجربة التسوق أقرب إلى التصفح منها إلى تصفح كتالوج.
يبلغ الحد الأقصى للعرض 1200 بكسل، ويتوسط الصفحة على خلفية شفافة بلون #f2f4f5، مع شريط جانبي ثابت بعرض 64 بكسل على اليسار يحتوي على أيقونات التنقل فقط. العنصر الرئيسي عبارة عن شريط كامل العرض، مع بطاقات المنتجات موضوعة فوق شعار "متجر" أرجواني اللون في المنتصف، وشريط بحث بيضاوي الشكل أسفله مباشرةً. تُرتّب فئات المنتجات في صف واحد متمركز أسفل شريط البحث. تليها أقسام المحتوى (نساء، رجال، جمال، منزل، أطفال) على شكل أشرطة مخصصة، يحتوي كل منها على شبكة من 4 أعمدة مع صور المنتجات أو تصميم من عمودين "عنصر رئيسي وشبكة". المسافة الرأسية بين الأقسام الرئيسية واسعة: من 64 إلى 80 بكسل. التذييل عبارة عن شريط داكن في أسفل الصفحة مع مجموعات روابط على شكل أعمدة. تشير أسهم التمرير على الجانب الأيمن من لوحات المنتجات الأفقية إلى محتوى قابل للتمرير بدون نقاط ترقيم الصفحات.
تُهيمن الصور الفوتوغرافية على التصميم البصري: صور منتجات بملء الشاشة على خلفية بيضاء، مُقتطعة بنسبة 1:1، وصور نمط حياة بألوان ترابية دافئة (بيج، تيراكوتا، أخضر فاتح، عاجي). تتميز صور المنتجات بألوانها الخاصة، بينما تبقى واجهة المستخدم أحادية اللون، مما يسمح لألوان المنتجات بتوفير تنوع بصري. تظهر شعارات العلامات التجارية كنص مُضاف على الصور الرئيسية الداكنة أو الفاتحة، بدلاً من أيقونات فردية. في التصميم الرئيسي، تُوضع بطاقات المنتجات على شكل مجموعة عائمة متداخلة قليلاً فوق اسم العلامة التجارية. الأيقونات بسيطة وأحادية اللون (بخطوط سوداء)، باستثناء أيقونات الفئات التي تستخدم لونًا واحدًا للعلامة التجارية. لا توجد رسومات توضيحية أو تأثيرات ثلاثية الأبعاد أو تدرجات لونية في صور المنتجات.
لوحة الألوان
ماركة
- Shop Violet
#5433eb— إن زر الإرسال وعلامة النص المنقطة وشعار العلامة التجارية هي العناصر الوحيدة التي تبرز الحركة والفردية على الخلفية البيضاء. - Violet Wash
#c0b5f3— هالة شفافة خلف زر الإرسال الأرجواني تحافظ على توهجها دون تغيير لونها.
حيادي
- Canvas Mist
#f2f4f5— خلفية الصفحة ومعالجة سطحية إضافية خلف البطاقات البارزة. - Pure White
#ffffff— السطح الرئيسي للبطاقات وحقول الإدخال واللافتات العائمة والأزرار على شكل حبة دواء. - Ink Black
#000000— النص الرئيسي والعناوين والأيقونات ورموز التنقل وبطاقات المنتجات في الوضع الداكن. - Faint Border
#ebebeb— خطوط فاصلة رفيعة على البطاقات، ومخططات حقول الإدخال، وإطارات أزرار على شكل حبة دواء. - Muted Gray
#787574— نص ثانوي، وعلامات تنقل، ومخططات أيقونات عند عدم النشاط - Cool Stone
#cccccc— عناصر نائبة، وحالات معطلة، وخلفيات أيقونات غير نشطة
الطباعة
من 11 إلى 16 بكسل · 4 خطوات
- GT Standard — الاستبدال: Inter · الخطوط العريضة 400 · الخط الأساسي في جميع الأحجام - لكل من نص الصفحة والعناوين. يُستخدم خط GTStandard-MRegular بحجم 16 بكسل/-0.031em كخط أساسي لنص الصفحة والأزرار والملصقات. يُستخدم خط GTStandard-MSemibold بحجم 20 بكسل/-0.05em للعديد من العناوين الكبيرة؛ بينما يُستخدم خط GTStandard-MMedium بحجم 11-12 بكسل للتعليقات المصغرة. يتم عرض كل نوع من أنواع الخطوط بوزن بصري 400، ويتم تحقيق تسلسل الخطوط من خلال تدرجات لونية دقيقة وتباعد سلبي كثيف بين الأحرف، بدلاً من التباين الغامق. هذا أسلوب مميز: لا يعتمد موقع Shop على الخطوط الغامقة، بل يُشكّل النص من خلال تباعد الأحرف.
- Shopify Sans — الاستبدال: Inter · الخطوط العريضة 400, 700 · مخصصة للرسائل على مستوى النظام مثل لافتات تحميل التطبيقات ونصوص الموافقة على ملفات تعريف الارتباط.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 12px |
| نصف قطر الزر | 9999px |
| نصف قطر البطاقة | 28px |
| الظلال | ظلال ناعمة |
| بين الأقسام | 64px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Shop وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Cursor — ورشة عمل دافئة لطباعة الرق، مضاءة بجمر متوهج
- Slush — عالم قابل للنفخ من الملصقات على ورق الباستيل
- MindMarket — كتاب قصص خيالية مريح مطبوع على ورق كريمي اللون - لوحة تحريرية ودية تتعايش فيها عناوين إنتر الكبيرة وشخصيات الورق المقصوصة على سطح ناعم مشمس.
- Airbnb — جدار معرض أبيض هادئ مع فاصل كتاب واحد بلون أحمر مرجاني
- Superr — دفتر مدرسي دافئ في ضوء الظهيرة الناعم. صفحة بلون كريمي، قلم تحديد برتقالي بدون غطاء، ومجموعة من ملصقات الأسماء المغلفة بطبقة واقية تنتظر أن تُنزع.
- Apple (España) — تتميز قاعة المتحف، بضوء النهار الخافت، بمساحة بيضاء واحدة آسرة وخفيفة الوزن، حيث يتم إضاءة كل معروض بواسطة ضوء كاشف على جدار ملون بشكل خفيف.
- Lamborghini — سيارة واحدة صفراء اللون معروضة في صالة العرض تحت الأضواء الكاشفة، وهيكلها أسود.
- Amplemarket — مكان عمل غارق بأشعة الشمس ومغطى بالقصاصات الورقية الملونة
- Getharvest — مكتب في وقت الغروب – لوحة قماشية بلون كريمي دافئ، وبطاقات بريدية بيضاء معلقة على اللوحة، وشعلة برتقالية ساطعة واحدة
- Agence Foudre — غلاف المجلة ذو لون وردي ناعم يذكرنا بلون أحمر الشفاه.
- Drive Capital — ملصق رحلة برية كلاسيكي مطبوع على ورق دافئ
- Apple (España) — خزانة عرض بيضاء