خدماتنا

تصميم تجربة وواجهة المستخدم

نصمّم في أفق التقنية تجربة وواجهة المستخدم بدءاً من بحث المستخدم ورحلته، مروراً بالهيكل السلكي (Wireframes)، وصولاً لنماذج Figma تفاعلية قابلة للنقر ونظام تصميم (Design System) كامل يسلَّم للمطوّرين. مشروع التصميم يستغرق عادة من أسبوعين إلى ستة أسابيع بتكلفة تبدأ من 8,000 ريال. نصمّم لاتجاه RTL من الأساس، لأن الواجهة العربية ليست نسخة معكوسة من الإنجليزية.

2-6 أسابيع
مدة مشروع التصميم
100%
RTL أصيل
Figma
نماذج قابلة للنقر
30+
مشروع مصمّم
نطاق الخدمة

ماذا يشمل مشروع التصميم؟

بحث المستخدم والمنافسين

نحلّل جمهورك وما يفعله منافسوك جيداً وما يفشلون فيه، لنبني قرارات تصميم مبنية على واقع لا ذوق.

رحلة المستخدم وخريطة الشاشات

نرسم مسار المستخدم من أول دخول حتى إنجاز هدفه، ونحدّد كل شاشة يحتاجها.

الهيكل السلكي Wireframes

ترتيب المحتوى والأولويات قبل الألوان — لأن حلّ مشكلة الترتيب أرخص بكثير في هذه المرحلة.

تصميم الواجهات النهائية

تصميم عالي الدقة بهويتك اللونية والخطية، لكل شاشة وكل حالة (فارغة، تحميل، خطأ).

نموذج Figma تفاعلي

تجرّب التطبيق بالنقر قبل برمجته، وتكتشف ما يحتاج تعديلاً وهو ما يزال رخيص التغيير.

نظام تصميم للمطوّرين

مكوّنات وألوان وخطوط ومسافات موثّقة، ليخرج المنتج المبرمج مطابقاً للتصميم تماماً.

لمن؟

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

منتج قبل أن يُبرمج

التعديل في مرحلة التصميم يكلّف ساعة، وبعد البرمجة أسبوعاً — فميزانية التصميم تأمين على ميزانية البرمجة.

منتج قائم يُستخدَم بصعوبة

حين ترى مستخدميك يتردّدون في نفس الخطوة، أو يسألون الدعم عن شيء يفترض أنه واضح.

منتج عربي عُرِّب بالعكس الآلي

واجهة قُلبت آلياً فانقلبت أيقونات لا يجب أن تُقلب، وظهر النص بخط لم يُصمَّم للعربية.

فريق يتوسّع

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

ومتى لا تحتاج هذه الخدمة؟

  • نموذج داخلي سريع لاختبار فكرة تقنية لا يراه مستخدم — لا تنفق عليه تصميماً.
  • صفحة واحدة بسيطة جداً ذات هدف واحد — قالب جيد يكفيها.
  • حين تكون المشكلة الحقيقية في المنتج نفسه لا في واجهته — التصميم لا ينقذ حلاً لا يحتاجه أحد، وسنقولها لك بصراحة.
آلية العمل

كيف نعمل — خطوة بخطوة

1

الاكتشاف

نفهم المنتج والجمهور والهدف والقيود التقنية قبل رسم أي شيء.

2

البحث والتحليل

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

3

الهيكل السلكي

ترتيب الشاشات والمحتوى ومراجعتها معك قبل الدخول في التفاصيل البصرية.

4

التصميم البصري

الواجهات النهائية بهويتك، مع مراجعتين مجانيتين لكل شاشة.

5

التسليم

ملف Figma كامل + نظام التصميم + الأصول جاهزة للمطوّر.

الأسعار

أسعار تصميم UI/UX

نطاق العملالنطاق السعريالمدة التقريبية
تصميم موقع تعريفي (5–8 شاشات)8,000 – 20,000 ريال2 – 3 أسابيع
تصميم تطبيق (10–20 شاشة)15,000 – 40,000 ريال3 – 5 أسابيع
تصميم منصة كاملة + نظام تصميم40,000 – 90,000 ريال5 – 8 أسابيع
إعادة تصميم منتج قائم (UX Audit)10,000 – 30,000 ريال2 – 4 أسابيع

التكلفة تعتمد على عدد الشاشات وعمق مرحلة البحث والحاجة لنظام تصميم كامل.

الأدوات التي نستخدمها

FigmaDesign SystemsWireframingPrototypingRTL DesignAccessibilityUser Research
ما نتفاداه

أخطاء تُكلّف كثيراً — وكيف نتفاداها

