نظرة عامة
GBY شركة بحرية سعودية تمثل علامات عالمية في القوارب واليخوت والتنقل البحري. احتاج الموقع إلى التعبير عن تموضع فاخر مع مساعدة الزائر على فهم مجموعة متنوعة من العلامات والمنتجات.
السياق
احتاجت الشركة إلى حضور رقمي ثنائي اللغة يدعم الموثوقية واكتشاف المنتجات والنمو مستقبلًا. كما أن المجال يعتمد على قرار شراء مدروس، لذلك تؤثر جودة الصورة والثقة بشكل مباشر في التواصل والاستفسارات.
المشكلة
قد يتحول الكتالوج الغني بصريًا إلى تجربة صعبة بسرعة. كان التحدي الحفاظ على قوة الصور البحرية مع منح كل علامة وموديل ورسالة تجارية مكانًا واضحًا داخل هندسة المعلومات.
الأهداف
بناء تجربة راقية تبدو فاخرة دون التضحية بالوضوح أو السرعة.
- صناعة انطباع أول قوي.
- تنظيم العلامات وعائلات المنتجات بوضوح.
- دعم تصفح طبيعي بالعربية والإنجليزية.
- إظهار مسارات التواصل دون مبالغة.
- الحفاظ على تجربة متسقة عبر جميع الشاشات.
دوري
قدت توجه UX/UI والتنفيذ الأمامي. شمل عملي هرمية المحتوى، وبنية الصفحات، والتخطيطات المتجاوبة، والتوجه البصري، والسلوك ثنائي اللغة، وتصميم المكونات، وجودة التنفيذ.
العملية
راجعت المحتوى المتاح وصنفّته حسب نية المستخدم، ثم بنيت نموذج تنقل يفصل معلومات الشركة عن استكشاف العلامات والمنتجات. اختبرت التصاميم عالية الدقة بالنصوص والصور الحقيقية قبل تحويلها إلى أنماط Front-End قابلة لإعادة الاستخدام.
القرارات الرئيسية
تعتمد التجربة على صور تحريرية كبيرة وتايبوغرافي هادئ وإيقاع محتوى محسوب بدل الشبكات المزدحمة. ويمكن لصفحات العلامات أن تحمل شخصية مختلفة مع بقائها ضمن نظام GBY موحد.
نظام التصميم
يحدد النظام المشترك التايبوغرافي والمسافات والأزرار والأسطح والطبقات والبطاقات ونسب الصور والسلوك المتجاوب. يحافظ ذلك على الاتساق مع منح كل علامة مساحة للتميّز.
إمكانية الوصول
يركز التنفيذ على تباين مقروء، وتفاعلات واضحة بلوحة المفاتيح، وعناوين دلالية، ونصوص بديلة مفيدة، ومناطق لمس مناسبة، ونص متجاوب. وتبقى الحركة الزخرفية خفيفة ولا تعيق الوصول للمحتوى.
العربية واعتبارات RTL
صُممت التجربة العربية ولم تُعكس آليًا. تمت مراجعة ترتيب التنقل والمحاذاة والمسافات واتجاه الأيقونات وعلاقة الشعار وانكسارات السطور في RTL، مع الحفاظ على وضوح أسماء المنتجات والمحتوى اللاتيني المختلط.
التطوير
بُني الموقع كواجهة ثابتة خفيفة باستخدام HTML الدلالي وCSS وJavaScript مع أدوات Bootstrap عند الحاجة. يدعم هذا النهج السرعة وسهولة الاستضافة والتحكم في SEO والصيانة دون إضافة إطار عمل غير ضروري.
النتيجة
النتيجة حضور رقمي أوضح وأكثر فخامة يعكس مكانة GBY بشكل أفضل، ويسهّل فهم محفظتها، ويوفر مسارات مباشرة لاستكشاف العلامات أو التواصل مع الشركة.
ما تعلمته
الفخامة تأتي من التحرير والاتساق أكثر من الزخرفة. اختيار الصور بعناية، وضبط المسافات، وبناء هرمية واضحة كانت أهم من إضافة مؤثرات كثيرة.