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

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

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

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

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

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

1) الطباعة والخطوط

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

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

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

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

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

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

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

تعد الصفحة الرئيسية لـ Elegant Themes حاليًا مثالًا مثاليًا على ذلك.

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

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

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

2) إدارة الصور والألوان

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

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

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

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

عمليًا ، إذا لم تكن متأكدًا من كيفية اختيار ألوان معينة ، فإليك 10 أدوات لاقط ألوان

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

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

3) دعوة قوية لاتخاذ إجراءات

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

فيما يلي مثال على كيفية تنفيذ دعوة للعمل لعميل حديث.

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

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

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

• معلومات عنا
• خدمات
• الشهادات - التوصيات
• مدونة او مذكرة
• اتصل

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

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

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

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

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

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

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

سلسلة الختام

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

الجزء الأول

• تحضير طريقة تفكيرك
• كيف تتعلم اتجاهات التصميم الجيد
• احصل على ردود الفعل والنقد البناء على عملك

الجزء 2

• اتبع قاعدة الأثلاث
• التخطيط والتدفق
• التسلسل الهرمي المرئي

الجزء 3

• الطباعة والخطوط
• الصور واللون
• دعوة قوية لاتخاذ إجراءات

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

إليكم جميعًا أن نصبح أفضل مصممي ويب Divi كل يوم!

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