معرفی بهترین دیزاین های صفحه اصلی سایت

معرفی بهترین دیزاین های صفحه اصلی سایت

Best Website Homepage Design Examples

معرفی بهترین دیزاین های صفحه اصلی سایت

 

ویژگی های یک صفحه اصلی مناسب:

صفحه اصلی یا Home Page هر وب سایتی، به این دلیل که اولین تاثیر (First Impression) را روی کاربران می گذارد، از اهمیت بسیار بالایی برخوردار است. برای هر کسب و کار آنلاینی، صفحه اصلی سایت آن معادل در ورودی مجازی آن شرکت (یا ویترین آن) می باشد. اگر بازدیدکننده ای در نگاه اول، از ورودی سایت خوشش نیاید، احتمالا تصمیم می گیرد که روی دکمه بازگشت مرورگر یا Back کلیک کند.

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

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

یک وب سایت خوب بطور شفاف به کاربران اعلام می کند:

“من چه کسی هستم؟” و “چه کاری انجام می دهم؟” و “یک بازدیدکننده چه کارهایی می تواند در سایت انجام دهد؟”

همچنین یک سایت خوب بدرستی و در جای مناسب، کاربر را به اقدام، فراخوانی می کند (Call-To-Action)، برای تمام دستگاه ها و اسکرین ها بهینه است، و مدام در حال بروز شدن پیش می رود.

مطمئنا تمام صفحاتی را که در این مقاله معرفی کرده ایم کامل نیستند. اما اکثر آنها طراحی های مناسب و کاملی دارند.

 

۱- طراحی بطور شفاف به این سوالات پاسخ می دهد: “من چه کسی هستم؟” یا “من چه کاری می کنم؟” یا “کاربران چه کاری می توانند در سایت انجام دهند؟”

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

 

۲- طراحی باید با مخاطبان ارتباط برقرار کند.

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

 

۳- طراحی صفحه اصلی باید شامل یک پیشنهاد متقاعدکننده برای کاربر باشد.

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

 

۴- طراحی صفحه اصلی سایت باید برای تمام دستگاه ها بهینه باشد.

تمام وب سایت هایی که در این مقاله لیست کرده ایم، استفاده آسان دارند و حرکت و جابجایی (navigate) در آنها برای کاربران ساده است و بهنگام اسکرول کاربر، المان یا افکت مزاحم نمایش داده نمی شود. مانند: پیغام پاپ آپ، بنرهای فلش، انیمیشن های خاص، المان های غیرضروری و… همگی وب سایت های این مقاله، در دستگاه های موبایل نیز بهینه می باشند و به اصطلاح responsive هستند.

 

۵- طراحی باید شامل دکمه‌(های) فراخوانی برای اقدام یا Call-To-Action باشد.

تمامی نمونه های صفحات اصلی در این مقاله، شامل دکمه های کال تو اکشن یا CTA اصلی و ثانویه هستند تا کاربران را به مرحله منطقی بعدی هدایت کند. مانند: “Buy Now” ، “Learn More” ، “Free Trial”.

به یاد داشته باشید که هدف از لینک های “فراخوانی به اقدام” یا “Call-To-Action: CTA” متقاعد کردن کاربران برای مشاهده صفحات داخلی و نیز تبدیل تدریجی آنها به لید (Lead) یا مشتری بالقوه می باشد. در واقع افزایش نرخ تبدیل یا Conversion-Rate: CR

مزیت دیگر لینک های CTA راهنمایی قدم به قدم کاربران در سایت و کمک به عدم گمراهی آنها در فرآیند تبدیل می باشد. بنابراین صفحه اصلی یک سایت می تواند نقش تولیدکننده لید یا Lead-Generator را ایفا کند.

 

۶- دیزاین همواره در حال بروزرسانی باشد.

بهترین صفحات اصلی، استاتیک و ثابت نمی باشند. بلکه ممکن است همواره در حال تغییر و آپدیت باشند. این تغییرات معمولا به دلایلی مانند: نیازهای کاربران، امکانات جدید سایت یا پاسخ به سوالات و درخواست های کاربران انجام می گیرد. برخی از صفحات اصلی نیز در حال انجام تست A/B یا A-B Testing می باشند.

 

۷- دیزاین صفحه اصلی تاثیرگذار است.

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

 

نمونه هایی از صفحات اصلی موفق:

اکنون نوبت آنست که نمونه هایی از صفحه های اصلی موفق را معرفی کنیم.

FreshBooks

Airbnb

Pixelgrade

