اتجاهات تصميم المواقع في 2027: ما يستحق التطبيق وما يمكنك تجاهله

في هذا الدليل

1. كيف تحكم على أي اتجاه؟
2. الذكاء الاصطناعي في التصميم والبحث
3. سرعة الاستجابة ومؤشر INP
4. إتاحة الوصول
5. التصميم العربي أولًا
6. الوضع الداكن والخطوط والبنتو والحركة
7. الخصوصية وحماية البيانات
8. جدول القرار وخطة التطبيق
9. كيف نطبّقها في ويبنا
10. أسئلة شائعة
11. الخلاصة

كيف تحكم على أي اتجاه قبل أن تدفع ثمنه؟

معظم قوائم الاتجاهات يكتبها مصممون لمصممين: تعرض ما يلفت النظر في معارض الأعمال ومسابقات التصميم، لا ما يرفع عدد الاتصالات في موقع عيادة أو شركة مقاولات أو مكتب استشارات. والفرق كبير؛ فالمصمم يُقاس عمله بإعجاب زملائه، وموقعك يُقاس بعدد من تواصلوا معك بعد زيارته. لذلك نقترح أن تمرر كل اتجاه على خمسة أسئلة قبل أن تطلبه من مصممك:

1. هل يخدم هدف الزائر؟ الزائر جاء ليعرف ماذا تقدم، وكم يكلّف تقريبًا، وكيف يتواصل معك. أي عنصر يؤخر هذه الإجابات الثلاث عبء عليه.
2. هل يبطئ الصفحة على جوال متوسط؟ جرّب الفكرة على هاتف عادي وشبكة متقلبة، لا على حاسوب المصمم الحديث واتصال المكتب السريع.
3. هل يقرؤه الجميع؟ كبار السن، ومن يقرأ تحت شمس الظهيرة، ومن يستخدم لوحة المفاتيح أو قارئ الشاشة. إن خفّض الاتجاه التباين أو صغّر الأزرار فهو يقصي جزءًا من عملائك.
4. هل يعمل بالعربية من اليمين إلى اليسار؟ كثير من الأفكار تُصمَّم أولًا للإنجليزية، ثم تنكسر حين تُقلب للعربية.
5. من سيصونه بعد الإطلاق؟ كل تأثير إضافي يعني اختبارًا مع كل تحديث، وإضافة قد تتوقف عن العمل، ووقتًا يُدفع ثمنه لاحقًا.

بهذه الأسئلة تنقسم اتجاهات تصميم المواقع لعام 2027 إلى ثلاث فئات واضحة، وعليها بنينا بقية الدليل:

الذكاء الاصطناعي: في أدوات التصميم وفي نتائج البحث

يدخل الذكاء الاصطناعي إلى موقعك من بابين مختلفين، ومن المهم ألا تخلط بينهما: باب الأدوات التي يستخدمها المصمم ليعمل أسرع، وباب محركات البحث التي صارت تلخّص الإجابات للباحث قبل أن يصل إلى موقعك.

أدوات التصميم المدعومة بالذكاء الاصطناعي

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

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

التكلفة: منخفضة في الأدوات نفسها، لكن الوقت الذي توفره في الكتابة يعود في المراجعة. النص الذي تولده الأدوات يميل إلى العموميات، ويخطئ أحيانًا في الحقائق، وتتفاوت جودة عربيته بين أداة وأخرى، والصور المولّدة قد تحمل تفاصيل غير منطقية أو لا تشبه منتجك الحقيقي.

متى تتجاهله: لا تقبل موقعًا كُتب كله آليًا دون مراجعة بشرية، ولا صورًا مولّدة لمنتجات أو مشاريع يُفترض أنها حقيقية؛ فالعميل الذي يزور مشروعك بعد ذلك سيلاحظ الفرق ويفقد الثقة. فصّلنا حدود هذه الأدوات في دليل تصميم موقع بالذكاء الاصطناعي.

البحث بالذكاء الاصطناعي وملخصات جوجل

ما هو: صارت جوجل تعرض لبعض عمليات البحث ملخصًا مكتوبًا بالذكاء الاصطناعي (AI Overviews) ووضعًا للمحادثة (AI Mode)، مع روابط إلى الصفحات التي استُمدت منها الإجابة. وظهر في السوق من يبيع «تهيئة خاصة للذكاء الاصطناعي» بملفات ورموز جديدة.

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

ماذا يعني ذلك للتصميم؟ كثير من المواقع تخفي أهم معلوماتها داخل صور أو شرائح متحركة أو تبويبات لا تُفتح إلا بالنقر. الاتجاه الصحيح في 2027 هو العكس:

• اكتب أسماء خدماتك ومدنك وساعات العمل نصًا عاديًا، لا داخل صورة تصميمية.
• اجعل لكل خدمة رئيسية صفحة مستقلة بعنوان واضح، بدل صفحة واحدة تجمع كل شيء.
• أجب عن الأسئلة التي يطرحها عملاؤك فعلًا بجمل مباشرة في أول الفقرة، ثم فصّل بعدها.
• وحّد اسم النشاط ورقمه وعنوانه في الموقع وفي ملفك التجاري على جوجل.
• اربط موقعك بـ Google Search Console؛ ففيه تظهر الزيارات القادمة من هذه الميزات ضمن تقرير الأداء.

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

سرعة الاستجابة: مؤشر INP معيار وليس موضة

تحدثت المواقع طويلًا عن «سرعة التحميل»، لكن الزائر لا يحكم على موقعك عند ظهوره فقط، بل في كل نقرة بعد ذلك: حين يفتح القائمة، أو يضغط زر واتساب، أو يكتب في نموذج الطلب. هنا يأتي مؤشر INP (Interaction to Next Paint)، وهو من مؤشرات أداء الويب الأساسية (Core Web Vitals) التي تعتمدها جوجل لقياس تجربة الصفحة.

ما هو: بحسب شرح مؤشر INP على web.dev، يقيس المؤشر زمن استجابة الصفحة للنقرات واللمسات وضغطات لوحة المفاتيح طوال زيارة المستخدم، وقد خلف المؤشر الأقدم FID. وتُصنَّف النتيجة على ثلاث درجات تُحسب عند الشريحة المئوية 75 من زيارات الصفحة، لكل من الجوال والحاسوب على حدة:

الدرجة	زمن الاستجابة	ماذا يشعر الزائر؟
جيد	200 مللي ثانية أو أقل	الزر يستجيب فورًا تقريبًا
يحتاج تحسينًا	أكثر من 200 وحتى 500 مللي ثانية	تأخر ملحوظ، فيضغط الزائر مرة ثانية
ضعيف	أكثر من 500 مللي ثانية	يظن الزائر أن الموقع معطل

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

ما الذي يرفع INP عادةً؟ نادرًا ما يكون التصميم نفسه، والغالب أنه ما يُحمَّل خلفه:

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

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

متى تتجاهله: لا تتجاهله أبدًا. لكن لا تطارد الدرجة الكاملة في أدوات القياس على حساب محتوى مفيد؛ الهدف أن يكون موقعك في الدرجة الجيدة عند زوارك الحقيقيين. ولربط السرعة بالمبيعات بأمثلة عملية راجع كيف تصنع سرعة الموقع المبيعات.

إتاحة الوصول: موقع يقرؤه الجميع

ما هو: إتاحة الوصول أن يستطيع كل زائر استخدام موقعك، بما في ذلك من يعاني ضعف البصر أو صعوبة الحركة أو يعتمد على قارئ الشاشة أو لوحة المفاتيح. المرجع العالمي لها هو إرشادات WCAG الصادرة عن اتحاد الويب العالمي W3C، وأحدث إصداراتها WCAG 2.2 المنشورة في أكتوبر 2023 والمحدّثة في ديسمبر 2024، وتقوم على أربعة مبادئ: أن يكون المحتوى قابلًا للإدراك، وقابلًا للتشغيل، ومفهومًا، ومتينًا.

لماذا نعدها اتجاهًا لعام 2027 مع أنها ليست جديدة؟ لأن كثيرًا من الاتجاهات البصرية الرائجة تصطدم بها مباشرة: النص الرمادي الفاتح على خلفية بيضاء، والأزرار الصغيرة المتلاصقة، والشرائح التي تتحرك وحدها. وكل من هذه يمكن قياسه بمعيار محدد:

المعيار في WCAG 2.2	ما يطلبه	أين يُخالَف عادةً
تباين النص (1.4.3)	نسبة 4.5:1 على الأقل للنص العادي، و3:1 للنص الكبير	نص رمادي فاتح، أو نص فوق صورة دون طبقة داكنة
تباين العناصر غير النصية (1.4.11)	3:1 لحدود الحقول والأزرار والأيقونات المهمة	حقول نماذج بحدود باهتة لا تكاد تُرى
حجم الهدف (2.5.8)	24 × 24 بكسل CSS على الأقل للعناصر القابلة للنقر، أو مسافة كافية بينها	أيقونات التواصل الاجتماعي الصغيرة المتلاصقة في التذييل
الإيقاف المؤقت (2.2.2)	المحتوى المتحرك تلقائيًا لأكثر من خمس ثوانٍ يحتاج وسيلة لإيقافه أو إخفائه	شرائح الصفحة الرئيسية التي تدور بلا توقف

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

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

متى تتجاهله: لا تتجاهله، لكن احذر من الإضافات التي تَعِد بجعل موقعك «متاحًا بنقرة» عبر شريط أدوات عائم؛ فهي لا تصلح التباين ولا ترتيب العناوين ولا تسميات الحقول، والإصلاح الحقيقي يكون في التصميم نفسه. وتجد القواعد البصرية المرتبطة بهذا في مبادئ تصميم المواقع.

التصميم العربي أولًا لا الترجمة بعد الانتهاء

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

ماذا يتضمن عمليًا؟

• عكس ما يجب عكسه فقط: القائمة، وترتيب الأعمدة، وأسهم «التالي» و«السابق» تُعكس. أما الشعارات، والأرقام، وأزرار تشغيل الفيديو، والرسوم البيانية الزمنية في الغالب، فتبقى كما هي.
• خط عربي مصمم للشاشة: يحتاج النص العربي عادةً حجمًا أكبر قليلًا وارتفاع سطر أوسع من النص اللاتيني بالحجم نفسه، لأن الحروف العربية تمتد فوق السطر وتحته.
• النص المختلط: رقم جوال أو اسم منتج إنجليزي داخل جملة عربية قد يتبعثر ترتيبه إن لم يُضبط اتجاه النص في الشيفرة.
• محتوى مكتوب بالعربية من البداية: لا مترجم آليًا؛ فالعميل السعودي يلتقط النص المترجم من أول سطر ويقرأ فيه قلة الاهتمام.
• نسختان بروابط منفصلة: لكل لغة عنوان مستقل، مع ربط تقني بينهما يخبر محركات البحث أن الصفحتين ترجمتان لبعضهما.

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

التكلفة: لا تزيد كثيرًا إن اخترت من البداية مصممًا يعرف العربية جيدًا وقالبًا يدعم الاتجاهين. وترتفع حين تحاول إصلاح موقع مقلوب: كل صفحة تحتاج مراجعة، وكل إضافة قد تتصرف بطريقة مختلفة.

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

اتجاهات بصرية: الوضع الداكن والخطوط المتغيرة والبنتو والحركة

هذه هي الاتجاهات التي تملأ معارض التصميم. ليست سيئة، لكن قيمتها تختلف كثيرًا من نشاط إلى آخر، وتكلفتها الحقيقية تظهر بعد الإطلاق لا قبله.

الوضع الداكن

ما هو: نسخة من ألوان الموقع بخلفية داكنة ونصوص فاتحة. الطريقة الأنضج أن يتبع الموقع إعداد جهاز الزائر تلقائيًا، وهو ما تتيحه المتصفحات عبر خاصية prefers-color-scheme، مع زر اختياري للتبديل، بدل فرض الوضع الداكن على الجميع.

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

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

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

الخطوط المتغيرة

ما هو: ملف خط واحد يحتوي على كل الأوزان، من الرفيع إلى العريض، وأحيانًا العرض والميل، بدل ملف مستقل لكل وزن. الفائدة المباشرة طلبات أقل للخادم وحرية أكبر في اختيار وزن دقيق للعناوين.

متى يناسبك: حين تستخدم ثلاثة أوزان أو أكثر من الخط نفسه، أو تريد عناوين بوزن مميز يعبر عن هويتك، أو موقعًا بلغتين يحتاج تنسيقًا متقاربًا بين الخطين العربي واللاتيني.

