11 أخطاء في التصميم يصنعها عادةً مشترو قوالب ووردبريس

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

لقد وجدت موضوع WordPress المثالي. بدا العرض التوضيحي للموضوع لا تشوبه شائبة. لقد أحبها عميلك كثيرًا ووافقك على إجراء عملية شراء. قمت بشرائه وتثبيته وبدأت في تعديل السمة حسب احتياجات العميل.

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

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

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

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

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

1. تباين ضعيف للنص في شريط التمرير

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

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

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

2. صور شريط التمرير كبيرة جدًا

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

3. مساحة بيضاء فقيرة (سلبية)

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

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

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

لن أتحدث عن التفاصيل وأنا أفضل أن أعطيك بعض الأمثلة العملية.

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

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

4. التوافق السيئ مع الجوال

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

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

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

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

نتأكد من أن كل سمة من سمات WordPress الخاصة بنا تمر عليها بسهولة.

5. باستخدام الألوان التي لا تسير جنبا إلى جنب.

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

سأريكم مثالا:

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

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

أحد الخيارات هو اختيار نفس اللون الأخضر للون الأساسي وكذلك للون الثانوي ، لكنني لا أشجع ذلك بشدة.

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

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

نصيحة: لا تعرف كيفية الحصول على الكود السداسي لشعارك؟ تحقق ، إذا كان هناك امتداد Chrome مفيد لذلك.

نتيجتي تبدو مثل هذا.

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

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

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

سيكون خياري الشخصي هو الخيار البيج الثاني (# d8c99b) لأنه سيعمل بشكل مثالي مع اللون الأخضر ولن يتفوق عليه بالتأكيد.

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

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

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

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

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

6. لا تفسد التنقل في موقع الويب الخاص بك

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

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

حافظ على نظام التنقل الرئيسي نظيفًا ، بحد أقصى 5 أو 6 خيارات.

7. الشعار كبير جدًا

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

قم بتحميل الشعار بالحجم ، موصى به بواسطة مؤلف قالب WordPress. ربما يعرفون أفضل حجم الشعار الذي يعمل بشكل أفضل مع سمة معينة.

يعد الشعار واحدًا من العديد من الأشياء الموجودة على موقع الويب ويجب أن يعمل بشكل متناغم مع المحتوى الآخر.

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

8. جودة الشعار رديئة

حدث لي ذات مرة أنني حصلت على الشعار بتنسيق Microsoft Word (.doc). ما أريد قوله هو أن العملاء سيجدون دائمًا طريقة لمفاجأتك.

فيما يتعلق بالشعار ، من المهم أن يكون في أفضل حالة ممكنة ، مثالية للبكسل. لهذا الغرض ، ستحتاج إلى تنسيق متجه (.pdf ، .ai ، .svg ، .eps). ثم تحتاج إلى الانتقال إلى تطبيق المتجه المفضل لديك (مثل Adobe Illustrator) وتصدير هذا الشعار إلى الحجم الذي أوصى به صانع السمات. هذا هو أفضل احتمال بالنسبة لك للحصول على شعار أكثر حدة.

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

9. جودة الصورة رديئة

يتحسن الوضع كل عام ، لكني ما زلت أجد الشركات التي لا تولي ما يكفي من الاهتمام أو الموارد لصور عالية الجودة.

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

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

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

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

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

10. عدم تصميم ملحقات الطرف الثالث

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

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

غالبًا ما ألاحظ أن عملائنا ينسون تصميم الأزرار والأشكال والألوان بنفس أسلوب باقي السمات.

لن يستغرق تطبيق فئات CSS المكتوبة بالفعل على المكون الإضافي المكون من 3 أطراف سوى 10 دقائق ، ولكن سيكون له تأثير كبير في النهاية.

إذا لم تكن لديك المعرفة للقيام بذلك ، فيمكننا القيام بذلك نيابة عنك.

11. قراءة سيئة

هناك ادعاء مشهور ، أن الطباعة تشكل 95٪ من تصميم الويب - لذا افعلها بشكل صحيح.

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

• يجب أن يحتوي كل سطر على 60-80 حرفًا شاملاً المسافات.
• إذا كنت تقوم بإعداد ارتفاع خط مخصص ، فعليك مضاعفة حجم الخط من 1.4 إلى 1.6. إذا كان حجم الخط لديك 16 بكسل ، فيجب أن يتراوح ارتفاع الخط بين 22.4 و 25.6.
• اترك مساحة كافية حول النص.
• لا تستخدم لون نص فاتح جدًا. كل شيء أكثر سطوعًا من 777777 # له تأثير سلبي على سهولة القراءة.
• لا تستخدم خطوطًا أصغر مما هو موصى به. أقل ما يمكنك الذهاب إليه هو 14 بكسل ، لكني أوصيك باختيار 16 بكسل أو 18 بكسل .
• كن حذرًا عند تثبيت الخطوط المخصصة في السمة. بعض الخطوط مصممة للعناوين فقط ولا تعمل بشكل جيد مع الأحجام الأصغر. بعض الخطوط مصممة للطباعة ولا تعمل بشكل جيد على الشاشات وبعض الخطوط مصنوعة بشكل سيئ. فكر مليًا عندما تريد استبدال خط قالب WordPress الافتراضي بشيء آخر. إذا كنت لا تزال ترغب في تغييره ، فالتزم بالجانب الآمن واختر الجوانب الشائعة.

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

المحاذاة لليمين (باستثناء اللغات ذات الاتجاه من اليمين إلى اليسار) والمحاذاة المضبوطة غير واردة. فترة.

استنتاج:

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

إذا كان لديك أي سؤال ، فلا تتردد في التعليق أدناه.

تحرير: تمت ترجمة هذه المقالة إلى الهولندية - اسمح لي أن أعرف في التعليقات أدناه إذا كنت ترغب في ترجمتها إلى لغتك.