15 نمونه از بهترین طراحی های Home page در طراحی سایت

آموزش طراحی سایت :‌ شما هرگز شانس دوباره ای برای تأثیر گذاری روی بازدیدکننده ای که برای اولین بار از سایت شما بازدید می  کند نخواهید داشت از این رو بدون شک homepage یکی از مهمترین صفحات دروب سایت شما می باشد .
برای هر شرکتی homepage مانند در ورودی مجازی است . اگر یک بازدیدکننده جدید از آنچه که در home page می بیند راضی نباشد و آن را نپسندد به سرعت دکمه بازگشت را خواهد زد .
بله ! متاسفانه بسیاری از مردم فقط از روی جلد یک کتاب درباره آن قضاوت می کنند .
سوال کلیدی این است : چه چیزی طراحی سایت یک home page  را درخشان می کند؟ در طراحی سایت home page تنها زیبایی ظاهری آن مهم نیست بلکه کارایی آن هم از اهمیت زیادی برخوردار است .
قبل از اینکه 15 نمونه از بهترین home page ها را بررسی کنیم ، 7 مورد از بهترین روش های طراحی برای داشتن home page های گیرا و جذاب و کارا را ذکر می کنیم.
1)    به روشنی به این سوالات پاسخ دهد . ” من چه کسی هستم ؟ ” ، ” چه کاری انجام می دهم؟” ، یا شما ( بازدیدکننده ) چه کاری می تواند اینجا انجام دهد ؟
اگر برند یا شرکت شما شناخته شده می باشد شاید بتوان از بخش معرفی خود صرفنظر کرد ولی در واقع اغلب کسب و کارها می بایست در طراحی صفحه نخست خود به این سوالات پاسخ دهند تا بازدید کننده کاملا واقف شود که در کجا قرار دارد. اگر بازدیدکننده دچار سردرگمی شود در کمتر از چند ثانیه سایت شما را ترک خواهد کرد.
2)    ارتباط مؤثر با مخاطبان هدف
یک home page می بایست روی صحبت کردن با افراد مشخصی با زبان خاصی تمرکز کند . یک home page خوب باید از درج مطالب زائد و زیاده گویی اجتناب کند .
3)    ارتباط  قانع کننده بر مبنای ارزش های شرکت یا سازمان
وقتی یک بازدیدکننده home page شما را بازدید می کند باید وادار به ماندن شود . home page بهترین مکان برای نشان دادن ارزش ها و مزیت های شما است بطوری که بازدیدکننده را برای ماندن ترغیب کند و مانع از رفتن آن ها به سمت رقبا شود .
4)    بهینه کردن سایت برای  استفاده در همه دستگاهها
همه home page  های ذکر شده در این مقاله بسیار کاربردی است به این معنی که گشت و گذار در آنها آسان است و در آن ها  عناصر فلشی مانند فلش بنرها ، انیمیشن ، پاپ آپ یا عناصر غیرضروری و بیش از حد پیچیده ، وجود ندارد .
بسیاری از آنها همچنین برای تلفن های همراه نیز بهینه سازی شده اند . که در دنیای موبایلی امروز نکته بسیار مهمی می باشد .
5)    استفاده از CTA ها
همه homepage ها در این لیست از Calls-to-action  های اولیه و ثانویه برای هدایت بازدیدکنندگان برای رفتن به مراحل بعدی استفاده می کند . مثلا شامل Free Trial ،  Demo ،  Buy Now ، یا Learn More می باشند .
به خاطر داشته باشید هدف از home page ، ترغیب کردن بازدید کننده به کنکاش عمیق تر در وب سایت و ماندن در آن به مدت طولانی تر می باشد . CTA ها به آنها می گویند مرحله و اقدام بعدی چیست و از سردرگمی و غرق شدن در سایت جلوگیری می کند . از همه مهمتر ، CTA ها home page  شما را از یک بروشور به یک موتور راهنما یا فروش تبدیل می کند .
6)    تغییرات دائمی
Home page های برتر همیشه ثابت نیستند . برخی از آنها مثل Whitehouse.gov مدام بر اساس نیاز و مسائل و سوالات بازدیدکنندگان در حال تغییر است .
7)    مهم است که یک طراحی home page بتواند اعتماد و رابطه مؤثر بر مبنای ارزش و هدایت بازدیدکنندگان را ایجاد کند . این home page ها به طور مؤثر از layout  ها ، CTA ها ، فضاهای باز ، رنگ ها ، فونت ها و دیگر عناصر استفاده می کنند .

