Vercel
طرفية مطبوعة على ورق أبيض
نظام تصميم Vercel هو مثالٌ على الانضباط في استخدام الألوان الأحادية: خلفية بيضاء تقريبًا (#fafafa)، وكتابة سوداء، وحواف رفيعة، وغياب تام للألوان الزخرفية. تستحضر اللغة البصرية شاشة طرفية لمطور برامج مطبوعة - خط Geist Sans بالكاد يُقرأ عند حجمه "الضخم" بوزن 400-450 ومسافة بين الأحرف -0.06em، بينما يستخدم خط Geist Mono الأحرف الكبيرة (11-13 بكسل) لعرض التسميات والبيانات الوصفية ونماذج التعليمات البرمجية. أما الأزرار فهي عبارة عن أشكال دائرية حادة بنصف قطر 6 بكسل أو مستطيلات سوداء خالصة على خلفية بيضاء أو بيضاء على خلفية سوداء. يعتمد النظام على التباين والتسلسل الهرمي الطباعي بدلًا من اللون، مستخدمًا الرمز المثلث (▲) وشعارًا نصيًا من سطرين كعناصر العلامة التجارية الوحيدة. تتراص الأسطح فوق بعضها البعض بالترتيب #fafafa → #ebebeb → #171717، مما يخلق عمقًا من خلال تغيير القيم اللونية بدلًا من الظل أو اللون. تم بناء كل عنصر على شبكة 4 بكسل بكثافة مضغوطة، مما ينتج عنه واجهة تذكرنا بدفتر ملاحظات المهندس - دقيقة وعملية ولا تخشى المساحة البيضاء.
يبلغ عرض الحاوية 1280 بكسل، وهي متمركزة، مع مساحة أفقية واسعة (24-48 بكسل). يستخدم القسم الرئيسي تصميمًا غير متماثل بثلاثة أقسام: عنوان رئيسي كبير على اليسار، وشعار العلامة التجارية في المنتصف، وقسم على شكل "حاجب" على اليمين. أسفل القسم الرئيسي، يُرتب المحتوى في شرائط متناوبة: شريط بعرض كامل يحمل شعار العميل، يليه قسم "مبدعو الوكلاء" ذو عمودين، مع العنوان الرئيسي على اليسار وتصميم المنتج على اليمين، ثم شبكة من ثلاث بطاقات تعرض الميزات. تفصل بين الأقسام هوامش رأسية تتراوح بين 96 و128 بكسل بدون فواصل أو إزاحات للخلفية. تتكون قائمة التنقل من لوحة ثابتة واحدة بعرض 64 بكسل وخلفية ضبابية. تستخدم شبكات البطاقات تصميمًا ثابتًا من عمودين أو ثلاثة أعمدة مع هوامش تتراوح بين 16 و24 بكسل. الكثافة الإجمالية مُدمجة - النص سهل القراءة، وهناك مساحة بيضاء واسعة، لكن حجم الخط وأحجام المكونات تمنع الصفحة من أن تبدو واسعة.
الصور بسيطة وعملية دائمًا. العنصر البصري الرئيسي هو المثلث الأسود (▲)، وهو رمز هندسي يظهر كصورة ظلية معلقة بحجم كبير. تستخدم شعارات العملاء على شريط إثبات المفهوم الكلمات الأصلية لكل علامة تجارية بتدرجات الرمادي. نماذج المنتجات (واجهة دردشة Notion، ومخرجات طرفية سطر الأوامر، وبطاقة جواز السفر) مُضمنة كلقطات شاشة في الوضع الفاتح داخل بطاقات مؤطرة. لا توجد صور فوتوغرافية أو رسومات توضيحية أو عناصر ثلاثية الأبعاد، فالنظام عبارة عن طباعة وأشكال هندسية على ورق أبيض.
لوحة الألوان
حيادي
- Obsidian
#171717— العناوين الرئيسية، وحدود التنقل، وتعبئة الأزرار الداكنة، وعلامات القوائم كلها سوداء تقريبًا، لتجنب الحدة والتشبع الفاقع. - Paper White
#fafafa— لوحة الصفحة، وأسطح البطاقات، والإضاءة التي تملأ الأزرار - هذه هي الخلفية القياسية التي يقع عليها كل شيء آخر. - Pure White
#ffffff— أسطح البطاقات المرتفعة، والإضافات، وحقول الإدخال. - Hairline
#ebebeb— تظهر حدود بسمك 1 بكسل على الأزرار والروابط والبطاقات عند مستويات التكبير العالية، ولكنها غير مرئية عند مستويات التكبير المنخفضة. - Ash
#c9c9c9— تم تعطيل النصوص، وكتم صوت التسميات، ووضع علامات مائية لأسماء العلامات التجارية في شعارات العملاء. - Smoke
#a8a8a8— نص ثانوي، نص توضيحي، تعبئة رمزية خفيفة.
الطباعة
من 11 إلى 64 بكسل · 6 خطوات
- Geist Sans — الاستبدال: Inter · الخطوط العريضة 400, 450, 500 · الخط الأساسي للواجهة والعناوين هو خط هندسي مصمم خصيصًا من شركة Vercel، يتميز بتباعد ضيق بين الأحرف عند الأحجام الكبيرة (-0.06em عند 56-64 بكسل، و-0.05em عند 30 بكسل). أما بالنسبة للعناوين في أعلى الصفحة، فقد تم اختيار وزن 450: أثقل من Light وأخف من Semi-Bold، مما يخلق طابعًا واثقًا دون أن يكون طاغيًا.
- Geist Mono — الاستبدال: JetBrains Mono · الخطوط العريضة 400, 500, 600 · خط ثانوي أحادي المسافة يُستخدم في كتابة العناوين، وكتل التعليمات البرمجية، ولوحات إخراج واجهة سطر الأوامر، والبيانات الوصفية، والنصوص الكبيرة. يتيح الجمع بين 8 بكسل و600 بكسل والأحرف الكبيرة وضعًا دقيقًا للعلامات الصغيرة. كما توفر المسافة الواسعة بين الأحرف (0.071em) في النسخة أحادية المسافة مساحة كافية للنصوص الكبيرة.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 12px |
| نصف قطر الزر | 6px |
| نصف قطر البطاقة | 6px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 96-128px |
| عرض الصفحة | 1280px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Vercel وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Headspace — ركن صحي مشمس على ورق دافئ
- WHOOP — مختبر الأداء في منتصف الليل - طاولات مختبر سريرية بيضاء تحت فراغ مسرحي أسود، نبضة كهربائية أرجوانية واحدة
- Together AI — وحدة بحثية حول الورق الجليدي
- v0 by Vercel — رسم المخرطة. الدقة والوظائفية هما الأهم، حيث يخدم كل عنصر غرضًا واضحًا على سطح نظيف ومثالي من الناحية الفنية.
- Dovetail — مخطط تحت قمر أسود - خطوط بيانية بالكاد تُرى، خط أبيض، بريق أرجواني واحد
- Glideapps — طاولة رسم أحادية اللون مع بريق فيروزي كهربائي واحد
- Timescale — رسم هندسي على ورق رسم بياني دافئ
- UGLYCASH — دفتر ملاحظات مغطى بالملصقات على ورق كريمي اللون ينضح بأجواء شركة تكنولوجيا مالية جريئة ومتطرفة تعرض فوضاها بفخر.
- Sprout Social — برعم أخضر على لوح أسود. لمسة مشرقة واحدة على خلفية أحادية اللون صارمة، حيث يُستخدم اللون فقط للحركة، مع خط هندسي واثق يعمل كعلامات إرشادية.
- Krea — معرض نوار في منتصف الليل
- Evergreen — دفيئة شمسية على ورق الكتان
- Factory — محطة "غرفة العمليات" في منتصف الليل. "المصنع" عبارة عن لوحة تحكم سوداء قاتمة حيث تسقط بطاقة بيضاء وحيدة مثل رسالة مضاءة بمصباح يدوي - الشيء الوحيد الموجود في الغرفة هو العمل نفسه.