
Glossier
جلسة تصوير تحت أشعة الشمس - ورق أبيض، حبر أسود، لمسة صفراء زاهية واحدة
تُشبه Glossier مجلة تجميل رقمية: لوحة أحادية اللون تقريبًا من الأبيض والأسود، تتخللها لمسة صفراء نابضة بالحياة تُستخدم كشعار للعلامة التجارية ودعوة وحيدة للشراء. يتميز النظام ببساطته التحريرية - عناوين رئيسية كبيرة الحجم، ومساحة نصية واسعة، وصور فوتوغرافية لأسلوب الحياة على صفحة كاملة تحمل الجزء الأكبر من التأثير العاطفي - وبأسلوبه العملي: بطاقات منتجات مسطحة، وإطارات رفيعة، وغياب تام للزخرفة. الأصفر ليس لونًا ثانويًا للعلامة التجارية؛ بل هو جوهرها، يُستخدم باعتدال، بحيث يبدو كل ظهور له كفلاش كاميرا. كل شيء آخر مصمم ليتلاشى في الخلفية: ألوان محايدة هي درجات رمادية دافئة مع مسحة وردية خفيفة، وإطارات رقيقة، وخطوط كثيفة ومضغوطة. والنتيجة هي واجهة متجر تُشعِر بالثقة، والبساطة، والحداثة المطلقة.
تتميز الصفحة بسلسلة من الأقسام المرتبة عموديًا، كل قسم منها مصمم كصفحة تحريرية مستقلة. القسم الرئيسي عبارة عن صورة بعرض كامل مع طبقة بيضاء عائمة (أعلى اليسار) وشعار أصفر ضخم يشغل أسفل الصفحة بالكامل. أسفل القسم الرئيسي، تتناوب الأقسام بين صور بملء الشاشة وشبكات من البطاقات الفردية. يتم تقسيم الفئات (العناية بالبشرة/المكياج) إلى عمودين بنسبة متساوية من الصور (50/50) بدون حدود مرئية - خط واحد فقط يربط بين الصورتين. يستخدم كتالوج المنتجات شبكة من أربعة أعمدة من البطاقات المربعة على خلفية #f7f7f7. التنقل عبارة عن شريط علوي بسيط مع شريط إعلاني ثانوي أعلاه. المسافات بين الأقسام كبيرة نسبيًا (64 بكسل)، لكن الانتقالات بينها سلسة - بدون فواصل أو ألوان خلفية متناوبة، باستثناء التذييل الدافئ. الإيقاع العام هو: صورة، نص، صورة، شبكة، صورة - مثل تصفح مجلة أزياء.
تُهيمن الصور الفوتوغرافية على اللغة البصرية. تمتلئ مساحة العرض بصور نمط الحياة والصور الشخصية - إضاءة ذهبية دافئة، ولقطات مقرّبة ناعمة للبشرة، وأيدٍ تحمل زجاجات المنتجات أمام وهج الشمس. تتميز لوحة الألوان في الصور بالدفء والهدوء: سماء بلون الخوخ، ودرجات لون البشرة بلون الطين، وزرقة المحيط العميقة. تشغل الصور دائمًا كامل مساحة الصفحة، دون زوايا مستديرة أو إطارات أو طبقات إضافية، باستثناء بطاقات النصوص البيضاء أو الشعار الأصفر. تُصوَّر صور المنتجات على بطاقات الكتالوج على خلفية بيضاء نقية بدون تشبع، بإضاءة مسطحة ومتساوية. تبلغ نسبة الصورة إلى النص حوالي 70/30 - فالصور تنقل المشاعر، والنص ينقل الوظيفة. لا توجد رسومات توضيحية، ولا رسومات تجريدية، ولا مجسمات ثلاثية الأبعاد.
لوحة الألوان
ماركة
- Glossier Yellow
#fff116— يُستخدم اللون الأصفر كلون ثانوي لإبراز التفاصيل الزخرفية ولتسليط الضوء على عبارات البحث الأقل استخدامًا. ولا يُنصح باستخدامه كلون أساسي في عبارات الحث على اتخاذ إجراء.
حيادي
- Ink
#000000— نص المحتوى، روابط التنقل، النص الأساسي، نص التذييل، مخططات الأيقونات، الحدود الرفيعة؛ اللون الطباعي والهيكلي السائد. - Paper
#ffffff— أسطح بطاقات المنتجات، ومناطق التعبئة، والألواح المرتفعة؛ مستوى السطح الأكثر سطوعًا في المجموعة. - Fog
#f7f7f7— لوحة الصفحة، وخلفيات الأقسام، والانتقالات بين الصور على الصفحة؛ السطح الأساسي الذي يقع عليه الموقع الإلكتروني بأكمله. - Blush
#faf2f4— خلفية التذييل، فواصل أقسام دافئة وناعمة؛ لون أبيض مائل للوردي يضفي دفئًا على الجزء السفلي من الصفحات. - Mist
#f0f0f0— سطح داعم خفيف لإنشاء خلفية غير بارزة وفصل الأقسام. لا ينبغي استخدامه كلون أساسي لدعوة المستخدم لاتخاذ إجراء. - Ash
#e8e8e8— حدود حقول الإدخال، وخلفيات الأيقونات، وخطوط الفصل الرفيعة؛ لون الحدود الهيكلية للبطاقات وعناصر النموذج.
الطباعة
من 12 إلى 32 بكسل · 5 خطوات
- Apercu — الاستبدال: Inter · الخطوط العريضة 400, 500, 700 · يُستخدم الخط الأساسي في جميع أنحاء واجهة المستخدم - نص المحتوى بحجم 16 بكسل/400، وعناصر التنقل والتعليقات بحجم 12-14 بكسل/500، والعناوين الفرعية بحجم 20 بكسل/500، وعناوين المقالات بحجم 32 بكسل/700. يمنح تصميم Apercu الهندسي والإنساني العلامة التجارية أسلوبًا عصريًا مكثفًا؛ فالمسافة شبه المعدومة بين الأحرف (0.002-0.003em) تجعل الخط مضغوطًا وذا طابع مجلات، بدلًا من أن يكون خفيفًا أو ودودًا. أما وزن 700 فهو مخصص لعناصر العرض في المقالات، وليس لعناصر واجهة المستخدم.
- Apercu Mono — الاستبدال: JetBrains Mono or IBM Plex Mono · الخطوط العريضة 400 · طباعة نفعية دقيقة لبيانات الطلب الوصفية وأرقام التتبع والملصقات بجوار الرمز؛ النسخة أحادية المسافة تخلق نسيجًا تقنيًا مقابل نوع جسم متناسب.
- GTStandard-M — الاستبدال: Inter · الخطوط العريضة 400 · GTStandard-M - تم العثور عليه في البيانات المستخرجة ولكن لم يتم وصفه بواسطة الذكاء الاصطناعي.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 0px |
| نصف قطر البطاقة | 0px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 64px |
| عرض الصفحة | 1440px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Glossier وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Lightship — مشهد سينمائي مصغر للطريق المفتوح. جدران المعرض ذات اللون الكريمي الدافئ مزينة بصور فوتوغرافية كبيرة للمناظر الطبيعية مثبتة على مسافات متقاربة، وكتابة سوداء رفيعة بالكاد تُرى على الإطارات، ولمسة برتقالية زاهية واحدة تكسر رتابة اللون الأحادي مثل نار مشتعلة في مرج.
- Faire ES — كتالوج بيع بالجملة للكريم الدافئ
- Adanola — كتيب صور تحريري مطبوع على ورق أبيض. جلسة تصوير أزياء تتألق فيها الطباعة والتصوير على أسطح بيضاء نقية، مع حبر أسود للخط وخط مميز رقيق بدون زوائد (Favorit)، مما يعكس الأسلوب العام للعلامة التجارية.
- Oura Ring — ورشة عمل مريحة لصنع دقيق الشوفان، تغمرها أشعة الشمس الناعمة.
- Stykka — ورشة عمل إسكندنافية في ضوء أبيض - صالة عرض هادئة مصنوعة يدوياً حيث الصوت الوحيد هو التصوير الفوتوغرافي
- DJI — قماش أسود فضائي مع لمسة زرقاء كهربائية واحدة
- Altitude Beverages — صفحة مجلة أحادية اللون. تخيل صفحة مجلة أزياء خالية من جميع الألوان باستثناء الصور الثابتة - فالنص والمساحة البيضاء هما اللذان يرويان القصة بأكملها.
- AATHER — كف مفتوحة، شعلة واحدة - رفاهية هادئة تكمن في السكون
- Cowboy — معرض دراجات بلجيكي في بيئة من الخزف الأبيض الناصع. صالة عرض حيث تجذب الأسطح غير اللامعة والخطوط الكبيرة المستخدمة في المواد التحريرية، وغياب الزخرفة تقريباً، الأنظار إلى الدراجة ومحتوياتها.
- Refero — تصميم تحريري على رخام أبيض - صفحة منتج صممها مصمم حروف، حيث يمثل العنوان ذو الخطوط المزخرفة بطاقة تعريف العلامة التجارية، وكل شيء آخر غير بارز.
- Face Formula — صورة تحريرية إسكندنافية. صفحة هادئة على غرار المجلات، حيث تتحدث نظرة العارضة والعنوان، المكتوب بخط serif مكثف، عن نفسها على خلفية ضبابية باردة.
- Shupatto — خزانة عرض متحفية من الرخام الأبيض