15 نمونه از بهترین  طراحی  home page
1)    FreshBooks
عوامل موفقیت :
•    این home page  برای مشتریان آسان است . بحث های زیای بر سر اینکه بهتر است صفحه سایت کوتاه باشد یا بلند ، وجود دارد . اگر شما دومی را انتخاب کردید ، می بایست تمهیداتی ببینید که حرکت در صفحه و خواندن آن آسان باشد . و این دقیقا همان چیزی است که در این سایت رعایت شده است . این صفحه تقریبا شبیه یک داستان عمل می کند .
•    بهترین استفاده را از کنتراست و موقعیت ها با استفاده از CTA ها کرده است . کاملا مشخص است که شرکت از شما می خواهد چه چیزی را تغییر دهید .
•    Calls to action  برای “Try it Free for 30 Days” بسیار قانع کننده است .
•    زیر تیتر نیز عالی است : ” پیوستن 5 میلیون نفر برای استفاده از FreshBooks بدون دردسر ارسال فاکتور ها ، صرف زمان و هزینه های ضبط ” . این درد مشترک مترجمان آزاد و کسب وکارهای کوچک است. معمولا نرم افزارهای حسابداری اغلب بسیار پیچیده هستند .
2)    Mint
•    طراحی فوق العاده ساده با تیتر و سرتیتر های بدون اصطلاح
•    Home page  یک حس امنیت و در عین حال سادگی را القا می کند که برای یک محصولی که اطلاعات مالی را به کار می گیرد بسیار مهم است .
•    همچنین شامل Call to action  های ساده و مستقیم و قانع کننده ای است مثل “Sign up free” . طراحی CTA  ها زیرکانه است . نماد امن قفل ، پیام ایمنی صفحه را بار دیگر به ذهن بازدیدکننده منتقل می کند .

3)    Jill Konrath
•    عنوان ساده و قوی . دقیقا مشخص می کند که Jill Konrath جه کار می کند . ( و چگونه می تواند به کسب و کار شما کمک کند )
•    همچنین دسترسی آسان به مواد رهبری فکری جیل که برای ایجاد اعتبارش به عنوان یک سخنران اصلی مهم هستند را ممکن می سازد .
•    اشتراک گذاری در خبرنامه و تماس به عنوان دو Call to Action اصلی ، آسان است .

4)    dropbox (مصرف کننده)
•    صفحه نخست Dropbox وب سایت ، نهایت سادگی را دارد . استفاده از متن و تصاویرمحدود شده است و شامل فضاهای باز است .
•    عنوان سایت ” your stuff, anywhere ” ساده اما قدرتمند است . بدون نیاز به رمزگشایی اصطلاحات برای بیان آنچه که Dropbox واقعا انجام میدهد .
•    روی یک Call to action  تمرکز دارد . “Sign up” … اما اگر شما بخواهید در ابتدا بیشتر بدانید به سادگی با کلیلک بر روی “Learn More” می توانید به هدف خود برسید و ببینید که Dropbox چگونه مزیت های خود را با چهار بیان ساده ، مستقیما در زیر CTA  اصلی ، توصیف میکند .

5)    Dropbox  ( تجارت )
•    Home page سایت تجارتی Dropbox یک نمونه از فراهم کردن تجربه های وب سایت متفاوت برای مخاطبان متفاوت است . برخلاف صفحه نخست  اصلی که در اصل برای قسمت مصرف کننده  ساخته شده است ، کاربران تجاری آنها نیاز به اطلاعات بیشتر و مدارک و دلایل اضافی دارند تا این سایت را یک راه حل امن و مقیاس پذیر برای شرکت خود بیابند . ( یک مساله ادراکی است که Dropbox روی صفحه اصلی خود به صورت مستقیم ، نشان میدهد .)
•    Dropbox به نام تجاری و طراحی بیش از حد ساده خود ادامه می دهد . این طراحی تنها شامل آن چیزهایی است که بسیار اهمیت دارد : عناصری مانند لوگوهای مشتریان و تصدیق نامه و یک ویدئو با مطالب پشتیبانی .

6)    Whitehouse.gov
•    ساختن یک وب سایت که یک ملت را در بر گیرد کار آسانی نیست . Whitehouse.gov همواره با هدف انعکاس نگرانی و اولویت ها تغییر می کند . صفحه اصلی به تنهایی از طریق صدها بازبینی ایجاد شده است . تست و بهینه سازی یک جزء کلیدی برای یک طرح صفحه اصلی درخشان است .
•    چیز بخصوصی در مورد Whitehouse.gov این است که آن کاملا برخلاف اغلب وب سایت های مربوط به دولت است . یک طراحی تمیز و پرورش یک جامعه .
•    پیدا کردن آنچه به دنبال آن هستید در این سایت نسبتا آسان است . و حتی اگر شما نتوانید آن را فورا بیابید ، یک جعبه جستجو ” What are you looking?”   وجود دارد.

