
Allbirds
مواد طبيعية على قماش كتان أبيض
تتميز منصة Allbirds بثقة هادئة وطبيعية، حيث تعتمد على خلفية أحادية اللون تقريبًا، مع لمسات من لون الرمال الدافئ (#e0dacf) ودرجات ترابية هادئة مستوحاة مباشرة من صور المنتجات. لا تؤثر واجهة المستخدم على تجربة استخدام المنتج: أسطح بيضاء، وحدود رفيعة، وقوائم تنقل بأحرف كبيرة، وأزرار تحكم بيضاوية الشكل تُشبه الأزرار الفعلية أكثر من عناصر الويب. يُستخدم خط Self Modern (خط serif مخصص) في اللحظات الحاسمة التي تتطلب اهتمامًا تحريريًا - كالعناوين الرئيسية وأسماء المجموعات - بينما يُستخدم خط Geograph لكل حرف ونص وقاعدة زر بثلاثة أوزان متوازنة. تتحول بطاقات الفئات إلى نظام ألوان: حيث تستمد كل بطاقة لون خلفيتها من المنتج المميز، مما يحول قائمة التنقل إلى لوحة ألوان Pantone حية.
يبلغ أقصى عرض حوالي ١٢٠٠ بكسل، مع توسيط الصفحة وهامش جانبي واسع. العنصر الرئيسي عبارة عن شريط تحريري كامل العرض على خلفية رملية دافئة، مع شريط عرض منتجات كبير ينبثق من المركز. تتكون قائمة التنقل بين الفئات من شبكة تضم أربع بطاقات ملونة متطابقة في أربعة أعمدة، تحتوي كل منها على نموذج حذاء واحد في المنتصف. أسفل الجزء الظاهر من الصفحة، يتناوب التصميم بين لوحات مقسمة كاملة العرض (صورة نمط الحياة على اليسار + عينة المنتج على اليمين) وشرائط عرض منتجات متمركزة أسفل عنوان قسم صغير مسطر. الإيقاع العام هو: لوحة تحريرية كاملة العرض ← شبكة من أربعة أعمدة ← شريط عرض منتجات متمركز ← تقسيم من عمودين ← شريط عرض منتجات متمركز. المسافة بين الأقسام تتراوح بين ٤٠ و٥٦ بكسل، مما يخلق انتقالات سلسة وغير مُرهِقة. قائمة التنقل عبارة عن شريط علوي ثابت بتصميم بسيط مع روابط رئيسية متمركزة.
التصوير الفوتوغرافي هو النظام البصري المتكامل. جميع صور المنتجات مُلتقطة عن قرب، من زاوية طفيفة، على خلفية موحدة تُطابق أو تُكمل لون الحذاء المميز، مما يجعل كل صورة بمثابة دراسة لونية. أما صور نمط الحياة، فتُلتقط بألوان دافئة ومشرقة، في بيئات طبيعية (حقول الصبار، أسطح خشبية، تضاريس وعرة)، مع تلطيف خفيف ليتناسب مع لوحة الألوان الهادئة. لا توجد رسومات توضيحية، ولا نماذج ثلاثية الأبعاد، ولا رسومات تجريدية. بالتعاون مع بانتون، تُستخدم لوحة الألوان نفسها كعنصر رسومي. أما الرموز، فهي بسيطة وأحادية اللون (رموز مُخططة في مواقع التنقل والمواقع الإضافية).
لوحة الألوان
حيادي
- Canvas White
#ffffff— صور خلفية الصفحة، أسطح البطاقات، صور خلفية بطاقة المنتج. - Charcoal
#212121— يُدعم استخدام لون محايد لعناصر واجهة المستخدم الثانوية، والفواصل، والتسميات الخافتة. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء. - True Black
#000000— العناوين، والأيقونات، والإطارات عالية التباين، ونصوص التنقل. - Warm Sand
#e0dacf— خلفية القسم الرئيسي، وتظليل إضافي للسطح، ولوحات تحريرية كبيرة. - Olive Char
#222519— يُدعم استخدام لون محايد لعناصر واجهة المستخدم الثانوية، والفواصل، والتسميات الخافتة. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء. - Iron Gray
#525252— نص ثانوي، نص مساعد، إطارات غير بارزة.
الطباعة
من 12 إلى 40 بكسل · 6 خطوات
- Self Modern — الاستبدال: Playfair Display · الخطوط العريضة 400 · تُستخدم العناوين الرئيسية والمقالات الافتتاحية باعتدال، مع التركيز على العبارات الرئيسية وعناوين المجموعات. وتُضفي الخطوط ذات الزوائد والخطوط المائلة لمسةً مميزةً على رتابة الخطوط البسيطة، وتُوصل الرسالة التالية: "هذا هو جوهر القصة".
- Geograph — الاستبدال: Inter · الخطوط العريضة 400, 500, 700 · يُستخدم الخط الأساسي لواجهة المستخدم في النصوص الرئيسية، وعناوين التنقل، والأزرار، وعناوين المنتجات، والتذييلات، وحقول الإدخال، والأيقونات. حجم الخط 500 للعناوين المميزة، و700 لأسماء المنتجات. كما يُساهم تباعد الأحرف الواسع (0.025em–0.10em) في الأحرف الكبيرة في عناوين التنقل والفئات في ترسيخ هوية العلامة التجارية.
- HurmeGeometricSans3 — الاستبدال: Inter · الخطوط العريضة 400 · نادرًا ما يُستخدم كنسخة احتياطية أو كعلامة مخصصة لزر. تستخدم شركة جيوغراف هذا النظام يوميًا.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 8-16px |
| نصف قطر الزر | 9999px (pill) |
| نصف قطر البطاقة | 16px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 40-56px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Allbirds وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Lightship — مشهد سينمائي مصغر للطريق المفتوح. جدران المعرض ذات اللون الكريمي الدافئ مزينة بصور فوتوغرافية كبيرة للمناظر الطبيعية مثبتة على مسافات متقاربة، وكتابة سوداء رفيعة بالكاد تُرى على الإطارات، ولمسة برتقالية زاهية واحدة تكسر رتابة اللون الأحادي مثل نار مشتعلة في مرج.
- Faire ES — كتالوج بيع بالجملة للكريم الدافئ
- Adanola — كتيب صور تحريري مطبوع على ورق أبيض. جلسة تصوير أزياء تتألق فيها الطباعة والتصوير على أسطح بيضاء نقية، مع حبر أسود للخط وخط مميز رقيق بدون زوائد (Favorit)، مما يعكس الأسلوب العام للعلامة التجارية.
- Oura Ring — ورشة عمل مريحة لصنع دقيق الشوفان، تغمرها أشعة الشمس الناعمة.
- Stykka — ورشة عمل إسكندنافية في ضوء أبيض - صالة عرض هادئة مصنوعة يدوياً حيث الصوت الوحيد هو التصوير الفوتوغرافي
- DJI — قماش أسود فضائي مع لمسة زرقاء كهربائية واحدة
- Altitude Beverages — صفحة مجلة أحادية اللون. تخيل صفحة مجلة أزياء خالية من جميع الألوان باستثناء الصور الثابتة - فالنص والمساحة البيضاء هما اللذان يرويان القصة بأكملها.
- AATHER — كف مفتوحة، شعلة واحدة - رفاهية هادئة تكمن في السكون
- Cowboy — معرض دراجات بلجيكي في بيئة من الخزف الأبيض الناصع. صالة عرض حيث تجذب الأسطح غير اللامعة والخطوط الكبيرة المستخدمة في المواد التحريرية، وغياب الزخرفة تقريباً، الأنظار إلى الدراجة ومحتوياتها.
- Refero — تصميم تحريري على رخام أبيض - صفحة منتج صممها مصمم حروف، حيث يمثل العنوان ذو الخطوط المزخرفة بطاقة تعريف العلامة التجارية، وكل شيء آخر غير بارز.
- Face Formula — صورة تحريرية إسكندنافية. صفحة هادئة على غرار المجلات، حيث تتحدث نظرة العارضة والعنوان، المكتوب بخط serif مكثف، عن نفسها على خلفية ضبابية باردة.
- Shupatto — خزانة عرض متحفية من الرخام الأبيض