Hazır Figma dizaynının HTML və CSS-ə çevrilməsi xidməti təsdiqlənmiş vizual materialı brauzerdə işləyən interfeysə çevirir. Məqsəd şəkli ekrana yerləşdirmək deyil: mətn, menyu, düymə, forma və digər hissələr real HTML elementləri kimi işləməlidir. JavaScript tələb olunan qarşılıqlı davranışlar üçün əlavə edilir.
Bu iş hazır dizayn əsasında kod hazırlanmasıdır. Dizaynın məzmunu, aktivləri, mobil variantları və interaktiv vəziyyətləri əvvəl nəzərdən keçirilir. Backend və məzmun idarəetməsi lazımdırsa, admin panel və tam sayt hazırlığı ayrıca əhatə kimi müəyyənləşdirilə bilər.
Başlamaq üçün nə lazımdır?
İşlənəcək ekranların təsdiqlənmiş versiyası və istifadə hüququ olan şəkil, ikon və şriftlər lazımdır. Dizayn faylında hansı hissənin yekun, hansının eksperiment olduğu aydın göstərilməlidir. Eyni ekranın bir neçə versiyası varsa, kodlaşdırılacaq variant razılaşdırılır.
- Əsas səhifələr və təkrarlanan hissələr.
- Mobil, planşet və masaüstü görünüşlər.
- Menyu, forma və düymənin davranış vəziyyətləri.
- İstifadə olunacaq mətn və vizual materiallar.
- Keçidlərin və formaların nəzərdə tutulan nəticəsi.
Adaptiv görünüşün qurulması
Dizayndakı iki sabit ekranın arasında çoxsaylı ölçü var. Hazırlıq zamanı mətnin keçidi, şəkil nisbəti və elementlərin yerləşməsi həmin aralıqlarda da yoxlanılır. Mobil variant verilməyibsə, uyğunlaşdırmanın vizual qərarları ayrıca razılaşdırılmalıdır.
MDN-in adaptiv dizayn izahı müxtəlif ölçülərə uyğun quruluş yanaşmasını göstərir. Konkret layihədə ölçülər sadəcə cihaz adları ilə seçilmir; məzmunun harada yerləşməyə ehtiyac duyduğu müşahidə edilir.
İnteraktiv hissələr və real vəziyyətlər
Açıq menyu, seçilmiş tab, səhv forma və boş nəticə dizaynın ayrıca vəziyyətləri ola bilər. Yalnız ilkin maketin kodlaşdırılması bu davranışları tamamlamır. Hansı elementin düymə, hansı elementin keçid olduğu da məzmun məqsədinə görə seçilir.
İzahlı qəbul nümunəsi: istifadəçi mobil menyunu açır, xidmətə keçir və formda natamam məlumat yazır. Menyunun bağlanması, klaviatura fokusunun görünməsi və səhv mesajının yerləşməsi yoxlanılır. Bu, yalnız vizual şəkil müqayisəsindən daha geniş qəbul ssenarisidir.
İşin mərhələləri
- Dizayn və aktivlər yoxlanılır, qeyri-müəyyən hissələr yazılır.
- Təkrarlanan komponent və stil qaydaları hazırlanır.
- Bir əsas ekran ilk baxış üçün kodlaşdırılır.
- Qalan səhifələr və interaktiv vəziyyətlər tamamlanır.
- Razılaşdırılmış ölçülər və brauzerlərdə yoxlama aparılır.
- Mənbə və istifadə qaydası təhvil verilir.
SEO və məzmunun sonrakı istifadəsi
Semantik başlıqlar, keçidlər və təsvirlər saytın məzmun quruluşuna uyğun hazırlanmalıdır. Dizaynda böyük görünən hər yazını əsas başlıq etmək düzgün struktur yaratmır. Mətnin məna iyerarxiyası vizual ölçü ilə birlikdə nəzərə alınır.
Əgər mövcud sayt yenilənirsə, ünvanlar və əvvəlki məzmun əlaqələri də araşdırılır. Redizaynda SEO bələdçisi bu keçidi izah edir. Məqsəd yeni görünüşə keçərkən məzmunun və vacib giriş yollarının itirilməməsidir.
Təhvil və qəbul nəticəsi
Əhatəyə uyğun HTML, CSS, JavaScript və vizual aktivlər təhvil verilir. Faylların quruluşu və səhifəni işə salmaq qaydası göstərilir. Xarici kitabxana istifadə olunursa, onun məqsədi və asılılığı aydın saxlanır. Lazımsız məxfi məlumat kod paketinə əlavə edilmir.
Vizual fərqlər baxış zamanı konkret ekran, ölçü və vəziyyət üzrə qeyd olunur. Şriftin uzun mətnlə davranışı və canlı kontentin yerləşməsi də yoxlanılır. Təhvil verilən görünüş yalnız qısa nümayiş başlıqları ilə işləyən maket olmamalıdır.
Mövcud layihəyə əlavə etmə
Hazırlanan səhifə işləyən sayta qoşulacaqsa, ümumi stil və skriptlərlə toqquşma ehtimalı əvvəl nəzərdən keçirilir. Eyni adlı siniflərin fərqli hissələrə təsiri, menyunun iki dəfə yüklənməsi və mövcud şriftlərin istifadəsi yoxlanılır. Ayrıca nümayişdə işləyən ekranın ümumi sayt daxilində də düzgün görünməsi qəbulun hissəsidir.
Dizayndakı hərəkətli effektin məqsədi dəqiqləşdirilir: məlumatı göstərmək, vəziyyət dəyişikliyini bildirmək və ya dekorativ görünüş yaratmaq. Əsas əməliyyatın animasiyanın bitməsini gözləmədən başa düşülməsi nəzərə alınır. Effektin mobil davranışı və sadələşdirilmiş variantı iş başlamazdan əvvəl seçilə bilər.
Tez verilən suallar
Yalnız desktop dizaynı varsa nə edilir?
Mobil davranış və yerləşmə ayrıca dəqiqləşdirilir. Mobil uyğun sayt haqqında izah bu tələbləri toplamağa kömək edir.
Sonradan React və ya PHP-yə qoşmaq mümkündürmü?
Mənbənin nəzərdə tutulan istifadəsi əvvəl məlum olsa, struktur buna uyğun hazırlanır. React frontend işi və backend əlaqəsi ayrıca qiymətləndirilir.
Başlamaq üçün təsdiqlənmiş dizaynı, ekran siyahısını və gözlənilən davranışı təqdim edin. Texniki tapşırıq ilkin çərçivəni dəqiqləşdirməyə kömək edir.
