نحوه تصویر سازی در طراحی وب

این یک مثال عالی از این است که چگونه می‌توانید «طلسم» مصور خود را وادار کنید بازدیدکنندگان را دنبال کند – یا آنها را به بخش‌های کلیدی صفحه راهنمایی کنید یا صرفاً برای تقویت برندسازی آنجا باشید.

جهان های دیجیتالی را ایجاد کنید که بازدیدکنندگان شما قبلاً ندیده اند

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

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

صفحه اصلی 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. مارلو

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