6 نصائح لتصميم الويب لإنشاء مواقع ويب ناجحة (مع أمثلة)

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

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

ابدأ في تنويع مصادر إيراداتك. احصل على "دليل من 6 خطوات لبيع خدمات مواقع الويب للشركات المحلية" الآن.

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

فيما يلي أهم نصائح تصميم الويب التي يجب وضعها في الاعتبار عند تصميم موقع ويب:

1. تصفح سهل
2. صور عالية الجودة
3. تصميم بسيط للصفحة الرئيسية
4. المشاركة الاجتماعية وأزرار المتابعة
5. تصميم مناسب للجوال
6. محتوى قابل للفحص

دعنا نتعمق أكثر في نصائح تصميم الويب هذه.

1. سهولة التنقل

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

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

مصدر

ضع في اعتبارك استخدام خيارات القائمة المنسدلة لقوائم القوائم الفرعية أيضًا.

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

مصدر

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

مصدر

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

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

2. إضافة صور عالية الجودة

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

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

هناك بعض الأشياء التي يجب أن تضعها في اعتبارك عند إضافة الصور إلى موقع ويب:

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

نصيحة احترافية: استخدم ملفات JPEG لضغط الصور الفعال والتحميل السريع.

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

تعد صفحة Slack الرئيسية مثالاً ممتازًا على ذلك:

مصدر

كن محددًا مع علامات alt المستخدمة لكل صورة تضيفها. كما ذكرنا سابقًا ، يمكن أن يساعد ذلك في تحسين محرك البحث (SEO) لموقع الويب.

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

3. الحفاظ على فوضى الصفحة الرئيسية خالية وبسيطة

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

Freshbooks تحصل عليه بشكل جيد مع هذه الصفحة الرئيسية.

مصدر

تتضمن نصائح تصميم الويب الأخرى لمساعدتك في إنشاء صفحة رئيسية رائعة ما يلي:

• العناصر الجمالية لا تقدر بثمن

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

• إضفاء الطابع الشخصي على صفحتك الرئيسية بخطوط رائعة

استخدم خطوطًا بسيطة ولكنها جذابة. يمكن أن يؤدي خلط sans-serif و serif إلى تعطيل تناسق الخط في صفحتك ويمكن أن يجعل قراءة المحتوى الخاص بك صعبة.

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

أيضًا ، تجنب استخدام أكثر من ثلاثة أنواع من الخطوط.

4. تضمين المشاركة الاجتماعية وأزرار المتابعة

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

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

بعض أزرار الوسائط الاجتماعية الأكثر استخدامًا هي Twitter و Facebook و WhatsApp و LinkedIn.

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

مصدر

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

مصدر

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

5. صفحات متوافقة مع الجوال

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

افعل هذه الأشياء لتحسين موقع الويب لاستخدام الهاتف المحمول:

• استخدم صورة بطل قابلة للتطوير وأيقونات جمالية

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

• اجعل محتوى الجوال بسيطًا

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

• إعطاء الأولوية للسرعة

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

6. إنشاء محتوى يمكن مسحه ضوئيًا

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

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

ضع في اعتبارك نصائح تصميم الويب هذه لإنشاء محتوى يمكن مسحه ضوئيًا:

• قسّم المحتوى إلى نقاط أو استخدم الرؤوس (H1 و H2 و H3 و H4 و H5)
• استخدم الوزن البصري لإبراز الأقسام الأساسية. يمكنك استخدام خلفية أو لون نص مختلف لإبراز عنصر أساسي من البقية.
• قم بتضمين عبارة تحث المستخدم على اتخاذ إجراء أو المزيد من خيارات التنقل حتى لا يترك المستخدمون فارغين بعد الوصول إلى نهاية صفحة الويب.

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

قم ببيع المزيد من مواقع الويب باستخدام نصائح تصميم الويب هذه

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

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

قم بتنفيذ نصائح تصميم الويب هذه لبيع وإنشاء مواقع ويب تفاعلية للغاية سيحبها عملاؤك وعملائهم.