3 مبادئ فعالة لتصميم الويب "لغير المصممين"

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

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

دعنا الحق في ذلك!

3 مبادئ فعالة لتصميم الويب "لغير المصممين"

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

1) حكم الأثلاث

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

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

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

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

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

هذا المثال يتبع قاعدة الأثلاث.

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

الآن دعونا نلقي نظرة على الصورة دون تحديد قاعدة تقاطعات الأثلاث.

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

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

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

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

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

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

2) التخطيط والتدفق

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

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

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

دعونا نلقي نظرة على ما أعنيه.

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

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

3) التسلسل الهرمي المرئي

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

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

فيما يلي مثال على تصميم حديث قمت بإنشائه مع وضع التسلسل الهرمي في الاعتبار:

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

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

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

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

في الختام

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

إذا كان لديك أي مبادئ تصميم أخرى ترغب في مشاركتها ، فأخبرنا بذلك في التعليقات أدناه!

غدًا: 3 مجالات تصميم مهمة للتركيز عليها في كل بناء موقع

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!