4 مبادئ رئيسية لتصميم مواقع الويب

 

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

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

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

1- أنظمة الشبكة (Grid Systems)

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

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

كلمة للمصممين: حاول العديد من المصممين تجنب الشبكة بما يسمى "الإبداع" ؛ العديد من هذه المواقع أصبحت غير مقروءة.


لتسهيل حياتنا ، ظهر عدد كبير من أنظمة الشبكات الجاهزة والتي تكون سريعة الاستجابة ومتوافقة مع لغات البرمجة الرئيسية ويمكن تنزيلها مجانًا بشكل عام.

بعض الخيارات المشهورة هي 960.gs و Simple Grid و Golden Grid System ، لكن قائمة الخيارات الجيدة هائلة حقًا ، وبعضها أكثر تعقيدًا من البعض الآخر.

2- التسلسل الهرمي المرئي

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

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

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

3. الخطوط الآمنة للويب

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

اليوم ، لا يزال صحيحًا أن بعض الخطوط مدعومة من قبل معظم المتصفحات بينما لا تدعم الخطوط الأخرى ، ولكن عدد خيارات الويب الآمنة قد انفجر بفضل اعتماد ما يُعرف باسم تضمين @ font-face في معظم المتصفحات الحديثة. في الواقع ، يشتكي العديد من المصممين من وجود الكثير للاختيار من بينها.

وتشمل خدمات الخط القائم على الرسوم Typekit ، WebINK و Fontspring . يمكنك العثور على خطوط مجانية لطيفة أيضًا ، إذا قمت ببعض البحث من خلال الخدمات المجانية مثل Google Web Fonts.

الآن بعد أن عرفت أين تبحث ، هناك فقط بعض القواعد العامة التي يجب وضعها في الاعتبار:

• خطوط Serif مخصصة للعناوين الرئيسية

• في تصميم الويب ، يتم حجز خطوط serif دائمًا للعناوين الرئيسية ، لأنه يصعب قراءتها بأحجام أصغر. يجب أن يكون النص الأساسي بشكل عام sans serif.

• احتفظ بالخطوط في حدها الأدنى

• لتقليل الفوضى ، احتفظ بعدد الخطوط المختلفة على موقع الويب إلى الحد الأدنى. اثنان أو ثلاثة على الأكثر.

• لا تشغل مساحة كبيرة

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

4. الصور والألوان

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

للألوان:

• حافظ على الحد الأدنى من لوحة الألوان

• مثل الخطوط ، ما عليك سوى التمسك بـ 2 أو 3. يجب عليهم بالطبع تكرار العلامة التجارية للمضيف ، أثناء تقديمهم لتسليط الضوء على المناطق المهمة ، كما هو مذكور في قسم "التسلسل الهرمي المرئي".

• ضع في اعتبارك عمى الألوان

• أحد الاعتبارات الأخرى التي تستحق الاحتفاظ بها في الجزء الخلفي من عقلك هي حقيقة أن ما يقرب من 5 ٪ من السكان (الذكور) يعانون من عمى الألوان ، لذا احترس من أزواج الألوان الخاصة بك.

للصور:

• حافظ على الحد الأدنى من الحركة.

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

• اختر الصور بعناية

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

• التزم دائمًا بجميع قيود ترخيص الصور المخزنة

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

• حافظ على أحجام الملفات صغيرة

• تأكد من أن أحجام الصور الخاصة بك منخفضة قدر الإمكان (دقة الويب 72 نقطة في البوصة). غالبًا ما تمثل الصور 60٪ أو أكثر من حجم صفحة الويب / وقت التحميل.