UX/UI موقع ملاحة | دراسة حالة | Framer

Discovery & Research — فهم المشكلة

بدأنا المشروع بدراسة طريقة عمل ملاحة، وفهم طبيعة الخدمات اللي تقدمها، وكيف يتنقّل المستخدم داخل المنصّة.
 جلسنا مع فريق المحتوى لجمع المتطلبات، تحليل احتياجات المستخدمين، وتحديد أهداف الموقع الأساسية مثل:

عرض خدمات ملاحة بطريقة موحّدة وسهلة.

تبسيط رحلة الزائر للوصول للمعلومات.

إبراز الهوية البصرية الجديدة.

Information Architecture — هيكلة المعلومات

بعد فهم المحتوى، بدأنا بإعادة ترتيب الصفحات والمحتوى في مسارات واضحة ومختصرة.
 تم تطوير خريطة موقع (Sitemap) جديدة تساعد المستخدم ينتقل بسرعة بين:

الخدمات

الأمثلة وأعمال ملاحة

المدونة

من نحن

تواصل معنا

وتم تبسيط المحتوى ليكون مختصر، مباشر، وسهل القراءة.

User Flow — رحلة المستخدم

صممنا رحلة مستخدم واضحة تُرشد الزائر من أول لحظة دخول إلى اتخاذ خطوة فعلية مثل:

طلب خدمة

التواصل

تصفّح أعمال ملاحة

الهدف كان تقليل النقرات وتحسين الانسيابية داخل الموقع.

Wireframes — النماذج الأولية

قبل ما نبدأ التصميم، تم بناء Wireframes بسيطة تركّز على:

ترتيب البلوكات

أماكن النصوص

عرض المزايا

طريقة عرض الخدمات

الهرمية البصرية

وده ساعدنا نحدد أفضل طريقة لعرض محتوى ملاحة بدون تشتيت.

Visual Design — تصميم الواجهة

اعتمدنا على أسلوب بصري خفيف ومودرن باستخدام:

ألوان هادئة مستوحاة من هوية ملاحة

تايبوجرافي واضح وسهل القراءة

أيقونات خفيفة

مساحات بيضاء كبيرة للتركيز

صور قوية تعكس خدمات المحتوى

النتيجة كانت واجهة نظيفة ومناسبة للـ Light Mode في لابتوب وموبايل.

Responsive Design — التجاوب مع الشاشات

تم تصميم كل صفحة بنسخة:

لابتوب

موبايل

آيباد

مع الحفاظ على نفس التجربة بدون فقدان أي عنصر مهم.

Final Outcome — النتيجة النهائية

نجحنا في تقديم موقع:

سهل الاستخدام

واضح في المحتوى

جمالي ومناسب لطبيعة ملاحة

جاهز للعرض على مختلف الأجهزة

مبني بهوية ثابتة ومتكاملة