Hero section β bu veb sahifaning birinchi qismi, foydalanuvchi sahifaga kelganda ko'radigan. Bu sahifaning eng muhim qismi, chunki foydalanuvchi 5 soniyada qaror qiladi β qolish yoki chiqib ketish. Yaxshi hero β yaxshi konversiya, yomon hero β foydalanuvchini quvib chiqaradi. Hero dizayni hozirgi vaqtda veb dizaynning eng muhim qismlaridan biri.
Hero elementlari
Hero asosiy elementlar: 1. Headline (asosiy sarlavha) β eng katta matn, foydalanuvchi savoliga aniq javob. 2. Subheadline (qo'shimcha matn) β headline'ni qo'llab-quvvatlovchi. 3. CTA (Call-to-Action) β yorqin tugma, keyingi qadam. 4. Vizual element (rasm, video, illustratsiya, animatsiya).
Yaxshi hero β bu 4 element bir-biri bilan harmonik ishlaydi.
Headline yozish
Hero headline β sahifaning eng muhim matn. 6-12 so'z, aniq qiymat va'da qiladi.
Yaxshi headline formula: \"Kim uchun + nima beradi + qanday qisqa muddatda\". Misol: \"Korxonalar uchun professional veb sayt 24 soatda\". \"Internet do'koningiz uchun 2x tezroq hosting 99K so'mdan\".
Yomon headline: \"Bizning xizmatlar\", \"Salom!\", \"Eng yaxshi yechim\". Bu hech narsa demaydi.
Subheadline
Headline'dan keyin 1-2 jumla. Headline'ni qo'llab-quvvatlash va batafsilroq tushuntirish.
Misol headline: \"Tez hosting 99K so'mdan\". Subheadline: \"O'zbekiston TAS-IX'ga bog'langan SSD hosting. 99.9% uptime, 24/7 yordam, 30 kun pul qaytarish.\"
CTA tugmasi
Hero'da bitta asosiy CTA va ehtimol bitta yon CTA. Asosiy β yorqin, ko'rinarli (\"Boshlash\", \"Tariflar\", \"Bepul sinab ko'ring\"). Yon β secondary action (\"Batafsil bilish\", \"Demo'ni ko'rish\").
CTA matni aniq qiymat ko'rsatish. \"Yuborish\" β yomon. \"Bepul hisobni yarating\" β yaxshi.
Vizual elementlar
Hero vizuali bir nechta variantda: 1. Product screenshot β sizning mahsulot ko'rinishi. 2. Real foto β odamlar, mahsulot foydalanish. 3. Illustration β custom rasm. 4. Video β avtoplay, qisqa demo. 5. Animation β Lottie, kichik animatsiya.
Stock photo ishlatishdan saqlaning β barcha jinslarga foydalanilgan, generic ko'rinadi.
Layout strategiyalari
Centered β barcha element o'rta tomonda joylangan. Klassik, oddiy. Apple style.
Split β chap tomonda matn, o'ng tomonda vizual. Eng tarqalgan. Aniq hierarchy.
Background image β fon rasmda matn ustida. Vizual jihatdan kuchli, lekin kontrast muammo bo'lishi mumkin.
Asymmetric β nonstandard joylashish. Creative, lekin chalkash bo'lmasin.
Trust signals
Hero'da trust signals ko'p ishlatiladi: customer logos (\"500+ kompaniya bizga ishonadi\"), reviews va rating (\"4.6 yulduz, 2400 sharh\"), statistics (\"10 yil bozorda\"), awards va sertifikatlar.
Bu elementlar foydalanuvchini ishonarli qiladi va konversiyani oshiradi.
Mobile hero
Mobile'da hero alohida e'tibor talab qiladi. Headline qisqaroq (6-10 so'z), vizual element kichikroq yoki yo'q, CTA katta va ekran ostida ko'rinarli.
Strategiya: mobile-first dizayn. Mobile hero yaxshi bo'lsa, desktop'ga kengaytirish oson.
Hero balandligi
Hero balandligi β 60-100vh (viewport height). 100vh β to'liq ekran, foydalanuvchi scroll qilmasidan barcha ko'radi. Lekin pastida nima borligi ko'rinmaydi.
80vh kompromis β hero katta, lekin pastida nimadir borligini ko'rsatadi. Foydalanuvchi scroll qilishni davom ettirishni xohlaydi.
Hero animation
Subtle animatsiya β foydalanuvchi e'tiborini tortadi. Misol: matn fade-in, button hover effect, vizual element kichik animatsiya.
Lekin ko'p animatsiya β chalg'ituvchi va sahifa tezligini pasaytiradi. Subtle va meaningful.
Hero A/B test
Hero β A/B test uchun eng yaxshi joylar. Kichik o'zgartirish katta konversiya farqi.
Test elementlari: headline matn, CTA tugmasi rangi, CTA matn, vizual element, layout (centered vs split).
2 hafta test, real foydalanuvchi data bilan eng yaxshi versiyani tanlash.
Common hero xato
Birinchi xato β generic headline. \"Welcome to our website\" yoki \"Salom\". Bu hech narsa demaydi va foydalanuvchini quvib chiqaradi.
Ikkinchi xato β juda ko'p tekst. Hero 6-12 so'z headline + 2 jumla subheadline. Ko'pi β foydalanuvchi o'qimaydi.
Uchinchi xato β juda ko'p CTA. Bitta asosiy, ehtimol bitta yon. Ko'p CTA β foydalanuvchi qaror qila olmaydi.
To'rtinchi xato β stock photo. Real photo yoki custom illustration har doim yaxshi.
Hero misollari
Apple: katta product photo, qisqa headline (\"iPhone 15. Big.\"), minimal text, aniq CTA.
Stripe: split layout, code snippet o'ngda, aniq headline (\"Payments infrastructure for the internet\"), CTA \"Start now\".
Dropbox: split, illustration o'ngda, headline (\"The all-in-one workspace\"), email signup field + CTA.
Sayt.uz hero strategiyasi
Sayt.uz bosh sahifa hero: split layout. Chap tomonda headline \"O'zbekiston'da eng tez .uz domen va hosting\", subheadline trust signals bilan, asosiy CTA \"Tariflar\". O'ng tomonda dashboard screenshot.
Trust signals: \"10,000+ mijoz\", \"99.9% uptime\", \"4.6 yulduz reyting\".
Mobile: matn centered, screenshot ostida, CTA katta. Headline qisqartirilgan \"Tez .uz domen va hosting\".
A/B test: 6 oy davomida 4 ta versiya sinaldi. \"O'zbekiston'da eng tez\" so'zlari \"professional\" so'zlaridan 23% yaxshi konversiya keltirdi.