استفاده ناصحیح از عکس ها در طراحی سایت

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

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

اشتباه: آپلود کردن فایل های بزرگ در طراحی سایت

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

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

از فرمت های نامناسب برای تصاویر در وب سایت ها استفاده نکنید. فرمت های متداول و کاربردیPNG(تصاویر موجود در کامپیوترها مانند نمودارها و یا لوگوها)،JPG(تصاویر) و یاGIF(انیمیشن ها) را برای تصاویر وب سایت خود به کار ببرید.

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

اشتباه: فراموش کردن کراپ کردن تصاویر وب سایت

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

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

راه حل: تصاویر وب سایت را برای رسیدن به اندازه و یا ابعاد مناسب قبل از آپلود کردن در سایت، کراپ کنید.

اشتباه: فراموش کردن تصاویر کوچک در وب سایت

شما باید به یاد داشته باشید تا تصاویر کوچک در وب سایت تان را بروزرسانی کنید و به آن ها توجه داشته باشید.

اکثر اوقات طراحان وب سایت این تصاویر کوچک در وب سایت را فراموش می کنند. این تصاویر و نماد آیکون ها باید مطابق با بروزرسانی محتوای وب سایت، بروز شود.

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

راه حل: زمانی که تصاویر وب سایت و نماد های آیکون تان تغییر کرده و بروز می شود، اطمینان حاصل کنید که تا تصویر قدیمی را حذف می کنید.

اشتباه: نام های غیر قابل جستجو و داده های زیاد در تصاویر وب سایت

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

مثال هایی از نام های نامناسب تصاویر:

• picture1.jpg
• DSCN00023.jpg
• glasses%and%watch.jpg

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

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

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

راه حل: تمامی نسبت ها، اندازه ها و مقیاس ها را در تصاویر وب سایت ها با دقت ملاحضه کنید.

اشتباه: برنامه ریزی نکردن برای ابزارهای مختلف

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

یکی از عملکردهای متداول استفاده ازMEDIA QUERIESبرای ایجاد تغییر در تصاویر و وب سایت در ابزارهای مختلف می باشد.CSSبسته به ابعاد صفحه نمایش، سبک های خاصی را در تصاویر به کار می برد، و به تصویر کمک می کند تا به خوبی با طراحی وب سایت مطابقت یابد.

راه حل: ازMEDIA QUERIESبرای الگوهای طراحی وب سایت واکنشی استفاده کنید و مطابقت تصویر وب سایت ها را با ابزارهای مختلف امتحان کنید.

اشتباه: فراموش کردن صفحه نمایش هایRETINA

در زمان های نه خیلی دور، اندازه استاندارد تصویر شامل 600 پیکسل در عرض در 72PPIبود که می توانستید در وب سایت ها به کار ببرید. اما امروزه، صفحه نمایش ها در میزان های بالاتری ارتقاء یافتند.

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

راه حل: فایل ها وMEDIA QUERIESرا در طراحی سایت خود به کار ببرید که برای صفحه نمایش هایRETINAساخته شده اند. (CSS-TRICKمی تواند در این زمینه بسیار کمک کننده باشد)

اشتباه: تصاویر پر استفاده و مطرح

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

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

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

نتیجه گیری

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