نصمم واجهات يفهمها المستخدم من أول نظرة، ومسارات توصله إلى ما جاء من أجله دون أن يفكر في الطريق. التصميم الجيد لا يُلاحَظ — ما يُلاحَظ هو التصميم السيئ حين يضطر المستخدم للتوقف والتساؤل.
نبدأ بالمشكلة لا بالشكل. من يستخدم هذا المنتج، وما المهمة التي يريد إنجازها، وأين يتعثر اليوم. الواجهة الجميلة التي تخفي زر الشراء أو تجعل النموذج مرهقًا هي واجهة فاشلة مهما كان مظهرها في ملف العرض.
نسلّم تصميمًا قابلًا للتنفيذ فعلًا: شبكة واضحة، ونظام ألوان وخطوط موثّق، وحالات كل عنصر، وأحجام لمس مناسبة للإصبع. المصمم الذي لا يفكر في المطوّر يترك نصف العمل لغيره.
ما الذي تحصل عليه
بحث وتحليل قبل التصميم
نراجع منتجك الحالي وبيانات استخدامه إن وُجدت، ونفحص ثلاثة إلى خمسة من منافسيك، ونحدد أين تحديدًا يخسر المستخدم طريقه.
خريطة المسارات
مخطط يوضح كل شاشة ومن أين يصلها المستخدم وإلى أين يذهب منها. هذه الخطوة تكشف الشاشات المنسية قبل أن تكلفك وقت تطوير.
هيكل أولي بالأبيض والأسود
نرتب المحتوى والأولويات قبل إدخال اللون والصور، لأن الحكم على ترتيب العناصر يصبح مستحيلًا بعد إضافة الجماليات.
تصميم كامل للشاشات
كل شاشة بحالاتها: التحميل، والقائمة الفارغة، والخطأ، والنجاح. هذه الحالات هي ما يُنسى دائمًا وهي ما يقابله المستخدم في الواقع.
نظام تصميم موثّق
ألوان وخطوط ومسافات وأزرار وحقول إدخال موثقة كمكوّنات قابلة لإعادة الاستخدام، فينمو المنتج لاحقًا دون أن يتفكك شكله.
نموذج تفاعلي
نموذج تضغط فيه وتتنقل بين الشاشات على جوالك أو متصفحك، فتختبر المنتج قبل بنائه وتكتشف ما لا تظهره الصور الثابتة.
تصميم لكل المقاسات
جوال وتابلت وسطح مكتب، مع تحديد ما يتغير في كل مقاس. لا نكتفي بتصميم سطح المكتب ونترك الجوال للمطوّر ليجتهد فيه.
إمكانية وصول أساسية
تباين ألوان كافٍ للقراءة، وأحجام نقر لا تقل عن 44 بكسل، وترتيب منطقي للتنقل بلوحة المفاتيح. هذه ليست رفاهية بل حد أدنى.
كيف نعمل
الاستكشاف
جلسة نفهم فيها المنتج وجمهوره وهدف العمل منه. نخرج بقائمة مهام يريد المستخدم إنجازها، مرتبة بحسب أهميتها لك.
مراجعة الوضع الحالي
إن كان لديك منتج قائم نراجعه بشكل منظم ونوثّق المشكلات بلقطات شاشة، مرتبة بحسب أثرها لا بحسب سهولة إصلاحها.
المسارات والهيكل
نرسم المسارات ثم الهياكل الأولية، ونراجعها معك قبل أي عمل بصري. التعديل هنا يكلف دقائق، وبعد التصميم الكامل يكلف أيامًا.
الاتجاه البصري
نعرض اتجاهًا بصريًا واحدًا مدروسًا لا ثلاثة خيارات عشوائية، مع شرح لماذا يناسب علامتك وجمهورك، ونعدّله معك.
التصميم الكامل
نصمم كل الشاشات بحالاتها، ونبني نظام التصميم بالتوازي حتى يبقى كل شيء متسقًا.
التسليم للتطوير
نسلّم ملفات منظمة مع قياسات وأصول جاهزة، ونبقى متاحين أثناء التنفيذ للرد على أسئلة المطوّرين بدل تركهم يخمّنون.
اختبار الاستخدام مع مستخدمين حقيقيين عند الحاجة، بدل الاعتماد على الرأي وحده
مراجعة التباين وإمكانية الوصول بأدوات قياس لا بالتقدير البصري
ما الذي يحدد التكلفة
تصميم الواجهات يُسعّر بعدد الشاشات وعمق البحث المطلوب قبلها:
عدد الشاشات وحالاتهاالشاشة بحالاتها الأربع تعادل أربعة تصاميم. تقدير العمل بعدد الشاشات وحده يقلل التكلفة ظاهريًا ويربك الجدول لاحقًا.
عمق البحثمراجعة سريعة للمنافسين تختلف عن اختبار استخدام مع مستخدمين حقيقيين. الثاني أدق وأغلى، ويستحق ذلك في المنتجات التي يعتمد عليها دخلك.
بناء نظام تصميمالمنتج الذي سينمو ويضاف إليه باستمرار يحتاج نظام تصميم موثقًا. المشروع الصغير الثابت لا يحتاجه.
عدد المنصاتتصميم للويب والجوال معًا ليس مضاعفة للعمل لكنه ليس العمل نفسه، لأن لكل منصة أنماط تفاعل مختلفة.
الهوية البصريةإن كانت لديك هوية وخطوط وألوان معتمدة نبني عليها. إن لم تكن، فبناء الهوية بند منفصل يسبق تصميم الواجهات.
دورات المراجعةدورتان مشمولتان في كل مرحلة. نحدد ذلك مسبقًا حتى يكون لديك تصور واضح للجدول والتكلفة معًا.
نقسّم العرض على مراحل، فيمكنك البدء بالبحث والمسارات ثم تقرير الاستمرار في التصميم الكامل.
أسئلة شائعة
ما الفرق بين UI وUX؟
تجربة المستخدم UX هي ترتيب الخطوات والقرارات: ماذا يرى المستخدم أولًا، وكم خطوة تفصله عن هدفه، وماذا يحدث عند الخطأ. واجهة المستخدم UI هي الشكل الذي تظهر به تلك الخطوات: الألوان والخطوط والمسافات. منتج بواجهة جميلة وتجربة سيئة يبدو جذابًا ويُهجر بسرعة.
هل أحتاج تصميمًا قبل البرمجة؟
نعم، في أي مشروع تتجاوز شاشاته العشر. التعديل على تصميم يستغرق ساعة، والتعديل على الشيء نفسه بعد برمجته قد يستغرق يومًا. تخطي مرحلة التصميم يبدو توفيرًا في البداية ويظهر أثره في الفاتورة النهائية.
كم يستغرق تصميم واجهات تطبيق؟
تطبيق متوسط بعشرين إلى ثلاثين شاشة عادةً من 4 إلى 7 أسابيع، تشمل البحث والمسارات والتصميم الكامل والنموذج التفاعلي. المدة تتأثر بسرعة المراجعة من جهتك أكثر من أي عامل آخر.
هل تصممون فقط أم تنفذون أيضًا؟
الاثنان. كثير من عملائنا يأخذون التصميم لفريق تطوير آخر وهذا مقبول تمامًا — نسلّم ملفات منظمة قابلة للتنفيذ من أي فريق. وإن أردت أن ننفذ نحن، فالتصميم والتطوير في فريق واحد يختصر وقت المراجعات كثيرًا.
هل أحصل على ملفات المصدر؟
نعم. تحصل على ملف Figma كاملًا بصلاحية التعديل، مع الأصول والخطوط. لا نحتفظ بملفات المصدر كورقة ضغط.
ماذا لو لم يعجبني الاتجاه البصري؟
نعرض الاتجاه في مرحلة مبكرة على شاشتين أو ثلاث تحديدًا لهذا السبب، قبل أن نكون صممنا ثلاثين شاشة على أساس خاطئ. التعديل في هذه النقطة طبيعي ومشمول.
