نحوه تصویر سازی در طراحی وب : تصاویر می توانند روشی بسیار موثر برای انتقال لحن و سبک برند و وب سایت شما باشند. علت و زمان استفاده از تصاویر را بیابید و سبک های مختلف تصویرسازی را که می توانید استفاده کنید بررسی کنید.
برندسازی فقط چیزی نیست که بر اساس سلیقه یا ترجیحات طراحی فردی فرد ایجاد شود. تحقیقات و تفکرات زیادی در مورد توسعه برندسازی بصری فرد انجام شده است.
وقتی سبک بصری یک برند را توسعه میدهیم، تعدادی مؤلفه برای مرتب کردن وجود دارد – مانند لوگوها، طرحهای رنگی و تایپوگرافی . تصاویر نیز موضوع مهمی برای هش کردن است، زیرا بر همه چیز تأثیر می گذارد، از انواع تصاویر استفاده شده در وب سایت گرفته تا گرافیک هایی که در خبرنامه، وبلاگ و پست های رسانه های اجتماعی شرکت قرار می گیرند.
اما چگونه تصمیم میگیرید که کدام نوع تصویر با برند مناسبتر است – عکسها و ویدیوها در مقابل تصاویر؟
امروز، ما در مورد مؤلفه تصویرسازی نام تجاری و به طور خاص، چرا و چه زمانی ممکن است از تصاویر استفاده کنید، به صفر می پردازیم. ما مزایای استفاده از تصویرسازی در طراحی وب و همچنین انواع مختلفی از سبک های تصویرسازی را که می توانید استفاده کنید، بررسی خواهیم کرد.
چرا باید از تصاویر در طراحی وب استفاده کرد؟
اگرچه ممکن است وسوسهانگیز باشد که تصاویر را به پسزمینه فضایی که از نظر بصری جالب توجه نباشد، وسوسهکننده باشد، اما آنها میتوانند هدف بزرگتر و متنوعتری در طراحی وب داشته باشند. بیایید به برخی از دلایل و انگیزههای انتخاب تصویرسازی نسبت به انواع دیگر تصاویر نگاهی بیندازیم:
لحن و سبک را منتقل کنید
بصری ها به طور کلی می توانند اطلاعات زیادی در مورد سبک یک برند با کاربران برقرار کنند. با این حال، محدودیتهایی برای ارتباط از طریق یک عکس ثابت یا یک کلیپ ویدیویی کوتاه وجود دارد.
با تصویرسازی، میتوانید با سبک و لحن خود – گاهی به شکلی اغراقآمیز – آشکارتر از تصاویر دنیای واقعی باشید. برای مثال صفحه اصلی Sour Patch Kids را در نظر بگیرید:
آب نبات “بچه ها” به تنهایی زیبا و سرگرم کننده به نظر می رسند. با این حال، عکسی از شکل ظاهری آدامسهای واقعی، لحن و پیامی را که برند سعی دارد به اشتراک بگذارد، منتقل نمیکند. تصاویر موجود در این سایت (و در کمپین های بازاریابی گستاخانه آنها) انجام می دهند.
تصاویر در این طرح، بچهها را در سناریوهای مختلفی قرار میدهند – دوچرخهسواری، ضربه زدن به تیر کوپید، و ظاهر شدن در هر گوشهای. این جنبه بازیگوش و اغلب شیطنت آمیز برند را نشان می دهد.
بسته به نوع تصاویری که استفاده می کنید، ممکن است زمینه اضافی در مورد برند شما اضافه کنند یا اجزای جداگانه سایت شما را با نور دقیق تری قاب کنند. با این حال، همیشه لازم نیست از آنها به روشی ساده استفاده شود. تصاویر همچنین می توانند رمز و راز و عمق را به طرح اضافه کنند.
با خلاقیت های منحصر به فرد متمایز شوید
حتی اگر تصاویر خود را از ابتدا انجام ندهید، چیزی در مورد آنها وجود دارد که می تواند خلاقانه تر از عکس ها یا ویدیوهای افراد، مناظر و محصولات باشد. انواع مختلفی از خلاقیت وجود دارد که از طریق تصویرسازی نیز قابل انتقال است.
به عنوان مثال، طرحی که از اشکال و خطوط مسطح هندسی استفاده میکند ممکن است برای شرکتهایی در زمینههای علوم، ریاضیات و فناوری به خوبی کار کند. این نوع طراحی منطقی و ساختارمند همانقدر که یک اثر هنری است نوعی خلاقیت است.
فقط کافی است به وب سایت یک آژانس تصویرسازی مانند Inky نگاه کنید و انواع خلاقیت های متنوعی را که می توانید با استفاده از تصاویر به دست آورید، خواهید دید:
تصاویر – صرف نظر از سبک آنها یا میزان استفاده گسترده آنها در یک طراحی – می توانند ظاهر محصول دیجیتال شما را ارتقا دهند. آنها همچنین طراحان را قادر می سازند تا با شخصیت ها، اشیاء و مناظری که در این دنیا وجود ندارند آزمایش کنند.
یک علامت تجاری قابل تشخیص به UI اضافه کنید
برندهای دیجیتال و همچنین آنهایی که دارای تأسیسات فیزیکی هستند ممکن است بخواهند از یک طلسم به جای لوگو برای نشان دادن آنها در تمام کانال های بازاریابی و فروش خود استفاده کنند. این تنها کاری است که می توانید با تصویرسازی انجام دهید.
چند راه برای استفاده از طلسم در وب سایت وجود دارد. یکی از راهها ایجاد یک کاریکاتور (مانند Sour Patch Kids) است که بازدیدکنندگان را در سفر خود در اطراف سایت دنبال میکند. راه دیگر این است که علامت تصویری را از لوگو – یا شاخه ای از آن – بگیرید و از آن در طرح ها، عکس ها و صفحات خود مانند یک واترمارک استفاده کنید.
ما این نوع دوم را در وب سایت باغ زیتون می بینیم:
علامت تصویری شاخه زیتون بسیار ظریف در سراسر طراحی ظاهر می شود. سه نمونه از آن را در اسکرین شات می بینیم:
- روی کیف باغ زیتون بالای «کترینگ»
- در کارت بالا «کارتهای هدیه»
- به عنوان پس زمینه بافت در فوتر
همچنین هنگامی که تصاویر به طور کامل در منوی وب سایت بارگیری نشده اند، به عنوان یک مکان نگهدار استفاده می شود:
این یک مثال عالی از این است که چگونه میتوانید «طلسم» مصور خود را وادار کنید بازدیدکنندگان را دنبال کند – یا آنها را به بخشهای کلیدی صفحه راهنمایی کنید یا صرفاً برای تقویت برندسازی آنجا باشید.
جهان های دیجیتالی را ایجاد کنید که بازدیدکنندگان شما قبلاً ندیده اند
زمانی که صرفاً با عکس طراحی میکنید، نمیتوانید جهانسازی زیادی انجام دهید. اگر تصاویر وب سایت شما مکمل محتوای شما باشد، هیچ اشکالی ندارد.
گفته میشود، اگر میخواهید داستانی را تعریف کنید و دنیایی از خود را از طریق تصاویر بسازید، تصویرسازی بهترین راه است. دنیای دیجیتال شما حتی نیازی ندارد که کاملاً غوطه ور یا ماورایی باشد. تصاویر می توانند دنیایی مشابه دنیای ما را به تصویر بکشند که فقط دیجیتالی شده است.
صفحه اصلی Yoast کار خوبی برای ایجاد تعادل بین این دو انجام می دهد:
بهینه سازی موتورهای جستجو موضوع آسانی برای تجسم نیست. Yoast می توانست سایت خود را با تعدادی اسکرین شات از افزونه وردپرس خود طراحی کند. در عوض، از تصاویر برای ترسیم یک پرتره انتزاعی از چگونگی برنده شدن در بازی SEO استفاده می کند.
مفاهیم پیچیده یا داستان های طولانی را زنده کنید
هنگامی که زمان توضیح چیزی پیچیده برای بازدیدکنندگان وب سایت می رسد، تصاویر نیز ارزشمند هستند – مانند مفهوم کلی برند، تاریخچه آن، مراحل درگیر در یک فرآیند، داده های مرتبط و غیره. همه اینها را می توان از طریق متن تجزیه کرد، اما هضم اطلاعات از طریق تصاویر برای بازدیدکنندگان بسیار آسان تر خواهد بود.
یکی از راه هایی که می بینیم از تصاویر استفاده شده برای این کار استفاده می شود، انیمیشن ها یا ویدیوهای توضیح دهنده است. این مورد را در صفحه اصلی Relish دوست داشته باشید : در حالی که درک مفهوم مربیگری رابطه خیلی سخت نیست، ویدیوی کوتاه و آسان به سرعت درد کاربران و راه حل برنامه را خلاصه می کند.
همچنین می توان از تصاویر برای ایجاد تجسم داده ها، گرافیک های گام به گام، جدول زمانی و موارد دیگر استفاده کرد. اگر شما یا مشتریانتان برای انتقال یک ایده یا بیان یک داستان فقط از طریق متن یا عکس تلاش می کنید، ممکن است تصاویر همان چیزی باشد که برای صرفه جویی در روز به آن نیاز دارید.
نحوه استفاده از تصاویر در طراحی وب:
قبل از شروع استفاده از تصاویر در طرح های خود کارهای خاصی وجود دارد که باید انجام دهید.
مرحله 1: بفهمید چرا
آیا درک روشنی از اینکه چرا استفاده از تصاویر را به جای عکس یا طراحی مبتنی بر تایپوگرافی انتخاب کرده اید، دارید؟ اگر مطمئن نیستید، یا فقط میخواهید روند جدیدی را اتخاذ کنید، بخش بالا را یک بار دیگر مرور کنید و مطمئن شوید که تصاویر هدفی را دنبال میکنند.
مرحله 2: سبک خود را پیدا کنید
انواع مختلفی از تصاویر وجود دارد که می توانید در وب استفاده کنید. قبلاً چند نمونه را در بالا دیدهایم، اما این فقط نوک کوه یخ است.
قبل از اینکه به بخش بعدی بروید و انواع مختلف تصویرسازی و همچنین راههای استفاده از آنها را بررسی کنید، مطمئن شوید که ابتدا سبک و شخصیت برند خود را مرتب کردهاید. هنگامی که بدانید به دنبال چه نوع ظاهر و لحنی هستید، جفت کردن آن با یک سبک تصویرسازی آسان تر خواهد بود.
مرحله 3: تصمیم بگیرید که چه مقدار از سایت به تصویر کشیده شود
یک وب سایت نیازی به پوشاندن تصاویر ندارد – این برای طراحی هایی است که از عکس ها به همان اندازه برای تصاویر استفاده می کند. با این حال، باید بفهمید که واقعاً به چه تعداد تصویر نیاز دارید.
به عنوان مثال، آیا می خواهید یک دنیای دیجیتالی کاملاً فراگیر ایجاد کنید؟ اگر چنین است، اکثر تصاویر شما نشان داده می شود. از سوی دیگر، اگر از تصاویر برای راهنمایی بصری افراد در سایت استفاده می کنید، به جای داستان سرایی یا ساختن عنصر جهان، ممکن است بخواهید از آنها به اندازه کافی استفاده کنید.
مرحله 4: جعبه ابزار تصویرسازی خود را بسازید
اگر قصد دارید چیزی واقعاً سفارشی طراحی کنید، ممکن است لازم باشد یک تصویرگر برای کمک به شما در آن قطعه استخدام کنید. با این حال، ابزارهای زیادی وجود دارد که می تواند به شما در ایجاد و اضافه کردن تصاویر به وب سایت خود به تنهایی کمک کند.
برای شروع، می توانید با نرم افزارهایی مانند Adobe Illustrator تصاویر طراحی کنید :
شما همچنین می توانید مجوز تصاویر وکتور سهام را از سایتی مانند Shutterstock دریافت کنید :
گزینه دیگر این است که با یک الگوی مصور شروع کنید. کتابخانه Elementor Kit دارای انواع مختلفی از آنها است:
به هر حال، Elementor همچنین ادغام تصاویر را در طراحی وب شما آسان می کند. هنگامی که یک وب سایت را با Elementor ویرایش می کنید ، به ابزارهایی دسترسی خواهید داشت که به شما امکان می دهند:
- فورا یک الگوی مصور را آپلود کنید
- یک ویدیو یا تصویر مصور را جاسازی کنید
- پس زمینه یک بخش را به یک تصویر تغییر دهید
- یک عنصر Lottie اضافه کنید
- و بیشتر
خط پایانی: اگر فکر می کنید در آینده بیشتر به سمت طراحی سایت های وردپرس مصور متمایل خواهید شد، ابزارهای زیادی وجود دارد که می توانید از آنها برای ایجاد تصاویر زیبا استفاده کنید، از جمله Elementor.
13نمونه عالی از تصاویر طراحی وب
در ادامه، 13 نمونه از تصاویر طراحی وب (علاوه بر پنج موردی که قبلا بررسی کردیم) را بررسی خواهیم کرد. ما آنها را به چهار نوع مختلف تقسیم کرده ایم تا به شما کمک کنیم برای سبک خاصی که به دنبال آن هستید الهام بگیرید:
تصاویر مسطح
طراحی تخت به رابط های وب سایتی اطلاق می شود که کاملاً دو بعدی هستند.
به طور خاص، تصاویر مسطح معمولاً چشم نواز و در عین حال مینیمال و بی تکلف هستند. این بدان معناست که شما می توانید از تصاویر مسطح به عنوان مکملی برای محتوای خود استفاده کنید، اما بازدیدکنندگان را با تصاویر بصری بسیار قوی غرق نکنید. علاوه بر این، تصاویر برداری همیشه واضح به نظر می رسند و مقیاس پذیر هستند، که برای طراحی واکنش گرا فوق العاده است.
بیایید به چند نمونه نگاه کنیم:
1. نیویورکر
این اولین مورد از نیویورکر است :
این مجله مدتهاست که به خاطر کاریکاتورهایش و همچنین تصاویر همراه با مقالاتش شناخته شده است. بنابراین جای تعجب نیست که این برند همچنین دارای یک طلسم با ظاهر متمایز به نام “Eustace” است که گهگاه در نسخه های دیجیتال و چاپی مجله ظاهر می شود.
2. مس
یکی دیگر از نمونههای عالی از برندهایی که از تصاویر استفاده میکنند، مس است . وبلاگ CRM تصاویر سفارشی را با هر پست جفت می کند:
واضح است که تصاویر برجسته با استفاده از یک راهنمای سبک برای وبلاگ طراحی شده اند. صورتی رنگ غالب در (بیشتر) گرافیک است و همه آنها از یک نوع فیگورهای کارتونی استفاده می کنند.
3. مدرسه گدارد
اگر علاقه مند به استفاده از یک تصویر به عنوان پس زمینه هستید، وب سایت خانواده مدارس گدارد مثال خوبی از نحوه انجام صحیح این کار دارد:
رنگ ها به اندازه کافی روشن هستند که در نگاه اول به نظر می رسد که این فقط یک پس زمینه بافت است. با بررسی دقیق تر، مشخص می شود که این طرح تخت حاوی آیکون های مربوط به آموزش دوران کودکی است که دقیقاً با هدف سایت مطابقت دارد.
4. CrowdHealth
CrowdHealth نام تجاری دیگری است که به درستی طراحی تصویری مسطح دارد:
این ویدیوی مصور، قبل از توضیح مزایای جایگزین بیمه درمانی، به درد مشترک کاربران رسیدگی می کند.
تصاویر نیمه تخت و سه بعدی
یکی از مشکلات طراحی یک رابط به صورت کاملا مسطح این است که می تواند برای برخی از کاربران مشکلاتی در قابلیت استفاده ایجاد کند. بدون سه بعد، تشخیص اینکه با کدام بخش از وب سایت می توانند تعامل داشته باشند، می تواند دشوار باشد.
در سال های اخیر، طراحی مسطح 2.0 برای مقابله با این موضوع معرفی شده است. این روند طراحی مانند طراحی وب سه بعدی واقعی سه بعدی نیست. بیشتر شبیه طراحی نیمه مسطح است. بنابراین، بیشتر رابط کاربری مسطح است. با این حال، به نظر می رسد عناصر کلیدی در سطوح مختلف از طریق استفاده از سایه ها، برجسته ها، گرادیان ها و سایر بافت ها وجود دارند.
هر دوی این تکنیک های طراحی غیر مسطح را می توان در تصاویر استفاده کرد. در اینجا چند نمونه آورده شده است:
5. پنیر چاک ای
وب سایت Chuck E. Cheese از ترکیبی از تصاویر تخت و سه بعدی استفاده می کند. پس زمینه و عناصر تزئینی صاف هستند در حالی که طلسم موش سه بعدی است:
با توجه به اینکه طلسم مشابه واقعی دارد، شباهت سه بعدی در وب سایت به خوبی کار می کند. بهعلاوه، باعث میشود برند نسبت به یک رندر مسطح از ماوس، احساس سرزندهتر و تعاملیتر کند.
6. 23 و من
23 and Me از تصاویر برای برجسته کردن ویژگی های نرم افزار خود استفاده می کند:
محتوای روی صفحه گوشی همان چیزی است که کاربران 23 and Me هنگام استفاده از برنامه می بینند. با این حال، طراح تصاویر صافی را اضافه کرده است که به نظر می رسد از صفحه نمایش بیرون می آیند تا بر ارزش خدمات آزمایش ژنتیک تأکید کنند.
7. Compose.ly
Compose.ly شرکت دیگری است که از تصاویر برای توضیح بصری مزایای یک محصول دیجیتال استفاده می کند:
با این حال، این طراحی برای انتقال فضا به حرکت متکی نیست. در عوض، طراحی هواپیماها را در زوایای 90 درجه نسبت به یکدیگر قرار می دهد. از سایه زدن نیز برای ایجاد این توهم استفاده می شود که یک منبع نور در بالای آن افراد در گرافیک وجود دارد.
8. بارک باکس
Barkbox نمونه خوبی از طراحی نیمه مسطح ظریف دارد:
طلسم های سگی که مشتریان را از وب سایت تا جعبه فیزیکی که هر ماه دریافت می کنند دنبال می کنند، تصاویر صافی هستند. با این حال، یک سطح بافتی در زیر آنها خراشیده شده است تا حس سه بعدی نبودن را به آنها بدهد.
تصاویر تعاملی
اگر میخواهید یک وبسایت را زندهتر کنید، تصویرسازی سه بعدی مطمئناً یکی از راههای انجام آن است. بسته به سطح مهارت خود در تصویرسازی یا بودجه طراحی که با آن کار می کنید، ممکن است بخواهید یک قدم جلوتر رفته و تصاویر خود را متحرک کنید.
اگر این مسیر را طی کنید، می توانید چندین چیز ایجاد کنید:
- بخش های قهرمان تعاملی
- انیمیشن های فردی لوتی
- فیلم های توضیح دهنده کامل
ما قبلاً چند نمونه از تصاویر تعاملی را دیده ایم. بیایید نگاهی به برخی دیگر بیاندازیم:
9. به روز رسانی یک
Updata One یک جامعه هوش تجاری است. همانطور که صفحه اصلی می گوید “ما اطلاعات را معنا می کنیم”. این لزوما سادهترین ایده برای گرفتن عکس یا فیلم نیست – حداقل نه از نظر بصری جالب.
به همین دلیل است که این انیمیشن های مصور انتزاعی بسیار خوب کار می کنند:
در حالی که محتوا حول تصاویر می چرخد، آنها بیشتر شبیه یک عنصر ناوبری هستند و بازدیدکنندگان را وادار می کنند که برای کشف بیشتر به پیمایش ادامه دهند.
10. BetterUp
بیشتر و بیشتر شاهد این هستیم که شرکتها از فرمتهای گزارش PDF قابل دانلود برای قالبهای دیجیتال صرفنظر میکنند. یا همان کاری را که BetterUp در اینجا انجام داده است انجام می دهند و یک صفحه خلاصه دیجیتالی ارائه می دهند که گزارش کامل را مزاحم می کند:
یکی از مزایای ایجاد صفحه فرود مانند این این است که شما می توانید از تصاویر متحرک برای ایجاد تجسم داده های منحصر به فرد استفاده کنید.
11. مارلو
مارلو یک شرکت تولید کننده بالش است. در حالی که بازدیدکنندگان عکس های واقعی بالش های خود را در سایت پیدا می کنند، گاهی اوقات با این تصاویر خواب آلود نیز برخورد می کنند:

