طراحی تصویر قهرمان: چگونه اولین تاثیر وب سایت خود را کامل کنید

طراحی تصویر قهرمان: چگونه اولین تاثیر وب سایت خود را کامل کنید

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

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

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

چگونه یک تصویر قهرمان عالی برای وب سایت خود ایجاد کنیم:

–

تصویر قهرمان چیست؟

چه چیزی یک تصویر قهرمان خوب را می سازد؟

کار با تیتر

تصاویر مربوطه

یک CTA واضح

اندازه تصویر قهرمان واکنشگرا

تنظیم لحن برای بقیه وب سایت

طراحی تصویر قهرمان وب سایت مناسب برای برند شما

تصویر قهرمان وب سایت چیست؟

–

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

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

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

چه چیزی یک تصویر قهرمان خوب را می سازد؟

–

یک تصویر قهرمان خوب به جای اینکه بگوید، نشان می دهد.

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

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

تصویری که با تیتر کار می کند

تصویری که با برند و هدف وب سایت مرتبط است

یک فراخوان روشن برای اقدام

تصاویر با کیفیت بالا

پاسخگویی

نام تجاری شفافی که با بقیه طراحی وب سایت شما کار می کند

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

کار با تیتر

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

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

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

تصاویر مربوطه

واضح به نظر می رسد، اما ارزش بحث را دارد: تصویری که برای تصویر قهرمان خود انتخاب می کنید باید به وب سایت و برند شما مرتبط باشد.

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

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

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

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

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

یکی از راه‌های جلوگیری از کاهش سرعت یک انیمیشن، ایجاد آن با CSS به جای جاوا اسکریپت است. همچنین می‌توانید با حذف هر گونه انیمیشن همزمان و/یا به تأخیر انداختن انیمیشن در کسری از ثانیه، صفحه را افزایش دهید. با این استراتژی دوم، به بقیه صفحه زمان کافی می‌دهید تا از قدرت مرورگر برای بارگذاری استفاده کنید بدون اینکه بینندگان خود را منتظر نگه دارید.

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

یک CTA واضح

Call to Action (CTA) بیتی از متن است که اغلب روی یک دکمه یا دقیقاً نزدیک یک دکمه است که به بیننده می‌گوید یک اقدام خاص را انجام دهد. تصویر قهرمان شما از بازدیدکنندگان وب سایت شما استقبال می کند و سفر آنها را با شما آغاز می کند، اما سفر به همین جا ختم نمی شود. تصویر قهرمان شما باید گام بعدی بازدیدکننده را آشکار کند، و راه انجام آن یک فراخوان واضح برای اقدام است.

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

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

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

اندازه تصویر قهرمان واکنشگرا

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

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

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

تنظیم لحن برای بقیه وب سایت

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

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

طراحی تصویر قهرمان وب سایت مناسب برای برند شما

–

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

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

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

با طراحی شگفت انگیز تصویر قهرمان، روز را نجات دهید

–

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

منبع