طراحی و گرافیکطراحی وبفتوشاپوب

استراتژی تصاویر در وب و کاربرد آنها

7مورد از بهترین استراتژی ها برای استفاده از تصاویر در وب:

خلاصه مطلب

  • تایپوگرافی
  • موقعیت متن
  • دکمه های روحی
  • طراحی واکنشگرا
  • اشیا در واقعیت
  • سیاه و سفید
  • برهم گذاری رنگ
  • تصاویر سفارشی کوچک
  • کلمات و تایپوگرافی سفارشی
  • دستکاری کردن تصاویر

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

در این مطلب قصد داریم ۷استراتژی برتر را در استفاده از تصاویر در رابط های وب بگوییم.

تصاویر hero 

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

 

 

چه زمانی از تصاویر hero استفاده کنیم؟

تایپوگرافی

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

موقعیت متن

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

دکمه های روحی

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

طراحی واکنشگرا

یکی از مواردی که در استفاده از تصاویر hero مشکل ایجاد میکند این است که تصویر شما در اندازه های مختلف صفحه نمایش یک خروجی را خواهد داشت.

-استفاده از تصاویر hero تاثیر بسیار زیادی بر روی کاربر می گذارد و برای این کار به دقت از یک تصویر بسیار با کیفیت همراه با تایپوگرافی درست استفاده کنیم.

اشیا در واقعیت

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

سیاه و سفید

همه تصاویر برای اینکه بتوانند تاثیر خودشان را بگذارند نیازی ندارند تا رنگارنگ باشند در حقیقت استفاده از تصاویر سیاه و سفید حس ذاتی از زیرکی و مهارت را القا میکند.برای مثال: شرکتgoltz group برای نمایش محصولات خود از تکنیک سیاه و سفید استفاده میکند البته قرار دادن متن های رنگی به وبسایت کمک میکند تا بتواند نظر کاربران بیشتری جلب کند.

برهم گذاری رنگ

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

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

تصاویر سفارشی کوچک

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

کلمات و تایپوگرافی سفارشی

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

نگاهی به وبسایت metaverse mod squad بیاندازید.این وبسایت سفارشی کردن المان های مختلف را به مرحله ی بالایی برده است استفاده از تایپ فیس و تایپوگرافی منحصر به فرد اهداف ما در این مرحله را توجیه میکند.

دستکاری کردن تصاویر

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

۱- تغییر المان های داخل صفحه
۲- برهم گذاری تصاویر
۳- اضافه کردن یا حذف کردن یک شی
۴- استفاده از افکت های تصویری

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

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

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

تنظیم : سارا حاج شعبانی – عضو تحریریه کیامگ “بخش طراحی و گرافیک”

از طريق
سارا حاج شعبانی
منبع
کیامگ
برچسب ها
نمایش بیشتر

سارا حاجی شعبانی

من سارا حاجی شعبانی عضو تحریریه کیامگ هستم و به دنیای گرافیک و فتوشاپ علاقه دارم

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بستن