Dizayn İstiqaməti
Dizayn İstiqaməti addımı sizə Tema Qurucu (Theme Builder) bütün temanı yaratmadan əvvəl, saytınızın vizual dizaynını yoxlamağa, təkmilləşdirməyə və yekunlaşdırmağa imkan verir.
Ümumi Baxış
Kşfiyyat Müsahibəsini (Discovery Interview) tamamladıqdan sonra, Tema Qurucu dizayn istiqamətini masaüstü və mobil önizləmə renderləməsi ilə təqdim edir. Bu, sizə temaya qərar verməzdən əvvəl dizaynınızın müxtəlif cihazlarda dəqiq necə görünəcəyini görməyə imkan verir.
Dizayn İstiqaməti Komponentləri
1. Rəng Palitrası
Temanızın rəng sxemi, o cümlədən:
- Əsas rəng — düymələr, linklər və vurğular üçün istifadə edilən əsas brend rəngi
- İkincil rəng — müxtəliflik üçün tamamlayıcı rəng
- Vurğu rəngi — vacib elementlər üçün diqqət çəkən rəng
- Neytral rənglər — fon və mətn üçün boz və ağ rənglər
- Mətn rəngi — oxunaqlı mətn üçün əsas mətn rəngi
2. Tipoqrafiya
Bunlar üçün font seçimləri:
- Başlıq fontu — səhifə başlıqları və bölmə başlıqları üçün istifadə olunur
- Mətn fontu — abzasa mətn və məzmun üçün istifadə olunur
- Font ölçüləri — müxtəlif ekran ölçüləri üçün adaptiv ölçülənmə
- Sətr aralığı — oxunaqlıq üçün sətirlər arasındakı boşluq
- Font çəkisi — qalın, normal və yüngül variantlar
3. Yerləşdirmə və Boşluq
- Kontayner eni — məzmun üçün maksimum en
- Padding və marginlər — elementlər ətrafındakı boşluq
- Grid sistemi — adaptiv dizayn üçün sütun yerləşdirməsi
- Komponent boşluğu — UI elementləri arasındakı məsafə
4. Vizual Elementlər
- Düymə stilləri — əsas, ikincil və üçüncül düymə dizaynları
- Kart dizaynları — məzmun blokları üçün yerləşdirmələr
- İkonlar — ikon stili və ölçülənməsi
- Sərhədlər və kölgələr — incə vizual dərinlik
- Üzərinə gəlmə effekti — interaktiv vəziyyət stilizasiyası
Önizləmə Renderləməsi
Masaüstü Önizləmə
Masaüstü önizləməsi dizaynınızı tam enində (adətən 1200px və ya daha geniş) göstərir:
- Tam naviqasiya menyusu
- Bütün sütunlarla tam yerləşdirmə
- Böyük tipoqrafiya və boşluq
- Bütün vizual elementlər tam ölçüdə
Mobil Önizləmə
Mobil önizləməsi dizaynınızı mobil enində (adətən 375px) göstərir:
- Adaptiv naviqasiya (hamburger menyusu)
- Bir sütunlu yerləşdirmə
- Tənzimlənmiş tipoqrafiya və boşluq
- Toxunmağa uyğun düymə ölçüləri
Adaptiv Breakpoints
Tema Qurucu bu breakpoints-lərdə önizləmə render edir:
| Cihaz | En | Önizləmə |
|---|---|---|
| Mobil | 375px | Portret telefon |
| Planşet | 768px | Peyzaj planşeti |
| Masaüstü | 1200px | Tam enli masaüstü |
| Böyük Masaüstü | 1920px | Ultra-geniş ekran |
Dizaynınızı Təkmilləşdirmək
Tənzimləmələr Etmək
Dizayn istiqamətini aşağıdakıları edərək təkmilləşdirə bilərsiniz:
- Rəngləri tənzimləmək — palitradakı istənilən rəngi dəyişin
- Fontları dəyişmək — fərqli şriftlər seçin
- Boşluğu dəyişmək — padding və marginləri tənzimləyin
- Yerləşdirməni yeniləmək — kontayner enlərini və grid sütunlarını dəyişin
- Elementləri fərdiləşdirmək — düymə stillərini, kart dizaynlarını və s. dəyişin
Önizləmə Yeniləmələri
Dəyişikliklər real vaxtda əks olunur:
- Masaüstü önizləməsi dərhal yenilənir
- Mobil önizləməsi dərhal yenilənir
- Bütün adaptiv breakpoints yenilənir
- Dəyişiklikləri yoxlamaq üçün önizləmələr arasında keçid edə bilərsiniz
Müqayisə Görünüşü
Dizayn istiqamətini aşağıdakılarla müqayisə edin:
- Orijinal dizayn — nəyin dəyişdiyini görün
- Rəqib dizaynları — ilham aldığınız saytlarla müqayisə edin
- Əvvəlki versiyalar — daha əvvəlki dizayn istiqamətlərinə qayıdın
Dizayn İstiqamətini Təsdiqləmək
Dizaynınızdan razılaşdıqdan sonra:
- Hər iki önizləməni yoxlayın — masaüstü və mobil görünüşün yaxşı olduğundan əmin olun
- Bütün rəngləri yoxlayın — kontrast və əlçatanlıqdan əmin olun
- Tipoqrafiyanı sınaqdan keçirin — bütün ölçülərdə oxunaqlığı yoxlayın
- Yerləşdirməni təsdiqləyin — boşluq və hizalanmanı yoxlayın
- Dizaynı təsdiqləyin — tema yaratmağa davam edin
Növbəti Addımlar
Dizayn istiqamətini təsdiqlədikdən sonra:
- Tema Qurucu sizin tam temanızı yaradır
- Tema WordPress saytınıza quraşdırılır
- WordPress customizer istifadə edərək daha da fərdiləşdirə bilərsiniz
- Hospitality Menus və ya digər xüsusiyyətlərə keçin
Ən Yaxşı Praktikalara Nəzər Salmaq
- Real cihazlarda sınaqdan keçirin — mümkün olsa, əsl telefon və planşetlərdən istifadə edin
- Oxunaqlığı yoxlayın — mətnin bütün ölçülərdə oxunaqlığından əmin olun
- Kontrastı yoxlayın — əlçatanlıq üçün Validate Palette Contrast istifadə edin
- Performansa nəzər salın — sürət üçün şəkilləri və fontları optimallaşdırın
- Məzmunu planlaşdırın — yerləşdirmənin faktiki məzmununuzla işlədiyindən əmin olun
Problemlərin Həlli
Önizləmə Yenilənmir
- Səhifəni yeniləyin
- Brauzer cache-ini təmizləyin
- Başqa bir brauzer cəhd edin
- İnternet bağlantısını yoxlayın
Rənglər Fərqli Görünür
- Monitor rəng parametrlərinə baxın
- Fərqli cihazlarda yoxlayın
- Rəng kontrastını əlçatanlıq alətləri ilə təsdiqləyin
- Rəng körlüyü simulyatorlarını nəzərdən keçirin
Tipoqrafiya Problemləri
- Font fayllarının yükləndiyini yoxlayın
- Müxtəlif breakpoints-lərdə font ölçüsünü yoxlayın
- Faktiki məzmunla sınaqdan keçirin
- Oxunaqlıq üçün sətir uzunluğunu nəzərə alın
Əlaqəli Sənədlər
- Discovery Interview — dizayn məlumatlarını toplayın
- Hospitality Menus — strukturlaşdırılmış menyu səhifələri yaradın
- Validate Palette Contrast — rəng əlçatanlığını yoxlayın
- Generate Logo SVG — fərdiləşdirilmiş loqolar yaradın