این گرافیک ممکن است در نگاه اول چندان معنی دار به نظر نرسد. با این حال، این طرح ها من را به یاد آن میمی می اندازند که در شبکه های اجتماعی می بینید که وضعیت خواب افراد را مسخره می کند. اساساً، این تصاویر به بازدیدکنندگان نشان میدهد که هر کسی – خوابهای پهلو، پشتخوابها، خوابهای غیرعادی – این بالشها را دوست خواهند داشت.
12. بازار نامناسب
بازار نامناسب یکی دیگر از مواردی است که از تصویری استفاده میکند که ممکن است در ابتدا معنای زیادی نداشته باشد، اما در واقع چیزهای زیادی در مورد برند به بازدیدکنندگان میگوید:
Misfits Market شرکتی است که جعبه های محصولات را می فروشد. برای اینکه آنها را به این قیمت ارزان بفروشند، محصولات بد شکل یا زشتی را می فروشند که در غیر این صورت برداشته می شوند و به سمت آنها پرتاب می شوند. اگر به جزئیات خام و ناقص تصاویر در سمت چپ و دایره درهم و برهم در سمت راست دقت کنید، تصاویر نمادی از ارائه برند هستند.
13. Airbnb
این روزها اکثر مردم Airbnb را می شناسند . آنها همچنین می دانند که این شرکت اجاره ها و تجربیات واقعی را می فروشد، به همین دلیل است که وب سایت به طور کلی پر از عکس است. با این حال، یک بخش «الهام برای سفر بعدی شما» در صفحه اصلی وجود دارد که از قالب خارج می شود:
وب سایت خود را با تصاویر متمایز کنید
هنگامی که برای یک مشتری جدید نام تجاری و وب سایت ایجاد می کنید، یکی از اولین مواردی که باید در نظر بگیرید این است که از چه سبک گرافیکی استفاده خواهید کرد. عکس ها و سایر تصاویر واقعی؟ یا تصاویر؟
این روزها عکسها و فیلمها رایج هستند، و این یکی از دلایل برجسته شدن تصاویر در طراحی وب است. اما این همه ماجرا نیست. تصاویر نیز می توانند ابزارهای داستان گویی و جهان سازی بسیار مؤثری باشند.
چه بخواهید یک وبسایت جدید را برای یک مشتری شروع کنید، چه بخواهید یک وبسایت را که نیاز به تغییر طراحی مجدد دارد طراحی کنید، ممکن است زمان آن رسیده باشد که تصاویر را آزمایش کنید.
منبع : elementor.com