موقع مؤسسيمتاح
neptay.com
موقعنا المؤسسي — الإعلام والتقنية والخدمات المقدمة للعملاء في نظام واحد، بعشر لغات ووضعين للألوان.
من داخل العمل
نظرة على النظام.
الصفحة الرئيسية في الوضعين الفاتح والداكن، ولوحة ألوان العلامة التجارية، وسلم أحجام الخطوط، واللغات العشر التي يتوفر بها الموقع.
نظرة عامة
موقعنا هو أول ما يراه العملاء والشركاء، ويقدم كل جوانب Neptay بالمعيار نفسه الذي نلتزم به في أعمال عملائنا.
الموجز
- المشكلة
- تقديم شركة إعلام وتقنية، بقسميها وذراع الخدمات التي تقدمها لعملائها، كعلامة تجارية واحدة واضحة وموثوقة.
- القيد
- عشر لغات، إحداها من اليمين إلى اليسار، ووضعان للألوان.
- الحل
- نظام تصميم قائم على رموز التصميم: لوحة ألوان واحدة، وخطوط كبيرة، ولوحات رمادية، ولون أصفر واحد للتمييز.
تعد Neptay Media & Technology Services شركة إعلام وتقنية، ويقدم الموقع قسميها، إلى جانب ذراع الخدمات التي تقدمها لعملائها، كعلامة تجارية واحدة واضحة.
يقوم نظام التصميم على لوحة ألوان العلامة التجارية: درجتان محايدتان فاتحتان، ودرجتان داكنتان، ولون إبراز أصفر واحد. مجموعة واحدة من رموز التصميم (tokens) تشغل الوضع الفاتح الافتراضي والوضع الداكن معا، وكل واجهة على الموقع مرسومة بالشيفرة البرمجية، فتبقى متسقة مع المنتج دائما.
يتوفر الموقع بعشر لغات من طبقة محتوى واحدة، منها اليابانية والعربية من اليمين إلى اليسار. تعتمد التخطيطات على الخصائص المنطقية فتنعكس بسلاسة، أما التوجيه والبيانات الوصفية وhreflang والبيانات المنظمة فتتكيف مع اللغة في كل صفحة.
المنهج
ثلاثة مبادئ التزمنا بها حتى النهاية.
الخط يتولى المهمة
عناوين كبيرة متراصة، ومقدمات هادئة بألوان خافتة. عنوان واحد بدرجتين لونيتين يحمل الفكرة وسياقها. ولا نكلف أيقونة بمهمة يستطيع الخط أداءها.
لون إبراز واحد للتمييز
يميز أصفر العلامة التجارية الإجراءات ومواضع التأكيد: زر، أو عبارة بارزة، أو مربع صغير. وكل ما عدا ذلك حبر ولوحات رمادية وخطوط رفيعة، في الوضعين الفاتح والداكن.
الحركة تؤكد ولا تستعرض
يرتفع المحتوى إلى مكانه عند ظهوره أول مرة، وترتفع البطاقات قليلا عند مرور المؤشر، وتتوقف كل الحركات حين يفضل الزائر تقليل الحركة.
النتائج
ما يقدمه الموقع.
التوطين
10لغات
الإنجليزية والتركية والألمانية والإسبانية والفرنسية والبرتغالية والروسية والعربية واليابانية والصينية، مع hreflang في كل صفحة.
التخطيط
من اليسار إلى اليمين وبالعكس
تعكس العربية التخطيط كله عبر الخصائص المنطقية، لا عبر ملف أنماط منفصل.
الألوان
لوحة واحدة، ووضعان
خمسة ألوان للعلامة التجارية مطبقة كرموز تصميم: وضع فاتح افتراضي ووضع داكن، مع إمكانية التبديل في كل صفحة.
النظام
مجموعة واحدة من الرموز
كل الصفحات، بوضعي الألوان ولغاتها العشر، تتشارك مجموعة واحدة من رموز التصميم.
التقنيات
- Next.js 15
- React 19
- TypeScript
- CSS design tokens
- Geist
- Vercel