التكلفة: الخيارات العربية من الخطوط المتغيرة أضيق من اللاتينية، فتأكد أن الخط الذي يعجبك يدعم الحروف العربية كاملة، والأرقام، وعلامات الترقيم العربية، وأن ترخيصه يسمح باستخدامه على الويب. وقد يكون الملف الواحد أكبر من ملف وزن واحد.

متى تتجاهله: إن كان موقعك يكتفي بوزنين، عادي وعريض، فملفان صغيران مقتصران على الحروف المستخدمة قد يكونان أخف من ملف متغير كامل. القرار هنا رقمي: قارن حجم الملفات قبل أن تختار.

شبكات البنتو

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

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

التكلفة: متوسطة؛ فالشبكة الجميلة على الحاسوب تتحول على الجوال إلى عمود طويل واحد، ويجب أن تقرر مسبقًا ترتيب المربعات فيه، وأن تراجع هذا الترتيب في النسخة العربية لأن القراءة تبدأ من اليمين.

متى تتجاهله: حين يكون المحتوى تسلسلًا يجب أن يُقرأ بترتيبه، كخطوات الخدمة أو مراحل المشروع؛ هنا القائمة المرقمة أوضح. وتجاهله أيضًا إن لم يكن لديك محتوى كافٍ لكل مربع، فالمربعات الفارغة أو المحشوة بعبارات عامة تضعف الثقة.

الحركة المدروسة واحترام تقليل الحركة

ما هو: حركات صغيرة لها وظيفة: زر يتغير لونه عند المرور عليه، ورسالة تأكيد تظهر بسلاسة بعد إرسال النموذج، وعناصر تظهر بهدوء أثناء التمرير. الحركة الجيدة تخبر الزائر أن شيئًا حدث، لا أنها موجودة لتلفت النظر.

والجزء الأهم في هذا الاتجاه هو احترام من لا يريد الحركة. تتيح أنظمة التشغيل خيار «تقليل الحركة»، وتلتقطه المواقع عبر خاصية prefers-reduced-motion الموثقة في MDN، فتوقف التأثيرات غير الضرورية أو تستبدل بها انتقالات هادئة. وتشير الوثيقة إلى أن تكبير العناصر الكبيرة وتحريكها أفقيًا من أكثر ما يزعج المصابين باضطرابات الدهليز.

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

التكلفة: قليلة للحركات البسيطة المكتوبة بـ CSS، ومرتفعة للمكتبات الثقيلة التي تربط كل عنصر بالتمرير، لأنها تؤثر في INP وتحتاج اختبارًا على أجهزة ضعيفة.

متى تتجاهله: تجاهل تأثير التمرير المتوازي (parallax) الثقيل، والعناصر التي تطير من أطراف الشاشة، وأي نص لا يظهر إلا بعد انتهاء الحركة. فالزائر الذي يمرر بسرعة يرى فراغًا ويغادر.

الخصوصية وحماية البيانات جزء من التصميم

ما هو: كل موقع يجمع بيانات: نموذج طلب فيه اسم ورقم جوال، وأدوات قياس تتبع الزيارات، وبكسلات إعلانية. في المملكة صدر نظام حماية البيانات الشخصية في سبتمبر 2021، وتعرض منصة حوكمة البيانات الوطنية التابعة لسدايا النظام بوصفه الإطار الذي يحمي بيانات الأفراد ويحدد حقوقهم والتزامات الجهات التي تجمع البيانات وتعالجها. ما يعنينا هنا ليس التفاصيل القانونية، بل أثر ذلك على قرارات التصميم.

كيف يظهر في التصميم؟

