علاوه بر متن
تصاویر مهم‌ترین محتوای هر صفحه وب هستن
پس بیایم یاد بگیریم چطور می‌تونیم از تصاویر درست استفاده کنیم
چه زمانی از تصاویر استفاده کنیم و چه تصاویری رو واقعاً انتخاب کنیم
در کل ما می‌تونیم از چهار نوع تصویر مختلف استفاده کنیم
عکس‌های محصول عکس‌های داستان‌گو
تصویرسازی‌ها و الگوها (patterns)
بیایم برای هرکدوم از این چهار نوع
چندتا مثال ببینیم
شروع می‌کنیم با عکس‌های محصول مثل این‌ها
خب همونطور که اسمش میگه
برای نشون دادن محصول هستن
محصولی که داری توی وب‌سایتت می‌فروشی
و این موضوع هم برای محصولات فیزیکی درسته
و هم برای محصولات دیجیتال طبیعتاً
که خیلی وقت‌ها با اسکرین‌شات‌های اون محصول نشون داده می‌شن
همین محصول دیجیتال
حالا مثل قبل من نمی‌خوام خیلی وقت بذارم
روی همه‌ی این مثال‌ها
ولی می‌خوام شما این اسلایدها رو به‌صورت PDF دانلود کنید
و همه‌ی مثال‌ها رو دقیق خودتون بررسی کنید
اینطوری واقعاً به جذب و درک این مطالب کمک می‌کنه
امیدوارم حتی همزمان با دیدن این ویدیو
دارید PDF رو هم دنبال می‌کنید
خب بگذریم حالا می‌ریم سراغ عکس‌های داستان‌گو
این‌ها درواقع تصاویری هستن
که به انتقال پیام وب‌سایت شما کمک می‌کنن
این عکس‌ها خود محصول رو نشون نمی‌دن
ولی ممکنه کسی رو نشون بدن که از محصول استفاده می‌کنه
یا هر چیزی که به نوعی به محصول یا پیام سایت ربط داره
دوباره می‌گم: یا به خود پیام سایت شما مربوط باشه
مثلاً اینجا در سمت چپ
یه نفر داره از دفترچه استفاده می‌کنه توی سایتی
که دقیقاً همون دفترچه‌ها رو می‌فروشه
یا اون یکی بالا سمت راست که درباره‌ی کوچینگ هست
و نشون میده فضایی رو
که کوچینگ واقعاً اونجا اتفاق میفته
پس این‌ها عکس‌های داستان‌گو هستن
و این نوع عکس‌ها همه‌جا توی انواع وب‌سایت‌ها دیده می‌شن
و حتی میشه گفت
که این‌ها از همه مهم‌تر هستن بین این چهار نوع
حالا مورد بعدی: تصویرسازی‌ها
که این روزها خیلی بیشتر دارن محبوب می‌شن
تصویرسازی‌ها همونطور که توی این مثال‌ها می‌بینید
می‌تونن توی سبک‌های خیلی مختلفی طراحی بشن
درواقع یه روش انتزاعی‌تر هستن
برای داستان‌گویی
اون‌ها می‌تونن مقدار زیادی اصالت و سبک شخصی
به وب‌سایت اضافه کنن و کمک کنن تا
شخصیت وب‌سایتی که انتخاب کردی بیشتر دیده بشه
برای صفحه‌ی مشخصی که داری طراحی می‌کنی
این مثال‌هایی که اینجا می‌بینید تصویرسازی‌های دو‌بعدی هستن
ولی تصویرسازی‌های سه‌بعدی هم وجود دارن
که روزبه‌روز بیشتر دارن محبوب می‌شن
و اینجا هم چندتا مثال از اون‌ها داریم
و نهایتاً ما الگوها (patterns) رو هم داریم
که ممکنه چیزی شبیه این باشن
و همونطور که توی بعضی از این مثال‌ها می‌بینید
الگوها می‌تونن به شکل پس‌زمینه‌ی کل بخش‌ها بیان
یا می‌تونن پشت تصاویر قرار بگیرن
برای اینکه جزئیات بصری جالبی اضافه کنن
پس در کل این الگوها می‌تونن استفاده بشن
برای اضافه کردن کمی خلاقیت و جزئیات بصری
به صفحات شما
و باعث می‌شن کمتر خسته‌کننده باشن
البته تا وقتی که زیاده‌روی نکنید
چون اگه همه‌جای صفحه پر از الگو بشه
ممکنه فقط شلوغی بصری ایجاد کنه
پس زیاده‌روی نکنید باشه؟
یعنی زیاده‌روی نکن
باشه
خب
این‌ها چهار نوع اصلی تصویر هستن
که معمولاً توی وب‌سایت‌ها پیدا می‌شن
نکته‌ی مهم اینه که باید از این تصاویر استفاده کنید
برای اینکه واقعاً پیام و داستان وب‌سایتتون رو پشتیبانی کنن
یه جورایی همون چیزی که قبلاً هم بهتون گفتم
پس این یعنی شما باید فقط
از تصاویری استفاده کنید
که واقعاً به پروژه یا سرویس شما مربوط باشن
پس مثل این مثال‌ها همه‌شون به‌نظرم منطقی هستن
برخلاف این چندتا مثال دیگه
مثل همین سمت راست
این چه ربطی به یک «testimonial» داره؟
حتی یه نفر هم توی تصویر نیست
یا این پایین سمت چپ که نوشته:
«توانمندسازی پژوهش‌های پیشرو»
خب سه نفر و یه سگ چه ربطی به این دارن؟
بعضی وقت‌ها تصاویر وب‌سایت‌ها
خیلی بی‌معنی به نظر می‌رسن
و این چیزیه که باید ازش دوری کنید
یه نکته‌ی خیلی مهم دیگه هم اینه که شما باید
هر وقت می‌تونید از تصاویر اورجینال استفاده کنید
یعنی تصاویری که خودتون گرفتید
یا یک عکاس حرفه‌ای براتون گرفته
مثلاً توی این مثال خیلی مشخصه
که یه عکاس حرفه‌ای این تصویر رو گرفته
فقط مخصوص این وب‌سایت
و این ارزش خیلی بیشتری نسبت به عکس‌های استوک داره
که همه جا تکراری می‌شن
پس همیشه تا می‌تونید از تصاویر اختصاصی استفاده کنید
خب همیشه این کار ممکن نیست
به‌خصوص چون نیاز به بودجه‌ی خاصی داره
وگرنه می‌تونید از عکس‌های استوک خوب و باکیفیت استفاده کنید
این به‌نظرم مثال خوبی از یک تصویر استوک باکیفیته
که من رایگان از یکی از وب‌سایت‌ها گرفتم
که به‌زودی بهتون نشون می‌دم
این دقیقاً همون نوع تصویریه که باید دنبالش باشید
نه اون عکس‌های خیلی کلیشه‌ای
این یکی به‌نظرم هم قشنگه
و هم کمک می‌کنه پیام رو منتقل کنه
اما در عوض بعضی عکس‌های استوک هم هستن که این‌طوری‌ان
و مطمئنم همه‌مون این نوع عکس‌ها رو دیدیم
عکس‌هایی که خیلی کلیشه‌ای خیلی بی‌کیفیت
خیلی تکراری و واقعاً ضعیف هستن
مثل همین چهار تصویر
که همه دیدیم و واقعاً افتضاحن
هیچ‌وقت هیچ‌وقت از این نوع عکس‌ها استفاده نکنید باشه؟
مهم اینه که عکس‌هاتون واقعی و طبیعی به‌نظر برسن
نه مصنوعی و بیش‌ازحد ساخته‌شده مثل اینا
چون کاربرهای امروزی خیلی بیشتر دنبال اصالتن
تا دنبال عکس‌های براق و تزیینی
پس در عوض می‌تونید از این وب‌سایت‌هایی که اینجا هستن استفاده کنید
و به‌نظر من بهترینشون «Unsplash» هست
پس می‌تونید تصاویر رایگان
یا تصویرسازی‌ها رو از این چهار وب‌سایت بگیرید
که دوباره بخشی از جعبه‌ابزار ما هستن
خیلی خب
و این اساساً توضیح می‌ده که کی و چه تصاویری باید استفاده بشن
حالا بیایید یاد بگیریم که چطور می‌شه تصاویر رو درست به‌کار برد
یکی از مهم‌ترین نکات در استفاده‌ی درست از تصاویر اینه که
افراد واقعی رو توی تصاویر نشون بدید
برای اینکه احساسات کاربر رو درگیر کنید
پس مثل این عکس‌ها که آدم‌های واقعی رو نشون می‌دن
نه مدل‌های مصنوعی و بیش‌ازحد ساخته‌شده
کاربرها این روزها می‌خوان با آدم‌های واقعی ارتباط بگیرن
و شما می‌تونید از این موضوع به نفع وب‌سایتتون استفاده کنید
مورد بعدی چیزی هست که خیلی‌ها نادیده می‌گیرن
اینکه خیلی ساده می‌تونید تصاویرتون رو برش بدید
تا دقیقاً با پیام شما هماهنگ بشن
مثل این مثالی که قبلاً بهتون نشون دادم درسته؟
همین پروژه‌ی توسعه‌ی انرژی خورشیدی
عکس اصلی در واقع این‌قدر بزرگ بود
اما خیلی بیش‌ازحد بزرگ بود
برای همین من خیلی ساده بخش‌های اضافی رو حذف کردم
و فقط اون چیزی رو گذاشتم که برای من مهم بود
کار دیگه‌ای که می‌تونید امتحان کنید اینه که
عکس‌ها تصویرسازی‌ها و الگوها رو ترکیب کنید
تا جزئیات جالب و خلاقانه بسازید
و افکت‌های بصری جذابی شبیه همین نمونه‌ها
اما حالا بریم جلوتر شما باید یاد بگیرید
که چطور متن روی تصاویر رو مدیریت کنید
این هم یکی دیگه از مهارت‌های مهمیه که باید داشته باشید
وقتی از تصاویر استفاده می‌کنید
و راه‌های مختلفی برای انجام این کار وجود داره
اولین راه اینه که تصویر رو در جایی که متن قرار می‌گیره تیره‌تر یا روشن‌تر کنید
همون جایی که متن هست
مثل این مثال کاری که انجام دادن این بود
که کل تصویر سمت چپ رو به‌سادگی تیره‌تر کردن
و حالا متن خیلی راحت‌تر خونده می‌شه
پس تیره کردن کل تصویر یکی از تکنیک‌هاست
و روش دیگه اینه که فقط بخشی از تصویر رو تیره کنیم
که می‌تونیم با استفاده از گرادیان بهش برسیم
اینجا در واقع فقط بخش پایینی تصویر
تیره‌تر شده
و بنابراین دوباره متن خیلی راحت‌تر خونده می‌شه
در حالی که در سمت راست
تقریباً غیرممکنه حداقل توی نمونه‌ی سمت راست
پس تیره یا روشن کردن تصویر می‌شه روش اول
برای ترکیب تصاویر با متن
و می‌شه گفت که این پرکاربردترین روش هم هست
اما یه روش دیگه هم وجود داره
اینکه متن رو در یک بخش خنثی از تصویر قرار بدیم
دقیقاً مثل اینجا و همین شش نمونه
همه‌شون بخشی دارن که نسبتاً خنثی‌ـه
مثلاً ممکنه
یه ناحیه با رنگ پس‌زمینه‌ی یکنواخت باشه
که این یه جای عالی برای قرار دادن متن ماست
فقط باید حواسمون باشه که چه اتفاقی می‌افته
وقتی این تصاویر روی صفحه‌ی موبایل کوچک‌تر می‌شن
چون اون موقع ممکنه متن با بخش دیگه‌ای از تصویر
روی هم بیفته
یعنی بیفته روی بخشی از تصویر که نمی‌خوایم
حالا روش سوم اینه که متن رو داخل یک باکس قرار بدیم
مثل همین مثالی که اینجاست
این روش خیلی ساده‌ست و درعین‌حال خیلی مؤثره
به‌خصوص اگر کمی شفافیت به باکس اضافه کنیم
مثل همین مثال سمت چپ
که خیلی وقت‌ها می‌تونه عالی جواب بده
و حالا در نهایت برای جمع‌بندی این بخش
باید درباره‌ی چند جزئیات فنی هم صحبت کنیم
مربوط به استفاده‌ی عملی از تصاویر
اولین نکته اینه که باید تصاویرمون رو آماده کنیم
برای صفحه‌نمایش‌های با وضوح بالا مثل نمایشگر موبایل‌ها
و یا نمایشگر لپ‌تاپ‌های حرفه‌ای مثل مک‌بوک‌های اپل
یا Dell XPS
برای این کار لازمه ابعاد واقعی تصاویرمون رو
دو برابر ابعادی کنیم که می‌خوایم توی صفحه نشون بدیم
مثلاً فرض کنید می‌خوایم این تصویر رو نشون بدیم
با ابعاد ۳۰۰ در ۳۰۰ پیکسل
این یعنی باید فایل تصویری ما درواقع باشه
۶۰۰ در ۶۰۰ پیکسل
یعنی دو برابر تعداد پیکسل‌هایی که روی وب‌سایت نمایش داده می‌شه
تا کیفیت تصویر روی نمایشگرهای با وضوح بالا حفظ بشه
ما به این می‌گیم مقیاس ۲ برابر یا 2x
یعنی ضریب مقیاس در واقع همون تعداد پیکسل‌های واقعی هست
که صفحه نمایش داره تقسیم بر تعداد پیکسل‌هایی
که برای هر المان روی صفحه نمایش داده می‌شن
روی صفحه‌نمایش‌های با وضوح بالا این ضریب مقیاس 2x هست
و گاهی حتی 3x مثل جدیدترین آیفون‌ها
یعنی برای هر پیکسلی که ما تعریف می‌کنیم
توی طراحی شامل تصاویر هم می‌شه
صفحه نمایش واقعاً دو یا سه پیکسل فیزیکی استفاده می‌کنه
تا اون یک پیکسل رو نشون بده
این کار باعث می‌شه تجربه‌ای بسیار شفاف و واضح
با وضوح بالا ایجاد بشه
دقیقاً مثل چیزی که الان توی گوشی‌ هوشمند خودتون دارید
چیزی که اینجا توضیح دادم
فقط سطحی از موضوع رو پوشش داد
در مورد اینکه نمایشگرهای با وضوح یا تراکم بالا چطور کار می‌کنن
اما همین برای درک این قانون کافیه
لازم نیست جزئیات فنی رو بدونید
فقط باید خود قانون رو بدونید
همین کافی‌ـه درسته
پس این دقیقاً دلیلیه که چرا باید تصاویرمون رو
دو برابر بزرگ‌تر از اندازه‌ی نمایش اون‌ها در صفحه بسازیم
چون نمایشگرهای با وضوح بالا
در واقع برای نمایش هر پیکسل از دو پیکسل استفاده می‌کنن
که ما در CSS مشخص می‌کنیم
حالا اگه این قانون رو رعایت نکنیم
مثلاً تصویر اصلی ما فقط ۳۰۰ در ۳۰۰ باشه
روی نمایشگر با وضوح بالا
این‌طوری به نظر میاد
و خب این چیزی نیست که بخوایم
در عوض روی نمایشگرهای معمولی
هیچ ضریب مقیاسی وجود نداره
یعنی هر پیکسل فیزیکی صفحه برابر هست
با یک پیکسل توی تصاویر ما
یادتون باشه که الان تصویر روی نمایشگر با وضوح بالا
تار به نظر می‌رسه درسته؟
ولی اگه همین صفحه رو روی نمایشگر معمولی ببینیم
همه چیز درست خواهد بود
با این حال برای اینکه روی همه نمایشگرها درست باشه
ما همیشه تصویر رو دو برابر بزرگ‌تر می‌سازیم
که دقیقاً همون چیزیه که قانون می‌گه
البته این موضوع می‌تونه مشکل حجم بالای فایل‌های تصویری رو ایجاد کنه
که ما رو می‌بره به نکته‌ی بعدی
کار دیگه‌ای که باید همیشه انجام بدید
فشرده‌سازی تصاویر برای کاهش حجم فایل هست
و برای بهبود سرعت بارگذاری سایتتون
اینجا یک ابزار خیلی کاربردی وجود داره
به اسم Squoosh که در این مثال
من تونستم حجم فایل رو تا ۹۶٪ کاهش بدم
فایل اصلی ۳۱۸ مگابایت بود که برای کاربر خیلی بد بود
ولی رسید به ۱۱۲ کیلوبایت
که واقعاً حجم خیلی کمیه
پس فشرده‌سازی همه‌ی تصاویر با ابزارهایی مثل این
برای رضایت کاربران سایتتون فوق‌العاده مهمه
ممکنه وسوسه بشید این مرحله رو رد کنید
اما لطفاً این کار رو نکنید باشه؟
یه جزئیات فنی دیگه هم اینه که
وقتی چند تصویر رو کنار هم می‌ذارید
باید مطمئن بشید
که دقیقاً همون ابعاد رو دارن
چون در غیر این صورت طراحی شما
چیزی شبیه این مثالی می‌شه که اینجا سمت راست می‌بینید
که اصلاً خوب به نظر نمی‌رسه
وقتی تصاویر ارتفاع یا عرض یکسانی نداشته باشن
پس قبل از قرار دادن تصاویر روی سایت
مطمئن بشید که دقیقاً همون ابعاد رو دارن
یا حداقل نسبت طول به عرض یکسانی داشته باشن
تا طراحی درست به نظر بیاد
خب این همه چیزی بود که باید
درباره‌ی استفاده از تصاویر بهتون بگم
این بخش رو در جلسه‌ی بعدی به‌صورت عملی پیاده‌سازی نمی‌کنیم
چون در واقع CSS جدیدی یاد نگرفتیم
و همینطور چون همه‌ی این موارد رو
در پروژه‌ی بزرگ وب‌سایتمون به اسم Omnifood
بعدتر انجام خواهیم داد