فضای سفید بیشتر از فضای خالی بین عناصر یک وب سایت است. در حقیقت ، این یک ابزار قدرتمند است که می تواند به طور هوشمند برای مهلت دادن به کاربر ، تمرکز توجه وی و سهولت سفر خود استفاده شود.
دریابید که چگونه
روش های مختلفی برای طراحی وب وجود دارد - از مینیمالیسم گرفته تا طراحی مسطح ، طراحی متریال و استفاده خلاقانه از کنتراست. یکی دیگر از ابزارهای فوق العاده مهم در طراحی وب ، فضای سفید است.
فضای سفید مینیمالیسم و تعادل را تشویق می کند. همچنین می تواند با افزایش پاراگراف و ایجاد فاصله برای خوانایی بهتر ، تجربه کاربر را بهبود بخشد.
با این حال ، استفاده از فضای سفید باید مسئولانه و درست انجام شود. بسیار کم استفاده کنید و می توانید خوانایی و قابلیت استفاده از یک وب سایت را تا حد زیادی تحت تأثیر قرار دهید. بیش از حد استفاده کنید و خطر ارسال پیام اشتباه را دارید.
در این مقاله ، ما قصد داریم در مورد اینکه فضای سفید چیست ، انواع مختلف آن ، چرا باید از آن استفاده کنید و مهمتر از آن ، نمونه هایی از یک اجرای خوب فضای سفید را به شما نشان دهیم.
فضای سفید چیست؟
فضای سفید یا فضای منفی یک اصطلاح طراحی است که ما برای اشاره به خلأ در اطراف یا درون عناصر طراحی استفاده می کنیم.
اگر به صفحه اصلی وب سایت مراجعه کنید نیویورکر، نمونه هایی از آن را در همه جا خواهید دید:
فضاهای بزرگ پیرامون لوگوی نیویورکر:
فضاهای مساوی که هر یک از پیوندهای ناوبری را از هم جدا می کند:
تمبرهایی که در اطراف هر یک از بلوک های محتوای صفحه اصلی ایجاد شده اند:
حتی انتخاب جهت و ردیابی تایپوگرافی نیز مفید بودن فضای سفید در طراحی وب سایت را نشان می دهد.
به وب سایت 2008 نگاهی بیندازید و خواهید دید که فضای سفید چگونه تفاوت بزرگی ایجاد می کند:
فضای سفید موجود است ، اگرچه به اندازه آنچه امروز در وب سایت می بینیم شیک یا استراتژیک نیست.
فضای سفید از کجا می آید؟
اصطلاح "فضای سفید" تا حدودی گمراه کننده است. در حالی که برخی از نمونه های فضای سفید در واقع سفید هستند (مانند مثال نیویورکر در بالا) ، این معمولاً صادق نیست.
برای اینکه بفهمیم چرا فضای سفید نام خود را گرفته است ، باید نگاه کنیم که از کجا آمده است.
اگرچه هیچ کس در ایجاد فضای سفید نامی ندارد ، اما می توانیم آن را به قسمتهای زیر نسبت دهیم:
اولی هنرمندان و خوشنویسان چینی قرن بیستم است. فضاهای خالی روی کاغذ برنج سفید که روی آن کار کردند به عنوان فضای هدر رفته تلقی نمی شود. آنها در خلاء معنی پیدا کردند و معتقد بودند که این امر به درک کلی از کل تصویر کمک می کند.
آنها آن را "طراحی سفید" نامیدند.
کارول داگلاس ارزش فضای سفید را در هنر چینی توضیح می دهد:
"در هنر چینی ، انتظار می رود فضای خالی به دلیل عدم وجود تصاویر ، اطلاعات را منتقل کند. اندازه ها و طرح کلی شکل های خالی ریتم و وحدت را ایجاد می کند. اشکال جامد به پوچی معنا می دهند و برعکس.
بعداً فضای سفید به لطف مدرنیسم به یک طرح اصلی چاپ تبدیل شد که بر مینیمالیسم ، شبکه های ساختار یافته و فضای منفی تمرکز داشت.
بنابراین به احتمال زیاد ما آن را فضای سفید می نامیم به دلیل کاغذ سفیدی که مدرنیست ها روی آن نوشته اند یا بوم های سفید که روی آن نقاشی کرده اند.
انواع مختلف فضای سفید که باید بدانید
به طور معمول ، ما فضای سفید را به دو دسته مختلف تقسیم می کنیم:
میکرو در مقابل فضای سفید کلان
فضای سفید خرد و کلان فقط فضای سفید را بر اساس اندازه تعریف نمی کند.
فضاهای میکرو سفید به فضاها و بافرهای کوچکتر ساخته شده در اطراف محتوا مراجعه کنید. به عنوان مثال ، یک فضای سفید کوچک بین موارد زیر یافت می شود:
- نامه ها
- کلمات
- پاراگراف ها
- پیوندهای ناوبری
- تصاویر یا محتوا در یک شبکه
- زمینه های فرم
هدف فضای سفید کوچک بهبود خوانایی مطالب شما است.
در مورد فضای سفید ماکرو ، به مناطق بزرگتر خالی از محتوا اشاره دارد. به عنوان مثال ، فضای سفید کلان را می توان یافت:
- در حاشیه یک وب سایت
- در اطراف لوگو در هدر
- بین بخش های یک صفحه
- در تصاویر قهرمان
- در تفکیک محتوای اصلی و نوار کناری
- در تصاویر
- در اطراف دکمه های CTA
هدف از فضای سفید کلان ، بهبود طرح وب سایت و سهولت درک و پیمایش است.
فضای سفید منفعل و فضای سفید فعال
فضاهای سفید را نیز می توان به دو دسته منفعل و فعال تقسیم کرد.
فضاهای سفید منفعل اشاره به شکاف هایی که به طور طبیعی در طراحی یا تایپوگرافی رخ می دهد. شما می توانید اندازه این فضاها را از نظر زیبایی کنترل کنید ، اما با یا بدون قرار دادن آنها در آنجا وجود خواهند داشت.
فضای سفید فعال اشاره به مناطق خالی است که عمداً برای سهولت حرکت به یک صفحه اضافه شده است. هدف این است که چشم های بازدیدکننده را به پایین صفحه یا طی یک فرایند هدایت کنید تا به نتیجه اجتناب ناپذیر برسند و تبدیل شوند.
چرا باید از فضای سفید در وب سایت ها استفاده کنید
در اینجا برخی از مهمترین دلایلی وجود دارد که چرا فضای سفید باید در هر وب سایتی که طراحی می کنید ایجاد شود:
کلاسیک است
گرایشهای متفاوت در طراحی وب که ممکن است فقط خوب به نظر برسند یا برای مدت کوتاهی مرتبط باشند ، فضای سفید یک کلاسیک ماندگار است. فقط نگاه کنید که چه مدت است که وجود دارد و چگونه از خوشنویسی چینی به آثار مدرنیستی - و اکنون به وب تبدیل شده است.
اگر می خواهید طرح های وب خود را پایدار کنید ، فضای سفید باید یکی از آنها باشد.
منجر به رابط های جذاب تری می شود
ورود به وب سایت کمی شبیه ورود به خانه شخصی است. تنها چیزی که نیاز دارید چند ثانیه است تا احساس راحتی کنید.
با مقدار مناسب فضای سفید ، می توانید تضاد کاملی بین محتوا و فضا ایجاد کنید.
اما این به شما بستگی دارد که نسبت مناسب را تعیین کنید. برای برندی مانند گوگل ، این فضای سفید کار می کند:
با این حال ، برای یک نام تجاری دیگر ، رابط کاربری بیش از حد ساده می تواند وب سایت را بیش از حد خالی کرده و مارک را فاقد ارزش کند. اما اگر تعادل مناسب را بیابید ، انتخاب فضای سفید شما می تواند به جذابیت یک وب سایت برای کاربران هدف کمک کند.
استفاده از وب سایت ها را آسان تر می کند
اگر اصول طراحی وب را مطالعه کنید ، متوجه خواهید شد که موقعیت و فاصله در آنها به شدت مشخص شده است.
وقتی این اصول طراحی را برای وب سایت ها به کار می برید ، از روانشناسی کاربران برای ایجاد رابط کاربری و سفرهایی استفاده می کنید که درک و دنبال کردن آنها آسان است.
این مثال را از قانون فیتس بگیرید:
فضاهای اطراف محتوا ، پیوندها و دکمه CTA فقط ظاهر این صفحات را بهبود نمی بخشد. آنها همچنین می توانند اطمینان کاربر و دقت کلیک را افزایش دهند.
تمرکز را بهبود می بخشد
وقتی محتوای زیادی را به طور همزمان روی بازدیدکنندگان پرتاب کنید ، آنها می توانند غرق شده و تمرکز بر روی یک چیز برایشان مشکل باشد.
این پدیده ای است که با آن توضیح داده می شود قانون هیک :
هرچه محرک های بیشتری در یک زمان وجود داشته باشد ، مدت زمان بیشتری طول خواهد کشید تا مردم نسبت به آنها واکنش نشان دهند. و ، در مورد یک وب سایت ، ممکن است برای جلوگیری از تصمیم گیری آنها کافی باشد.
با ایجاد فضا در اطراف هر قسمت از صفحه وب خود ، به بازدیدکنندگان خود این امکان را می دهید که یک لحظه نفس بکشند و در مورد آنچه که به آن نگاه می کنند فکر کنند. این روند تصمیم گیری را کند می کند ... اما به روش خوبی.
برای آن مفید استسازمان
وقتی محتوای زیادی برای اضافه کردن به وب سایت دارید ، تشخیص نحوه تقسیم آن به بخش ها و صفحات مختلف بسیار آسان است. با این حال ، فقط قرار دادن محتوا در ظروف مختلف به اندازه کافی پیش نمی رود.
وقتی فضایی در محتوا یا محتوی آن اضافه می کنید ، سیگنالی در مورد اهمیت آن محتوا و ارتباط آن با آنچه پیرامون آن است ارسال می کنید.
Le گروه نورمن نیلسن نحوه کار آن را توضیح می دهد:
در این نمودار ، شما 20 نقطه را نمی بینید. بخش بزرگتری از نقاط را در سمت چپ و بخش کوچکتر را در سمت راست مشاهده می کنید. این فاصله های مساوی بین نقاط گروه بندی شده و بزرگترین آنها بین گروه ها است که به ما اجازه می دهد آنها را به عنوان واحدهای مرتبط در مقابل نقاط جداگانه ببینیم.
خوانایی مطالب شما را بهبود می بخشد
اگر یک متن کوتاه در a باشد تصویر قهرمان، یک پست طولانی وبلاگ یا یک صفحه محصول بسیار توصیفی ، می خواهید بازدیدکنندگان مطالب را در آنجا بخوانند.
اندازه فونت شما باعث جلب توجه به کلمات شما می شود ، اما فاصله بین حروف ، کلمات و پاراگراف ها است که به راحتی آنها را می خواند.
گروه نیلسن نورمن معتقد است که فاصله تایپوگرافی یکی از سه عامل زیبایی طرح است:
این گرافیک روش های مختلفی را که در آن خوانایی در نتیجه بهبود می یابد نشان می دهد.
11 نمونه الهام بخش از فضای سفید در طراحی وب
از آنجا که روش های زیادی برای استفاده از فضای سفید برای بهبود وب سایت وجود دارد ، من قصد دارم 11 نمونه را ارائه دهم که به ویژه از انواع مختلف فضای سفید به خوبی استفاده می کنند.
لوگوی باغ وحش پیتسبورگ و آرم آکواریوم PPG
اگر مجبور شدید سریع به لوگوی آن نگاه کنید باغ وحش پیتسبورگ، احتمالاً ابتدا درخت سفید و پرندگان را در حال پرواز مشاهده خواهید کرد. اما در بازرسی دقیق تر ، یک تصویر مخفی در فضای منفی مشاهده خواهید کرد: گوریل رو به شیر.
این استفاده خلاقانه از فضای سفید باعث می شود این لوگو و نام تجاری آن کاملاً به یاد ماندنی شود. به علاوه ، شگفتی پنهان راهی عالی برای ایجاد اولین تأثیر قوی بر روی بازدیدکنندگان است.
گالری تصاویر قهرمان حدود 1886
تصویر قهرمان در یک وب سایت باید بتواند توجه بازدیدکنندگان را به طور موثری جلب کند. راه های مختلفی برای این کار وجود دارد. شما می توانید تصویر قهرمان را با استفاده از رنگ ها و اشکال بیشتر طراحی کنید تا چاپ درخشان شود. یا می توانید همانطور که در قبل است عمل کنید دور 1886 و اجازه دهید تصاویر شما در مرکز توجه قرار گیرند.
توجه کنید که چگونه این گالری از بشقاب های سفید ، ملحفه های سفید ، ظروف شیشه ای شفاف و کارد و چنگال براق برای قاب بندی موضوع اصلی هر عکس استفاده می کند. این فضای سفید به معنای واقعی کلمه ، تمرکز خود را روی غذا حفظ می کند ، نه حواس پرتی رستوران یا ناهارخوری های اطراف آن.
عکسهای Florian Schulz Productions
این وب سایت سرپرستی عکاسان و فیلمسازان است فلوریان و امیل شولزبه همانطور که انتظار دارید ، این وب سایت پر از عکس های طبیعت گیر است.
این ثابت می کند که فضای سفید فقط چیزی نیست که طراحی وب سایت را بهبود بخشد. با استفاده از عکس هایی که از فضای سفید به خوبی استفاده می کنند ، می توانید چشم بازدیدکنندگان خود را به طور م toثرتری به سوژه های خود هدایت کنید.
در مثال بالا ، ما می بینیم که چگونه توده تیره سیاه خاردارها به عنوان فضای سفید عمل می کند و اجازه می دهد تا زنجیره های تازی که در آبهای سبز حرکت می کنند ، تمرکز اصلی باشند.
پیوندهای ناوبری اضافی
ممکن است فکر نکنید که می توانید 13 پیوند ناوبری را به طور مرتب در یک ردیف قرار دهید ، اما وب سایتبیش از حد ثابت می کند که شما در اشتباه هستید در اینجا می بینیم که چگونه فضای مناسب بین پیوندها می تواند یک منوی با این اندازه را آسان پیمایش کند.
به علاوه ، خرده فروش را مجبور نمی کند که دسته های خود را در زیر منوی دسته های بزرگ یا زیر نماد منوی همبرگر (که این روزها بسیاری از آنها انجام می دهند) پنهان کند.
فاصله خط Udemy
نگاهی به نحوه تقسیم بندی دروس و درس ها بیندازید اودمی ترکیبی از بلوک های کم رنگ ، سرفصل های پررنگ و فاصله زیاد در اطراف هر ردیف به زبان آموز اجازه می دهد تا به سرعت در دوره حرکت کند.
هنگامی که بیش از 150،000 دوره در وب سایت موجود است ، کاربران باید بتوانند به سرعت ارزیابی کنند که آیا دوره برای آنها مناسب است یا خیر. و مقدار زیادی آزادی عمل - اما نه زیاد - در این امر کمک می کند.
Meetup رابط کاربری سازمان یافته
ناهار وب سایتی است که به افراد محلی کمک می کند تا گروه هایی از افراد با علایق مشابه را بیابند و رویدادهایی را در اطراف آنها برنامه ریزی کنند. در شهرهای بزرگ ، چنین وب سایتی می تواند برای کاربرانی که ظاهراً گروه ها و رویدادهای زیادی برای انتخاب دارند انتخاب کند.
با تشکر از رابط کاربری منظم و فضای سفید که آن را تجزیه می کند ، کاربران می توانند به سرعت گزینه های بالای وب سایت و نوار کناری سمت راست را فیلتر کنند. سپس آنها می توانند توجه خود را به کاهش نتایج روزانه در مرکز معطوف کنند.
حاشیه Maison De La Luz
میسون د لا لوز یک هتل بوتیک لوکس در نیواورلئان است. وب سایت به زیبایی نشان داده شده تنها چیزی نیست که میهمانان را به وجد می آورد.
در صفحه About ، بازدیدکنندگان ابتدا تصویری از فضای داخلی هتل را مشاهده می کنند. همانطور که آنها به پایین حرکت می کنند ، تقلید می کند که چگونه ممکن است نگاه آنها در حالی که شخصاً هتل را تحسین می کنند بالا و پایین برود. حتی بدون انیمیشن ، این طرح به لطف حاشیه های باریک گرافیک در متن زیر بسیار جذاب به نظر می رسد.
تمرکز محصولات اپل
اپل آنقدر طولانی بوده است که به سختی می تواند در مورد محصولات خود کلمه ای بگوید. به همین دلیل است که اکثر وب سایت آن به محصولات اجازه می دهد تا صحبت کنند.
حتی زمانی که کپی و CTA وجود دارد ، در مقایسه با محصولات و حجم زیادی از فضای سفید که توجه بازدیدکنندگان را به آنها جلب می کند ، فضای کمی را اشغال می کنند.
CTA های باحال
دکمه فراخوانی برای اقدام نقش مهمی در سفر کاربر دارد. این امر آنها را مجبور می کند استراحت کنند ، آنچه را که تا کنون آموخته اند در نظر بگیرند و تصمیم بگیرند که آیا آماده برداشتن گام بعدی هستند یا خیر.
به منظور جلب توجه افراد به CTA ، شما بیش از یک مکان مناسب یا یک برنامه رنگی برای برجسته کردن آن نیاز دارید. فضای سفید فراوان در اطراف CTA به شما این امکان را می دهد که سایر موارد را کنار بگذارید در حالی که بازدیدکنندگان شما انتخاب خود را انجام می دهند.
بلوک های قیمت فلایویل
اگر جزئیات زیادی برای به اشتراک گذاشتن یکجا دارید ، می توانید از اندازه برای تعیین سلسله مراتب و فاصله برای گروه بندی جزئیات مربوطه با هم استفاده کنید. این امر باعث می شود روند تصمیم گیری برای بازدیدکنندگان شما هموارتر شود زیرا آنها فقط یک دیوار از متن را در نظر ندارند.
در حالی که آنچه ما در اینجا به آن توجه می کنیم نمونه ای از بلوک های قیمت است چرخ فلای ، این نوع فاصله مناسب برای هر نوع محصول یا طرح بلوک محتوا مفید است.
طرح بندی فرم Salesforce
هر نوع که باشد اشکال که وب سایت شما از آن استفاده می کند، می خواهید پر کردن آنها آسان باشد. در فرم آزمایشی رایگان فروشنده ، ما می بینیم که چگونه فاصله مناسب می تواند یک فرم را جذاب تر کند.
فضای سفید در اطراف هر فیلد به کاربران کمک می کند تا در یک زمان روی یک زمینه تمرکز کنند. دلیل دیگری نیز وجود دارد که این فاصله کافی مفید است. وقتی شخصی شروع به پر کردن فیلدها می کند ، هر برچسب در بالا حرکت می کند. و در صورت بروز خطا ، پیام مناسب در زیر ظاهر می شود.
برای ایجاد وب سایت های بهتر از فضای سفید به طرز ماهرانه ای استفاده کنید
فضای سفید می تواند به خالی بودن یک وب سایت اشاره داشته باشد ، اما معنا و هدف زیادی در آن خلا وجود دارد.
با در دست گرفتن کنترل فاصله در یک وب سایت ، می توانید تجربه بهتری را برای همه افرادی که وارد آن می شوند ایجاد کنید.
در حالی که ما چند روش برای انجام این کار به شما نشان داده ایم ، استفاده از آن در طرح های شما داستان دیگری است.
اما نگران نباشید. را سازنده صفحه Elementor اضافه کردن فضای خالی به طرح های شما را آسان می کند.
اکنون Elementor Pro را دریافت کنید!
نتیجه
اینجا ! این برای این مقاله اختصاص داده شده به فضای سفید در طراحی وب است. اگر در مورد چگونگی رسیدن به آنجا نگرانی دارید fبه ما اطلاع دهید در نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...