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

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

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

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

فضای سفید فقط یک فضای خالی است؟

دربالا فقط گفته شد که فضای سفید فاصله بین عناصر مختلف است . برای درک بهتر موضوع ما فضایی که یک شئ اشغال می کند را فضای مثبت و مجموعه اطراف آن را فضای منفی نام گذاری می کنیم.

آیا تا به حال به این فکر کردید که از فضایی سفید به عنوان ‘فضایی بین طراحیتون’ استفاده کنید ؟ زمانی که به استفاده از فضایی سفید بین طرحمون فکر میکنیم ،خیلی زود برای خودمون نتیجه گیری میکنیم که این یه طرح بی ثمریه که اصلا چهره ای خوبی به طرحمون نمیده ! همینجا باید بهتون بگم که این یه دیدگاه نادرسته . فضایی سفید فقط حکم پر کننده فضا های خالی و عناصر رو نداره بلکه یک عنصر بسیار جالبی میتونه تو خلق طرح های خلاقانه باشه.

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

تمرکز با فضای سفید

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

 

فک کنم جواب سوال رو درست حدس زده باشین؟ فضایی سفید (Whitespace)؛ گوگل با استفاده از مقدرا زیادی فضایی سفید بطور طبیعی توجه کاربر رو به مرکز صفحه جلب میکنه که به این عمل طراحی minimalistic میگن. فضایی سفید (Whitespace) یکی از ساده ترین روش ها برای هدایت چشم مخاطب به جایه که میخواین کاربر اونجا رو ببینه. ما میتونیم از این ترفند برای ایجاد نقاط طبیعی استفاده کنیم تا به راحتی چشمان کاربر به اون نقاط هدایت و کشیده بشه و همینطور میتونیم مطالب رو بطور موثرتری به مخاطب خودمون ارائه بدیم.

استفاده درست و بجا

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

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

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

فضای سفید یا فضای سیاه؟

بعد از همه مسائل حول محور هدایت چشم مخاطب که گفتیم فضای سفید (Whitespace) بهترین راه حل برای توجه چشم مخاطب به هر جا که ما میخوایم هست . باید گفت که فقط به این خاطر نیست که چون ما از کمله فضای سفید استفاده میکنیم پس حتما باید طرحمون هم کلش فضای سفید باشه اصلا. هیچ قانونی در این مورد وجود نداره که شما حتما برای طرحی باید از یه رنگ خاص برای فضاهای خالی استفاده کنید – یا از یه رنگ که میخواین استفاده نکنین – اصلا این چنین نیست بلکه در این مورد دستتون بازه البته با انتخاب بجا و درست.

یه مثال فوق العاده برای این گفته هامون میتونه طراحی صفحات تکی باشه (single-page). وقتی که شما برای نشون دادن محتواتون از صفحات تکی استفاده می کنید میتونید از فضای خالی بیشتر بطور موثر استفاده کنید تا تمرکز، سازماندهی و تاکید رو به حداکثر برسونید. بلوک های محتوای اغلب در این طرح ها بصورت رون طراحی میشن با این صورت که به سادگی میشه طوری رنگ این بلوک ها رو تغییر داد که هر سه فاکتور مورد نظر ما هم حفظ بشه. با این راهنمایی ها، من امیدوارم که شما فضای سفید (Whitespace) رو به عنوان یه چشم انداز جدید برای طراحی های خودتون بدونید.

منبع: سورس کد