10 عناصر تصميم الويب التي لا يجب أن تغيبها
عندما يتعلق الأمر بتصميم وبناء مواقع الويب ، فإنه لا يحدث أبداً بسرعة كافية.
بالنظر إلى هذه الوتيرة السريعة ، غالبًا ما يتم ترك الكثير من التفاصيل الصغيرة المطلوبة في نهاية المطاف لبناء موقع الويب خارج عملية التصميم. في حين أن هذه التفاصيل قد تكون بسيطة ، إلا أنها تأخذ موقعًا إلكترونيًا من رائع إلى رائع حقًا.
غالبًا ما تكون هذه التفاصيل سهلة الفهم لأنها لا تقود المظهر العام للموقع. المشكلة هي أنه عندما يعمل فريق التطوير الخاص بك من خلال التصميم ، سوف يضطر إلى تصميم وإنشاء هذه العناصر لك على أي حال.
يمكنك ضبط دورة الإنتاج بحيث يكون لدى المطورين وقت لإرجاع هذه الأصول إليك ، ولكن لماذا لا يتم إجراء كل ذلك في المقدمة حتى تكون العملية أكثر نظافة بكثير؟
والأسوأ من ذلك ، قد يقرر فريق التطوير المضي قدما وخلق الأصول فقط أثناء ذهابهم.
في حين أن العديد من مطوري البرامج لديهم اهتمام كبير بالتصميم ، فإن المبدع المسؤول عن تصميم الموقع يجب أن يكون هو الذي يخطط لهذه العناصر. يمكن أن يكون للتخطيط المسبق للفروق الدقيقة الأساسية تأثير عميق على جودة المنتج النهائي.
ينبع كل عنصر مشمول في هذه المقالة من سؤال يطرحه مطور البرامج على المصمم في حالة فقدان عنصر ما من التصميم.
لنستكشف العناصر الأساسية العشرة التي يجب وضعها في الاعتبار عند قيامك بتلميع موقعك على الويب.
1. الروابط
على الرغم من أن تصميم الوصلات المختلفة للرابط هو أمر أساسي إلى حد ما ، إلا أنه قد يفاجئك عدد المرات التي يتم فيها التغاضي عن جميع التفاصيل الإضافية. تضمين الحالات التالية لجميع الروابط على الصفحة:
- عادي
هذه هي الحالة الافتراضية للرابط ؛ أي لم يتم تحريكه أو النقر عليه أو الإشارة إلى عنوان URL قام المستخدم بزيارته بالفعل. هذا هو تنسيق الارتباط الذي تغطيه غالبية المصممين دائمًا. - زار
هذا رابط لا يتم تمريره أو النقر فوقه ولكن تم زيارة هدفه بواسطة المستخدم. - نشيط
الرابط النشط هو الذي ينقر عليه المستخدم حاليًا. سيقوم معظم المطورين بإجراء نسخ متماثل لحالة التمرير هنا إذا لم يتم توفير نمط لهم. - يحوم
وأخيرًا ، فإن حالة التمرير هي ما يبدو عليه الرابط عندما يضغط عليه المستخدم. هذه والدول العادية هي التي يعدها معظم المصممين.
أحد التفاصيل التي يتم تجاهلها بشكل متكرر هو أن هذه الولايات المختلفة تحتاج إلى التخطيط لجميع مناطق موقع الويب. على سبيل المثال ، تحتوي العديد من مواقع الويب على نسخة نصية سوداء مقابل خلفية فاتحة ، ولكن يتم عكس التباين في التذييل. تحتاج إلى التخطيط لجميع السياقات المختلفة للروابط الموجودة في الصفحة.
على Full Moon BBQ على سبيل المثال ، نرى روابط حمراء أساسية داخل منطقة المحتوى والروابط البيضاء الأساسية في التذييل أدناه. مرة أخرى ، تفاصيل صغيرة ولكنها مهمة مع ذلك.
2. النماذج
بالنسبة للعديد من المصممين ، يكون تكوين النماذج أمراً بالغ الأهمية ومن المستحيل التغاضي عنه. ومع ذلك ، بالنسبة للكثيرين غيرهم ، يبدو أنه يأتي بعد فكر بعيد.
المشكلة في الموقف الأخير هي أن النماذج غالباً ما تمثل الطريقة الحقيقية الوحيدة لتحويل الزائرين إلى عملاء. وبدون التخطيط والتصميم المناسبين ، فإن إمكانية استخدام هذه النماذج يمكن أن تتعطل ، مما يؤدي إلى شل نقطة التحويل الوحيدة في الموقع. يعد التحضير لهذه العناصر أمرًا ضروريًا ، حتى إذا بدا أقل ملاءمة للعملاء من الألوان والعلامات التجارية والصور.
اثنين من أهم الاعتبارات عند وضع نموذج:
- تسمية النموذج
تقوم النماذج عادة بجمع البيانات الشخصية التي يرفض المستخدمون تقديمها. وعلى هذا النحو ، فإن إبلاغ المستخدمين بالهدف الدقيق للنموذج أمر صحيح. - حقول الإدخال والتسميات
ثانيًا ، خطط لكيفية وضع حقول الإدخال للنموذج على الصفحة وكيف سيتم تصميم التسميات لهذه الحقول وتوجيهها بالنسبة للحقول.
عندما تُترك النماذج إلى الإعدادات الافتراضية ، يمكن أن تبدو غريبة. ولكن مع الاستعداد المناسب ، سيبدو الموقع سلسًا وأكثر فاعلية. دعونا ننظر إلى مثال رائع يجب أن يكون قد بدأ بالتخطيط الجيد:
هذا النموذج النقدي للأعمال رائع كان من الواضح جيدا مدروسة. تم النظر بعناية في الرسالة والغرض من الصفحة بالكامل. من العنوان والمقدمة إلى تخطيط كل مجموعة من الحقول ، مع تصنيفاتها وأنماط التحكم فيها ، يعد هذا النموذج نموذجًا للتخطيط.
التخطيط للنماذج يقودنا بالفعل إلى عدة اعتبارات أخرى ...
3. سلوك زر
يمكن استخدام الأزرار في جميع أنحاء موقع الويب لأغراض متنوعة ، ولكن يبدو أنها مهملة في كثير من الأحيان ، كما هو الحال مع حالات الأزرار المختلفة. الحالات الأربع من زر هي:
- افتراضي
هذه هي الحالة الافتراضية لزر ، في انتظار النقر. معظم المصممين يغطيون هذا لكن يغيب عن الآخرين. - يحوم
تظهر حالة التمرير عندما يضغط المستخدم فوق الزر. هذه الحالة مفيدة للإشارة إلى المستخدم أن الزر عنصر قابل للتنفيذ. - انقر
وبمجرد أن ينقر المستخدم على الزر ، تشير هذه الحالة بصريا إلى أنه قام بالنقر فوقها. يمكن أن يساعد توفير هذا الإشعار المرئي في الحد من إحباط المستخدمين. - معاق
ربما تكون حالة تعطيل زر ما هي الأقل استخدامًا ولكنها قد تكون مفيدة جدًا للمطورين. نادراً ما يتم تخطيط هذه الحالة ما لم يقم المصمم بإعداد عملية التحقق من صحة النموذج (راجع القسم التالي).
مثل العديد من حالات الارتباطات المختلفة ، تأكد من مراعاة الحالات المختلفة للأزرار المستخدمة في موقعك على الويب. من نماذج تسجيل الدخول المنبثقة إلى حقول البحث إلى نماذج الاشتراك في النشرة الإخبارية ، ستحتاج كل هذه الأزرار إلى أنماط متوافقة.
4. نموذج التحقق
التفاصيل الهامة ذات الصلة هي التحقق من صحة النموذج. هذه هي النقطة الحرجة حيث يتواصل موقع الويب مع متطلبات المستخدم والأخطاء في النموذج. هناك ثلاثة أمور أساسية يجب وضعها في الاعتبار:
- الحقول المطلوبة
يجب الإشارة إلى جميع الحقول المطلوبة. في معظم الأحيان ، يتم ذلك باستخدام علامة النجمة ، كما هو موضح في يرجى البدء من البداية :
- التحقق في الوقت الحقيقي
يمكن إجراء بعض عمليات التحقق في الوقت الفعلي أثناء إكمال المستخدم للنموذج. هذا النوع من التحقق من الصحة يُعلم المستخدم بأسرع ما يمكن عن أي مشاكل في البيانات التي قاموا بإدخالها. هذا يمكن أن يتحقق بشكل جيد للغاية مع هذا jQuery validation plug-in :
- بعد التحقق من الصحة
يحدث هذا النوع من التحقق بعد قيام المستخدم بإرسال النموذج. غالباً ما يتم تكرار النمط المستخدم للتحقق من الصحة في الوقت الحقيقي ، ولكن هناك خيار آخر هو تجميع كل الأخطاء في رسالة واحدة ، كما هو موضح في خوار :
5. رسائل الحالة: الأخطاء ، التحذيرات ، التأكيدات ، إلخ.
يحتاج المستخدمون عادةً إلى نوع من التعليقات بعد تنفيذ إجراء على موقع الويب الخاص بك. السيناريو الأكثر احتمالا هو بعد تقديم نموذج ، ولكن يمكن أن تحدث العديد من الأحداث الأخرى كذلك. فكر بعناية في موقعك على الويب والإجراءات التي قد يتخذها المستخدمون ، والتخطيط للرسائل التي يحتاج إليها موقع الويب للاتصال.
على الحياة اليوم ، نرى رسالة التحقق من الصحة التي يمكن أن تعمل بسهولة كنمط عالمي لرسائل الخطأ. ومع تغيير طفيف في الألوان والرموز ، يمكن أيضًا استخدامه لتحذير أكثر دقة أو حتى رسائل تأكيد:
6. توسيع الخلفية على شاشات أكبر
اعتمادًا على أسلوب موقع الويب ، يمكن أن تكون عناصر الخلفية مشكلة بالنسبة لمطوري البرامج. معظم الخلفيات بسيطة ولا تتطلب الكثير من التحضير ، ولكن بعضها معقد بسبب التدرجات والأنماط والصور.
وبالنظر إلى أن أجهزة العرض الكبيرة أصبحت أكثر شيوعًا وأكثر شيوعًا وأن معظم التصميمات مخطط لها لخط أساس بعرض 960 بكسل ، يتم ترك الكثير من العقارات المعروضة على الشاشة مفتوحة. إذا كانت خلفيتك تتضمن أي شيء معقد عن بعد ، فسيتعين عليك التخطيط لكيفية امتداده لملء الشاشات الأكبر حجمًا.
في المثال الذي قمت ببنائه في الأسفل ، كان عليّ أن أتسع لنسيج خشبي يمتد في جميع الاتجاهات. ليس هذا هو الشيء الذي تريد أن تتعامل معه مطوِّرًا ثقيلًا.
7. عناصر HTML الأساسية
بالنسبة إلى مواقع الويب ذات النسخ الكبيرة ، يعد تصميم عناصر HTML الأساسية وتصميمها أمرًا أساسيًا ويجب عدم تجاهله. ولكن في العديد من مواقع الويب الموجهة للتسويق التي لها تخطيط مشغول وأسلوب مرئي متميز ، يتم نسيان العناصر الأساسية. وبالطبع ، لا يحصل المطور أبداً على إمكانية إنشاء موقع على الويب قبل الاضطرار إلى إنتاج قالب قياسي قياسي على أي حال.
في ما يلي العناصر الأساسية للتخطيط دائمًا: الفقرات ، والعناوين من 1 إلى 6 ، والقوائم غير المرتبة والمرتبة ، والبيانات المجدولة ، وحقول النموذج ، والصور ، والنص الغامق والمائل.
على العديد من المواقع التي أعمل عليها ، وضعت دليلًا للأسلوب لمساعدة المطورين ، شيء من هذا القبيل:
8. رسائل البريد الإلكتروني الموقع
شيء واحد لا أرى أي خطة مصمم لرسائل البريد الإلكتروني ولدت الموقع. من السهل تفويت مثل هذا العنصر الأساسي لأنه لا يمثل التركيز الأساسي للموقع. ومع ذلك ، فإن البريد الإلكتروني يعد أداة قوية يمكنها تعزيز الخدمة وتوسيع نطاقها.
اقتراحي هو مراجعة محتويات الموقع بعناية في مرحلة التخطيط للبحث عن أي رسائل البريد الإلكتروني التي قد يتم إرسالها. بعض من الأكثر شيوعا هي:
- تأكيد الاشتراك في القائمة البريدية ،
- تأكيد التسجيل ،
- تأكيد إكمال النموذج (مثل نموذج الاتصال) ،
- التحقق من الأمر بعد الشراء.
إذا كنت تريد حقاً تفجير عقول عملائك والمطورين ، فقم بإعداد قالب التسويق عبر البريد الإلكتروني لموقع الويب أيضًا. ستوفر للمستخدمين انتقالًا سلسًا من موقع الويب إلى البريد الوارد ، وستحافظ على تحكم دقيق في العلامة التجارية بأشكالها المختلفة.
9. امتداد الصفحة
أما مسألة كيفية امتداد التصميم لاستيعاب المحتوى المتغير ، فنادراً ما يتم التعامل معه ولكن يمكن أن يكون حاسماً ، اعتماداً على أسلوب الموقع. لنلقِ نظرة على مثال يمكن أن يحدث فيه هذا الخطأ:
Full Moon BBQ لديه صفحة رئيسية ضيقة. لا يسمح هذا التصميم بالكثير من الحركة أو التغيير في المحتوى. كل شيء له حجم وموضع معين. ما الذي يحدث إذا قرر المالكون إطالة رسالة الترحيب أو إضافة صورة؟ لحسن الحظ ، لقد خططوا لهذا. كما ترى في هذه النماذج ، قمت بتحرير الصفحة لتضمين النص المزدوج. تمتد هذه الصفحة بشكل مثالي وتستوعبها:
يمكن أن يكون إعداد نسخ بديلة من تخطيط يحتوي على المزيد من المحتوى مفيدًا للغاية في توضيح كيفية التخطيط لمثل هذا السيناريو.
10. صور متحركة: النوافذ المنبثقة ، تلميحات الأدوات ، التحولات ، إلخ.
على موقع HTML و CSS قياسي (أي بدون Flash) ، تكون الحركات والتحولات سهلة الإهمال. وعندما يتم التغاضي عنها ، فإنها في كثير من الأحيان لا يمكن استيعابها على الإطلاق. لذا ، إذا كانت الرسوم المتحركة حرجة ، فإن أفضل رهان هو تزويد المطورين بعينة من الكيفية التي يجب أن يعملوا بها حتى يعمل المنتج كما ينبغي.
بعض من أكثر أماكن الرسوم المتحركة شيوعًا في:
- تلميحات
تلك النوافذ المنبثقة الصغيرة عندما يقوم المستخدمون بالمرور فوق العناصر. - الدوارات صورة
تعرض عروض شرائح الصفحة الرئيسية كل الغضب ، وتتوفر مجموعة كبيرة من الخيارات للتحويلات والأنماط. - صندوق مضئ
لا يمكنك فقط تصميم العلبة الخفيفة نفسها ، بل أيضًا الانتقال إليها.
كل من هذه العناصر المتحركة لها أسلوب مرئي متميز يجب استيعابه من تلقاء نفسها.
لماذا يجب أن أهتم؟
يبدو أن العديد من العناصر المعروضة هنا أكثر فائدة للمطورين من المصممين. لكي نكون منصفين ، هذا صحيح جزئيا: إذا قمت بإعداد كل هذه العناصر في وقت مبكر ، فإن المطورين سوف يحبونك. هذه هي أنواع الأشياء التي يتعب المطورين من طلبها أو من الاضطرار إلى اكتشافها بأنفسهم.
ومع ذلك ، من خلال القيام بكل هذا العمل في وقت مبكر ، فإنك تحتفظ بالمطورين من التخمين ، وبذلك يمكنك التحكم في التصميم. ومن خلال الحفاظ على التحكم في التصميم ، لديك فرصة أكبر بكثير لأن تكون قادرًا على إضافة نوع من التلميع الذي يحول الموقع العادي إلى موقع متميز. بعض المصممين يشيرون إلى هذا على أنه الصلصة السرية التي تجعل تصاميمهم تغني.
وإذا لم يكن هذا دافعًا كافيًا ، فكر في هذا. إن المصممين الذين يخططون لهذا الغرض بشكل جيد ويقدمون حزمة كاملة هذه هي فقط أكثر قيمة بشكل أساسي. فهم لا ينتجون منتجًا عالي الجودة فحسب ، بل يقللون أيضًا من تكلفة الإنتاج. هذا يعني وجود مجال أكبر للربح ، مما يجعل الجميع سعداء بالطبع.
لذا ، ضع كل التفاصيل الدقيقة في ذهنك ، واستمتع بالتخطيط لموقعك على الويب. بصراحة ، هذه التفاصيل هي نصف متعة التصميم للويب ، تلك الوسيلة المتغيرة باستمرار التي تستوعب تفاعل المستخدم وتغيير المحتوى.
باتريك ماكنيل كاتب مستقل ، مطور ومصمم. على وجه الخصوص ، يحب الكتابة عن تصميم الويب ، وتدريب الناس في تطوير الويب وبناء المواقع. أحدث مشروع كتاب باتريك هو دليل المصمم على شبكة الإنترنت . يتضمن العديد من مواضيع إضافية على غرار هذه المقالة. يمكنك معرفة المزيد حول هذا الموضوع TheWebDesignersIdeaBook.com . اتبع باتريك على تويتر designmeltdown .
ماذا تصمم لأن كل شخص آخر ينسى؟ هل سبق لك أن عرضت مثل هذه الإضافات لعملائك؟ ما أنواع الأشياء التي تعثر عليها للمطورين الذين يطلبون منك دائمًا إضافة إلى التصميم؟