التصميم والتطوير
تصميم واجهات المستخدم في قطر
النظام البصري، أي الخطوط والألوان والمسافات والمكونات، مطبّقًا باتساق.
النص الأبيض: 10.6:1، يجتاز معيار AAتغيير واحد، وتتبعه كل المكونات.
7
مشاريع أُنجزت في قطر والخليج
التصميم والظهور في البحث ومسار المبيعات — تُبنى معًا، بالعربية والإنجليزية.
التعريف
ما يشمله تصميم الواجهات، وما نظام التصميم
تصميم واجهات المستخدم (UI) هو الطبقة البصرية في الموقع: الخطوط والألوان والمسافات والأيقونات، والمكونات التي تُبنى منها، مثل الأزرار والحقول والبطاقات. وحين يُنجز كما ينبغي ينتج نظام تصميم: قرارات مسمّاة (رموز)، ومكونات قابلة لإعادة الاستخدام بكل حالاتها، وقواعد لمتى يُستخدم كل منها، لا مجموعة من الشاشات المنفصلة.
وهو ليس بنية الموقع، فتلك من عمل تصميم تجربة المستخدم وتأتي أولًا، وليس هوية علامتك التجارية، فهي نقطة انطلاقه. جرّب النظام في أعلى الصفحة: غيّر لون العلامة مرة واحدة، فتتبعه كل المكونات.
لماذا يهم
لماذا يتفوّق النظام على مجموعة من الشاشات
الشاشات التي تُصمَّم واحدة بعد أخرى تنحرف: لون أزرق ثانٍ، ثم شكل ثالث للأزرار، ثم نموذج لا يشبه بقية النماذج. وتكلّف كل صفحة ما كلّفته الأولى، ويقرأ الزائر عدم الاتساق إهمالًا، والإهمال آخر ما يريده المشتري من مقاول أو عيادة أو مكتب محاماة. أما النظام فيثبّت كل قرار مرة واحدة.
قرارات تُتخذ مرة واحدة
كل لون ومقاس ودرجة مسافة يُقرَّر مرة واحدة ويُسمّى، فلا ينحرف من صفحة إلى أخرى.
الصفحة العاشرة أقل كلفة
تُبنى من أجزاء موجودة سبق فحصها، فتكلّف أقل من الأولى وتشبه بقية الموقع.
يصمد باللغتين
المكونات المبنية للعربية والإنجليزية من البداية لا تنكسر حين يختلف طول النص.
اللون يحمل معنى
في موقع صيدلية بشرى خُصّص لون واحد للإجراءات التي تقرّب المريض من الخدمة، فهو يعني دائمًا: تصرّف الآن.
التكلفة على المدى البعيد
لماذا يكلّف نظام التصميم أقل على مدى عمر الموقع
البناء الأول أصغر جزء من كلفة الموقع، والتعديلات التي تليه هي حيث يردّ النظام كلفته.
شاشة بعد شاشة
- كل صفحة جديدة تصميم جديدتُتخذ قرارات الأزرار والمسافات والعناوين من جديد في كل مرة، فتكلّف الصفحة العاشرة ما كلّفته الأولى.
- تغيير اللون بحث طويللون العلامة الجديد يعني البحث في كل صفحة يدويًا، ويفوت شيء دائمًا.
- التسليم يبدأ بالتخمينيضطر المطوّر الجديد إلى تفكيك أربعين صفحة ليفهمها قبل أن يغيّر شيئًا.
مع نظام
- الصفحة الجديدة تجميعتُبنى من أجزاء مختبرة، وكثيرًا ما يبنيها فريقك من نظام إدارة المحتوى دون مطوّر.
- التغيير تعديل واحدغيّر الرمز مرة واحدة، فتتبعه كل المكونات باللغتين.
- التسليم يستغرق أيامًايقرأ المطوّر القواعد ويبني على النظام بدل أن يفكّكه ليفهمه.
مثال تطبيقي
مثال: نظام واحد لعلامة تكسية حجر
علامة افتراضية، وهي نفسها التي في العرض أعلى الصفحة، وليست عميلًا: مقاول في الدوحة شعاره أخضر مزرق داكن.
اللون
يصير الأخضر المزرق رمز لون العلامة. والنص الأبيض عليه يجتاز معيار AA في WCAG 2.2، فيصلح للأزرار، وتبقى الدرجة الفاتحة للخلفيات.
الخط
خط لاتيني وخط عربي، لكل منهما مقاساته. ويُكتب العربي بحجم أكبر وتباعد أوسع، ولا تُباعد حروفه أبدًا.
المكونات وحالاتها
زران، وحقل لرقم الهاتف، وشارة، وبطاقة مشروع، ولكل منها حالات التحديد والضغط والتعطيل والخطأ.
فحص العربية
يُختبر الزر «اطلب عرض سعر» وعنوان البطاقة «واجهة فيلا، الوعب» حتى تتسع اللغتان دون قصّ.
القاعدة
الأخضر المزرق يعني «تصرّف الآن»، فلا يستخدمه أي عنصر للزينة.
بعد ستة أشهر
تُبنى صفحة «الديكور الداخلي» الجديدة من البطاقة والأزرار والحقل الموجودة، وتشبه الموقع منذ يومها الأول.
كيف تعرف
علامات تدل على أن الموقع صُمّم شاشة بعد شاشة
افحص موقعك في عشر دقائق، على هاتفك، دون أي معرفة تقنية.
- عُدّ أشكال الأزرارافتح خمس صفحات. إن زادت الأشكال على اثنين أو ثلاثة فكل صفحة صُمّمت وحدها.
- اقرأه في الخارجالنص الرمادي الفاتح يختفي في شمس الدوحة. ويطلب معيار WCAG 2.2 تباينًا لا يقل عن 4.5 إلى 1 لنص الفقرات.
- اضغط بإبهامكالروابط المتلاصقة والأيقونات الأصغر من طرف الإصبع تسبب ضغطات خاطئة تضيّع طلبات الهاتف.
- انتقل إلى العربيةخط احتياطي، أو كلمات مقصوصة داخل الأزرار، أو أسهم تشير باتجاه الإنجليزية، تعني أن العربية أُضيفت لاحقًا.
- اضغط Tab على الحاسوبإن لم تعرف أين أنت في الصفحة فقد أُزيلت حالة التحديد، ومن يستخدم لوحة المفاتيح عالق.
- املأ نموذجًا بخطأ متعمّدرسالة الخطأ الجيدة تقول ما يجب تصحيحه وتحتفظ بما كتبته. ودونها يُمسح النموذج ويغادر العميل.
ما تشمله خدمة تصميم الواجهات لدينا

