Subframe
رسم بياني على ورق بردي دافئ. ورق مصمم، حيث كل ضربة إما من الجرافيت أو الممحاة، وليس من الطلاء أبدًا - يتم تحقيق العمق من خلال سمك الخط والزخارف المتباعدة.
Subframe هي مساحة عمل مصممة بالأبيض والأسود: لوحة دافئة بلون كريمي، وحبر أسود جرافيتي، وغياب تام لأي لمسات لونية. تُرى الواجهة بأكملها كمادة واحدة - ورق، قلم رصاص، وظل - مع لمسة طباعية جريئة واحدة: خط serif أنيق (Instrument Serif) مقابل خط sans-serif منتظم (Inter)، مما يضفي جدية تحريرية على العناوين. الأسطح مسطحة ومؤطرة وليست بارزة؛ ويتم تحقيق العمق من خلال فواصل رفيعة باللون #e5e7eb وإبرازات داخلية على عناصر التحكم الداكنة بدلاً من الظلال. الكثافة سخية: إيقاع رأسي واسع (فجوات من 48 إلى 64 بكسل بين الأقسام)، وتصميمات مركزية كاملة العرض، ومساحة بيضاء واسعة حول النص. اللون الوحيد هو التباين بين الأبيض والأسود تقريبًا، مما يجعل الزر الداكن العنصر الأكثر لفتًا للنظر في كل صفحة، وشريط شعارات العلامات التجارية الشريكة بدرجات الرمادي هو العنصر البصري الزخرفي الوحيد.
تصميمات مركزية بعرض كامل (1200 بكسل) مع تناسق رأسي مميز. العنصر الرئيسي عبارة عن كتلة مركزية واحدة: عنصر تحكم داكن مقسم في الأعلى، عنوان رئيسي كبير "Inter"، عنوان فرعي من سطر واحد، وزرّان متجاوران (أحدهما ملون والآخر شفاف) - بدون صورة جانبية أو تقسيم للتصميم. أسفل العنصر الرئيسي يوجد شريط شعار رمادي اللون في المنتصف. يتبع كل قسم لاحق النمط نفسه: كتلة عنوان وعنوان فرعي محاذية لليسار، ثم إطار عرض منتجات بعرض كامل مع مسافة 48-64 بكسل بين الأقسام. التنقل بسيط للغاية: شريط علوي بروابط مركزية وأزرار تحكم محاذية لليمين، بدون شريط جانبي أو قائمة رئيسية. تُقرأ الصفحة من الأعلى إلى الأسفل كسلسلة من العبارات المركزية، كل منها مُخصصة بمساحة كافية - يبدو التصميم أقرب إلى معرض أعمال تحريري منه إلى صفحة منتج مزدحمة.
التصميم المرئي بسيط وعملي. يستخدم النظام نمطين مرئيين: (1) لقطات شاشة للمنتج ونماذج واجهة المستخدم داخل إطارات نصف قطرها 24 بكسل، تعرض مكونات الواجهة الفعلية (الجداول، الأزرار، النماذج) مُصممة بنفس لوحة الألوان أحادية اللون، مما يجعل لقطات الشاشة تبدو مُدمجة بسلاسة في الصفحة؛ (2) شريط واحد من شعارات الشركاء بتدرجات الرمادي يُستخدم كدليل اجتماعي، مُصمم بشكل مسطح، بدون ألوان أو حاويات. لا توجد صور نمط حياة، أو تدرجات لونية تجريدية، أو عروض ثلاثية الأبعاد. العنصر التوضيحي الوحيد هو "بلاطة" منتج داكنة، مُتمركزة على خلفية رمادية دافئة مع أيقونة العلامة التجارية، تُعتبر عرضًا توضيحيًا للمنتج، وليست عنصرًا زخرفيًا. جميع الصور مُصممة على تخطيط نصي، حيث يُمثل النص العنصر البصري الرئيسي.
لوحة الألوان
حيادي
- Page Canvas
#fafafa— خلفية الصفحة، والبطاقة البريدية على القماش، والنص الفاتح على الأسطح الداكنة - لون أبيض دافئ يكمن وراء النظام الأحادي اللون بأكمله. - Hairline Border
#e5e7eb— الفواصل، وحدود البطاقات، وإطارات الصور، ومخططات الأيقونات - وهي أكثر أنواع المخططات استخدامًا في النظام، تحدد البنية المكانية. - Card Surface
#ededed— خلفية مرتفعة للبطاقات، سطح إضافي - تقع على بعد خطوة واحدة فوق القماش، مما يخلق مجموعة بدون ظلال. - Divider Mid
#dadada— فواصل الدرجات اللونية المتوسطة والانتقالات بين الأقسام - Graphite
#242424— تعبئة محايدة عالية التباين للأزرار الرئيسية على الأسطح الفاتحة. - Ink Black
#171717— نص الجسم، والعناوين، ومخططات الأيقونات - أكثر روعة من الجرافيت، ويستخدم للطباعة بدلاً من الأسطح.
الطباعة
من 12 إلى 128 بكسل · 7 خطوات
- Inter — الاستبدال: Inter (Google Fonts) · الخطوط العريضة 500, 600, 700 · واجهة نظام بخط sans-serif - تشمل عناصر التنقل، والنص الأساسي، والأزرار، والعناوين الفرعية، وعناوين الأقسام. الوزن: 500 للنص الأساسي وعناصر التحكم، و600 للعناوين الفرعية وعناصر التنقل، و700 لعناوين الأقسام. يُضفي التباعد السلبي القوي بين الأحرف مظهرًا مضغوطًا وتقنيًا على الأشكال الهندسية مهما كان حجمها.
- Instrument Serif — الاستبدال: Playfair Display · الخطوط العريضة 400 · خط ذو حروف مزخرفة مصمم خصيصًا للعناوين والمحتوى التحريري. وزنه 400 ومسافة حروفه -0.025em تخلق مظهرًا أنيقًا مائلًا يتناقض مع الهندسة الصناعية لخط Inter - وهي تقنية مميزة: كلمة أو عبارة واحدة ذات حروف مزخرفة داخل صفحة بدون حروف مزخرفة، تعمل كعلامة ترقيم بصرية بدلاً من كونها نمطًا للعناوين.
- Fragment Mono — الاستبدال: JetBrains Mono · الخطوط العريضة 400 · يُستخدم خط Accent mono للعناصر الشبيهة بالبرمجة المضمنة، وعلامات التصنيف، والتعليقات التقنية. ويُستخدم باعتدال، ويظهر في قوائم الدوال والتعليقات المضمنة حيث تريد أداة التصميم الإشارة إلى أن "هذا ناتج آلة".
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 16px |
| نصف قطر البطاقة | 24px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 64px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Subframe وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- monopo saigon — توهج سائل متقزح الألوان خلف الصمت التحريري - معرض تحريري أحادي اللون يطفو على ضوء منصهر
- Hyer Aviation — يحلّ الغسق في قمرة القيادة فوق ورق البرشمان. تلتقي سماء الفجر الباهتة بشعار serif بحجم جسم الطائرة، وتكسر لمسة طينية دافئة واحدة رتابة اللون الأحادي.
- OFF+BRAND. — كرة متقزحة الألوان على رق دافئ
- Seed — كائن حي تحت زجاج المختبر
- Eindhoven Design District — يُعدّ أسلوب الوحشية التحريرية على الورق الأبيض بمثابة بيان تصميم بلدي، تم تنفيذه بخط كبير، مع الحد الأدنى من التصوير الفوتوغرافي وضبط النفس المطلق.
- Miranda — خط كلاسيكي عريض التنسيق على خلفية كريمية فاتحة - افتتاحية صحفية للعصر الرقمي
- Monocle — صحيفة عالية الجودة، ذات حجم كبير، مطبوعة على ورق كريمي اللون. افتتاحية منتقاة بعناية، حيث يستحق كل عمود مكانه، ولا يظهر على الصفحة سوى لون واحد ذي دلالة.
- Agencja brandingowa — معرض تحريري بألوان بيضاء مع كتابة بالحبر الأسود
- Websmith Studio — ضوء الصباح على ورق كريمي
- Aspelin Reitan — الأرشيف المعماري على ضوء الشموع - تبدو الصفحة وكأنها مجموعة من المساحات المبنية، مثبتة على جدار كريمي دافئ، مع سطر واحد من النص الأبيض يطفو فوق كل صورة على كامل عرض الصفحة.
- Public — مقال افتتاحي أحادي اللون على رخام بارد - يكاد يكون لوحة أحادية اللون، بخط serif بحجم 300 نقطة ولمسة أرجوانية واحدة تقوم بكل العمل اللوني.
- Motto — كتلة طباعية ضخمة على الورق - صوت واحد واثق يعلن عن نفسه على ورق أبيض ناصع