لماذا نستخدم White Space في تصميم الويب وأفضل الممارسات [2022]

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

ماذا يعني الفضاء الأبيض في تصميم الويب؟

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

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

4 أنواع مختلفة من ممارسات الفضاء الأبيض في التصميم

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

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

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

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

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

لماذا تزداد شعبية الفضاء الأبيض في تصميم الويب يومًا بعد يوم؟

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

تحسين قراءة موقع الويب الخاص بك

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

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

اجذب انتباه الزوار على الفور

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

زيادة سرعة تحميل الموقع

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

الدليل الإرشادي لتنفيذ تصميم المساحة البيضاء في موقع الويب الخاص بك

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

استخدم أدوات التخطيط الشبكي لتصميم المساحات البيضاء

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

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

تطبيق مبدأ الجشطالت للقرب

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

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

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

التأكيد على التسلسل الهرمي المرئي

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

خلق تركيز لعين المستخدمين

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

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

ليس عليك استخدام اللون الأبيض دائمًا!

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

أفضل 5 ممارسات لتصميم المساحات البيضاء قيد التنفيذ

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

جوجل

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

تفاحة

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

بصندوق الإسقاط

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

سكوير سبيس

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

العنصر

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

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