Mint

Dropbox (Business)

۴ Rivers Smokehouse

Cobb Pediatric Therapy Services

Melyssa Griffin

Jill Konrath

Evernote

Telerik by Progress

eWedding

Basecamp

charity: water

TechValidate

Chipotle

Medium

Digiday

KIND Snacks

Ahrefs

A24 Films

Ellevest

HubSpot

 

»» FreshBooks ««

FreshBooks

 

دلایل هوشمندانه بودن صفحه اصلی Fresh Books:

  • استفاده آسان کاربر از صفحه اصلی FreshBooks دلیل اصلی طراحی ایده آل این سایت است. در اینکه صفحه اصلی کوتاه باشد یا بلند، شبهاتی وجود دارد. اما مهم اینست که کاربر بتواند در آن براحتی اسکرول کند و محتوای صفحه را بخواند.
  • نمونه خوبی از برقراری تضاد و جایگذاری مناسب لینک اولیه “فراخوانی به عمل” یا CTA می باشد. کاربر به محض ورود به سایت، متوجه می شود که هدف سایت چیست و چگونه میتواند به مشتری تبدیل شود.
  • متن لینک کال تو اکشن یعنی ” Get Started for Free” بسیار متقاعدکننده و جذاب است!
  • FreshBooks در صفحه اصلی سایت خود از بخش نظرات کاربران یا Testimonials بهره برده است. نمایش این بخش در سایت می تواند به کاربران برای خرید آن محصول حس اعتماد را القا کند.
  • زیرتیتر (Sub-Headline) هم در این سایت مناسب است: ” Join over 10 million small business owners using FreshBook” . در واقع سایت freshBooks از طریق اثبات جامعه بزرگ آماری خود (۱۰ میلیون نفر!) بازدیدکنندگان سایت خود را متقاعد به خرید محصول یا سرویس می کند.

 

»» AirBnb ««

AirBnb

 

دلایل هوشمندانه بودن صفحه اصلی Airbnb:

  • مستقیما از کاربران می خواهد تاریخ سفر و همچنین مقصد خود را جستجو کنند تا اتوماتیک به مراحل بعدی خرید بلیت هدایت شوند.
  • فرم جستجوی واقع در بنر صفحه اصلی سایت Airbnb هوشمند است. بدین معنی که در صورت لاگین بودن کاربران، فیلدهای این فرم بطور خودکار (Auto-Fill) پیشنهادهایی بر اساس سرچ های قبلی کاربر ارائه می دهد.
  • فراخوانی به عمل (Call to action یا CTA) اولیه و اصلی سایت (یعنی همان فرم جستجو) بطور کاملا مشخص و مجزا طراحی شده است. اما کال تو اکشن دوم یعنی Become a Host نیز توسط یک لینک در بالای بنر تعریف شده است.
  • کاربران با سرچ در صفحه اصلی وب سایت Airbnb، با پیشنهادهایی در زمینه مورد جستجو شده خود روبرو می شود که می تواند برای او مهیج و مفید باشد. همچنین میزان محبوبیت هر پیشنهاد را نزد سایر کاربران نمایش خواهد داد.

 

»» Pixelgrade ««

Pixelgrade

 

دلایل هوشمندانه بودن صفحه اصلی Pixelgrade:

  • قالب Vasco از وب سایت Pixelgrade به شما امکان افزودن داستان (story) کسب و کارتان را در صفحه اصلی سایت با یک تمپلیت مناسب برای شما فراهم می کند.
  • صفحه اصلی Pixelgrade شامل یک “لینک فراخوانی عمل یا Call to Action” واضح و مشخص می باشد.
  • صفحه اصلی شامل چند لوگوی مرتبط است که می تواند میزان اعتبار سایت و کسب و کار را بالا ببرد.
  • این قالب در صفحه اصلی خود، بخشی برای عضویت در خبرنامه (Newsletter) دارد.

 

»» Mint ««

Mint

 

دلایل هوشمندانه بودن صفحه اصلی Mint:

  • صفحه اصلی mint یک طراحی بسیار ساده دارد بهمراه یک تیتر اصلی و یک زیرتیتر.
  • صفحه اصلی مینت شامل اطلاعات و ویژگی های امنیتی خوبی می باشد که برای معرفی یک محصول که تعاملات مالی آنلاین دارد مهم است.
  • یک متن ساده، مستقیم و قانع کننده برای Call to Action خود تعریف کرده است (Sign up free). طراحی دکمه فراخوانی به عمل (CTA) هم زیبا و جذاب می باشد.

 

