راهنمای انتخاب تصویر پس زمینه مناسب برای سایت

راهنمای انتخاب تصویر پس زمینه مناسب برای سایت

مشخصات مقاله

راهنمای انتخاب تصویر پس زمینه مناسب برای سایت

انتخاب تصویر بگ‌گراند مناسب برای وب‌سایت

Selecting Perfect Background Image

ویژگی‌های تصاویر پس زمینه مناسب برای صفحات وب

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

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

با بخاطر سپردن این قضیه، بیایید نگاهی به نمونه های موفق در زمینه انتخاب تصویر مناسب بک گراند بیاندازید:

1- در دسترس و خوانا بودن (Accessibility):

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

در دسترس و خوانا بودن (Accessibility)

اگر در مورد خوانایی متن روی تصویر بک گراند مطمئن نیستید، اما آن تصویر را واقعا دوست دارید و می خواهید حتما از آن بعنوان پس زمینه استفاده کنید، از طریق روش هایی می توانید متن روی تصویر را خوانا کنید. مانند: ویرایش تصویر دلخواه توسط فتوشاپ، به نحوی که متن روی آن براحتی قابل خواندن باشد. یا اینکه توسط استایل های css یک لایه ماسک (layer mask) در زیر متن خود طراحی کنید و یا سایز فونت و رنگ آنرا متناسب با رنگ تصویر تغییر دهید.

2-  مرتبط بودن تصویر پس زمینه (Relevancy):

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

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

مرتبط بودن تصویر پس زمینه (Relevancy)

تصویر فوق، منظره ای از شهر باتومی کشور گرجستان است که بصورت پانوراما گرفته شده است.

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

تصویر بک گراند نباید شلوغ و متراکم باشد

3- استفاده از تکسچرهای نامحسوس و یکپارچه (Subtle and Seamless Texture):

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

تکسچرهای نامحسوس و یکپارچه

نکاتی که باید در انتخاب تصاویر تکسچر رعایت کرد:

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

تصویر پس زمینه مناسب

4- درنظرگرفتن انواع مختلف اسکرین و دستگاه (Screen & Devices):

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

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

ابتدا باید جهت عکس پس زمینه با توجه به container آن مشخص شود. به 3 صورت افقی، عمودی یا مربعی (portrait, landscape, square) می توان تصویر بک گراند را نمایش داد.

درنظرگرفتن انواع مختلف اسکرین و دستگاه

برای پیاده سازی تصاویر پس زمینه بطوریکه کمترین قسمت از تصویر در اسکرین های کوچک بریده شود، به این بخش توجه کنید. بعنوان مثال، استایل background-size: cover; به شما اطمینان می دهد کل تصویر در تمام دستگاه ها و کلیه اسکرین ها برای کاربران نمایان خواهد بود. بنابراین نهایت سعی و دانش خود را بکار بگیرید تا تصویر بک گراند در اسکرین های مختلف بصورت کامل نمایش داده شود و یا حداقل بخشی از تصویر که اهمیت چندانی ندارد، در اسکرین های کوچکتر cut شود.

5- استفاده از تصاویر با رزولوشن بالا (High-Resolution images):

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

استفاده از تصاویر با رزولوشن بالا

تشخیص سایز مناسب برای تصاویر بک گراند به اندازه محل قرارگیری آن (container) بستگی دارد. استفاده از تصاویر کوچک و تکرارشونده (pattern یا texture) این مزیت را خواهد داشت که فارغ از سایز container موردنظر در سایت، تصویر تکسچر در کل آن container تکرار خواهد شد. اما اگر از تصاویر بزرگ و واحد بعنوان پس زمینه استفاده کنید، این احتمال وجود دارد که در اسکرین های کوچک قسمتی از تصویر بریده شود و یا اگر تصویر به اندازه کافی بزرگ و باکیفیت نباشد، احتمالا در دسکتاپ های بزرگ (رتینا retina) تصویر پس زمینه تار و بی کیفیت نمایش داده شود. با استفاده از مدیا کوئری (media query) در css می توان اینگونه تصاویر را در اسکرین های مختلف، سفارشی سازی کرد تا پس زمینه در تمام دستگاه ها و اسکرین ها به بهترین شکل به نمایش در آید.

تصویر بک گراند مناسب وب سایت

نتیجه گیری:

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

در انتخاب تصویر پس زمینه باید مواردی مانند سایز، نسبت ابعاد (aspect ratio)، مرتبط بودن و… را درنظر بگیرید.

منبع: https://webdesign.tutsplus.com

0/5 (0 نظر)

اطلاعات مقاله

راهنمای انتخاب تصویر پس زمینه مناسب برای سایت

فرم ارسال دیدگاه درباره

راهنمای انتخاب تصویر پس زمینه مناسب برای سایت

دیدگاه کاربران درباره

راهنمای انتخاب تصویر پس زمینه مناسب برای سایت

دیدگاهی وجود ندارد