اثرات فضای سفید برای طراحی صفحه وب‌ سایت

اثرات فضای سفید برای طراحی صفحه وب‌ سایت

اگر شما یک طراح وب یا کارفرمای یک پروژۀ طراحی سایت هستید، احتمالاً با اصطلاحاتی مواجه می‌شوید که ممکن است برایتان تازگی داشته باشد یا اطلاع دقیقی از چگونگی و کارکردهای آن نداشته باشید. سعی ما این است که در سلسله مطالبی که در مجلۀ نیافام منتشر می‌شود، شما را  با مفهوم کلّی و نکات برجستۀ پیرامون این اصطلاحات آشنا کنیم.

یکی از این اصطلاحات، White Space یا فضای سفید است.

برای آشنایی با این مفهوم و پذیرش قابلیت‌ها و مزایای قابل توجه آن، باید سلایق شخصی و الگوهای سنتی طراحی وب که در ذهن ما شکل گرفته‌است را مورد نقد قراردهیم. منظور ما این است که شما به عنوان مدیر یک پورتال سازمانی یا یک وب‌سایت ساده باید سلایق شخصی و اتکا به دانسته‌های شخصی خود را کنار گذاشته و به کاربر نهایی (End User) توجه نمایید. دنیای طراحی و مخصوصاً طراحی وب، امروزه موفقیت و اثربخشی فعالیت‌ها را به‌شدت وابسته به کاربر نهایی می‌داند و به موجب آن، مفهوم پیشرویی به نام طراحی تجربه کاربری یا UX Design توسعه یافته و بصورت چشمگیری شایع شده‌است. بنابراین اگر چنین دیدگاهی ندارید، نگرش خود را تغییر دهید تا از گروه برنده‌ها عقب نمانید. با ذکر این مقدمه، به اصل مطلب می‌پردازیم ...

فضای سفید چیست؟

فضای سفید، لزوماً سفیدرنگ نیست و به فضای درون و میان عناصر صفحۀ وب‌سایت گفته می‌شود و مانند یک پس‌زمینه عمل می‌کند که تمام عناصر طراحی را کنار هم نگه داشته و آنها را برجسته و جلوه‌گر می‌سازد.

به همان دلایلی که در مقدمۀ این مطلب به آن اشاره کردیم، فضای سفید در پروژه‌های طراحی اغلب باعث ایجاد اختلافاتی میان طراح و کارفرمای پروژه می‌شود. طراح با هدف پیروی از روندهای مدرن و پیاده‌سازی صحیح مفاهیم UX، تمایل به استفاده بیشتر از فضای سفید دارد اما مشتری اعتقاد دارد فضاهای خالی درون طرح، اتلاف فضا است و باید آنها را تا حد ممکن با محتوا و عناصر بصری پر نمود. بنابراین طراحان باید مزایای استفاده از فضای سفید را در طراحی بدانند تا بتوانند از طرح خود دفاع کنند.

8 نکته ساده برای نوشتن محتوای جذابحتما بخوانید: 8 نکته ساده برای نوشتن محتوای جذاب

فضای منفی یا  Negative Space عبارت دیگری است که برخی طراحان بجای عبارت فضای سفید بکار می‌برند. طراح از این فضا به عنوان ابزاری برای سازماندهی متن و کامپوننت‌ها استفاده نموده و از همه مهمتر، توجه کاربر را به بخش خاصی از صفحه جلب می‌کند. یک مثال معروف و واضح در این زمینه، صفحۀ اصلی گوگل است که بهره‌برداری ویژه‌ای از فضای سفید کرده و نظر کاربر خود را معطوف به مهمترین کارکرد خود می‌کند: "جستجو"

ما ماشین نیستیم و همانند تمام انسان‌ها از اینکه با اطلاعات زیادی بمباران شویم بیزاریم. فضای سفید، ما را آرام می‌کند و به ما اجازۀ تنفس و احساس اعتماد می‌دهد. یک طراح باید با فضای سفید مانند بقیۀ عناصر چارچوب طرح رفتار کرده و میان آن و عناصر دیگر layout، توازنی بهینه و اثربخش ایجاد نماید.

فضای سفید ماکرو (Macro) در مقابل فضای سفید مایکرو (Micro)

فضای سفید یک چارچوب طراحی (Layout) را اغلب با نسبت حجم فضای سفید مایکرو به فضای سفید ماکرو دسته‌بندی می‌کنند. حالا نوبت این است که این دو مفهوم را برای شما توضیح دهیم.

فضای سفید مایکرو یا Micro White Space فضای کوچک میان عناصر طراحی است ...

  • فضای میان خطوط
  • فضای میان پاراگراف‌های یک بلوک محتوا
  • فضای میان تصاویر مجموعه‌ای از تصاویر که بصورت منظم کنار هم قرار گرفته‌اند
  • فضای میان لینک‌های درون یک منوی ناوبری

این گونه فضاها اساساً تأثیر مستقیم بر قابلیت خواندن محتوا (Content Legibility) دارد. استفاده از آنها اطراف یک پاراگراف و میان خطوط آن، باعث افزایش سرعت خواندن کلمات و آسان‌تر نمودن درک محتوا می‌شود.

فضای سفید ماکرو، فضای خالی میان بلوک‌های محتوا و فضای خالی اطراف چارچوب طراحی است و در حقیقت، یک حائل برای کل طراحی محسوب می‌شود. فضای سفید ماکرو از نوع مایکرو برای کاربران وب‌سایت محسوس‌تر می‌باشد.

اگر صفحۀ وب اطلاعات زیادی در چارچوب طراحی داشته باشد، فضای سفید ماکروی کمی در دسترس خواهد بود و در مقابل، فضای سفید مایکرو بسیار افزایش میابد چراکه کاربر نهایی و احساسی که از دیدن محتوا بدست می‌آورد بسیار اهمیت دارد.

اثرات فضای سفید برای طراحی صفحۀ وب‌سایت

فضای سفید مایکرو بطور قابل توجهی بر توانایی خواندن محتوا توسط کاربر تأثیر دارد تا حدی که بعضاً برای استفاده از مزایای آن، اندازۀ قلم متن را کوچکتر می‌کنند.

در سطح ماکرو، فضای سفید منتقل‌کنندۀ حس کیفیت و پرستیژ بالا است. هر چه این نوع فضای سفید بیشتر باشد، طراحی صفحه بهتر و مجلل‌تر به نظر می‌رسد.

فضای سفید میان متون و پاراگراف‌ها به درک بهتر محتوا کمک شایانی می‌کند، توجه مخاطب را به محدوده‌های خاصی از محتوا جلب می‌کند و به تعامل بیشتر کاربر با عناصر صفحه کمک می‌کند.