Dub
لوحة تحكم ورق الأرز غير اللامع من لينك
يتميز النظام البصري لـ Dub بجمالية أنيقة وبسيطة، تكاد تكون تحريرية، تُشبه جماليات برامج SaaS: لوحة بيضاء تقريبًا، متماسكة بإطارات رفيعة بدلًا من العناصر البارزة، مع طباعة أحادية اللون كثيفة توفر الدعم الهيكلي، ولون أزرق ساطع واحد (#2563eb) يُضفي لمسة مميزة. تبدو الأسطح مسطحة وبدون إطار للوهلة الأولى، لكن كل حاوية مزودة بهامش 1 بكسل (#e5e5e5)، مما يُوحي بمظهر المستند المطبوع. تُضفي مجموعة صغيرة من اللمسات اللونية (البرتقالي والأخضر والبنفسجي) التي تطفو فوق الألوان المحايدة طابعًا شخصيًا، بالإضافة إلى عناوين تبدو واثقة وعصرية دون أن تكون مُبهرجة. المكونات مُدمجة وكثيفة: هوامش 8 بكسل، ونصف قطر البطاقة 12 بكسل، وتسميات على شكل حبة دواء بحجم 9999 بكسل، وعناصر تحكم غير مرئية بدلًا من الأزرار الكبيرة والبارزة.
تعتمد الصفحة على تصميم مركزي بعرض أقصى يبلغ حوالي 1200 بكسل. العنصر الرئيسي عبارة عن كتلة نصية مركزية مع ثلاثة عناصر عائمة (برامج التسويق بالعمولة، تحليلات التحويل، الروابط المختصرة) موضوعة أفقيًا فوق تصميم المنتج الرئيسي. رُتبت الأقسام رأسيًا بمسافات ثابتة تبلغ 64 بكسل، بالتناوب بين خلفية بيضاء ولون ضبابي (#f5f5f5) لفصل الألوان. يستخدم القسم السفلي تصميمًا على شكل حرف Z: النص التحريري متمركز في الثلث الأوسط، وبطاقات واجهة المستخدم العائمة مثبتة على الهوامش اليمنى واليسرى، مما يخلق إيقاعًا غير متماثل يشبه تصميم المجلات. سحابة الشعار عبارة عن شبكة بسيطة 5x2، متمركزة في منتصف الصفحة. شريط التنقل العلوي بسيط للغاية - الشعار على اليسار، وشريط التنقل في المنتصف، ومجموعة من زرين (زر "تسجيل دخول" شفاف + زر "تسجيل" ممتلئ) على اليمين - بدون قائمة ثابتة أو قائمة رئيسية ضخمة. يعرض تصميم لوحة التحكم في النافذة الرئيسية تصميمًا كلاسيكيًا للتطبيق مكونًا من عمودين: شريط جانبي ثابت (مشابه لـ 240 بكسل) + منطقة محتوى تحدد كثافة معلومات المنتج للزوار قبل أن يبدأوا في التمرير.
يركز التصميم المرئي على المنتج لا على نمط الحياة. تتوسط الشاشة الرئيسية لقطة شاشة كبيرة للوحة تحكم، تمثل نموذجًا واقعيًا للمنتج مع شريط تنقل جانبي، وجدول بيانات، وعناصر واجهة مستخدم عائمة، مصممة كلوحة مسطحة على خلفية بيضاء. تُعرض شعارات العملاء في شبكة رمادية باهتة (مثل beehiv وsuperpower وChatbase) لتسليط الضوء على أدائهم على وسائل التواصل الاجتماعي، مع إزالة الألوان لإبراز اللون الأزرق المميز للصفحة. تتحرك بطاقات الشركاء العائمة (ملفات تعريفية صغيرة وبلاطات تحتوي على بيانات الإيرادات/المدفوعات) حول كتل النصوص التحريرية في الأسفل، مما يخلق إحساسًا بالعمق دون استخدام ظلال على النص نفسه. يُعد نمط خلفية الشبكة المنقطة سمة مميزة: صف رفيع من النقاط الصغيرة ذات الشفافية المنخفضة جدًا يخلق ملمسًا وإحساسًا بنظام تصميم/سطح رسم، مما يؤكد مكانة الموقع كمنصة حديثة لنسب الروابط. تتميز الأيقونات بالبساطة، حيث تقتصر على الخطوط الخارجية والتعبئة، وتستخدم لوحة ألوان مميزة (برتقالي يوسفي، بنفسجي لافندر، أخضر نعناعي) لعلامات الميزات. لا تُستخدم أي صور فوتوغرافية أو رسومات توضيحية أو نماذج ثلاثية الأبعاد، فواجهة المستخدم الخاصة بالمنتج هي لغة بصرية بحد ذاتها.
لوحة الألوان
ماركة
- Electric Blue
#2563eb— يُستخدم اللون الأساسي للعلامة التجارية - الشعار، والروابط، ومؤشرات الأداء الرئيسية، والحالات النشطة، وعناصر الأيقونات المميزة. ويُضفي اللون الأزرق الغني على خلفية بيضاء الجاذبية البصرية الوحيدة للنظام. - Deep Sapphire
#1e40af— يتم استخدام الخلفية الرئيسية لزر الإجراء، واللون الغامق لعبارة الحث على اتخاذ إجراء - وهو اللون الوحيد الذي يدل على الإجراء - بشكل مقتصد لجذب الانتباه.
حيادي
- Canvas White
#ffffff— تُعد خلفية الصفحة وسطح البطاقة واللوحات المنبثقة الأساس المطلق لكل شاشة. - Paper Mist
#f5f5f5— تغييرات طفيفة في لون التمرير للبطاقات المتداخلة واللوحات الإضافية والتعبئة. - Ash
#e5e5e5— تُشكل الحدود الرقيقة الموجودة على البطاقات وموصلات الإدخال والفواصل الخط الهيكلي الذي يربط النظام معًا. - Smoke
#d4d4d4— حدود أكثر وضوحاً للحاويات المحددة وخطوط خارجية إضافية للأزرار. - Pebble
#c8c8c8— الحدود، وخطوط التحكم، والفواصل الهيكلية ذات التباين المتوسط. لا ينبغي استخدام هذا اللون كلون أساسي لعبارات الحث على اتخاذ إجراء. - Midnight Ink
#0a0a0a— النص الرئيسي للأزرار، والأزرار المميزة، ونص التنقل كلها سوداء تقريبًا لتحقيق أقصى قدر من التباين.
الطباعة
من 11 إلى 48 بكسل · 9 خطوات
- Satoshi — الاستبدال: Inter (weight 500 · الخطوط العريضة 500 · عناوين العرض - تُستخدم فقط في أسطر يتراوح عرضها بين 36 و48 بكسل لعناوين الأقسام. وزن الخط - 500 (متوسط، وليس غامقًا): تبدو العناوين واثقة وعصرية، ولكنها ليست طاغية أبدًا. تضفي النسب الهندسية لخط ساتوشي على الخط طابعًا تحريريًا عصريًا لا يمكن لنص إنتر محاكاته.
- Inter — الاستبدال: Inter (native) · الخطوط العريضة 400, 500, 600 · يشمل النص الأساسي، وعلامات واجهة المستخدم، وقوائم التنقل، والعناوين الفرعية، والعناوين الثانوية. يُعدّ خط Inter الخط الرئيسي، حيث يتعامل مع كل شيء بدءًا من العلامات الصغيرة بحجم 11 بكسل وصولًا إلى العناوين الثانوية بحجم 30 بكسل. يبلغ الوزن الافتراضي للنص الأساسي 400، و500 للعناصر المميزة وعلامات الأزرار، بينما يُخصّص 600 لعلامات واجهة المستخدم المهمة. يُعدّ حجم 16 بكسل مع ارتفاع سطر 1.5 الحجم الأكثر شيوعًا (1220 مرة)، مما يؤكد أن 16 بكسل هو الحجم القياسي للنص الأساسي.
- Geist Mono — الاستبدال: JetBrains Mono or IBM Plex Mono · الخطوط العريضة 400, 500 · تُستخدم مقتطفات الشفرة والبيانات الوصفية التقنية والرموز المضمنة ذات المسافات الثابتة في كتل الشفرة بحجم 12-14 بكسل، وفي عناصر عرض الشفرة الكبيرة بحجم 24 بكسل. وهذا يضمن مصداقية أداة المطور، بما يتوافق مع مكانة منتج Dub.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 8px |
| نصف قطر البطاقة | 12px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 64px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Dub وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- ElevenLabs — مجموعة صور بألوان كريمية دافئة مع عناوين دقيقة. دفتر ملاحظات على طراز باوهاوس - ورق بلون قشر البيض، وحبر أسود، ولمسة واحدة من اللونين الأرجواني والبرتقالي لعرض المنتج.
- Awesomic — شبكة زنك تحريرية بعلامات ترقيم برتقالية تذكرنا بالقصاصات الورقية.
- Monad — مجلة فنية تحريرية حول الرق الدافئ
- Seline Analytics — جدول تحليلي هادئ على ورق دافئ
- Notion — دفتر ملاحظات ورقي دافئ تحت شمس الظهيرة
- Anthropic — مجلة علمية ميدانية على ورق رق دافئ - أسطح عاجية هادئة، وعناوين تحريرية ذات حروف مزخرفة، ولمسة طينية واحدة تظهر فقط عند الحاجة إلى العمل.
- Calendly — حبر أزرق داكن على رخام بارد
- Augen Pro — يتميز تصميم أبل الأبيض بلمسة زرقاء كهربائية خفيفة الوزن، تُعتبر اللمسة الوحيدة في مساحة أحادية اللون.
- Antimetal — سجل افتتاحي مطبوع على ورق كريمي اللون - صباح هادئ في مجلة علمية، حيث يعكس ضبط النفس الثقة وتؤدي الحروف ذات الزوائد المهمة الصعبة
- Perk — ليمون كهربائي على ورق برشمان دافئ
- Ditto — ورشة عمل مضاءة بأشعة الشمس تُصنع فيها عينات من الزهور البرية. أسطح كريمية دافئة، لون أساسي أصفر نابض بالحياة، أحبار زرقاء داكنة، أشكال لونية عضوية تتفتح خلف القطعة.
- Officevibe — مجلة تحريرية مطبوعة على ورق بلون كريمي دافئ. تخيل مقالاً متعمقاً حول إدارة الموارد البشرية، مُقدَّماً كمنتج - خط serif انسيابي يهمس من خلال واجهة زرقاء عصرية.