رموز تصميم للألوان والخطوط والمسافات والزوايا، لكل منها اسم ويُعاد استخدامه
مكونات بكل حالاتها: عند المرور والتحديد، والمعطّلة، وحالتا الخطأ والتحميل
تخطيطات عربية وإنجليزية تُصمَّم معًا، بمساحة تتسع لطول اللغتين
خط عربي يُختار ويُضبط للعربية، لا يُستعار من الخط اللاتيني
التباين وأحجام مناطق اللمس تُفحص وفق WCAG 2.2 أثناء تصميم كل جزء
قواعد للألوان والإبراز، فيبدو الإجراء الرئيسي بالشكل نفسه في كل صفحة
النظام موثّق في الموقع وفي شيفرته، ليستطيع أي مطوّر أن يبني عليه
أسئلة شائعة
ما الذي نملكه في النهاية؟
كل ما بُني. الموقع المباشر وشيفرته ومحتواه ملكك، والنطاق والاستضافة باسمك. ويأتي معه نظام التصميم كما بُني: الألوان ومقاسات الخطوط والمسافات والمكونات، معرّفة مرة واحدة في الشيفرة وموثّقة في الموقع، فيرى أي مطوّر الأجزاء الموجودة وطريقة استخدامها.
هل تستطيعون العمل مع هويتنا الحالية؟
نعم. يُبنى النظام حول شعارك وألوانك وأسلوبك، لا بدلًا منها، وحين تعمل الهوية ضد الموقع نقول ذلك. والحالة الأكثر شيوعًا لون علامة فاتح لا يحمل نصًا أبيض، فتصعب قراءة الأزرار في الشمس. والحل المعتاد أن يبقى اللون الأصلي للمساحات الكبيرة، وتُضاف درجة أغمق منه للنصوص والأزرار.
كم يكلّف تصميم الواجهات؟
هو جزء من مشروع الموقع، لا بند منفصل. تبدأ المواقع من 8,000 ريال كمشروع يُدفع مرة واحدة بالعربية والإنجليزية، ومن 15,000 ريال مع تتبّع الطلبات ومسار المبيعات والحجز أو الدفع. ويتحرك السعر بعدد أنواع الصفحات والمكونات، لا بعدد الصفحات: فحين توجد بطاقة المشروع، لا تكاد إضافة المشروع الأربعين تكلّف شيئًا.
هل يحتاج الموقع الصغير إلى نظام تصميم؟
نعم، بحجم صغير. فالموقع ذو الصفحات الست فيه أزرار وحقول وبطاقات وعناوين وقائمة، وكل منها قابل للانحراف. وقد يكون نظام الموقع الصغير اثني عشر مكونًا وقائمة قصيرة من الرموز. والقرارات يجب أن تُتخذ على أي حال، فتدوينها لا يكلّف كثيرًا، ويظهر التوفير في أول مرة تضيف فيها صفحة أو تغيّر لونًا.
هل سيبدو موقعنا مثل قالب جاهز؟
لا. القالب الجاهز نظام تصميم صنعه غيرك لغير أحد بعينه: ترث قراراته كلها، ومنها ما لا يناسب عملك، وقد يستخدمه منافسوك أيضًا. أما النظام المبني لك فيبدأ من هويتك ومحتواك والإجراءات التي يتخذها عملاؤك، باللغتين، فكل جزء فيه موجود لأن موقعك يحتاجه.
كيف نضيف صفحات لاحقًا؟
معظم الصفحات الجديدة لا تحتاج إلى مصمم ولا إلى مطوّر. يضيف فريقك الصفحة من الأجزاء الموجودة في نظام إدارة المحتوى، مثل مشروع أو خدمة جديدة، فترث الألوان والخطوط والمسافات باللغتين. أما النوع الجديد كليًا من الصفحات، مثل مسار للحجز، فهو عمل جديد، لكنه يُبنى من الأجزاء الموجودة. واسأل عن تسعيره قبل التوقيع.
المزيد ضمن التصميم والتطوير
كل جزء من التصميم والتطوير يعمل أفضل مع الأجزاء الأخرى — إليك بقيتها.



