طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

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

shutterstock

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

جلب توجه

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

dinnerforfive-example

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

اصلی که مهم و کلیدی است عبارت است از :

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

ترتیب های بصری را در صفحه خود ایجاد کنید

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

در زیر یک طراحی شسته و رفته را داریم که سلسله مراتب بصری را نشان می دهد :

artless-example

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

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

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

gtmetrix

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

گروه بندی با استفاده از فضاهای خالی

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

در این صورت فاصله بین اشیا کمی بیشتر می‌شود و انتخاب برای بیننده ساده تر می شود. بگذارید ببینیم که CoSchedule چطور بخش مربوط به قابلیت‌های خود را طراحی کرده است :

coschedule-example

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

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

form-example

خوانایی بهتر

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


موافقین ۰ مخالفین ۰ ۹۸/۰۴/۲۹
شهربانو دوستی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی