Ambatt Energy
موقع ثنائي اللغة لشركة سعودية متخصصة في حلول الطاقة
Ambatt Energy شركة سعودية لحلول الطاقة، متخصصة في مولدات الديزل وأنظمة الطاقة والتركيب والصيانة والدعم الفني. صممنا وطوّرنا لها موقعاً ثنائي اللغة موجهاً لقطاع الأعمال، يعرض منتجاتها وخدماتها وشراكاتها وشهاداتها ومشاريعها المنفذة. كل صفحة في الموقع تقود الزائر إلى طلب عرض سعر أو حل طاقة.
- العميل
- AMBATT
- المجال
- الطاقة وحلول القوى الكهربائية والهندسة الصناعية
- نوع المشروع
- موقع شركة موجه لقطاع الأعمال
- دورنا
- تصميم تجربة المستخدم والواجهات، نظام التصميم وتطوير الموقع
- المدة
- شهر واحد
الهدف
بناء موقع احترافي وحديث يشرح بوضوح حلول Ambatt Energy ومنتجاتها وخدماتها وسجل مشاريعها. كان المطلوب أن يبني الموقع ثقة عملاء قطاع الأعمال وأن يسهّل عليهم طلب عرض سعر.
التحدي
تقدّم Ambatt Energy مجموعة واسعة من المنتجات والخدمات التقنية، وكان لا بد من عرضها بوضوح وبأسلوب يجذب المشترين من الشركات. لم يكن هناك تصميم سابق نبني عليه، فبدأنا هيكل الموقع وهويته البصرية من الصفر. وكان على النتيجة أن تحمل طابعاً صناعياً راقياً وأن تبقى سهلة الاستخدام.
الحل
نظّمنا المنتجات والخدمات والمعلومات التقنية والمشاريع في رحلة واحدة واضحة تبدأ بالتعرّف وتنتهي بالاستفسار. يحافظ نظام تصميم صناعي موحّد، مع تخطيطات متجاوبة ودعوات واضحة لاتخاذ الإجراء، على وضوح هذه الرحلة في كل شاشة. وخلف الموقع لوحة تحكم يعدّل منها فريق Ambatt المنتجات والخدمات والمشاريع وجميع نصوص الموقع بالعربية والإنجليزية، ويعاين المسودة قبل نشرها، ويستعيد أي نسخة سابقة.
كيف نفّذنا العمل
- 01
استراتيجية تجربة المستخدم
حدّدنا هيكل الموقع وأهداف المستخدمين وتجربة تركّز على تحويل الزيارة إلى استفسار.
- 02
هيكلة المحتوى
رتّبنا معلومات الشركة والخدمات والمنتجات والمشاريع والبيانات التقنية في تسلسل هرمي واضح.
- 03
تصميم الواجهات
وضعنا التوجه البصري والتخطيطات والخطوط والمكونات التي تمنح الموقع طابعه الصناعي الراقي.
- 04
التصميم المتجاوب
كيّفنا الواجهة والتخطيطات لشاشات الحاسوب والأجهزة اللوحية والجوال.
- 05
النماذج التفاعلية
بنينا نماذج تفاعلية تعرض التنقل والتفاعلات ومسارات المستخدم الرئيسية قبل بدء التطوير.
الشاشات الأساسية
قرارات التصميم
لغة بصرية صناعية
مظهر جريء وحديث يعكس خبرة Ambatt Energy الهندسية وموثوقيتها وطبيعتها التقنية.
تسلسل معلومات واضح
وزّعنا المنتجات والخدمات والتفاصيل التقنية والمشاريع على أقسام واضحة يتصفحها عملاء قطاع الأعمال ويفهمونها بسرعة.
تجربة تقود إلى الاستفسار
دعوات واضحة لاتخاذ الإجراء ومسارات قصيرة تنقل الزائر من استكشاف الحلول إلى طلب عرض سعر.
فهم النشاط أولاً
بدأنا بفهم نشاط Ambatt Energy وجمهورها وعروضها التقنية قبل تصميم أي شاشة.
تبسيط المحتوى المعقد
حوّلنا المعلومات المعقدة إلى تجربة منظمة، مع تنقل أبسط وترتيب منطقي للمنتجات والخدمات.
من التعرّف إلى الاستفسار
يعزّز التصميم الهوية الصناعية للعلامة ويحافظ على مسار واضح من الزيارة الأولى إلى إرسال الاستفسار.
الهوية البصرية
- الطابع
- طابع حديث وتقني يجمع بين مظهر مؤسسي نظيف وصور صناعية جريئة وخطوط قوية ودرجات داكنة وعناصر تفاعلية هادئة.
- الخطوط
- Aldrich, SF Pro
- الصور
- تصوير صناعي وهندسي عالي الجودة للمولدات وأنظمة الطاقة والمعدات التقنية ومواقع المشاريع الحقيقية. الأجواء قوية واحترافية وموثوقة، بلمسة سينمائية.
- الحركة
- انتقالات ناعمة بين الأقسام، وسرد هادئ يرافق التمرير، وتفاعلات دقيقة ومدروسة. تدعم الحركة تسلسل المحتوى والتنقل من دون أن تصرف الانتباه عن الطابع التقني والمؤسسي للعلامة.
الجانب التقني
التقنيات
- Next.js 16
- React 19
- TypeScript
- React Compiler
- Tailwind CSS 4
- GSAP
- Lenis
- Supabase
- PostgreSQL
- Vercel
التكاملات
- Supabase
- Google Maps
التحدي التقني
يحتاج العميل إلى رؤية كل مولّد من جميع الزوايا، لكن بناء نموذج ثلاثي الأبعاد لكل منتج كان مكلفاً، وكان حجم الشيفرة التي تشغّله وحدها نحو 1 ميغابايت. استبدلنا به دوراناً مبنياً على صور تُلتقط للمنتج على منصة دوّارة ويرفعها الفريق من لوحة التحكم، مع دمج كل لقطة في التي تليها حتى تبدو 8 صور فقط دوراناً حقيقياً. انخفض بذلك حجم JavaScript المحمّل في المتصفح من 2.2 ميغابايت إلى 1.2 ميغابايت، وبعد إعادة ترميز فيديو الصفحة الرئيسية نزل حجمه من 2 ميغابايت إلى 613 كيلوبايت وصارت لقطته الأولى تظهر فور وصول أول جزء منه.
الأداء والجودة
تُقدَّم الصور بصيغة AVIF التي تجعل صور المنتجات أصغر بنسبة 48%، وانخفض حجم الخطوط المحمّلة عند فتح الصفحة لأول مرة من 122 كيلوبايت إلى 37 كيلوبايت. خضع الموقع لتدقيق أمني شامل وعولجت جميع الملاحظات التي كشفها، مع تفعيل Row Level Security على كل جدول وسياسة أمان محتوى (CSP) تمنع تحميل أي شيفرة خارجية. يعمل الموقع بالعربية والإنجليزية مع دعم كامل للاتجاه من اليمين إلى اليسار، ويتضمن خريطة موقع وبيانات منظمة وروابط hreflang وإعدادات SEO قابلة للتعديل من لوحة التحكم.
ما الذي تغيّر
هوية بصرية قوية
لغة تصميم صناعية تعبّر عن الموثوقية والخبرة الهندسية والاحترافية.
تنظيم واضح للمحتوى
تُعرض المنتجات التقنية والخدمات ومعلومات المشاريع في تجربة منظمة يسهل التنقل فيها.
تجربة استخدام متسقة
نظام تصميم واحد يشمل التخطيطات والمكونات والخطوط والشاشات المتجاوبة، فيظهر الموقع كله بصورة موحّدة.
عندك مشروع يشبه هذا؟
أرسل لنا ما تحتاجه، ويصلك عرض سعر مفصّل خلال 24 ساعة: نطاق العمل والتكلفة والمدة.
اطلب عرض سعر
