تصميم المواقع
بنية الموقع، تخطيطات الصفحات ونظام بصري متكامل لموقع شركتك، مصمم من اليمين إلى اليسار ومن اليسار إلى اليمين، مطابق لمعايير <bdi>WCAG 2.2</bdi>، وتعتمده أنت قبل كتابة أي سطر برمجي.
تصميم، لا تطوير
تصميم الموقع يقرر ما يظهر في كل صفحة، وبأي ترتيب، وكيف يبدو ويُقرأ باللغتين. وينتهي بمجموعة تخطيطات معتمدة يستطيع المطور بناءها دون تخمين. أما التطوير نفسه، بما في ذلك نظام إدارة المحتوى والنماذج والتكاملات والاستضافة والسرعة، فهو مشمول في صفحة تطوير المواقع. وهذا بالضبط ما يقدمه تصميم المواقع لدينا في دبي.
خريطة الموقع والتنقل والقوالب التي يحتاجها الموقع فعليا. قد تحتاج شركة خدمات في دبي إلى ثمانية قوالب فقط، لا أربعين صفحة فريدة.
الطباعة بالخطوط العربية واللاتينية، الألوان، المسافات، الشبكة، أسلوب الأيقونات وطريقة اقتصاص الصور. يُبنى من هوية علامتك التجارية، أو من هوية بصرية إذا كانت مطلوبة أولا.
ما الذي يحدث عند التمرير فوق عنصر، عند التركيز عليه، عند حدوث خطأ في نموذج، أو عند فتح قائمة على الهاتف. هذه الحالات تُرسم مسبقا، ولا تُترك للتخمين.
البنية أولا
معظم مواقع الشركات الضعيفة في الإمارات تفشل في البنية قبل أن تفشل في الشكل. صفحة الخدمات تسرد كل شيء في كتلة طويلة واحدة، وطريق التواصل مدفون، وصفحة من نحن تحمل معلومات يحتاجها المشتري فعلا، مثل التراخيص والمواقع والقطاعات التي تخدمها الشركة.
نبدأ بالأسئلة التي يطرحها المشتري، بالترتيب الذي يطرحها به، ونربط كل سؤال بصفحة أو قسم. ينتج عن ذلك خريطة موقع وإطار عمل هيكلي لكل قالب. يبدأ التصميم البصري فقط بعد الاتفاق على البنية، لأن نقل قسم يستغرق دقائق في إطار هيكلي وأياما في تخطيط منجز.
العربية والإنجليزية
الموقع العربي ليس التخطيط الإنجليزي مع استبدال النص فقط. الصفحة كلها تُقرأ من اليمين، لذا يجب رسم التصميم على هذا الأساس، وبعض العناصر يجب ألا تُعكس عمدا.
| العنصر | في التخطيط العربي | السبب |
|---|---|---|
| شبكة الصفحة، التنقل، الأشرطة الجانبية | معكوسة: الشعار والقائمة يبدآن من اليمين | العين تدخل الصفحة من اليمين |
| الأيقونات الاتجاهية (الأسهم، رجوع، التالي) | معكوسة | “التالي” يشير إلى الاتجاه الذي يسير فيه القارئ |
| الشعارات وصور المنتجات والعلامات التجارية | غير معكوسة | عكسها يخلق صورة مغلوطة |
| أرقام الهواتف والأسعار والرموز والساعات | غير معكوسة | الأرقام داخل الرقم الواحد تبقى من اليسار إلى اليمين |
| عناصر تحكم الوسائط وأشرطة التقدم | تُترك عادة من اليسار إلى اليمين | تمثل الزمن، والمستخدمون يتوقعونه في ذلك الاتجاه |
| حجم النص وارتفاع السطر | غالبا أكبر قليلا مع مسافة سطر أكبر | الحروف العربية تحمل تفاصيل تزدحم عند أحجام الخط اللاتينية |
نصمم أيضا للنصوص المختلطة، وهي أمر ثابت في الإمارات: جملة عربية تحتوي اسم علامة تجارية بالإنجليزية، عنوان في واحة دبي للسيليكون، أو رمز منتج. توصي إرشادات W3C Internationalization بتحديد اتجاه الصفحة في الترميز عبر خاصية dir على عنصر html بدلا من CSS، وتحديد اللغة بشكل منفصل عبر lang، وعزل النصوص المضمنة مجهولة الاتجاه. ملفات التصميم لدينا تُحدد أماكن ظهور هذه الحالات ليتعامل معها المطور بوعي.
أما بالنسبة للمسافات، فنحدد التخطيطات وفق البداية والنهاية بدلا من اليمين واليسار. وهذا يتوافق مع مواصفة خصائص CSS المنطقية من W3C، حيث تتبع خاصية مثل بداية الهامش الداخلي اتجاه الكتابة، فتخدم مجموعة أنماط واحدة اللغتين بدلا من نمطين يبتعدان عن بعضهما تدريجيا.
إتاحة الوصول
كثير من إخفاقات الإتاحة قرارات بصرية: نص رمادي فاتح على خلفية بيضاء، إطار تركيز أُزيل لأنه بدا غير أنيق، روابط تُميَّز باللون فقط. إصلاح هذه الأمور بعد البناء يعني إعادة التصميم. نتحقق من التخطيطات وفق إرشادات W3C لإتاحة محتوى الويب 2.2، التي أصبحت توصية رسمية من W3C في أكتوبر 2023 وحُدّثت آخر مرة في ديسمبر 2024.
مثالان لما يعنيه ذلك عمليا. المعيار 1.4.3 يشترط نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير، لذا تُختبر ألوان العلامة التجارية قبل استخدامها في النصوص. أما المعيار 2.5.8، الجديد في الإصدار 2.2، فيحدد حدا أدنى لمساحة عناصر اللمس قدره 24×24 بكسل CSS، وهو ما يحدد مدى تقارب الروابط والأيقونات الصغيرة في التذييلات والقوائم.
الاعتماد قبل البناء
تتبع المراحل نمطنا المعتاد: البريف، العرض، الإنشاء، المراجعة، التسليم، التحسين، مع قاعدة ثابتة واحدة: تعتمد التصميم كاملا قبل بدء التطوير.
نراجع موقعك الحالي والمنافسين الذين تحترمهم وأهدافك، ثم نرسل عرض سعر مكتوبا وثابتا.
يُتفق على البنية أولا، بعرض الهاتف وسطح المكتب، باللغة الرئيسية.
تُصمم الصفحة الرئيسية وقالب داخلي واحد أولا. وبمجرد أن يكون الاتجاه صحيحا، يتبعه الباقي.
تُرسم تخطيطات من اليمين إلى اليسار، أخطاء النماذج، الحالات الفارغة والقوائم لكل قالب.
الملفات المعتمدة وورقة مكونات وملاحظات تُرسل للتطوير. يمكن أن تأتي نصوص الصفحات من فريق كتابة محتوى المواقع لدينا بالتوازي.
تخطط لصفحة حملة واحدة بدلا من موقع كامل؟ تصميم صفحات الهبوط مُعد لذلك. تصمم منتجا أو بوابة تتطلب تسجيل دخول؟ راجع تصميم UI UX. قرارات البنية تؤثر أيضا في البحث، لذا ننسق مع خدمات SEO عند إعادة بناء موقع.
أعمال مختارة
بيت استثماري في دبي، وسمسرة عقارية فاخرة، وعيادة علاج طبيعي ثنائية اللغة، لكل منها سبب مختلف لزيارة الموقع.
موقع إلكتروني · مؤسسي · دبي
بيت استثمار في دبي خلفه قرن من العمل التجاري. الموقع موجّه للمستثمرين المؤسسيين لا للمتسوقين.
shaikhholdings.com
موقع إلكتروني · عقارات فاخرة · دبي
وساطة عقارية في قمة سوق دبي، حيث يحكم المشتري على الوكالة من موقعها أولًا.
billionairehomesdubai.com
موقع إلكتروني · رعاية صحية · دبي
مركز تأهيل وعلاج طبيعي في دبي بموقع واحد ثنائي اللغة بالإنجليزية والعربية بشكل صحيح.
hmsfmce.comمن المدونة
ما الذي يحميه قانون العلامات التجارية الإماراتي ويرفضه، وكيف يعمل التسجيل لدى وزارة الاقتصاد والسياحة، وماذا يعني ذلك لشعارك.
اقرأ المقال
ما يجب أن يحسمه دليل علامة عربي وإنجليزي كتابةً حتى تطبقه المطابع والمطورون والكتّاب في الإمارات بالطريقة نفسها.
اقرأ المقالإجابات واضحة
في الغالب نعم. إذا كان نظام إدارة المحتوى الحالي سليما، يمكن تطبيق التصميم الجديد عليه. وإذا كانت المنصة نفسها سبب بطء الموقع أو صعوبة تعديله، فسنوضح ذلك في العرض ونشرح الخيارات المتاحة.
لا يلزم أن تكون النصوص نهائية، لكن وجود عناوين حقيقية ومسودة أولية للصفحات الرئيسية يساعد كثيرا. فتصميم الصفحات حول نص بديل يخفي مشكلات تظهر فور وصول المحتوى العربي أو الإنجليزي الحقيقي.
يعتمد ذلك على عدد القوالب الفريدة واللغات والتكاملات المطلوبة. تحصل على عرض سعر مكتوب وثابت، مبني على طلبك، ويُرسل عادة خلال 45 دقيقة أثناء ساعات العمل.
لك أنت. النطاق والاستضافة وبيانات دخول نظام إدارة المحتوى والكود كلها ملكك، ويشمل التسليم تدريبا وشرحا مسجلا ونافذة دعم.
سيتصرف بشكل متسق، وهذا أهم من التطابق البصري الكامل. التخطيطات مصممة للشاشات الصغيرة والمتوسطة والكبيرة، ويُختبر الموقع المُنجز على أجهزة ومتصفحات حقيقية قبل الإطلاق.
المصادر
سعر ثابت ومكتوب
وصلنا طلبك. نعمل الآن على كتابة عرض السعر.
خلال ساعات العمل ستصلك خلال 45 دقيقة. تحقق من بريدك الإلكتروني لرسالة التأكيد.