• نماذج أقصر: اطلب ما تحتاجه فعلًا للرد على العميل. حقل رقم الهوية أو تاريخ الميلاد في نموذج استفسار بسيط يثير الريبة ولا يضيف شيئًا.
• سياسة خصوصية مقروءة: رابط واضح بجوار كل نموذج، وصفحة مكتوبة بلغة يفهمها العميل، تشرح ماذا تجمع ولماذا وكيف يتواصل معك بشأن بياناته.
• معرفة ما تحمّله الصفحة: كل أداة تتبع أو دردشة خارجية تنقل بيانات إلى جهة أخرى. احتفظ بقائمة بها، واحذف ما لا تستخدمه؛ وهذا يحسّن السرعة أيضًا.
• شريط موافقة صادق: إن احتجت إلى موافقة على ملفات تعريف الارتباط، فاجعل خيار الرفض بوضوح خيار القبول نفسه، لا مخفيًا خلف نصوص صغيرة.
• حماية النقل: شهادة أمان SSL على كل الصفحات، فلا يُرسل نموذج عبر اتصال غير مشفر.

متى يناسبك: لكل موقع يستقبل بيانات، أي لكل موقع تجاري تقريبًا. التكلفة: منخفضة إن بُنيت النماذج والسياسات مع الموقع، وأعلى إن احتجت إلى مراجعة موقع يحمّل أدوات كثيرة لا يعرف أحد من أضافها.

متى تتجاهله: لا يُتجاهل. وما نكتبه هنا توعية عامة لا استشارة قانونية؛ فإن كان نشاطك يعالج بيانات حساسة كالبيانات الصحية، فارجع إلى المصدر الرسمي ومستشار مختص. والوضوح في البيانات يعزز الثقة كما تشرح مقالة علامات الثقة في موقعك.

جدول القرار: أي اتجاهات تصميم المواقع تستحق التطبيق؟

يجمع الجدول كل ما سبق في نظرة واحدة. استخدمه حين تقرأ عرض مصمم، أو حين يقترح عليك أحد «تحديث الموقع ليواكب العصر»:

الاتجاه	يناسب	تكلفة التبني	القرار
سرعة الاستجابة (INP)	كل المواقع	منخفضة عند البناء، أعلى في المواقع المثقلة	طبّقه
إتاحة الوصول (WCAG 2.2)	كل المواقع، وأوضح أثرًا في الصحة والتعليم	منخفضة من البداية	طبّقه
التصميم العربي أولًا	كل نشاط جمهوره في المملكة	منخفضة مع مصمم يعرف العربية	طبّقه
حماية البيانات في النماذج والأدوات	كل موقع يستقبل بيانات	منخفضة	طبّقه
محتوى نصي واضح للبحث بالذكاء الاصطناعي	كل موقع يريد الظهور في جوجل	وقت كتابة ومراجعة	طبّقه، دون باقات «تهيئة خاصة»
أدوات التصميم بالذكاء الاصطناعي	المسودات الأولى والبدائل	منخفضة مع مراجعة بشرية	استخدمها أداةً لا بديلًا
الوضع الداكن	البوابات والأنظمة والمنتجات التقنية	متوسطة ومستمرة	حسب جمهورك
الخطوط المتغيرة	المواقع التي تستخدم أوزانًا كثيرة	منخفضة إلى متوسطة	قارن حجم الملفات أولًا
شبكات البنتو	ملخص الخدمات والمزايا	متوسطة بسبب الجوال	حين يكون لكل مربع محتوى حقيقي
الحركة الدقيقة	كل المواقع، باعتدال	منخفضة بـ CSS	طبّقها مع احترام تقليل الحركة

ما يمكنك تجاهله بهدوء

هذه أفكار ستراها في مواقع لافتة، لكنها في موقع نشاط تجاري تكلف أكثر مما تعطي:

• فيديو كامل الشاشة يعمل تلقائيًا في أعلى الصفحة: ثقيل على باقات الجوال، ويؤخر ظهور العنوان والزر، ونادرًا ما يشاهده أحد حتى نهايته.
• مؤشر فأرة مخصص: لا وجود له على الجوال أصلًا، ويربك مستخدم الحاسوب.
• التمرير الأفقي للصفحة كلها: يكسر عادة القراءة الطبيعية، ويزداد ارتباكه في الواجهة العربية.
• شاشة ترحيب متحركة قبل الدخول: ثوانٍ يقضيها الزائر منتظرًا قبل أن يرى ما جاء من أجله.
• الخلفيات الزجاجية الشفافة فوق صور مزدحمة: جميلة في الصورة الترويجية، لكنها تخفض تباين النص إلى حد يصعب معه قراءته.
• مجسمات ثلاثية الأبعاد ثقيلة: مكانها صفحات المنتجات التي تحتاجها فعلًا، لا الصفحة الرئيسية لمكتب خدمات.
• روبوت محادثة يجيب بثقة عن أسئلة لا يعرفها: إجابة خاطئة عن سعر أو موعد تضرك أكثر من غياب الروبوت. زر واتساب يصل إلى إنسان أوضح وأصدق.

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