الخطأما يكلّفه، وما نفعله بدلاً منه
العكس الآلي للاتجاه بدل التصميم للعربيةيقلب أيقونات لا يجب أن تُقلب مثل أزرار التشغيل والشعارات، ويكسر تناسق الأرقام. نصمّم لاتجاه RTL من الأساس وبقرار واعٍ لكل أيقونة.
اختبار التصميم على الفريق لا على المستخدمينالفريق يعرف المنتج مسبقاً فلا يرى ما يربك الغريب. نختبر على خمسة إلى سبعة من جمهورك الحقيقي — يكشفون الغالبية العظمى من المشاكل.
قياس رأي الناس في الشكلالناس مجاملون ويقولون «حلو». نقيس بدلاً من ذلك: هل أنجزوا المهمة، وكم استغرقوا، وأين توقّفوا.
خط لاتيني على نصّ عربييجعل المنتج يبدو رخيصاً بلا أن يعرف أحد السبب. نختار خطاً عربياً حقيقياً ونضبط ارتفاع الأسطر للعربية.
البدء بالبرمجة بلا نموذج تفاعلييعني اتخاذ مئات القرارات أثناء الكتابة ثم اكتشاف تعارضها متأخراً. النموذج يجعلك تجرّب وتعترض قبل أن يكلّف التعديل شيئاً.
FAQ

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

ما الفرق بين UI و UX؟

الـ UX (تجربة المستخدم) هو كيف يعمل المنتج: ترتيب الخطوات، وسهولة الوصول للهدف، ومنطق الشاشات. أما الـ UI (واجهة المستخدم) فهو كيف يبدو: الألوان والخطوط والمسافات والأيقونات. المنتج الناجح يحتاج الاثنين — تصميم جميل بتجربة سيئة يفشل، وتجربة ممتازة بشكل رديء لا تُقنع أحداً.

كم تكلفة تصميم UI/UX؟

تصميم موقع تعريفي من 5 إلى 8 شاشات يتراوح بين 8,000 و20,000 ريال، وتصميم تطبيق من 10 إلى 20 شاشة بين 15,000 و40,000 ريال، ومنصة كاملة مع نظام تصميم بين 40,000 و90,000 ريال.

لماذا لا نبدأ بالبرمجة مباشرة؟

لأن تعديل شاشة في Figma يكلّف دقائق، بينما تعديلها بعد البرمجة يكلّف أياماً وأحياناً إعادة بناء. مرحلة التصميم تكشف مشكلات المنطق والترتيب وهي ما تزال رخيصة الإصلاح، وتوفّر عادة أكثر مما تكلّف.

هل تصمّمون للعربية بشكل صحيح؟

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

ماذا أستلم في نهاية المشروع؟

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

هل تنفّذون التصميم برمجياً أيضاً؟

نعم، وهذه ميزة العمل معنا: نفس الفريق يصمّم ويبرمج، فلا تضيع التفاصيل في التسليم بين طرفين، ويخرج المنتج مطابقاً للتصميم.

ما الفرق بين UI و UX ولماذا أحتاج الاثنين؟

الـUX هو ترتيب الرحلة: ما الخطوات التي يمرّ بها المستخدم للوصول لهدفه وكم واحدة منها يمكن حذفها. الـUI هو الشكل الذي تُقدَّم به هذه الخطوات: الألوان والخطوط والمسافات والحالات. واجهة جميلة فوق رحلة سيئة تُنتج منتجاً يُعجب في اللقطة ويُهجَر في الاستخدام، ورحلة ممتازة بواجهة رديئة تفقد الثقة قبل أن تُجرَّب. الاثنان يُبنيان معاً لا تباعاً.

كم تكلفة تصميم واجهات وتجربة مستخدم؟

تصميم واجهات تطبيق أو موقع متوسط يتراوح بين 8,000 و35,000 ريال حسب عدد الشاشات وعمق البحث المطلوب. نظام تصميم متكامل قابل لإعادة الاستخدام يبدأ من 20,000 ريال. القاعدة التي نكرّرها: تعديل شاشة في مرحلة التصميم يكلّف ساعة، وتعديلها بعد البرمجة يكلّف أسبوعاً — فميزانية التصميم في حقيقتها تأمين على ميزانية البرمجة.

هل أحتاج تصميماً قبل البرمجة أم نبدأ مباشرة؟

نعم تحتاجه، وهذا ليس ترفاً. البدء بالبرمجة بلا تصميم يعني اتخاذ مئات القرارات البصرية والوظيفية أثناء الكتابة، ثم اكتشاف تعارضها متأخراً. النموذج التفاعلي في Figma يجعلك تجرّب المنتج وتعترض عليه قبل أن يكلّفك أي تعديل شيئاً يُذكر. الاستثناء الوحيد المعقول هو نموذج داخلي سريع لاختبار فكرة تقنية لا يراه مستخدم.

ما هو نظام التصميم ومتى أحتاجه؟

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

هل التصميم العربي RTL مجرّد عكس للاتجاه؟

لا، وهذا أكثر خطأ نراه في المنتجات المعرّبة. العكس الآلي يقلب الأيقونات التي لا يجب أن تُقلب مثل أسهم التشغيل وشعارات المنصات، ويكسر تناسق الأرقام والتواريخ، ويُنتج نصاً عربياً بخط لم يُصمَّم له فيبدو ضعيفاً. نصمّم من الأساس لاتجاه RTL: اختيار خط عربي حقيقي، وضبط ارتفاع الأسطر للعربية، وقرار واعٍ لكل أيقونة هل تُقلب أم لا.

كيف نتأكد أن التصميم يعمل قبل بنائه؟

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

من أعمالنا

أعمال ذات صلة

شاهد كل الأعمال

منتجك يستحق تجربة أفضل

أرسل لنا فكرتك أو منتجك الحالي ونرجع لك بعرض سعر مجاني خلال 24 ساعة.