FRANKY'S
كشك ألعاب فيديو قديمة على منضدة متجر للتزلج
تجمع لغة فرانكي البصرية بين أسلوب ألعاب الفيديو القديمة ومتاجر ألواح التزلج: خلفية كريمية دافئة (#f3e5df) محاطة بإطارات بكسلية صارمة، ونمط مربعات أبيض وأسود شائع، وخط بكسل واحد، Arcade، يُستخدم لكل كلمة على الموقع. لوحة الألوان بسيطة عمدًا - لونان فقط (برتقالي فاقع #faa21f للشعار وأخضر غني #128e44 لزر الشراء)، مع التعبير عن التسلسل الهرمي الكامل من خلال زيادة وزن خط Arcade من 400 إلى 700 واستخدام اللون الأسود على خلفية كريمية. تبقى الأسطح مسطحة ومتجانسة؛ ويُضفى العمق فقط من خلال خط كريمي بسمك 1 بكسل على الأزرار وتدرجات ألوان نمط المربعات. تُذكّرنا مكونات الموقع برسومات واجهات المتاجر في التسعينيات: حدود سوداء سميكة، ونصف قطر حدود ضيق يتراوح بين 6 و12 بكسل، وحشو مضغوط يتراوح بين 4 و8 بكسل، ومفاتيح تبديل ثلاثية الأبعاد/واقع معزز تبدو كأيقونات منقطة وليست عناصر كرومية. تهدف الصفحات الجديدة إلى الحفاظ على جوّ ألعاب الأركيد: لا تدرجات لونية سوى نص برتقالي متحرك، ولا ظلال ناعمة، ولا زخارف كتابية - فقط ورق بلون كريمي، وخطوط سوداء منقطة، ولون برتقالي دافئ واحد.
على أجهزة الكمبيوتر المكتبية، تعرض صفحة المنتج تصميمًا مركزيًا بعرض كامل يبلغ 1200 بكسل كحد أقصى. ويكون ترتيب العناصر من الأعلى إلى الأسفل كالتالي: نص برتقالي متحرك ← رأس الصفحة بلون كريمي مع خط أسود ← تقسيم الصفحة إلى عمودين (55% مربعات مربعة في الصفحة الرئيسية / 45% شبكة من عمودين لعرض بطاقات المنتجات) ← شريط كريمي في أسفل الصفحة. أما على الأجهزة المحمولة، فتتحول الصفحة الرئيسية إلى مربعات مربعة بعرض كامل، وتصبح الشبكة عبارة عن عمود واحد. تُوزع البطاقات بالتساوي في شبكة من عمودين مع فواصل رمادية (#e5e7eb) بينها. المسافة بين الأقسام ضئيلة (43-61 بكسل)، ولا تستخدم واجهة المستخدم أبدًا خطوطًا داكنة تمتد على كامل عرض الصفحة، حيث يتم عرض الصفحة الكريمية بسلاسة دون انقطاع.
صورة لقبعات على خلفية كريمية نقية، مُركّزة ومُقتطعة بدقة، مع ظل أسود فحمي ناعم أسفلها. لا نمط حياة، لا عارضين، لا سياق - القبعة هي النجمة. نمط رقعة الشطرنج خلف العنصر الرئيسي يُشكّل السطح الرسومي. لا رسومات توضيحية، لا صور ثلاثية الأبعاد باستثناء زر تبديل الواقع المعزز، لا أيقونات زخرفية باستثناء الصليب المُبكسل في الشعار.
لوحة الألوان
ماركة
- Marquee Orange
#faa21f— شريط الإشعارات في أعلى الشاشة، عناصر مميزة، العلامة التجارية. - Buy Green
#128e44— زر "إضافة إلى السلة" مُعبأ - عملية الشراء الوحيدة المميزة باللون الأخضر.
حيادي
- Arcade Cream
#f3e5df— خلفية الصفحة، أسطح بطاقات المنتجات، إضافات الأزرار. - Ink Black
#000000— النص الرئيسي، تصميم رقعة الشطرنج، جميع حدود واجهة المستخدم، مخططات البطاقات، حدود الأيقونات. - Pixel Gray
#e5e7eb— حدود رقيقة، فواصل بطاقات، قواعد هيكلية بين خلايا الشبكة. - Charcoal
#333333— لون السطح الثانوي، مربعات الظل بنمط رقعة الشطرنج، لون الظل - Carbon
#151515— ألوان محايدة غنية لملء الرسوم التوضيحية وبلاطات رقعة الشطرنج الأكثر كثافة. - Muted Gray
#737373— تم تعطيل/كتم النص على الأزرار وفي نص الصفحة.
الطباعة
من 10 إلى 18 بكسل · 4 خطوات
- Arcade — الاستبدال: VT323 · الخطوط العريضة 400, 700 · يُستخدم خط واحد في جميع أنحاء واجهة المستخدم - جميع العناوين، والملصقات، والأسعار، والأزرار، والنصوص، والأيقونات مكتوبة بخط Arcade. ويُعدّ الانتقال من حجم 400 إلى 700 الأداة الوحيدة لإنشاء التسلسل الهرمي؛ فاستخدام خط ثانٍ سيُفسد مظهر الكشك.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 4-8px |
| نصف قطر الزر | 6px |
| نصف قطر البطاقة | 12px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 43-61px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب FRANKY'S وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- 099 SUPPLY — جدار معرض مليء بأشياء بالأبيض والأسود
- teenage engineering — كتالوج صناعي لإضاءة الاستوديوهات - المنتج هو العنصر المهم الوحيد في الصفحة، وكل شيء آخر يُناقش حوله.
- Custo — معرض بلون معدني داكن مع خط كتابة ضخم. صالة عرض بألوان رمادية مخضرة هادئة، حيث يتحدث عنصر داكن واحد وخط كتابة بحجم 57 بكسل عن نفسه.
- Walden — صمت أرض الغابة - كل منتج حجر، وكل بكسل طحلب وصمت
- Fiverr — تتمحور فكرة البازار الرقمي حول نبضة خضراء نابضة بالحياة تتناقض مع ألوان خشبة المسرح الداكنة. وتُشكل نقطة خضراء نيون واحدة نقطة ارتكاز للشعار، بينما بقية التصميم أحادي اللون، مصمم لإبراز جاذبية الخدمات المقدمة.
- Peloton — منارة حمراء على مدرج أسود حالك. صالة عرض للياقة البدنية حيث تخترق لافتة حمراء زاهية واحدة مساحة العرض الشاسعة المظلمة وتؤدي إلى غرف منتجات بيضاء نظيفة.
- HOUSEPLANT — مكتبة بها مكسرات على ورق كتاني
- Adam Lippes — استوديو تحريري أحادي اللون على ورق كريمي اللون - صفحة من مجلة فوغ حيث الزخرفة الوحيدة هي شبكة التخطيط، وليس لوحة الألوان.
- Elektron — لوحة التحكم بالمعدات في منتصف الليل عبارة عن لوحة سوداء تقريبًا، حيث تتألق صور المنتجات بينما تظل واجهة المستخدم غير مرئية تقريبًا.
- Sigmaphoto — معرض الأدوات الدقيقة أحادي اللون عبارة عن غرفة بيضاء هادئة حيث اللون الوحيد المهم هو اللون الذي يدعوك إلى العمل.
- Channel Studio — مختبر تصوير استوديو مزود بمصباح واحد من المرجان
- Specht Studio — جدار معرض مليء بالفضول الخفي. يتميز سطح الاستوديو المصنوع من الكروم باللون الأبيض والكتابة السوداء؛ وتتركز الألعاب النارية البصرية بالكامل داخل بلاط المشروع.