با فضای سفید چه کار کنم ؟

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

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

نسبت فضا به متن :

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

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

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

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

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

اما هدف طراح صفحه از این کار چی بوده ؟ مگه غیر از این بوده که محتوای بیشتری رو به مشتری یا بیننده نشون بده ، اما آیا به نظر شما به هدفی که داشته رسیده ؟

مطمئنا خیر چون با این روش حتی همون چند محصولی که می تونست به نمایش بزاره رو هم از دست داده . در واقع اگه شما بخواید محصولی رو هم ببینید اصلا نمی دونید کجا باید کلیک کنید .

حالا می ریم سراغ یه مثال دیگه ، به این تصویری نگاه کنید .

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

ارزش محتوا :

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

این دفعه از مورد مناسب شروع می کنیم و بعد با مورد نامناسب مقایسه می کنیم ، تصویر زیر رو ببینید .

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

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

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

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

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

فضاسازی ریسپانسیو :

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

یه مثال هم توی این مورد براتون می زنم که به چشم ببینید ، بالاخره شنیدن کی بود مانند دیدن .

تصویر بالا رو ببینید که چه طور آیتم ها قرار گرفتن ، کنار هر کدوم یه مقدار فضای سفید هست که چشم رو بالانس می کنه .

حالا به تصویر پایین که نمونه همون سایت در حالت موبایل هست دقت کنید .

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

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

منبع : وب کافه