»» Dropbox ««

Dropbox

 

دلایل هوشمندانه بودن صفحه اصلی Dropbox:

  • صفحه اصلی دراپ باکس (Dropbox) دارای طراحی ساده و برندینگ مناسب می باشد. این صفحه فقط شامل موارد ضروری می باشد. یک متن و تصویر مرتبط بهمراه یک دکمه کال تو اکشن “Try free for 30 days”
  • صفحه اصلی Dropbox سادگی زیادی دارد. این صفحه بخوبی توانسته از المان های بصری یا visual، متنی و تکنیک فضای خالی یا whitespace بهره ببرد.
  • دارای زیر تیتر ساده اما قدرتمند است. ” Dropbox Business simplifies your work, with a central place to access and share files. ” بطوریکه نیازی نیست برای فهمیدن کار دراپ باکس، از این متن رمزگشایی شود.

 

»» Rivers SmokeHouse ««

Rivers SmokeHouse

دلایل هوشمندانه بودن صفحه اصلی rsmokehouse:

  • صفحه اصلی SmokeHouse با یک ویدیوی کوتاه جذاب و مرتبط شروع می شود که تیتر(Hot Brisket Now) و زیر تیتر (۱۸ years to master. Yours to savor) مناسبی دارد که بازدیدکننده را ترغیب می کند محصول یا سرویس این سایت را تجربه کند.
  • اسکرول پارالکس (Parallax Scrolling) کاربران را به یک تور مجازی می برد و در این تور، سرویس ها و محصولات شرکت به کاربران معرفی می شوند.

 

»» Cobb Pediatric Therapy Services ««

Cobb Pediatric Therapy Services

دلایل هوشمندانه بودن صفحه اصلی cobbpediatric:

  • تیتر و زیرتیتر صفحه اصلی، از لحاظ احساسی، مورد پسند کاربران می باشد: “Make a difference in the lives of children” و “Skilled-based Therapy is All We Do “
  • وقتی کاربر وارد صفحه اصلی می شود کارهای مختلفی می تواند انجام دهد اما دکمه های CTA به متن و دیزاین ساده، از سایر المان های صفحه مجزا و متمایز می باشند.

 

»» Evernote ««

evernote

 

دلایل هوشمندانه بودن صفحه اصلی EverNote:

  • در طی سالیان اخیر، وب سایت Evernote از یک اپلیکیشن ساده “ذخیره سازی نوشته” یا “Note-Saving App” به مجموعه ای از محصولات تجاری تبدیل شده است. ذکر تمام فواید این اپلیکیشن در صفحه اصلی کار سختی است اما Evernote اینکار را بخوبی و با چند کلمه کلیدی مناسب انجام داده است.
  • در بنر صفحه اصلی Evernote از رنگ سبز برای بک گراند و رنگ فونت سفید استفاده شده است و رنگ های دکمه Call-To-Action نیز برعکس تعریف شده است (رنگ متن سبز و رنگ بک گراند سفید)
  • تیتر اصلی صفحه اصلی “Feel organized, without the effort” و متن دکمه کال تو اکشن “Sign up for FREE” تعریف شده است که متون ساده و واضحی هستند.
  • سایت Evernote یک ثبت نام ساده و سریع با اکانت گوگل (gmail) نیز به کاربران پیشنهاد می دهد تا در زمان آنها هرچه بیشتر صرفه جویی کرده باشد:

 

evernote-signup

 

»» Telerik ««

تلریک Telerik

 

دلایل هوشمندانه بودن صفحه اصلی Telerik:

  • وقتی شما وارد سایت تلریک (Telerik) می شوید، با یک سایت شلوغ و بهم ریخته روبرو نمی شوید. با اینکه Telerik چندین محصول در زمینه تکنولوژی های مختلف دارد. صفحه اصلی تلریک با استفاده از رنگ های مختلف و ضخامت های فونت مناسب و استفاده مناسب از المان های چند رسانه ای (مانند ویدیو و تصویر)، توانسته محصولات خود را به نمایش بگذارد.
  • متن محتوای صفحه اصلی با بیان ساده ارائه شده اند و خواندن آنها برای کاربران آسان است.

 

»» Basecamp ««

baseCamp

 

دلایل هوشمندانه بودن صفحه اصلی Basecamp:

  • برای مدت زمان زیادی، صفحه اصلی سایت BaseCamp هوشمندانه و خلاقانه بوده است. همانطور که از تصویر بالا هم می توانید مشاهده کنید، ترکیب تیترهای جذاب و کارتون های خلاقانه توانسته صفحه اصلی مناسبی را برای Basecamp ایجاد کند.
  • دکمه فراخوانی به عمل یا کال تو اکشن (Call-To-Action: CTA) هم بصورت فونت ضخیم (BOLD) و در بالای اسکرول کاربر (Above the Fold) طراحی شده است.
  • در این تصویر، صفحه اصلی بیشتر شبیه یک صفحه بلاگ باشد که اطلاعات زیادی را درباره محصول شرکت به کاربران ارائه می دهد.
  • بخش نظرات کاربران (Testimonial) هم بصورت bold و بیان کننده نظرات مثبت آنها در تعامل با محصول است.

 

»» CharityWater ««

charity-water

 

دلایل هوشمندانه بودن صفحه اصلی CharityWater:

  • CharityWater تنها یک خیریه و غیرانتفاعی معمولی نمی باشد. بلکه استفاده این وب سایت از المان های بصری مناسب، محتوای خلاقانه و طراحی تعاملی با کاربر (Interactive-Design) توانسته این وب سایت را برجسته کند.
  • تصویر متحرک هدر صفحه اصلی می تواند باعث جلب توجه کاربران شود.
  • در صفحه اصلی این سایت از تصاویر و ویدیوهای مرتبط با آب و کودکان تشنه بخوبی استفاده شده است تا احساسات بازدیدکنندگان را برانگیزد.

 

»» TechValidate ««

TechValidate

 

دلایل هوشمندانه بودن صفحه اصلی TechValidate:

  • صفحه اصلی TechValidate حقیقتا زیبا طراحی شده است. استفاده مناسب و بجا از فضای خالی یا whitespace، تضاد رنگی مناسب و…
  • تیتر اصلی صفحه به اندازه کافی شفاف و متقاعد کننده است.
  • نحوه ارائه اطلاعات این صفحه بصورت سلسله مراتبی و منظم می باشد که باعث می شود کاربران راحت و سریع محتوای آن را مطالعه کنند.

 

»» kindsnacks ««

kindsnacks

 

دلایل هوشمندانه بودن صفحه اصلی KindSnacks:

  • استفاده از رنگ ها و فونت های bold باعث می شود کلمات و تصاویر صفحه برجسته تر از سایر المان ها نمایش یابند.
  • متن دکمه “فراخوانی عمل” یا CTA هم مختصر و مفید است: “SHOP NOW”

 

»» Ahrefs ««

Ahrefs

 

دلایل هوشمندانه بودن صفحه اصلی aHrefs:

  • تضاد رنگی بین آبی، سفید و نارنجی باعث جلب توجه کاربران شده است و رنگ نارنجی بعنوان بک گراند دکمه کال تو اکشن یا CTA بسیار جذاب و چشمگیر است (Start 7-day trial for $7)
  • تیتر اصلی و زیرتیتر آن برای کاربران بسیار قانع کننده (Compelling) است. زیرا می توانند بصورت رایگان برای ۷ روز، دلایل رتبه خوب رقبای خود را متوجه شوند و نحوه غلبه بر آنها را یاد بگیرند.
  • صفحه اصلی Ahrefs با اینکه انتخاب های متنوعی را در اختیار کاربران قرار می دهد، به هم ریخته بنظر نمی رسد. دلیل آن هم استفاده از رنگ های ساده آبی و سفید بعنوان پس زمینه و تایپوگرافی ساده می باشد.

 

»» Hubspot ««

Hubspot

 

دلایل هوشمندانه بودن صفحه اصلی Hubspot:

  • استفاده از تیتر جذاب و متقاعد کننده (There’s a better way to grow) بهمراه دکمه فراخوانی به اقدام یا CTA مناسب (Get Hubspot Free) با رنگ بک گراند سفید و مشخص
  • نمایش تصویر svg زیبا و مفهومی با رنگ آمیزی جذاب
  • نمایش آمار بازدید بلاگ هاب اسپات، تعداد اعضاء سایت، تعداد زبان های قابل پشتیبانی و… در صفحه اصلی سایت
  • نمایش ساده و مرتب دسته بندی کلی سرویس های Hubspot مانند: Sale و Marketing

 

منبع: https://blog.hubspot.com


برچسب‌ها:

AhrefsDropboxEvernoteHubSpotدراپ باکسدیزاین صفحه اصلیصفحه اصلیصفحه اصلی بهینهصفحه اصلی سایتطراحی سایت

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

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

7 + یازده =