ثلاثة أمثلة: ماذا يطبّق كل نشاط؟

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

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

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

خطة تطبيق على مراحل

وقبل أن تطلب من أي مصمم تطبيق اتجاه ما، اسأله أربعة أسئلة: كيف سيظهر على الجوال؟ وكيف سيبدو في النسخة العربية؟ وما أثره على سرعة الاستجابة؟ ومن سيصونه بعد الإطلاق وبأي تكلفة؟ الإجابات المحددة علامة مصمم يفكر في نشاطك، والإجابات العامة علامة على العكس.

كيف نطبّق هذه الاتجاهات في ويبنا؟

في ويبنا لخدمات تصميم المواقع في السعودية، ومقرها الرياض، نبني مواقع الشركات على ووردبريس بالمنطق نفسه الذي شرحناه هنا: الأساسيات أولًا، ثم ما يخدم نشاطك فعلًا. في خدمة تصميم المواقع الإلكترونية للشركات يحصل موقعك على:

• تصميم سريع ومتوافق مع الجوال، يُختبر على الهاتف والحاسوب قبل الإطلاق.
• حتى 5 صفحات، كل صفحة بالعربية والإنجليزية، مع كتابة المحتوى لك.
• نموذج طلب أو استفسار، وزر واتساب، ورقم اتصال مباشر، وموقع على الخريطة، ومعرض صور.
• سياسة خصوصية وشروط استخدام جاهزة، واستضافة وشهادة SSL ودومين باسمك.
• تهيئة لمحركات البحث وربط بـ Google Search Console وخريطة الموقع.

كل ذلك في موقع ووردبريس من 5 صفحات بلغتين بـ 324 ريالًا شهريًا في الحاسبة، مع الدعم الفني وإصلاح الأعطال ضمن الاشتراك، ومواقعنا تبدأ من 39 ريالًا شهريًا، كلها بلا رسوم تأسيس، مع تسليم رابط المعاينة خلال 24 ساعة كحد أقصى من اكتمال جميع المعلومات والمحتوى المطلوب منك. ترى التصميم على رابط معاينة قبل الإطلاق، وإن لم يعجبك نعيد لك كامل المبلغ. والسعر يُعرض شهريًا ويُدفع مقدمًا كل 6 أشهر، أو سنة كاملة بخصم 10%. أما المتاجر الإلكترونية، والأنظمة الخاصة، وإعادة تصميم موقع قائم، فنسعّرها بعرض مكتوب يحدد النطاق وموعد التسليم. كل التفاصيل في حاسبة الأسعار.

أسئلة شائعة

الخلاصة

اتجاهات تصميم المواقع لعام 2027 ليست قائمة واحدة تطبّقها كلها، بل طبقتان: أساسيات لا يُستغنى عنها، وهي سرعة الاستجابة وإتاحة الوصول والتصميم العربي أولًا وحماية البيانات والمحتوى النصي الواضح؛ وتحسينات تختار منها ما يخدم جمهورك، كالوضع الداكن والخطوط المتغيرة وشبكات البنتو والحركة الدقيقة. قِس كل فكرة بأثرها على الجوال وعلى النسخة العربية وعلى سرعة الاستجابة وعلى تكلفة الصيانة، واسأل دائمًا: هل تقرّب الزائر من الاتصال بك؟ إن كانت الإجابة نعم فطبّقها، وإن لم تكن فدعها لمعارض التصميم.

المراجع: جوجل: ميزات الذكاء الاصطناعي وموقعك، وweb.dev: مؤشر Interaction to Next Paint، وW3C: إرشادات WCAG 2.2، وMDN: خاصية prefers-reduced-motion، وسدايا: منصة حوكمة البيانات الوطنية ونظام حماية البيانات الشخصية، اطّلعنا عليها في أكتوبر 2026. ومن ويبنا: صفحة الأسعار والدليل الشامل لتصميم المواقع.