کاربردهای فضای خالی در طراحی

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

فضای خالی چیست؟

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

اهمیت استفاده از فضای خالی

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

دانلود از ادوب استوک adobe stock

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

دانلود از ادوب استوک adobe stock

چگونه باید فضای خالی را در طراحی بکار برد؟

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

بخشی از فضای طرح را خالی بگذارید

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

دانلود از ادوب استوک adobe stock

خطوط مرزی طرح را حذف کنید

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

دانلود از ادوب استوک adobe stock

اندازه تصویر پس‌زمینه را افزایش دهید

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

دانلود از ادوب استوک adobe stock

 پس ‌زمینه رنگی به کار ببرید

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

دانلود از ادوب استوک adobe stock

فاصله بین حروف را تنظیم کنید

افزایش یا کاهش فاصله بین حروف باعث تراز شدن متن در بلوک‌ های متنی خواهد شد و آن بلوک متنی به صورت یک عنصر یکپارچه به نظر خواهد رسید. همچنین این کار قابلیت خوانایی متن را نیز افزایش می‌دهد.

دانلود از ادوب استوک adobe stock

از حاشیه استفاده کنید

هر عنصر در طرح بایستی دارای فضای خالی یا حاشیه در محدوده اطراف خود باشد. به فضای خالی موجود در اطراف عبارت Cooking: Back to Basics، فاصله درج شده در زیر آدرس سایت و فاصله بدون استفاده بین کادر متنی و تصویر پس‌زمینه توجه کنید.

دانلود از ادوب استوک adobe stock

در صورت نیاز خط مرزی اضافه کنید

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

دانلود از ادوب استوک adobe stock

یکی از جنبه‌ های طراحی خود را برجسته کنید

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

دانلود از ادوب استوک adobe stock

پیشنهاد می کنیم برای اطلاعات بیشتر مقالات تایپوگرافی چیست؟ ، Mockup در اصطلاح به چه معنا است؟ و 8 مهارت که گرافیست متخصص انجام می هد را هم بخوانید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.