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

[mohammadshamosi]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

درنهایت :

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

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

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

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

[dara]

آقا محمد ممنون از توضیحاتی که ارائه کردی امیدوارم این مطلب رو ادامه بدی و ما رو از هنر خودت بهرمند کنی
پیروز باشی

[mohammadshamosi]

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

[kafshduzak]

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

[mohammadshamosi]

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