تيليجرام، WhatsApp+380637610482
فاليري دانيوك
فاليري دانيوكالمطورتطوير أدوات الذكاء الاصطناعي للشركات. جودة عالية. بأسعار معقولة.راسلنا على Telegram
Framer — معاينة لموقع بهذا النمط

Framer

معرض نيون في الفراغ

يعمل برنامج Framer كظلام دامس تقريبًا - لوحة سوداء تطفو عليها المحتويات كلوحة نيون في افتتاح معرض فني. العناوين، المكتوبة بخط GT Walsheim Medium بتباعد أسطر ضيق يتراوح بين 0.8 و1.1، وتباعد حروف سلبي حاد (-0.04em عند 54 بكسل)، تُشكّل خطًا مكثفًا وزخرفيًا يبرز للأمام بدلًا من أن يستقر بشكل أنيق على الصفحة. يوفر لون أزرق كهربائي واحد (#0099ff) جميع اللمسات الوظيفية - الحدود، والتوهج، والأيقونات، والحالات النشطة - بينما تبقى بقية واجهة المستخدم أحادية اللون، معتمدةً على انتقالات رمادية دقيقة (#111، #171717، #242424) لخلق عمق من اللون الأسود النقي. تبدو المكونات مدروسة بعناية وليست زخرفية: أنصاف أقطار مستديرة تتراوح بين 8 و25 بكسل، وحدود رفيعة بسمك 1 بكسل، وظلال خفيفة، وأسطح شفافة تسمح للفراغ بالتألق.

تمتد الأقسام كاملة العرض خارج حدود الصفحة السوداء، مع تحديد عرض المحتوى بحد أقصى يبلغ حوالي 1200 بكسل، ويتم توسيطه داخلها. يتميز القسم الرئيسي برأسية محاذية لليسار وزر دعوة لاتخاذ إجراء واحد، مع ترك الجانب الأيمن فارغًا عمدًا - بشكل غير متماثل، وليس في المنتصف. تتناوب الأقسام بين تخطيطات نصية فقط (رأسية كبيرة + نص فرعي) ولقطات شاشة للمنتج. يستخدم قسم "يأتي مع Framer" جدارًا للشعارات في شبكة من 4 أعمدة. في قسم المجتمع، توضع لقطة شاشة للمنتج داخل حاوية مركزية كاملة العرض ذات زوايا مستديرة. التنقل بسيط للغاية - شريط علوي رفيع مع الشعار على اليسار والروابط محاذية لليمين، بدون عناصر تحكم مرئية. إيقاع القسم: فجوات رأسية كبيرة تبلغ 80 بكسل بين الأقسام، مما يخلق جزرًا مميزة من المحتوى تطفو في الفراغ.

تُهيمن لقطات شاشة واجهة المستخدم للمنتج، حيث تُشكّل لقطات الشاشة المُضمّنة للتطبيق، والمُؤطّرة بنافذة تُشبه الكروم مع نقاط إشارات المرور، الصورة الرئيسية. أما الشعارات، التي تُعدّ دليلاً على الجودة، فتُعرض بأحرف بيضاء على خلفية سوداء بمسافات واسعة. لا تُستخدم أي صور فوتوغرافية أو رسومات توضيحية أو رسومات تجريدية، فاللغة البصرية هي المنتج نفسه، المعروض كواجهة تفاعلية. أسلوب الأيقونات: بسيط، مُحدّد، أحادي اللون وأبيض بأحجام صغيرة. كثافة النصوص: نصوص في الغالب، مع وجود أجزاء كبيرة من حين لآخر على شكل لقطات شاشة للمنتج. يُرجّح التوازن البصري للمساحة كفة الطباعة على الصور بشكل واضح.

لوحة الألوان

ماركة

  • Vivid Violet #0066ff — يُعد زر الإجراء الرئيسي المكان الوحيد في واجهة المستخدم الذي يتم فيه عرض خلفية زر بلون ثابت.

حيادي

  • Bone #ffffff — العناوين الرئيسية، النص الرئيسي على خلفية داكنة، وخلفية الزر هي المصدر الوحيد للضوء.
  • Void #000000 — لوحة الصفحة، وخلفية التنقل، وأسطح البطاقات، وتعبئة الأيقونات - كلها عبارة عن لون أسود لا نهاية له يمتص كل المحتوى غير الأساسي.
  • Graphite #111111 — تُعد أسطح البطاقات المرتفعة خطوة متقدمة عن الفراغ - بطاقات كبيرة وعملية وحاويات مشروطة.
  • Obsidian #171717 — سطح وسيط للأزرار والبطاقات الإضافية وتعبئة واجهة المستخدم - يفصل العناصر التفاعلية عن اللوحة القماشية.
  • Slate #242424 — عند تمرير المؤشر، تكون حقول الإدخال واللوحات ذات المسافة البادئة هي اللون المحايد الأكثر سطوعًا قبل التحول إلى تنسيق النص.
  • Ash #333333 — تعبئة عميقة للصور الخلفية غير النشطة والعناصر الهيكلية.

الطباعة

من 12 إلى 68 بكسل · 8 خطوات

  • sans-serif — الاستبدال: Inter · الخطوط العريضة 400 · sans-serif - تم العثور عليه في البيانات المستخرجة ولكن لم يتم وصفه بواسطة الذكاء الاصطناعي.
  • GT Walsheim — الاستبدال: Inter Tight · الخطوط العريضة 500 · يُستخدم خط العلامة التجارية للعناوين الرئيسية والفرعية. يتميز هذا الخط بتكثيفه الشديد، حيث تتراوح المسافة بين الأسطر من 0.8 إلى 1.1 وحدة، والمسافة بين الأحرف من -0.04 إلى -0.05 وحدة في نطاق 44-68 بكسل. إنه ليس عنصرًا زخرفيًا؛ فالطابع الهندسي الدافئ لخط GT Walsheim، بالإضافة إلى مقاييسه الدقيقة، يُضفي على النظام طابعًا واثقًا ومختصرًا وعصريًا. وللحصول على تعبير هندسي مماثل، يُنصح باستخدام خط Inter Tight أو Space Grotesk Bold.
  • Inter Variable — الاستبدال: Inter · الخطوط العريضة 400 · يُعدّ النص الرئيسي، وقوائم التنقل، والعناوين الفرعية العناصر الأساسية. يسمح محور Inter المتغير بتعديل الأوزان بسلاسة. يضيق التتبع مع زيادة الحجم: من -0.001em إلى 18px، ومن -0.027em إلى 22px. يتيح الإصدار المتغير إمكانية إضافة رسوم متحركة دقيقة سلسة للموقع. البديل: Inter ( Google) - بديل مطابق تقريبًا.

الفترات والشكل

غايةمعنى
كثافةمتوسط
الخطوة الأساسية10px
نصف قطر الزر9999px
نصف قطر البطاقة20px
الظلاللا - حدود بدلاً من الظلال
بين الأقسام80px
عرض الصفحة1200px

سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Framer وتعبئته.

  • املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
  • انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
  • تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
  • تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.

أنماط مشابهة

  • Auros — محطة طرفية سحيقة مزودة بكرات بيانات متوهجة بيولوجيًا
  • Origin Financial — معرض ليلي للفخامة الهادئة. غرفة هادئة، تكاد تكون مظلمة، حيث تخلق الخطوط الكبيرة ذات الزخارف وبعض اللوحات الملونة المضيئة شعوراً بأن التمويل عمل فني منتقى بعناية.
  • Raycast — مركز قيادة منتصف الليل، كورال نيون
  • Dimension — محطة عمل مضاءة عند الغسق بألواح زجاجية مصنفرة
  • Reflect Notes — الفضاء البنفسجي المرصع بالنجوم هو مرصد مظلم حيث تطفو النوتات الموسيقية مثل الأبراج على خلفية من فراغ نيلي أسود تقريبًا.
  • Ameba — غرفة التحكم في منتصف الليل – نبضة زرقاء كهربائية داخل ألواح زجاجية مصنفرة
  • Branding — جدار معرض أسود، ولمسات باللون الأحمر القاني - تطفو الخطوط البيضاء الكبيرة على لوحة داكنة تشبه الفراغ، يقطعها لمسة حمراء زاهية واحدة وعناصر زخرفية لافتة للنظر تبدو أشبه بلافتات معرض فني منها بواجهة ويب.
  • Harness — مركز التحكم في المهمة عند منتصف الليل مع لمسات خضراء فسفورية
  • Koto — معرض أوبسيديان في منتصف الليل. مسرح مظلم تقريبًا، حيث يكون مصدر الضوء الدافئ الوحيد هو علامة صفراء واحدة، وتطفو الكتابة المكثفة في المساحة السلبية الشاسعة مثل ملصقات المعارض.
  • Ohzi — مكعب متوهج معلق في معرض مظلم
  • Depot — محطة طرفية للخادم داكنة. وحدة تحكم مطور سوداء تقريبًا، مع مؤشر LED أخضر واحد يشير إلى بدء العمل، وبقية واجهة المستخدم معروضة باللون الرمادي الداكن.
  • Maciej Zadykowicz — يُعد معرض منتصف الليل، بجداريته المتغيرة الألوان، جدار استوديو أسود تقريبًا، حيث تستحوذ قطعة فنية طباعية نابضة بالحياة وملونة على الانتباه، بينما يظل كل شيء آخر هادئًا ومدروسًا.