Seline Analytics
جدول تحليلي هادئ على ورق دافئ
تتميز صفحة Seline بخلفية حجرية دافئة (#fafaf9) مع لمسة زرقاء نابضة بالحياة، بينما باقي الألوان محايدة ومستمدة من لوحة ألوان Tailwind الحجرية. تُعرض العناوين بخط هندسي مصمم خصيصًا (roobert) بوزن 400 ومسافة ضيقة بين الأحرف، مما يضفي على النص طابعًا هادئًا وثقةً تكاد تكون همسًا، وهو ما يتناقض مع أسلوب SaaS الصاخب المعتاد. أما واجهة المستخدم فهي عبارة عن بطاقات بيضاء مسطحة، تطفو فوق الخلفية الدافئة مع تأثير ضبابي ناعم واحد بسمك 16 بكسل؛ وتُصنع الحدود بخطوط رفيعة بلون حجري بسمك 1 بكسل، تُستخدم بكثرة كعنصر هيكلي أساسي بدلاً من الفواصل أو اللوحات السميكة. يتميز التصميم بانسيابية رائعة: محتوى بعرض كامل متمركز على إيقاع رأسي متناسق، مع عناصر تحكم تفاعلية على شكل حبة دواء، ورسمة تميمة لإضفاء طابع مميز، ولقطات شاشة للوحة التحكم كدليل على جودة المنتج. الانطباع العام هو التحليل التحريري: هادئ، أحادي اللون، واثق، مع كون دعوة العمل الزرقاء هي العنصر الأكثر لفتًا للنظر في الصفحة بفضل ضبط النفس المتعمد لكل شيء آخر.
الصفحة بعرض أقصى يبلغ 1200 بكسل تقريبًا، مع مساحة رأسية واسعة. يتألف الجزء الرئيسي من سطرين، محاذيين لليسار، يحتويان على عبارة واحدة مميزة باللون الأزرق ("بسيط وفعال")، يليهما صف يحتوي على دعوتين لاتخاذ إجراء (حبة زرقاء + حبة وهمية)، ثم صف من شعارات الشركاء بتدرجات الرمادي، ثم صف من تقييمات الثقة، ثم معاينة لوحة تحكم عائمة بعرض كامل، تتداخل قليلاً مع القسم التالي. أسفل الجزء الظاهر من الصفحة، توجد صفوف متناوبة من شهادات العملاء في شبكة من عمود واحد، تليها أقسام بعرض كامل تحتوي على وصف للميزات، ونص محاذٍ لليسار، وصور للمنتجات في المنتصف. شريط التنقل العلوي بسيط للغاية - الشعار على اليسار، وروابط التنقل في المنتصف، وتسجيل الدخول + دعوة لاتخاذ إجراء باللون الأزرق على اليمين - مع مجموعة عائمة من الصور الرمزية في منتصف شريط التنقل للتحقق من الهوية. المسافات بين الأقسام واسعة (96 بكسل) لخلق إيقاع تحريري بدلاً من فوضى معلوماتية كثيفة.
تهيمن على اللغة البصرية لقطات شاشة لواجهة مستخدم المنتج - معاينة لوحة المعلومات عبارة عن صورة فوتوغرافية مُعالجة بفلتر تباين رمادي (1) (0.94)، مما يُخفف ألوان البيانات إلى لون أحادي. الشكل البشري الوحيد عبارة عن ملصق تميمة خطي (شخصية مُغطاة بغطاء رأس)، مرسوم بأسلوب SVG بخطوط خارجية فقط، موضوع مرة واحدة في كل قسم كعنصر مُغاير مرح للمحتوى التحليلي، مع ظل خفيف لخلق تأثير عمق يُشبه الملصق. شعار العلامة التجارية والرموز عبارة عن شرارات/لهيب سوداء صغيرة. لا توجد صور فوتوغرافية - لا صور نمط حياة، ولا صور فريق، ولا صور بيئية. الكائن (لوحة المعلومات) هو العنصر الأساسي. جميع الأيقونات الزخرفية عبارة عن خطوط خارجية بسمك 1 بكسل إما باللون #0c0a09 أو #3ba6f1، غير مُعبأة.
لوحة الألوان
ماركة
- Cyan Signal
#3ba6f1— تُعدّ عبارة الحث على اتخاذ إجراء الرئيسية والروابط النشطة ومخطط أيقونات العلامة التجارية هي اللمسات اللونية الوحيدة على الصفحة، والتي تُستخدم باعتدال لجذب الانتباه إلى الإجراء. - Cyan Edge
#3398e1— يُستخدم اللون الأزرق لتسليط الضوء على مخططات الإجراءات، وعناوين الروابط، والعناصر التفاعلية. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء.
حيادي
- Ink Black
#0c0a09— العناوين الرئيسية، والنصوص المميزة، والأيقونات المعبرة تأتي بلون دافئ، يكاد يكون أسود. - Stone Canvas
#fafaf9— خلفية الصفحة ذات لون دافئ وكريمي يشبه لون الورق وليس اللون الأبيض للشاشة. - Pure White
#ffffff— تكون أسطح الخرائط واللوحات البارزة وتعبئة حقول الإدخال مسطحة وبدون ظلال بشكل افتراضي. - Stone Border
#e8e6e5— الحدود الرقيقة على البطاقات والتنقل وحقول الإدخال هي العنصر الهيكلي الأساسي، وليست الفواصل. - Stone Muted
#d6d3d1— إطارات إضافية، وظلال خلفية خفيفة، وفواصل زخرفية. - Ash Gray
#a8a29e— نص المساعدة، ومخططات الأيقونات، وحالات التعطيل - قابلة للقراءة ولكنها غير نشطة.
الطباعة
من 10 إلى 52 بكسل · 5 خطوات
- Roobert — الاستبدال: Inter Tight or Satoshi · الخطوط العريضة 400, 500 · يتميز الخط المستخدم للعناوين وتنسيق النصوص بأنه خط هندسي فريد من نوعه بدون زوائد، مع تباعد سلبي ضئيل بين الأحرف (-0.025em عند 32 بكسل، -0.021em عند 52 بكسل). ويُعدّ وزن الخط 400 × 52 بكسل سمةً مميزةً له: فهو غير تقليدي، دقيق، ولكنه في الوقت نفسه قويّ، وبسيط. وتؤدي العناوين دورها ببراعة دون أن تكون طاغية.
- Inter — الاستبدال: Inter · الخطوط العريضة 400, 500, 600 · الخط الأساسي المستخدم في نصوص المحتوى، وقوائم التنقل، وواجهة المستخدم، والعناوين هو خط محايد وعالمي لجميع النصوص خارج الشاشة. حجم 14 بكسل، ووزن 400، وتباعد أسطر 1.64 هو الحجم السائد لنصوص المحتوى (بتكرار 1174). يضمن تباعد الأحرف الموجب (0.004em) في الأحجام الصغيرة سهولة قراءة واجهة المستخدم المزدحمة.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | واسع |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 9999px |
| نصف قطر البطاقة | 10px |
| الظلال | ظلال ناعمة |
| بين الأقسام | 96px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Seline Analytics وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- ElevenLabs — مجموعة صور بألوان كريمية دافئة مع عناوين دقيقة. دفتر ملاحظات على طراز باوهاوس - ورق بلون قشر البيض، وحبر أسود، ولمسة واحدة من اللونين الأرجواني والبرتقالي لعرض المنتج.
- Awesomic — شبكة زنك تحريرية بعلامات ترقيم برتقالية تذكرنا بالقصاصات الورقية.
- Monad — مجلة فنية تحريرية حول الرق الدافئ
- Dub — لوحة تحكم ورق الأرز غير اللامع من لينك
- Notion — دفتر ملاحظات ورقي دافئ تحت شمس الظهيرة
- Anthropic — مجلة علمية ميدانية على ورق رق دافئ - أسطح عاجية هادئة، وعناوين تحريرية ذات حروف مزخرفة، ولمسة طينية واحدة تظهر فقط عند الحاجة إلى العمل.
- Calendly — حبر أزرق داكن على رخام بارد
- Augen Pro — يتميز تصميم أبل الأبيض بلمسة زرقاء كهربائية خفيفة الوزن، تُعتبر اللمسة الوحيدة في مساحة أحادية اللون.
- Antimetal — سجل افتتاحي مطبوع على ورق كريمي اللون - صباح هادئ في مجلة علمية، حيث يعكس ضبط النفس الثقة وتؤدي الحروف ذات الزوائد المهمة الصعبة
- Perk — ليمون كهربائي على ورق برشمان دافئ
- Ditto — ورشة عمل مضاءة بأشعة الشمس تُصنع فيها عينات من الزهور البرية. أسطح كريمية دافئة، لون أساسي أصفر نابض بالحياة، أحبار زرقاء داكنة، أشكال لونية عضوية تتفتح خلف القطعة.
- Officevibe — مجلة تحريرية مطبوعة على ورق بلون كريمي دافئ. تخيل مقالاً متعمقاً حول إدارة الموارد البشرية، مُقدَّماً كمنتج - خط serif انسيابي يهمس من خلال واجهة زرقاء عصرية.