Navy 950
#071426
Primary background
YOUNG TALENTACADEMY
UX HANDOFF · V1.0
Landing page-ə qayıt
BHT Academy Design System
COMPONENT-BASED · RESPONSIVE · WCAG-AWAREİdeyadan müraciətə qədər
İdeyadan müraciətə qədər
vahid dizayn dili.
Bu səhifə wireframe, istifadəçi axını, vizual tokenlər, komponentlər və interaction state-lər üçün canlı handoff sənədidir.
01 · USER FLOW
Əsas dönüşüm axını
İstifadəçi hər əsas bölmədən maksimum bir kliklə formaya, formanın daxilində isə üç aydın addımla nəticəyə çatır.
01
Landing
Mesaj + etibar
02
İstiqamət
Özünü tanıma
03
Form · 01
Şəxsi məlumat
04
Form · 02
Profil + CV
05
Form · 03
Motivasiya
06
Success
Təsdiq + növbəti addım
Primary path Hero CTA → 3-addımlı form → success
Secondary path İstiqamətlər/FAQ → sticky CTA → form
Recovery Validation → inline error → field correction
02 · LOW-FIDELITY WIREFRAME
Landing page informasiya arxitekturası
Struktur əvvəl dəyər təklifini, sonra uyğunluğu və sübutu, sonda isə müraciət qərarını gücləndirir.
bht.academy
01Header + Heroİlk ekranda dəyər təklifi və iki CTA
02Trust + AcademyProqram modelinin 4 mərhələsi
03Benefits8 dəyər kartı
04Directions10 karyera istiqaməti
05Program Timeline6 addımlıq istifadəçi gözləntisi
06EligibilityNamizəd özünü tanıyır
07Day at BHTVizual storytelling
08Mentors + ReviewsSosial sübut üçün real-data sahələri
09Application3 addımlı müraciət
10FAQ + Final CTAEtirazların bağlanması
01Header + Hero
02Trust + Academy
03Benefits
04Directions
05Program Timeline
06Eligibility
07Day at BHT
Müraciət et
03 · FOUNDATIONS
Rəng, typography və spacing
Rəng palitrası
Navy 800
#102B4E
Secondary surface
Orange 500
#FF8A1F
Primary CTA
Cream 50
#F6F3ED
Warm section
White
#FFFFFF
Base surface
Slate 500
#667085
Body text
Typography
Display / 86
Karyeranı qur.
Heading / 64
Real iş təcrübəsi
Title / 22
Peşəkar mentor dəstəyi
Body / 16
Aydın, rahat oxunan və mobil yönümlü mətn sistemi.
LABEL / 11 · 18% TRACKING
Spacing və radius
4
8
12
16
24
32
48
64
Core spacing: 4px əsaslı sistem · Radius: 12 / 22 / 34 / 999
04 · COMPONENTS
Reusable UI komponentləri
Landing page və form eyni token və state məntiqindən istifadə edir.
Buttons
Input + dropdown
Upload
PDF, DOC və ya DOCXFayl seç
Checkbox
Accordion
Proqram nə qədər davam edir?−
Proqram 6 ay davam edir.
İş təcrübəsi tələb olunurmu?+
05 · FORM STATES
Default, focus, error və success
SUCCESS STATE
Müraciət tamamlandı.
İstifadəçi nə baş verdiyini və növbəti addımı aydın görür.
06 · RESPONSIVE & ACCESSIBILITY
Desktop-dan mobile-a
Desktop
12 sütun, 4–5 kartlı grid, geniş hero, paralel məzmun.
Tablet
2–3 kartlı grid, adaptiv header, rahat toxunma zonaları.
Mobile
Tək sütun, bottom sticky CTA, bottom-sheet form, 44px+ touch target.
WCAG AA yönümlü kontrast
Keyboard focus state
Escape ilə modal bağlanması
aria-expanded və aria-invalid
Reduced-motion dəstəyi
Form error-ları inline mətnlə