الخدمة

تصميم واجهات وتجربة المستخدم (UI/UX)

نصمّم المواقع والتطبيقات انطلاقاً من فهم من يستخدمها وما الذي يحتاج إلى إنجازه. وتُختبر النماذج الأولية قبل التطوير، ما يوفّر الوقت والمال لاحقاً.

لمحة سريعة
$4,500 ابتداءً

تصميم واجهات مبني على مسارات المستخدم، ومختبر في نماذج أولية قبل كتابة الكود.

FigmaTailwind CSSLaravel Blade componentsWCAG 2.2 AADesign tokensRTL typography

لمن هذه الخدمة

خدمة التصميم لدينا مخصّصة للشركات التي تبني موقعاً أو تطبيقاً جديداً، وللفرق التي يعمل منتجها الحالي لكنه يربك المستخدمين. وتناسب المؤسسات ذات المحتوى المعقّد، مثل كتالوجات المعدات الطبية، والنماذج متعددة الخطوات، ولوحات المعلومات، ولوحات الإدارة، حيث يكون الوضوح أهم من الزخرفة. كما نصمّم لجماهير متعددة اللغات، بما في ذلك الواجهات العربية والفارسية من اليمين إلى اليسار، التي تحتاج إلى أكثر من تخطيط معكوس.

ما نصمّمه

  • مواقع مؤسسية بتنقّل واضح، وصفحات منتجات وخدمات قوية، ودعوات مركّزة لاتخاذ إجراء
  • تطبيقات الويب ولوحات المعلومات حيث يقضي الموظفون ساعات يومياً وكل نقرة إضافية تكلّف وقتاً
  • رحلات التجارة الإلكترونية من صفحة الفئة حتى إتمام الشراء، بما في ذلك طلبات B2B
  • لوحات الإدارة التي يستطيع الموظفون غير التقنيين استخدامها بثقة
  • أنظمة التصميم بالخطوط والألوان والمكوّنات وقواعد الاستخدام التي يستطيع فريقك إعادة استخدامها

كيف نتعامل مع المشروع

يبدأ التصميم بالتحليل، لا بلوحات الإلهام. ننظر في من هم مستخدموك، وما الذي يحاولون فعله، وأين تخذلهم التجربة الحالية. وينتج عن ذلك مسارات المستخدم وخريطة الموقع أو خريطة الشاشات. ثم نبني مخططات هيكلية منخفضة الدقة لتثبيت البنية والأولويات، تليها نماذج أولية تفاعلية عالية الدقة. وحيثما أمكن، نختبر المسارات الرئيسية مع مستخدمين حقيقيين أو موظفين قبل التطوير. وسهولة الوصول جزء من العمل منذ المخطط الأول: يُفحص التباين وحالات التركيز والتنقّل بلوحة المفاتيح وأحجام الخطوط المقروءة وفق معيار WCAG 2.2 AA.

وفي المشاريع ثنائية اللغة والمشاريع من اليمين إلى اليسار، نصمّم الاتجاهين معاً. تُعدَّل الأيقونات وتنسيق الأرقام وتخطيطات النماذج والخطوط لكل نظام كتابة، لتبدو النسخة العربية أو الفارسية أصيلة لا مترجمة.

التقنيات

نصمّم في Figma، بمكوّنات تقابل مباشرة مكوّنات Tailwind CSS وLaravel Blade التي يستخدمها مطوّرونا. وهذا يعني مفاجآت أقل بين التصميم والبناء، ونظام تصميم يبقى متزامناً مع المنتج الفعلي. تُشارَك النماذج الأولية كروابط يستطيع فريقك التعليق عليها، وتتضمّن الملفات النهائية مواصفات المسافات والحالات والسلوك المتجاوب.

المحتوى والنصوص

