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

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

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

يغطي هذا المقال:

• التسلسل الهرمي البصري
• تخطيطات Gutenberg و Z و F.
• النسبة الذهبية
• حكم الأثلاث
• نظرية اللون
• نظرية الجشطالت
• مساحة سلبية وبساطة
• تصميم مُحسّن للجوّال

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

التسلسل الهرمي البصري

التسلسل الهرمي المرئي هو الأهمية النسبية التي يعينها العارض لمجموعة متباينة بصريًا من الكائنات.

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

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

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

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

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

تخطيطات Gutenberg و Z و F.

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

التخطيطات الثلاثة الأكثر استخدامًا هي تخطيط جوتنبرج وتخطيط Z وتخطيط F. يستخدم كل منها مبادئ تصميم مواقع الويب المميزة.

تخطيط جوتنبرج

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

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

تخطيط Z

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

يقوم العارض بالمسح أفقيًا (من اليسار إلى اليمين) على طول الجزء العلوي من الصفحة ، ويقطع قطريًا من أعلى اليمين إلى أسفل اليسار ، ثم ينتقل أفقيًا إلى أسفل اليمين.

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

تخطيط F.

يعمل التخطيط F بشكل أفضل عندما تريد تضمين المزيد - المزيد من كل شيء ، ولكن بشكل خاص المزيد من النص.

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

النسبة الذهبية

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

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

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

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

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

حكم الأثلاث

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

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

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

نظرية اللون

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

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

فيما يلي أربع طرق مختلفة لاختيار ألوان العلامة التجارية والموقع الإلكتروني التي تنسجم:

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

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

نظرية الجشطالت

تم تطوير نظرية الجشطالت من قبل علماء النفس كإطار لفهم المعالجة المعرفية.

‌ في جوهرها ، تقول نظرية الجشطالت أنه عندما تنظر إلى مجموعة معقدة من المرئيات ، فإنك تقوم بأحد شيئين:

• انظر إلى كلًا متماسكًا أولاً ثم انظر إلى أجزائه
• انظر إلى كلًا محيرًا أولاً ثم حاول تقسيمه إلى أجزاء أو مجموعات أبسط

هناك سبعة مبادئ لتصميم مواقع الويب مستمدة من تلك النظرية الأساسية:

1. قانون التشابه. جمِّع الأشياء حسب التشابه. الأشياء المتشابهة تسير معًا.
2. قانون القرب. قم بتجميع الأشياء وفقًا للمناطق المشتركة أو المسافة النسبية بينها. الأشياء القريبة من بعضها تنتمي معًا.
3. قانون البساطة. يرى الناس الأشياء الغامضة بأبسط العبارات الممكنة. على سبيل المثال ، ستدرك الدوائر المتداخلة على أنها مجرد ذلك - بدلاً من كونها مجموعة من الأقواس.
4. قانون الاستمرارية. من المرجح أن يرى الناس الأشياء على أنها مستمرة أكثر من كونها منفصلة. ستتبع كائنات على طول المسارات أو المنحنيات.
5. قانون الإدراك. يرى الناس الشخصيات - أو النقاط المحورية - والخلفيات. الأشياء تقف فيما يتعلق بأشياء أخرى.
6. قانون الاغلاق. يقوم الناس بملء المعلومات المفقودة لفهم الأشياء. لا يزال الخط المتقطع خطاً.
7. قانون التناظر. يرى الناس الأشياء المتماثلة على أنها مرتبطة.

استخدم هذه المبادئ لمساعدة مشاهديك على تفسير المعلومات التي تقدمها لهم.

مساحة سلبية وبساطة

هذان الاثنان ينتميان معًا لأن كلاهما مبادئ تصميم مواقع الويب المضادة للفوضى.

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

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

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

تصميم مُحسّن للجوّال

من أهم مبادئ تصميم مواقع الويب التأكد من أن موقعك جذاب وسهل الاستخدام على جميع الأجهزة.

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

‌ لا يمنع هذا إحباط الزائر فحسب ، بل إنه أيضًا عامل مهم لتحسين محرك البحث (SEO). تأخذ خوارزمية Google بالتأكيد تحسين الهاتف في الاعتبار.

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

مبادئ تصميم الموقع - يمكنك فعل ذلك!

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

لديك الكثير من مبادئ تصميم مواقع الويب المفيدة لمساعدتك في صياغة الموقع المثالي ، ولكن أهم النقاط هي ما يلي:

1. يساعدك التسلسل الهرمي المرئي في جذب انتباه المشاهد أينما تريد.
2. الاقل هو الاكثر.
3. التوافق مع الجوال لم يعد كافيًا. يجب أن تكون مُحسَّنًا للجوّال.

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