تصميم المدونة 7 مفاتيح لجذب القراء

  • بواسطة
Spread the love

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

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

 

ما هو التصميم المرئي والوظيفي للموقع؟

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

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

يبدو “افعلها بنفسك” (افعلها بنفسك) خيارًا رائعًا ، في الحقيقة أنا عصامي بنسبة 100٪ ، لكن هذا يؤدي إلى العديد من مواقع الويب والمدونات التي لا تفتقر إلى المظهر المرئي فحسب ، ولكن ليس لها أي غرض أيضًا.

اسمح لي بسؤال مباشر للغاية: هل يعجبك موقع الويب الذي تمتلكه وهل تفهمه؟

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

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

يمنع القارئ من الاضطرار إلى التفكير أكثر من اللازم

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

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

أعتقد أنه من هذا الطريق:

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

يجب أن يساعد التصميم في تحقيق كل هدف في مكانه المقابل.

لهذا السبب ، تخيل أنك إذا صممت كل من تلك الأماكن كسوق للخيارات حيث تقصفهم بخيارات مثل: “اشترك في مدونتي ، شارك المنشور على Facebook ، تابعني على Facebook ، شاهد خدماتي ، انقر هنا لطلب عرض أسعار ، فهل نتحدث؟ انظر إلى فئات المشاركات الـ 79 التي أعددتها لك … “

تحصل على هذه الفكرة، أليس كذلك؟ 😉سيكون هذا تصميمًا سيئًا ، فيما يتعلق بالوظائف وإمكانية التنقل.

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

ما هي فوائد التصميم الجيد؟

كل ما ستراه هنا اليوم لا ينطبق فقط في حالة المدونة. في الواقع … ما هو الهدف النهائي لموقعك على الويب؟ أنهم قرأوا مدونتك أو أنهم استأجروا خدماتك؟ أو أنهم يشترون منتجك؟

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

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

1. يجدها المستخدم أكثر إرضاء من الناحية البصرية

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

ما رأيك عندما تتصفح موقع ويب بتصميم يعجبك؟

مثال على الصفحة الرئيسية ذات التصميم الجذاب

حسنًا ، إنك تشعر براحة شديدة ، وأنك تريد الاستمرار في رؤية المزيد من الأشياء ، وحتى ، بوعي أو بغير وعي ، فإنك تدرك الاحتراف لمن يعجبك وراء الويب.

2. التنقل أبسط وأكثر سهولة.

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

هناك خياران هنا.

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

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

لست بحاجة إلى شرح المزيد ، أليس كذلك؟

التصميم الجيد ، باختصار ، يجعل التنقل سهلاً وبديهيًا ، مما يؤثر على رضا المستخدم من خلال العثور بسهولة على ما يبحثون عنه.

3. التأثير على نسب التحويل

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

ما الذي يجب أن تضعه في اعتبارك؟

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

وهذا جيد. جيد جدا.

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

ماذا يمكنك أن تفعل إذا كنت تريد مضاعفة هذا الرقم؟

سهل: بدلاً من 1000 زيارة شهريًا ، تحصل على 2000 زيارة. المشكلة هي أن مضاعفة حركة المرور… ليست بهذه السهولة. قد يكون الخيار الآخر هو: مضاعفة معدل التحويل عن طريق تحسين التصميم. بمعنى ، احصل على ذلك بدلاً من 3 أشخاص من أصل مائة اشتراك ، 6 يفعلون ذلك.

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

4. زيادة متوسط ​​مدة البقاء على موقع الويب الخاص بك

سأستنتج هذه الفوائد من خلال جانبين يؤثران بشكل كبير على تحديد المواقع في Google.

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

لماذا ا؟

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

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

5. زيادة متوسط ​​عدد الصفحات في الزيارة

شيء مشابه لما شرحته للتو ينطبق على هذا المقياس الآخر.

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

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

هذا وجميع الفوائد المذكورة أعلاه تأتي من يد تصميم ويب جيد.

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

7 مفاتيح لتصميم أمثل لموقعك ومدونتك

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

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

بسبب أهمية هذا ، نبدأ بهذا الأساس الأول للتصميم الجيد.

1. هندسة موقع الويب الخاص بك

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

ما الذي يساعد في جعلها مفهومة قدر الإمكان؟

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

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

الصفحة الرئيسية المواطن 2.0

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

الآن دعنا نلقي نظرة على مثال آخر:

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

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

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

2. الألوان

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

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

ولكن ما هي المشاعر التي تنقلها الألوان بالضبط؟

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

وكيف يمكنني الجمع بين الألوان في موقع الويب الخاص بي؟

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

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

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

3. الخطوط

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

على الرغم من أنه في هذه الحالة ، فهو أبسط مما هو عليه في عالم الألوان. لدينا هنا معسكرين (على الرغم من وجود المزيد): خطوط serif وخطوط sans serif.

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

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

