فضای سفید در طراحی سایت

4.9/5 - (9 امتیاز)

در این مقاله ، ما  توضیح می دهیم که چگونه از فضای سفید استفاده کنید و مهمتر از همه ، نمونه هایی از اجرای خوب فضای سفید را به بررسی خواهیم کرد، با ما هراه باشید

فضای سفید در طراحی وب: تعریف و روشها

فضای سفید یا  فضای خالی بین عناصر موجود در یک وب سایت  ابزاری قدرتمند است که می تواند به صورت هوشمندانه  توجه کاربر را متمرکز کند .

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

فضای سفید  می تواند با ایجاد  شکاف و فاصله برای خوانایی بهتر ، تجربه کاربر را بهبود بخشد.

با این حال ، استفاده از فضای سفید باید درست انجام شود.

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

فضای سفید یا فضای منفی اصطلاحی از طراحی است که ما برای اشاره به پوچی اطراف یا درون عناصر در طراحی استفاده می کنیم.

اگر به صفحه اصلی وب سایت The New Yorker نگاهی بیندازید ، نمونه هایی از آن را مشاهده خواهید کرد

تصویر سایت استفاده از فضای سفیدnewyorker

فضاهای بزرگی که آرم نیویورکر را قاب می کنند:

سربرگ نیویورکر استفاده از فضای سفید

فاصله های مساوی که هر یک از لینک های فهرست  ناوبری را جدا می کند:

فضای سفید میان فهرست ناوبری

بافرهای ساخته شده در اطراف هر یک از بلوک های محتوای صفحه اصلی:

فضای سفید بین محتوا

به نسخه وب سایت در سال 2008 نگاهی بیندازید و متوجه خواهید شد که فضای سفید چه تفاوت بزرگی ایجاد می کند!

استفاده از فضای سفید در نسخه قدیمی سایت

فضای سفید در نسخه قدیمی این سایت  هم وجود دارد ، هر چند به اندازه آنچه امروز در وب سایت می بینیم ، زیبا و کارآمد نیست.

فضای سفید از کجا آمده است؟

اصطلاح “فضای سفید” تا حدودی گمراه کننده است. در حالی که برخی از نمونه های فضای سفید در واقع سفید هستند (مانند مثال نیویورکر در بالا) ، اما معمولاً چنین نیست.

برای اینکه بفهمیم چرا این نوع روش طراحی فضای سفید نام  گرفته است ، باید بررسی کنیم که از کجا آمده است.

در حالی که هیچ شخصی برای ایجاد فضای سفید یا دادن نام به آن استناد نمی کند ، می توانیم آن را به افراد زیر نسبت دهیم:

اول هنرمندان و خوشنویسان چینی قرن بیستم است . فضاهای خالی روی کاغذ سفید که روی آن کار می کردند به عنوان فضای اتلاف شده تلقی نمی شدند. آنها معنای پوچی را پیدا کردند و معتقد بودند که این امر به درک کلی تصویر کمک می کند.

 

آنها از این موضوع به عنوان “طراحی سفید” یاد کردند.

 

کارول داگلاس درباره ارزش فضای سفید در هنر چین توضیح می دهد:

 

“در هنر چین انتظار می رود که فضای خالی اطلاعات را از طریق کمبود تصویر انتقال دهد. اندازه ها و خطوط شکل های خالی باعث ایجاد ریتم و انسجام می شود”

 

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

 

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

انواع مختلف فضای سفید که باید درباره آنها بدانید

به طور معمول ، ما فضای سفید را به دو دسته تقسیم می کنیم:

فضای سفید میکرو

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

  •  نامه ها
  • کلمات
  •  پاراگراف ها
  • پیوندهای پیمایش
  • تصاویر یا محتوا در یک شبکه
  • فیلد های یک فرم

 

هدف از فضای سفید میکرو بهبود خوانایی محتوای شما است.

 

از طرف دیگر ، فضای سفید ماکرو به مناطق بزرگتر و فاقد محتوا اشاره دارد. به عنوان مثال :

  •  در حاشیه یک وب سایت
  •  اطراف لوگو در سربرگ
  • بین بخشهای یک صفحه
  •  در میان تصاویر
  •  جدا کردن محتوای اصلی و نوار کناری
  • اطراف دکمه ها

 

هدف از فضای سفید ماکرو بهبود طرح بندی وب سایت و سهولت درک و پیمایش آن است.

فضای سفید منفعل در مقابل فضای سفید فعال

فضای سفید را می توان به دسته های منفعل و فعال تقسیم کرد.

فضای سفید منفعل به شکاف هایی گفته می شود که به طور طبیعی در طراحی یا تایپوگرافی وجود دارد. از نظر زیبایی شناسی می توانید کنترل کنید که این فضاها چقدر بزرگ یا کوچک هستند

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

چرا باید از فضای سفید در وب سایت ها استفاده کنید؟

در اینجا برخی از مهمترین دلایل ایجاد فضای سفید در هر وب سایتی که طراحی می کنید آورده شده است:

این یک سبک کلاسیک است!

برخلاف روندهای طراحی وب که ممکن است فقط برای مدت کوتاهی خوب به نظر برسند یا مرتبط باشند ، فضای سفید یک کلاسیک ماندگار است. فقط ببینید چه مدت از آن می گذرد و چگونه از خوشنویسی چینی به کارهای مدرنیست – و اکنون به وب رسیده است.

منجر به طراحی جذاب تر می شود!

ورود به وب سایت بسیار شبیه ورود به خانه شخصی است. تنها چند ثانیه زمان لازم دارید تا درک کنید که در آن احساس راحتی می کنید.

با فضای سفید ، می توانید تضاد کاملی را بین محتوا و فضا ایجاد کنید.

اما شما تصمیم می گیرید که نسبت مناسب چیست. برای برندی مانند Google ، فضای سفید بسیار مفید بوده:

فضای سفید در وب سایت گوگول

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

فضای سفید باعث می شود وب سایت کاربری آسان تری برخوردار شود

اگر اصول طراحی وب سایت را مطالعه کنید ، متوجه می شوید که موقعیت و فاصله به شدت در آنها برجسته است.

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

این مثال از قانون Fitts را در نظر بگیرید:

مثال قانون fitts استفاده از فضای سفید

فضاهای اطراف محتوا ، پیوندها و دکمه ها فقط ظاهر این صفحات را بهبود نمی بخشد.بلکه  آنها می توانند اطمینان و دقت کلیک کاربر را بهبود ببخشند.

بهبود تمرکز مطالعه یک سایت

وقتی به یک باره محتوای بیش از حد به سمت بازدیدکنندگان پرتاب می کنیم ، آنها می توانند بیش از حد تحت فشار قرار بگیرند و تمرکز روی یک مورد به خصوص برایشان سخت شود.

 

این پدیده ای است که توسط قانون Hick توضیح داده شده است:

قانون hicks استفاده از فضای سفید

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

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

برای سازماندهی کاربردی است

وقتی فضای اطراف محتوا را اضافه می کنید ، سیگنالی در مورد اهمیت آن محتوا و ارتباط آن با آنچه در اطراف آن است ارسال می کنید.

نقاط گروه بندی نشده استفاده از فضای سفید

در این نمودار 20 نقطه مشاهده می کنید. قسمت بزرگتری از نقاط را در سمت چپ و کوچکی را در سمت راست مشاهده می کنید. این فاصله های مساوی بین نقاط گروه بندی شده و فاصله بزرگتر بین گروه ها ست که به ما امکان می دهد آنها را به عنوان واحدهای مرتبط در مقابل نقاط جداگانه ببینیم.

با توجه به نکات و مفاهیم موجود در این  این مقاله حالا وقت آن رسیده که در عمل از آن استفاده کنید…

این مقاله آموزشی مفید بود؟ اگر روش دیگری برای رفع این مشکل دارید در قسمت نظرات به اشتراک بگذارید.

فهرست مطالب
تصویر حامد شاه حسینی

طراح سایت، مدرس و مدیر سئو