7)    Scrapd
•    این سایت ، توجه شمارا با استفاده زیرکانه از انیمیشن در زمان اسکرول به پایین صفحه  ، تسخیر می کند .
•    این یک روش بسیار هوشمندانه برای سازماندهی اطلاعات بدون تداخل با تجربه کاربر است .
•    این صفحه همچنین دارای طراحی بسیار ساده و خلوت دارد . برجستگی طراحی ویژگی های اپلیکیشن ونمایش فوریCall to action  اصلی . “not much else ” .

8)    4 Rivers Smokehouse
•    “خوشحالی کردن “. چیزی که من وقتی به وب سایت 4Rivers Smokehouse می رسم به آن فکر می کنم . همراه عکاسی عالی ، عنوان ” Brisket 18 years to master” یک تجربه ارزشمند به نظر می رسد .
•    اسکرول parallax که شما را به یک تور از خدمات ، منو ، داشتن لحظات عالی و …  هدایت می کند ، یک استفاده عالی از این روند طراحی محبوب است .

9)    Evernote.com
•    در طول این سال ها Evernote از یک برنامه ساده به یک محصول تجاری مناسب تبدیل شده است . رساندن این مطلب در صفحه اصلی همیشه آسان نیست اما Evernote یک بسته  کاری خوب با پیام های بالقوه بسیاری در تعدادی منفعت کلیدی انجام می دهد .
•    این صفحه اصلی از ترکیبی از رنگ های پیش زمینه غنی و خاموش و هایلایت های سفید یا سبز روشن استفاده کرده است .
•    دنبال کردن یک عنوان  ساده ، مسیر چشم ، سپس هدایت شما به Call to action  اصلی ، یعنی “Sign up now”

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

11)    Gogoro
•    شاید یکی از وب سایت های مصرف کننده – تکنولوژی دلخواه من همین سایت باشد . این یک وب سایت زیرکانه ، زیبا و ساده است .
•    این وب سایت بسیار تعاملی است .

12)    E-Wedding
•    برای زوج های جوان ، در رابطه با برنامه ریزی برای ازدواجشان ،  این وب سایت یک مقصد عالی برای ساختن یک وب سایت سفارشی عروسی می باشد .
•    صفحه اصلی آشفته و بهم ریخته نیست و تنها شامل عناصر لازم برای افراد به منظور شروع  ساخت وب سایتشان می باشد .
•    این سایت شامل تصاویر محصولات عالی ، یک تیتر عالی و Call to action که با متن “وب سایت  رایگان خود را در کمتر از 5 ثانیه بسازید ” باعث کاهش حساسیت و اصطکاک می شود .

13)    Basecamp
•    برای مدت های طولانی Basecamp صفحه اصلی درخشانی داشته است و شما با دیدن آن متوجه  خواهید شد چرا اینگونه بوده است . آنها اغلب از ویژگی عنوان های بسیار جذاب و کارتون های هوشمندانه در صفحه خود استفاده می کنند .
•    Call to action جسورانه ای دارد. و این وب سایت نمونه شرکتی است که صفحه اصلی شبیه بلاگ انتخاب کرده ( یا رویکرد سایت تک صفحه ای )  که اطلاعات بیشتری را برای محصولات فراهم می کند .
14)    Charity : water
•    در این وب سایت ازتعداد زیادی عکس و عناصر بصری، محتوی تولید شده و طراحی وب تعاملی استفاده شده است .
•    عنوان متحرک راه عالی برای قراردادن پیام های متعدد روی یک خط است .
•    همچنین استفاده عالی از ویدئو و عکس احساسات باز دید کنندگان را تحت تاثیر قرار داده وآن را جذب می کند و منجر به عملی از سوی آنها می شود .

15)    TechValidate
•    این صفحه به زیبایی طراحی شده است . استفاده از فضاهای سفید ، رنگ های با کنتراست و طراحی مشتری محور در آن مشهود است .
•    عنوان و همچنین دکمه های Call to action روشن و قانع کننده است .
•    سلسله مراتب اطلاعاتی فوق العاده ، این سایت را برای جستجو و درک صفحه به سرعت ، آسان کرده است .