بروز شو

تصاویر وب سایت در سال 2022 چه نقشی دارند؟

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

ما در جهانی مملو از تصاویر زندگی می کنیم: یک فرد بزرگسال به طور متوسط ​​حدود 30 دقیقه در روز را صرف مرور 95 میلیون عکس آپلود شده روزانه در اینستاگرام می کند. علاوه بر این، روزانه بین 4000 تا 10000 تبلیغ مواجه می شویم.

ساخت ایمیل تنها در 4 دقیقه | آموزش کامل ساخت [Gmail + Yahoo]

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

انواع تصاویر وب سایت

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

عکاسی

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

برای شروع، استفاده از این دو نوع عکس رایج را در وب سایت خود در نظر بگیرید:

بسیاری از وب سایت هایی که به حجم بالایی از تصاویر یا منابع محدود نیاز دارند، ترجیح می دهند از عکس های استوک با کیفیت بالا در وب سایت خود استفاده کنند. اگرچه منحصر به هویت برند شما نیستند، اما می‌توانند ایده‌های بصری جهانی‌تری را به تصویر بکشند (مانند اسم‌های عمومی: افراد، مانند «خانواده‌ها»، مکان‌ها، مانند «سواحل»، چیزهایی مانند «صبحانه»؛ و ایده‌هایی مانند «پارتی»). عکس‌های استوک نیز همیشه دارای مجوز ضمیمه شده‌اند.

عکس های سفارشی

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

ویدئو

اگر عکس‌ها به بازدیدکنندگان وب‌سایت القاء می‌کنند، ویدیو تا حدی نمایی دارد. با دامنه‌های زاویه وسیع‌تر، پیام‌های طولانی‌تر، انیمیشن‌ها و موارد دیگر، ویدیوها می‌توانند به بازدیدکنندگان وب‌سایت کمک کنند تا بدون زحمت با محتوای بیشتری درگیر شوند. به همین دلیل، طراحان دائماً به دنبال ادغام این ابزار نوری قدرتمند در وب‌سایت‌ها هستند، چه با فرمت‌های سنتی و چه با ابزارهای ویدیویی مدرن‌تر و پیشرفته‌تر:

ویدئوی سنتی

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

ویدیوی شفاف

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

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

تصویری شامل ویدیوهای شفاف wix که تصاویری را در فضا به تصویر می‌کشد

جعبه ویدئو

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

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

ماسک ویدیویی

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

هنر وکتور

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

نکته: مجموعه انحصاری Vector Art تیم  WOW شامل هزاران تصویر سفارشی SVG و نمادهایی است که تاریخ های اجتماعی مهم، تعطیلات، روندهای فصلی و دلایل منحصر به فرد را به یاد می آورند (مانند آخرین مجموعه ما که از اوکراین پشتیبانی می کند). این تصاویر می توانند به هر اندازه ای بدون پیکسل گسترش پیدا کنند - یک کیفیت ضروری برای طراحان امروزی.

پس زمینه ها

ترکیب تصاویر شامل انتخاب پس‌زمینه وب‌سایت برای تنظیم لحن بازدیدکنندگان هنگام ورود و حرکت در سایت شما است.

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

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

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

هاست ابری چیست؟

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

پس زمینه ویدیو

ما قبلاً به چگونگی تأثیر ویدیو بر مخاطبان امروزی پرداخته‌ایم-بنابراین جای تعجب نیست که بسیاری از طراحان وب‌سایت اکنون پس‌زمینه‌های ویدیویی را به جای تصاویر ثابت برای جذب کاربران انتخاب می‌کنند.

پس زمینه گرادیان

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

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

نکات تخصصی طراحی تصاویر وب سایت

من با آدی هوری، مدیر محصول خلاق WOW به گفت و گو نشستم تا به بهترین شیوه های تصویرسازی وب سایت اشاره کنم. ما همچنین تعدادی از بهترین وب‌سایت‌ها را از وب‌سایت‌های کاربران انتخاب کردیم تا از نظر بصری الهام بخش شما باشیم:

نکته 1 تصویرسازی وب سایت: با ابزارهای تصویری لذت ببرید

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

ما در Wix این ابزارهای بصری را ایجاد کرده‌ایم تا زندگی شما را آسان‌تر کرده و به وب‌سایت شما کمک کنیم تا برجسته شود. آدی می گوید: ما همیشه عملکرد را در ذهن داریم. "اینها فقط برای شروع نیستند، بلکه می توانند برای هر کسی که بینش دارد در زمان و پول صرفه جویی کند تا تصاویری با کیفیت ایجاد کند."

وای آینده نگر Shine Blue Ivy

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

همه چشم ها به طراحی شما: راهنمای معاصر برای تصاویر وب سایت

نکته 2 تصویرسازی وب سایت: یک فاویکون به وب سایت خود اضافه کنید

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

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

Adi می گوید: "فاویکون نقش مهمی در ناوبری وب سایت ایفا می کند." "من در مورد شما نمی دانم، اما من در حال حاضر حدود صد برگه باز دارم - و اگر وب سایتی یکی نداشته باشد، نمی توانم آن را در حین مرور از یک سایت به سایت دیگر دوباره پیدا کنم. ”

اسکرین شات از وب سایت ok drugs با پس زمینه نارنجی روشن، عکاسی محصول و لوگوی قابل مشاهده اسکرین شات از وب سایت ok drugs با پس زمینه نارنجی روشن، عکاسی محصول و لوگوی قابل مشاهده

نکته 3 تصویرسازی وب سایت: تصاویر اشتراک گذاری اجتماعی را فراموش نکنید

Huri تأکید می‌کند که صاحبان وب‌سایت اغلب تصاویر اشتراک‌گذاری اجتماعی یا تصویری که هنگام اشتراک‌گذاری URL در برنامه‌هایی مانند Facebook و Whatsapp نمایش داده می‌شود، نادیده می‌گیرند. حتی اگر صفحه وب مشترک شما شامل تصاویر نباشد، تصاویر اشتراک گذاری اجتماعی می توانند پیش نمایش بصری خوبی از سایت شما به مخاطبان ارائه دهند.

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

نکته 4 تصویرسازی وب سایت: به کیفیت توجه کنید

ما پیکسل‌ها، تاری‌ها و عدم تعادل را پشت سر گذاشته‌ایم (مگر اینکه، البته، سایت شما به روند زیبایی‌شناسی نوستالژیک Y2K برسد.) با این حال، این تصاویر شفاف نباید به قیمت سرعت بارگذاری شما تمام شود. با این قوانین سرانگشتی بهترین ها را از هر دو دنیا دریافت کنید:

فرمت های فایل

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

از رسانه های با وضوح بالا استفاده کنید

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

Adi می‌گوید: «ما درک می‌کنیم که عملکرد چقدر مهم است - و ابزارهایی ایجاد می‌کنیم که ویژگی‌های پیشرفته‌ای را در اختیار شما قرار می‌دهند. "ما همیشه عملکرد را در ذهن داریم، بنابراین این نباید شما را از انتخاب رسانه با کیفیت بالا باز دارد."

نکته 5 تصویرسازی وب سایت: تصاویر خود را در دسترس قرار دهید

دسترسی به وب به همه این امکان را می دهد تا بدون توجه به توانایی، با وب سایت شما تعامل داشته باشند.

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

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

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