الواجهات الجيدة تعتمد على كلمات جيدة. نعمل بمحتوى حقيقي منذ المخطط الأول بدلاً من النصوص المؤقتة، لأن العناوين وتسميات الأزرار ورسائل الخطأ تحدّد كيف يتنقّل الناس في الصفحة. وحيث يكون المحتوى ناقصاً، نساعد في كتابته أو تنظيمه، وننبّه إلى الصفحات التي تحتاج إلى مدخلات من متخصصيك. وفي المنتجات التقنية، مثل المعدات الطبية أو الآلات الصناعية، ننظّم المواصفات ليتمكّن المشترون من مقارنة الخيارات بسرعة والعثور على التفاصيل التي يحتاجونها دون الاتصال بفريق المبيعات.

ما تحصل عليه

تحصل على تصاميم جاهزة للبناء، لا مجرد صور. تأتي كل شاشة بحالاتها (فارغة، قيد التحميل، خطأ، نجاح)، ونسخها المتجاوبة، وملاحظات سهولة الوصول. وإذا كنا نبني المنتج أيضاً، يبقى التصميم والتطوير في فريق واحد، ما يتجنّب مشكلات التسليم المعتادة. وإذا كان مطوّروك هم من يبنونه، نوفّر مكتبة مكوّنات وندعمهم خلال التنفيذ.

التصميم مشمول في مشاريع تطوير المواقع المخصّصة وتطبيقات الويب، ومتاح أيضاً كخدمة مستقلة. أخبرنا عن مشروعك.

القدرات

ما الذي يتضمنه

البحث قبل الجانب البصري

يُتفق على أهداف المستخدمين ومساراتهم وأولويات المحتوى قبل بدء أي تصميم بصري.

نماذج أولية تفاعلية

تُبنى نماذج أولية للرحلات الرئيسية وتُختبر لتظهر المشكلات قبل التطوير.

تصميم أصيل من اليمين إلى اليسار

تُصمَّم التخطيطات العربية والفارسية جنباً إلى جنب مع الإنجليزية، بخطوط مناسبة لكل نظام كتابة.

سهولة الوصول مدمجة

يُفحص التباين وحالات التركيز واستخدام لوحة المفاتيح وفق معيار WCAG 2.2 AA.

أنظمة التصميم

مكوّنات وقواعد قابلة لإعادة الاستخدام تُبقي الصفحات الجديدة متناسقة مع نمو المنتج.

ملفات جاهزة للمطوّرين

مكوّنات تقابل Tailwind CSS وBlade، مع الحالات ومواصفات التجاوب.

المنهجية

كيف يسير هذا التعاون

  1. الفهم

    مقابلات ومراجعة للتحليلات وتدقيق للمحتوى لتحديد المستخدمين ومهامهم الرئيسية.

  2. البنية

    مسارات المستخدم وخريطة الموقع والمخططات الهيكلية لتثبيت الأولويات والتنقّل.

  3. التصميم

    التصميم البصري ونماذج أولية تفاعلية لأجهزة الكمبيوتر والأجهزة اللوحية والهواتف.

  4. الاختبار والتحسين

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

الأسئلة الشائعة

أسئلة حول تصميم واجهات وتجربة المستخدم (ui/ux)

هل يمكنكم إعادة تصميم جزء فقط من موقعنا أو تطبيقنا؟

نعم. غالباً ما نبدأ بالمسارات الأعلى أثراً، مثل صفحة الدفع أو نماذج الاستفسار أو لوحة معلومات رئيسية.

هل تصمّمون للعربية والفارسية؟

نعم. نصمّم نسخاً من اليمين إلى اليسار جنباً إلى جنب مع الإنجليزية، بخطوط ومحاذاة وتخطيطات نماذج صحيحة.

هل سيتمكّن مطوّرونا من البناء وفق تصاميمكم؟

نعم. تتضمّن الملفات المكوّنات والحالات ومواصفات التجاوب، ويمكننا دعم فريقك خلال البناء.

كم يستغرق التصميم؟

يحتاج الموقع المؤسسي عادةً من ثلاثة إلى خمسة أسابيع من التصميم. وتختلف التطبيقات بحسب عدد مسارات العمل.

الخطوة التالية

لديك مشروع في ذهنك؟

أخبرنا بما تحتاج إلى بنائه أو إصلاحه. سنرد خلال يوم عمل واحد بأسئلتنا ونطاق تقريبي للميزانية والخطوات التالية.