على النقيض من ذلك ، ترتبط خطوط sans serif أو sans-serif بمحارف أكثر حداثة ومنمقة وديناميكية … ومن الأمثلة المعروفة للجميع محرف Arial.

هنا يمكنك رؤيته:

ما الخط الذي يجب علي اختياره؟

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

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

توصيتي دائمًا بوضع محرف قوي للعناوين ، مع أو بدون serif لا يهم ، ثم أدق يركز على سهولة القراءة ، للنص. اختياراتي لسنوات هي Montserrat و Open Sans:

الأداة عبر الإنترنت التي اقترحتها من قبل ليست سوى خطوط Google . من هناك يمكنك معاينة جميع الخطوط التي تريدها ؛ لا تنس استخدام المرشحات لعرض الأنواع التي تهمك فقط في كل حالة.

4. موقع العناصر المرئية

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

أ. الفراغات

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

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

في هذا المثال ، نرى كيف تتساوى المسافات الفارغة

ب. القرب أو التجمع

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

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

C. المحاذاة

المحاذاة الصحيحة هي المفتاح حتى يرى القارئ أن التصميم ممتع.

ما هو شعورك عندما ترى شيئًا غير متوافق بشكل جيد؟

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

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

مع محاذاة الأشياء بشكل جيد ، فإننا ندرك كل شيء بالترتيب.

D. التكرار

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

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

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

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

5. امنح الحب لصورك

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

ج: أن يحافظوا جميعًا على نفس خط الرؤية

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

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

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

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

صدقوني ، هذا الأخير ليس مزحة: إنه يظهر 😉

ب. تأكد من أنها لا تزن أكثر من اللازم

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

ولكن لكي تبدو مثلك على الأقل ، إليك بعض الميزات:

  • الدقة : 72 ديسيبل متوحد الخواص (بكسل لكل بوصة)
  • وضع الألوان : RGB (لا CMYK مطلقًا ، مخصص للطباعة)
  • تنسيق الملف : JPG (هو الأكثر استخدامًا نظرًا لضغطه الجيد)
  • التنسيق البديل : PNG (يُستخدم عندما تحتاج إلى الصورة للحفاظ على شفافية الخلفية ، على الرغم من أنها تزن أكثر من JPG)

6. أهمية التصميم سريع الاستجابة للأجهزة اللوحية والهواتف المحمولة

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

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

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

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

7. البرنامج المساعد الوحيد الذي تحتاجه لتصميم موقع الويب الخاص بك: Elementor

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

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

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

حسنًا ، سننتهي ببعض الأمثلة.

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

أمثلة على المدونات جيدة التصميم

1. Haciaelautoempleo.com

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

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

صفحة “نبذة عني”: الهدف هنا هو أن يعرفني القارئ أفضل قليلاً. أخبره قصتي وأشرح كيف وصلت إلى ما أنا عليه الآن.

صفحة «عني»

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

لذلك ، يجب أن يكون التصميم ممتعًا ومشجعًا وجذابًا للقراءة.

مدونة او مذكرة

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

لا يوجد شيء آخر ، الهدف هنا هو أن يملأوا النموذج.

صفحة الاتصال

2. Inteligenciaviajera.com

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

“هل لديك مشاكل في الوقت والمال للسفر؟” أو ” السفر الحي ليس مدينة فاضلة ، إنه ممكن”

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

دعونا لا نغفل الألوان أيضًا ، والتي سنتحدث عنها بعد ذلك.

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

الصفحة المقصودة للاشتراك: يتم إنشاء هذه الصفحة بطريقة محددة بنسبة 100٪ بحيث يمكن للمستخدم الاشتراك أو الخروج فقط.

لا يوجد أي مصادر إلهاء: لا رأس ، لا قوائم ، لا تذييل … لا شيء.

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

الهبوط للاشتراك

صفحة المدونة: باتباع بنية ويب جيدة ، نرى أن محتويات المدونة مفصولة بفئات.

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

مدونة او مذكرة

3. Maidertomasena.com

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

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

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

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

الصفحة «نبذة عني»

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

ثم يعرض أحدث مقالات المدونة بالترتيب ، وفي هذه الحالة يراهن على تصميم عمود واحد.

مدونة او مذكرة

4. Ariadnapastorsanchez.com

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

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

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

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

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

هبوط الاشتراك

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

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

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

مدونة او مذكرة

استنتاج

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

لكن نعم ، إنها مجرد كلمات.

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

سيكون استنتاجي الأخير كما يلي: يمكنك قراءة كل ما تريده عن التصميم ، ولكن فقط تجربة الخيارات والقتال باستخدام الأدوات هي الطريقة التي تتعلم بها.

فقط بالممارسة ، لذلك من المتاعب 😉ولكن اسمحوا لي أولا أن أقدم لكم …