كيف تصمم موقعًا إلكترونيًا: دليلنا السهل خطوة بخطوة [2024]

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

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

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

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

حدد هدفك

كما تفعل في أي جزء آخر من عملك، تحتاج إلى معرفة سبب إعداد موقع إلكتروني في المقام الأول.

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

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

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

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

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

اختيار منصة لموقعك الإلكتروني

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

1. Wix: قدرات لا نهائية للترويج للعلامات التجارية

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

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

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

الخصائص

• تصميم مدعوم بالذكاء الاصطناعي. إذا لم تكن تعرف من أين تبدأ الترويج لعلامتك التجارية، دع Wix يساعدك. أخبر ذكاء التصميم الاصطناعي (ADI) من Wix عن أعمالك وأهدافك وما تريد أن يبدو عليه موقعك الإلكتروني، وسوف يصمم نموذج مخصص (وقابل للتخصيص!) من أجلك في دقائق.
• أداة مدمجة لتحسين محركات البحث. تحسين محركات البحث (SEO) عنصر مهم وأساسي من تصميم المواقع ويصعب على المستخدمين العثور على موقعك دونها. لحسن الحظ، تبسط Wix هذا الجزء من تصميمك باستخدام أداة مدمجة تعرض قائمة تحقق لتحسين كل صفحة من موقعك الإلكتروني لمحركات البحث.
• مخططات محتوى مسبقة التجهيز. بالإضافة إلى مئات النماذج من Wix، توفر الخدمة الكثير من المخططات مسبقة التجهيز. يجعل ذلك من السهل تصميم موقع إلكتروني احترافي دون معرفة مبادئ التصميم المتقدمة.
• باقة مجانية رائعة. باقة Wix المجانية رائعة جدًا ولا تضع قيود فيما يتعلق بالتخصيص أو خصائص التصميم.

شاهد كيف يمكنك تصميم موقع إلكتروني رائع باستخدام Wix في مراجعة خبيرنا.

2. Squarespace: تصميمات مذهلة مسبقة الإعداد

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

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

الخصائص

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

اقرأ مراجعة Squarespace المتعمقة لمعرفة خصائصه الأخرى المذهلة.

3. SITE123: تصميمات بلا إضافات كثيرة للمبتدئين

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

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

الخصائص

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

اقرأ مراجعة SITE123 الشاملة للمزيد.

4. Shopify: تصميمات عصرية محسنة للمبيعات

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

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

الخصائص

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

شاهد كيف يمكنك إنشاء متجر إلكتروني جميل في مراجعة خبيرنا لـ Shopify.

يعد WordPress بديلًا رائعًا

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

يعد WordPress توصيتي الأفضل للمواقع ذاتية الاستضافة. إنه نظام إدارة محتوى (CMS) مفتوح المصدر مسؤول عن 43% من المواقع الإلكترونية، مما يجعله أحد أشهر المنصات واسعة الانتشار. وبسبب شعبية هذا الخيار لإنشاء المواقع، يوفر أكثر من 20,000 قالب، وتتوفر آلاف القوالب الأخرى عبر مختلف مكتبات القوالب الخارجية. وإلى جانب ذلك، يمكنك عرض المحرر باللغة العربية. يمكنك أيضًا الاستمتاع بالوصول الكامل للرمز البرمجي لموقعك الإلكتروني، وبذلك يمكنك التلاعب بالتصميم بقدر ما تحتاج.

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

إنشاء صفحات موقعك الإلكتروني

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

الصفحة الرئيسية

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

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

عن الشركة

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

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

اتصل بنا

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

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

الصفحات الاختيارية

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

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

تصميم العناصر الفردية للموقع الإلكتروني

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

رأس وتذييل الصفحة

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

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

القائمة

بوضع ذلك في حسبانك، لنركز على قائمة موقعك الإلكتروني.

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

تأثيرات وحركات التصفح

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

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

المحتوى النصي، والصور، والصوت

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

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

فكر جيدًا في قابلية الوصول

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

تعد إرشادات الوصول إلى محتوى الإنترنت (WCAG) مبادرة عالمية ترأسها رابطة الشبكة العالمية (W3C). إنها مجموعة تطوعية (لكن ضرورية) من الإرشادات التي تجعل المواقع الإلكترونية أكثر إتاحة للمستخدمين غير القادرين الذين قد لا يمكنك استخدام التقنيات المساعدة اللازمة لتصفح الإنترنت.

لا يسعنا الوقت لمناقشة الإصدار الأحدث من تلك الإرشادات (WCAG 2) بالكامل، لذا سأوضح لكم أبرز ما فيها.

النص البديل، والعناوين الفرعية والنصوص

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

وبالمثل، سوف تحتاج إلى تفريغ نصي لمحتوى الفيديو والصوتيات للصم وضعاف السمع. ينبغي وجود تفريغ نصي وصفي لمقاطع الفيديو الخالية من المحتوى السردي (مثل النص البديل).

تباين الألوان

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

لحسن الحظ، معالج قابلية الوصول من Wix مجهز بإرشادات WCAG 2. عندما تستخدم معالج قابلية الوصول، سيخبرك بتباين الألوان المطلوب لتحسين موقعك الإلكتروني.

تقليل الحركة

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

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

نموذج كائن المستند (DOM)

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

تحسين المواقع لمستخدمي الهواتف

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

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

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

انشر موقعك الإلكتروني وحافظ على تحديثه!

بمجرد أن تكون راضيًا عن تصميمك، يحين الوقت للضغط على زر النشر. مرحى!

لا يعني ذلك أنك ستشطب موقعك الإلكتروني من قائمة مهامك. ينبغي أن تعمل على تحديث موقعك الإلكتروني والاستماع إلى ملاحظات المستخدمين. امتلاك موقع إلكتروني عمل مستمر لا ينتهي.

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

صمم موقعًا عصريًا في 2024

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

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

الأسئلة الشائعة

كيف يمكنني تصميم موقعي الإلكتروني؟

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

ما مقدار تكلفة إنشاء موقع إلكتروني؟

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

ما المبادئ الثلاثية لتصميم موقع إلكتروني جيد؟

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

كيف أنظم موقعي الإلكتروني؟

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