استفاده از یک تصویر به یاد ماندنی می تواند به تنهایی معرف برند شما باشد، ما انسان‌ها براساس خُلقیات‌مان بهتر می توانیم از هر حالت دیگری می‌توانیم المان‌های بصری را در ذهن‌مان پردازش کنیم. این موضوع می تواند اهمیت وجود تصویر در طراحی وب را بیان کند.
در این مطلب قصد داریم به شما ۷ استراتژی برتر را در استفاده از تصاویر در رابط‌های کاربری وب بگوییم.
تصاویر Hero
تصاویری بزرگ یا تمام صفحه می توانند به صورت سریع و السیر توجه کاربران را به خود جلب کنند. یکی از آخرین تکنیک‌ها برای استفاده از اینگونه تصاویر در صفحات خانگی خود، تصاویر hero هستند. این تصاویر اغلب اوقات با متن‌ها و یا دکمه‌های ناوبری سایت یا فهرست همراه هستند.
در تصویر بالا می توانید نمونه وبسایتی را مشاهده کنید که یک وبلاگ مسافربری است، در آن از یک تصویر بزرگ استفاده شده و بعد از آن یکسری متن که مهمترین آن به صورت عنوان قرار گرفته است.
چه زمانی از تصاویر hero استفاده کنیم؟ به نکات زیر توجه کنید:
- تایپوگرافی: تصویر شما در مرکز توجه قرار دارد، پس در این حالت متن شما باید کوتاه اما مهم باشد. این حالت باید خلاف متنی باشد که به صورت متحرک در صفحه قرار دارد، پس استفاده از یک تایپوگرافی قوی و مؤثر، مطمئنا مفید خواهد بود. حالت‌های مختلف متنی را امتحان کنید، در اکثر مواقع یک متن strong نتیجه خوبی خواهد داشت.
- موقعیت متن: موقعیت طبیعی تصویر را وقتی که متنی روی آن قرار خواهد گرفت، نگه‌دارید. مرکز ممکن است انتخاب معقولی باشد، اما ممکن است این حالت به برخی از تصاویر آسیب برساند.
- دکمه‌های روحی: شاید بسیاری از اوقات دکمه‌ها باعث شوند که تصویر به خوبی نمایان نشود، در چنین حالتی بهترین کار، استفاده از دکمه‌های روحی است.
- طراحی واکنشگرا: مطمئن شوید که تصویر شما در اندازه‌های مختلف صفحه نمایش یک خروجی را خواهد داشت. این موضوع یکی از مواردی است که معمولا در استفاده از تصاویر hero مشکل درست می کند.
استفاده از تصاویر hero می تواند تاثیر بسیار زیادی را روی کاربر بگذارد. به دقت از یک تصویر بسیار با کیفیت همراه با تایپوگرافی درست استفاده کنید.
اشیاء در واقعیت
این مورد در وبسایت‌های خرده فروشی بسیار موضوع مهمی است، وقتی که شما بتوانید اشیاء واقعی را نشان بدهید، این موضوع نرخ تبادل با کاربر را بسیار زیاد می کند. این حالت به کاربر کمک می کند تا بتواند بهتر در مورد وضعیت قرار گرفتن شئ در زندگی واقعی خود فکر کند.
همانطور که در تصویر بالا مشاهده می کنید استفاده از تصاویر واقعی استراتژی بسیار مهم و کاربردی در صنعت رستوران‌ها است، به این خاطر که کاربران را گشنه می کند. این موضوع مانند آن است که شما در یک رستوران باشید و مشتری وارد آن شود و شما لیست غذاها را جلوی وی قرار دهید، در حالتی که بجای لیست غذا، خود غذای واقعی را به وی نشان دهید، مشتری برای خریدن آن بیشتر تحریک می شود. استفاده از تصاویر واقعی و با کیفیت در وبسایت‌ها نیز درست به همین شکل است.
سیاه و سفید
همه تصاویر برای اینکه بتوانند تاثیر خودشان را بگذارند نیازی ندارند تا رنگی باشند. در حقیقت استفاده از تصاویر سیاه و سفید حس ذاتی از زیرکی و مهارت را القا می کند.
شرکت Goltz Group برای نمایش محصولات خود از تکنیک سیاه و سفید استفاده می کند. در کنار این تصاویر متن‌های رنگی نیز دیده می شود. این کنتراست به وبسایت کمک می کند تا بتواند نظر کاربران بیشتری را به وبسایت جلب نماید.
برهم‌گذاری رنگ
درست مانند تکنیک سیاه و سفید، استفاده از تکنیک برهم‌گذاری رنگ‌ها بسیار اثربخش است به این دلیل که می تواند تصویر را از المان‌های رابط کاربری جدا سازد. المان‌هایی مانند متون، منوها و… .
استفاده از این تکنیک باعث می شود که متن سربرگ به بهترین حالت نمایش داده شود. استفاده از این تکنیک در تمام برندها قابل استفاده است، حالت برهم‌گذاری رنگ‌ها بسیار منعطف تر از حالت سیاه و سفید است.
Knuckles Industries به صورت حرفه ای از یکسری رنگ ها و افکت‌ها استفاده کرده است که از حالت طراحی سلسله مراتبی نیز پشتیبانی می کند. در این وبسایت به لطف تصویر پس‌زمینه و استفاده از رنگ‌های خاص در آن، متن به بهترین شکل ممکن به چشم می‌خورد.
تصاویر سفارشی کوچکتر
درست نسبت به میزان محبوبیت تصاویر تمام صفحه، تصاویر کوچکتر نیز محبوب هستند. لایه‌های نمایش کار و محصولات اغلب اوقات از این گونه تصاویر برای نمایش بهتر استفاده می کند. اسلایدر‌های انیمیشنی نیز از چنین حالتی بهره می‌برند -البته نه همیشه-.
وبسایت The Portrait Machine از یک اسلایدر بری نمایش ویژگی های محصول خود از یکسری تصاویر کوچک همراه با اسلایدر استفاده می کند. هرکدام از تصاویر بسته به مخاطب از استایل و ویژگی‌های متفاوتی بهره می‌گیرد. این موضوع برای نمایش محصولات به صورت هوشمندانه و نسبت به سن افراد مختلف بسیار راه جالبی است. یک تصویر تنها مطمئنا نمی تواند چنین حالتی را به‌وجود بیاورد.
این تکنیک تصاویر در وبسایت‌ها با المان کاردهای رابط کاربری بسیار سازگار است. الگوی کاردها با تشکر از حالت واکنشگرا روز به روز محبوب‌تر می شود و به لطف تصاویر کوچک چندگانه به خوبی در صفحات مختلف با اندازه‌های مختلف نمایش پیدا می کند.
کلمات و تایپوگرافی سفارشی
هیچ چیز به اندازه یک تصویر سفارشی همراه با یک تایپوگرافی مخصوص، خروجی منحصر به فرد و یونیکی را ارائه نمی کند. وقتی که حضور وبسایت‌ها در اینترنت روزبه‌روز در حال بیشتر شدن است حضور پیدا کردن و سرمایه گذاری روی مواردی که هویت برند شما را اثبات می کند بسیار مهم و کاربردی است.
نگاهی به وبسایت Metaverse Mod Squad بیاندازید، این وبسایت سفارشی کردن المان‌های مختلف را به مرحله بالایی برده است. برای مثال می توان به عنوان آن توجه کرد. استفاده از تایپ‌فیس و تایپوگرافی منحصر به فرد اهداف ما در این مرحله را توجیه می‌کند.
دستکاری کردن تصاویر
شما می توانید تصاویر را برای سازگاری بیشتر با برندتان ویرایش کنید. برخی از حالت‌ها ویرایش تصویر شامل موارد زیر است:
- تغییر اندازه المان‌های داخل صفحه
- برهم‌گذاری تصاویر
- اضافه کردن یا حذف کردن یک شئ
- استفاده از افکت‌های تصویری
استفاده از برخی اپلیکیشن‌های ویرایش تصاویر برای خود بسیار مهم هستند. با استفاده از آن ها می توانید تصاویری را خلق کنید که از یاد نخواهند رفت.
در استدیو Legwork می توانید شاهد خلاقیت‌هایی باشید که با استفاده از برنامه‌های ویرایش تصویر به وجود آمده است. شاید این موضوع برای برخی از شرکت‌ها جواب گو نباشد اما برای دادن شخصیت به کارتان و منحصر به فرد بودن ممکن است گزینه خوبی باشد.
تصویربرداری سفارشی جدای از استفاده، یک تکنیک طراحی است که باعث می شود تصویر از آن شما باشد. تصاویر باید برنده، متمرکز و با کیفیت باشند. آن ها باید بیانگر برند، استایل و صدای شما باشند. اگر شما کتابخانه‌ای از تصاویر را در دست ندارید از همین الان شروع به جمع آوری آن ها کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید