چرا به فضای سفید در طراحی وب نیاز داریم ؟

[mohammadshamosi]

فضای سفید یا فضای منفی یک مبحث مهم در هنر است . خاطرم هست در کلاس طراحی به ما یاد می دادند که چگونه یک شئ ، مثلا یک گلدان را ، به وسیله دیدن فضای های دور گلدان (فضای منفی ) ترسیم کنیم .

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

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

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

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

چه می بینید ؟ آیا یک گلدان می بینید یا دو چهره . اگر چهره می بینید بدین معنی است که شما رنگ سیاه را فضای مثبت در نظر گرفتید و رنگ سفید را فضای منفی . با یک تغییر نگرش اوضاع کاملا فرق خواهد کرد .

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

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

ما ۲ نوع فضای سفید داریم :
فضای سپید بزرگ (ماکرو) : که عبارت است از فضای سفید بین عناصر اصلی و کلیدی.
[b]فضای سپید کوچک (میکرو)[/b] : که عبارت است از فضای سفید بین عناصر داخلی و کوچکتر .

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

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

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

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

فضای سفید و افزایش خوانایی

شاید شما بپرسید که من چطور باید مطمئن شوم که فضای سفیدی که به کار بردم ، کارا است ؟

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

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

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

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

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

رابطه بین پیچیدگی و لوکس بودن

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

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

برای نمونه سری به وب سایت های شرکت و hp بزنید . طراحی این دو وب سایت را با سایت شرکت های نامعتبر و رده پایین مقایسه کنید .

هر چه سایت دارای فضای سفید بهتری باشد ، لوکس تر به نظر می رسد .

درنهایت :

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

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

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

-----------------
فضای منفی و یا فضای سفید هر دو یک معنی را دارند . در این مطلب گاهی از این نام و گاهی از آن یکی استفاده می شود .
----------------
منبع : www.pixeler.ir