طراحی وب سایت, وبسایت و پروفایل شخصی داود جمیری

12 عنصر مهم که هر صفحه وب سایت باید داشته باشد [اینفوگرافیک]

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

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

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

Free Download: 77 Examples of Brilliant Web Design 

را طراحی کنید

12 عنصر حیاتی که هر صفحه وب سایتی باید داشته باشد
ذخیره

12 critical elements for a website homepage infographic

ذخیره

این تصویر را در سایت خود به اشتراک بگذارید

آنچه باید در طراحی صفحه وب سایت خود بگنجانید

1. تیتر

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

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

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

در Mirror website homepage subheadline that reads hiding in plain sight P>

2. عنوان فرعی

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

در اینجا مثالی از عنوان های فرعی عالی از آینه آمده است: “مخفی شدن در دشت منظره.” محل اصلی فروش سالن بدن سازی آینه را نشان می دهد: این یک سالن ورزشی کامل در خانه ، مربی شخصی و برنامه تمرینی است که همه در راحتی خانه شما بدون استفاده از متر مربع با ارزش با تجهیزات است. P>

برای بهینه سازی عناوین خود برای موبایل ، از قلم های بزرگتر استفاده کنید بازدید کنندگان یک تجربه بهتر فونت های کوچک می توانند بازدیدکنندگان تلفن همراه را مجبور به کوچک کردن و بزرگنمایی کنند تا بتوانند محتوای سایت شما را بخوانند و با آنها تعامل داشته باشند. توصیه ما؟ از گزینه های عنوان در ویرایشگر صفحه خود استفاده کنید. عنوان های H1 برای عناوین صفحه مناسب هستند – فقط یک صفحه H1 باید در یک صفحه وجود داشته باشد. عنوان های فرعی باید از ترتیب سلسله مراتب ، H2 ، H3 … H6 و غیره پیروی کنند. می توانید چندین عنوان از این عناوین را داشته باشید ، فقط مطمئن شوید که مرتب هستند. به عنوان مثال ، شما نمی خواهید از H1 به H3 بپرید – به جای آن H2 را انتخاب کنید.

3 تماسهای اولیه برای اقدام

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

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

وب سایت Afters School HQ دارای دو CTA بالاتر از حد است ، هر دو به سمت مدیر برنامه هایی که علاقه مند هستند که برنامه های بعد از مدرسه خود را برای خانواده ها در سایت تبلیغ کنند. یادداشت زیر CTA طولانی تر “ایجاد نمایه رایگان خود” به بازدیدکنندگان احساس نیاز به ایجاد یک حساب کاربری را می دهد – اولین قدم برای تبدیل شدن به یک ارائه دهنده HQ بعد از مدرسه.

در 4 rivers smokehouse website homepage featured image with a cheese burger P>

4 تصویر پشتیبانی

بیشتر افراد بصری هستند . حتماً از تصویری (یا حتی یک فیلم کوتاه) استفاده کنید که به وضوح پیشنهادات شما را نشان دهد. از تصاویری استفاده کنید که احساسات را به تصویر می کشد ، اقداماتی را پیش می برد و بصری داستانی را که درباره آن می نویسید ، بیان می کند

برای بهینه سازی تصاویر خود برای کاربران تلفن همراه ، از تصاویر با کیفیت بالا که حجم فایل آنها کاهش یافته است استفاده کنید. (مشتریان HubSpot لازم نیست نگران این موضوع باشند ، زیرا تصاویر بارگذاری شده در نرم افزار HubSpot به طور خودکار فشرده می شوند. در غیر این صورت ، ابزارهایی مانند TinyPNG این ترفند را انجام خواهد داد.) همچنین ، همیشه متن alt را به تصاویر خود اضافه کنید تا بازدیدکنندگانی که از صفحه خواننده استفاده می کنند بیشتر در دسترس باشند و تلاش های شما برای جستجوگرها را درجه یک بالا ببرند.

صفحه اصلی 4 Rivers Smokehouse یک نمونه عالی از تصاویر احساسی است: این مجموعه از مجموعه فیلم های کوتاه ، با کیفیت بالا و پر از آب دهان که به صورت حلقه ای پشت یک عنوان ساده ، زیر عنوان و CTA اصلی پخش می شوند:

در Evernote website homepage benefits

5. مزایا

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

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

در Lessonly website homepage testimonials and reviews P>

6. اثبات اجتماعی

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

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

در Slim and huskys website homepage navigation P>

7. پیمایش

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

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

در اینجا مثالی از طراحی ناوبری واضح و ساختاریافته از Slim & Husky’s Pizza Beeria وجود دارد. صفحه اصلی:

در Spanx website homepage secondary CTAs P>

8. پیشنهاد محتوا

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

9. تماسهای ثانویه برای اقدام

شامل CTA های ثانویه در حالی که CTA های اصلی شما باید بیش از برابر باشد ، CTA های ثانویه را در زیر برابر قرار دهید تا به بازدیدکنندگان مواردی که می توانند هنگام پایین رفتن کلیک کنند ، بپردازید. به عنوان مثال ، در زیر صفحه Spanx صفحه اصلی ، سه مورد را پیدا خواهید کرد ، به وضوح تماس با عمل با برچسب که به افرادی که پیمایش کرده اند چند گزینه دیگر برای کلیک بر روی آنها ارائه می دهد. این CTA های ثانویه برای دو نوع تبدیل مختلف هستند: یکی در سمت چپ با 20 دلار تخفیف و دیگری “برای خرید کاتالوگ آنلاین” “اکنون خرید کنید”.

در dropbox for business website homepage features P>

10. ویژگی ها

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

در lovesac website homepage with resources and CTAs in the footer P>

11 منابع

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

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

در Calendly website homepage P>

12 شاخص های موفقیت

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

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

در examples of brilliant homepage, blog, and landing page design P>

یک صفحه وب که ارزش بازدید را دارد

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

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

یادداشت سردبیر: این پست در اصل در ژانویه 2012 منتشر شد و برای شادابی ، دقت و جامعیت به روز شده است.

نوشته ها مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *