خدمة 06 · نصمّم التجربة
واجهات تُصمَّم لتُستخدم بوضوح، لا لتبدو جميلة فقط.
نبدأ من مستخدميك وأهداف عملك، ثم نبني الهيكل والمسارات قبل الألوان، لنصل إلى واجهة واضحة ومتّسقة وسهلة الاستخدام، جاهزة للتنفيذ على كل الشاشات وباللغتين.
نرد خلال يوم عمل واحد
- 01 · الملكية
- ملفات التصميم لك بعد التسليم
- 02 · الدعم
- 30 يومًا مجانًا بعد التسليم
- 03 · المدة
- جدول زمني يُتفق عليه قبل البدء
- 04 · الاتجاه
- عربي RTL وإنجليزي LTR
§ 01ما نصمّمه
تصميم يبدأ من طريقة استخدام منتجك، لا من الألوان
UI/UX ليس تجميلًا للشاشات. هو أن يصل المستخدم إلى ما يريد بسرعة ووضوح، وأن تخدم الواجهة أهداف عملك، وأن تكون جاهزة ليبنيها المطوّرون دون تخمين.
ما يشمله العمل
- 01فهم المستخدمين والمتطلباتنحدد من يستخدم المنتج، وما المهام التي يجب أن ينجزها، وما يحتاجه عملك منه.
- 02هيكلة المعلومات ومسارات المستخدمترتيب الأقسام والصفحات، ورسم الخطوات التي يمرّ بها المستخدم لإنجاز كل مهمة.
- 03Wireframes وتصميم الواجهاتهيكل أولي للشاشات، ثم واجهات نهائية متجاوبة بخطوط ومسافات وألوان متّسقة.
- 04نظام المكوّنات والنماذج التفاعليةمكتبة مكوّنات بحالاتها، ونموذج تفاعلي للتجربة قبل البرمجة عند الحاجة.
- 05تحسين واجهات قائمةمراجعة موقع أو تطبيق حالي، وتحديد مواضع الصعوبة، وإعادة تصميمها بخطة واضحة.
- 06تصميم منتج جديد من البدايةمن الفكرة والمتطلبات إلى تصميم كامل جاهز للتنفيذ.
لمن تناسب هذه الخدمة
- المواقع الإلكترونية الجديدة
- تطبيقات الويب وتطبيقات الجوال
- لوحات التحكم والأنظمة الداخلية للأعمال
- المتاجر الإلكترونية
- المنتجات القائمة التي تحتاج إعادة تصميم
- الشركات الناشئة التي تريد اختبار واجهة منتجها قبل التطوير
§ 02معايير التصميم
ما نلتزم به في كل واجهة نصمّمها
قواعد واضحة تجعل التصميم قابلًا للاستخدام والتنفيذ، لا مجرد صورة جميلة.
- سهولة الاستخدام أولًا
- كل شاشة تخدم مهمة واضحة، بخطوات أقل وتسميات مفهومة.
- هيكل ومسارات مدروسة
- ترتيب المعلومات ومسارات المستخدم يُبنى قبل الشكل النهائي.
- اتّساق في كل التفاصيل
- خطوط ومسافات وألوان ومكوّنات موحّدة عبر جميع الشاشات.
- شبكة وتدرّج خطوط واضح
- شبكة أعمدة ومقاييس ثابتة للخطوط والمسافات تسهّل القراءة والتنفيذ.
- تصميم متجاوب
- تصاميم للجوال والجهاز اللوحي والحاسوب حسب ما يحتاجه المشروع.
- تصميم يراعي إمكانية الوصول
- تباين ألوان كافٍ، ومناطق لمس مناسبة، وحالات تركيز واضحة، استرشادًا بمعايير WCAG.
- عربي وإنجليزي بشكل صحيح
- تخطيط ينعكس باتجاه كل لغة، مع خطوط مناسبة للعربية لا مجرد ترجمة.
- نظام مكوّنات قابل للتوسّع
- مكوّنات بحالاتها (افتراضي، تمرير، تركيز، خطأ، معطّل) عندما يكون ذلك مناسبًا.
- جاهز للتنفيذ
- ملفات ومواصفات منظّمة للمطوّرين، لتُبنى الواجهة كما صُمّمت.
§ 03مراحل التصميم
من فهم المتطلبات إلى نموذج متجاوب جاهز للتنفيذ
مثال توضيحي لتصميم تطبيق ويب تجريبي لحجز مساحات العمل وقاعات الاجتماعات: ست مراحل للمنتج نفسه.
- 01
البحث والمتطلبات
من يستخدم المنتج، وما المهام التي يجب أن ينجزها.
- 02
هيكلة المعلومات
الأقسام والصفحات ومسار الحجز الرئيسي.
- 03
Wireframe
هيكل الشاشة وترتيب العناصر دون ألوان.
- 04
الواجهة المرئية
الشاشة نفسها بخطوط وألوان ومسافات نهائية.
- 05
المكوّنات ونظام التصميم
أزرار وحقول وبطاقات بحالاتها، وقواعد الألوان والخطوط.
- 06
التجاوب والنموذج التفاعلي
الحاسوب والجهاز اللوحي والجوال، مرتبطة كنموذج قابل للتجربة.
§ 04ما تستلمه
ما تستلمه عند تسليم التصميم
تُحدَّد القائمة النهائية وعدد جولات التعديل في عرض السعر حسب نطاق مشروعك.
- 01
اتجاه التصميم
الأسلوب البصري المقترح، تراجعه وتعتمده قبل التفاصيل.
- 02
هيكلة المعلومات
خريطة الأقسام والصفحات، عند الحاجة.
- 03
مسارات المستخدم
خطوات المهام الرئيسية من البداية إلى النهاية.
- 04
Wireframes
هيكل الشاشات قبل التصميم المرئي.
- 05
تصاميم الشاشات المتجاوبة
للجوال والجهاز اللوحي والحاسوب حسب النطاق.
- 06
مكتبة المكوّنات ونظام التصميم
مكوّنات بحالاتها، عندما يكون ذلك مناسبًا للمشروع.
- 07
قواعد الخطوط والألوان والمسافات
مقاييس موثّقة تضمن اتّساق التنفيذ.
- 08
نموذج تفاعلي
لتجربة المسارات قبل البرمجة، عند الحاجة.
- 09
مراعاة العربية والإنجليزية
تصميم باتجاه RTL وLTR عندما يشمل المشروع اللغتين.
- 10
ملفات التصميم الخاصة بمشروعك
ملفات المصدر والأصول والمخرجات، ملك لك بعد السداد الكامل والتسليم النهائي.
- 11
تسليم للمطوّرين
مواصفات المسافات والخطوط والألوان والحالات، وتصدير الأصول.
- 12
30 يومًا دعم مجاني
للإجابة عن أسئلة التنفيذ وإصلاح أي مشكلة تخص التصميم المسلَّم. التعديلات الإضافية والشاشات الجديدة تُسعَّر بشكل منفصل.
§ 05ملكية الكود
الكود المصدري لمشروعك ملكٌ لك
بعد السداد الكامل والتسليم النهائي، تنتقل إليك ملكية الكود المصدري والملفات الخاصة بمشروعك. تستطيع تطويره أو استضافته أو العمل عليه مع أي فريق تختاره.
- حرية تطوير مشروعك لاحقًا مع أي فريق
- ملفات المشروع كاملة بين يديك
- لا ارتباط إجباري بنا بعد التسليم
للتوضيح
- الخدمات والتراخيص الخارجية، مثل الاستضافة أو الإضافات المدفوعة، تبقى خاضعة لشروط مزوّديها.
- الأدوات والمكوّنات العامة القابلة لإعادة الاستخدام قد نستخدمها في مشاريع أخرى، أما ما هو خاص بمشروعك فيبقى لك.
§ 06طريقة العمل
كيف نصمّم تجربة منتجك، خطوة بخطوة
تختلف مدة المشروع حسب نطاقه ومتطلباته، ونتفق معك على جدول زمني بمراحل واضحة قبل بدء العمل.
- 01
فهم المنتج والمستخدمين والمتطلبات
نتعرّف على عملك ومستخدميك والمهام التي يجب أن يدعمها المنتج.
ملخّص المتطلبات
- 02
هيكلة المعلومات ومسارات المستخدم
نرتّب الأقسام والصفحات، ونرسم مسارات المهام الرئيسية.
خريطة الهيكل والمسارات
- 03
Wireframes
نبني هيكل الشاشات وترتيب عناصرها، وتراجعها معنا قبل التصميم المرئي.
Wireframes معتمدة
- 04
تصميم الواجهات المرئية
نطبّق الخطوط والألوان والمسافات والمكوّنات على الشاشات.
تصاميم قابلة للمراجعة
- 05
النموذج التفاعلي والتجاوب والتحقق
نربط الشاشات كنموذج تفاعلي عند الحاجة، ونراجع الحالات والمقاسات وقواعد الوصول.
تصميم مكتمل ومراجَع
- 06
التسليم والدعم
نسلّم الملفات والمواصفات للمطوّرين، ونبقى معك أثناء التنفيذ.
ملفات التسليم و30 يومًا دعم
§ 07أسئلة عن UI/UX
قبل أن تبدأ مشروع التصميم
لم تجد إجابتك؟ أرسل سؤالك مباشرة، ونرد خلال يوم عمل واحد.
01ما الفرق بين UI وUX؟
تجربة المستخدم UX تهتم بطريقة عمل المنتج: من المستخدم، وما المهام التي ينجزها، وكيف تترتب المعلومات والخطوات لتكون سهلة وواضحة. أما واجهة المستخدم UI فهي الشكل الذي يراه: الخطوط والألوان والمسافات والمكوّنات. نعمل على الاثنين معًا، لأن واجهة جميلة بمسار مربك لا تخدم عملك.
02هل يمكن إعادة تصميم موقع أو تطبيق موجود؟
نعم. نراجع الواجهة الحالية ونحدد مواضع الصعوبة وعدم الاتّساق، ثم نقترح إعادة تصميم كاملة أو تحسينات على أجزاء محددة حسب احتياجك ونطاق المشروع.
03هل تصمّمون واجهات عربية RTL وإنجليزية LTR؟
نعم. نصمّم التخطيط ليعمل باتجاه كل لغة بشكل صحيح، مع خطوط مناسبة للعربية ومراعاة طول النصوص والأرقام والأيقونات الاتجاهية، لا مجرد عكس الشاشة.
04هل تقدّمون تصاميم متجاوبة للجوال والجهاز اللوحي والحاسوب؟
نعم. نحدد المقاسات المطلوبة في نطاق المشروع، ونصمّم الشاشات لتعمل على كل منها بترتيب مناسب لا بتصغير فقط.
05هل تقدّمون نماذج تفاعلية Prototype؟
نعم، عندما يحتاجها المشروع. النموذج التفاعلي يربط الشاشات ليجرّب فريقك أو مستخدموك المسارات قبل البرمجة، ويُحدَّد مستواه في عرض السعر.
06هل يستلم المطوّرون ملفات ومواصفات للتنفيذ؟
نعم. نسلّم ملفات منظّمة بمواصفات المسافات والخطوط والألوان وحالات المكوّنات، مع تصدير الأصول اللازمة، ونجيب عن أسئلة التنفيذ خلال فترة الدعم.
07هل يمكن طلب التصميم فقط دون البرمجة؟
نعم. يمكن طلب UI/UX كخدمة مستقلة وتسليم الملفات لفريق التطوير لديك، أو دمجه مع خدمات التطوير لدينا في مشروع واحد.
08كيف تُحسب تكلفة مشروع التصميم؟
لا نعتمد أسعارًا ثابتة. تعتمد التكلفة على عدد الشاشات والمسارات، والمقاسات المطلوبة، واللغات، والحاجة إلى نظام مكوّنات أو نموذج تفاعلي، وعدد جولات التعديل المتفق عليها. بعد فهم متطلباتك نرسل لك عرض سعر مكتوبًا يوضح ما يشمله وما لا يشمله.
09كم يستغرق مشروع التصميم؟
تختلف المدة حسب حجم المنتج وعدد الشاشات والمراحل المطلوبة. نتفق معك على جدول زمني بمراحل واضحة ومواعيد مراجعة قبل بدء العمل.
10من يملك ملفات التصميم النهائية؟
أنت. بعد السداد الكامل والتسليم النهائي تنتقل إليك ملكية ملفات التصميم والمخرجات الخاصة بمشروعك. تبقى الخطوط والأيقونات والصور والأدوات الخارجية خاضعة لتراخيصها وشروط مزوّديها، وقد نعيد استخدام أدواتنا ومكوّناتنا العامة غير الخاصة بمشروعك.
11ما الدعم المتاح بعد التسليم؟
نقدّم 30 يومًا دعمًا مجانيًا بعد التسليم للإجابة عن أسئلة التنفيذ وإصلاح أي مشكلة تخص التصميم المسلَّم. أما الشاشات الجديدة أو تغييرات النطاق فتُسعَّر بشكل منفصل.
§ 08ابدأ مشروع التصميم
لنصمّم واجهة يفهمها مستخدموك من أول مرة
أرسل لنا فكرة منتجك أو رابط الواجهة الحالية عبر واتساب، أو اطلب عرض سعر منظّمًا.
نرد خلال يوم عمل واحد