Sayt verstkasiga buyurtma: maketni moslashuvchan kodga aylantiramiz

Verstka — «sayt qilish»ning bir bo‘lagi emas, alohida ish

Verstka — dizayn-maketni HTML, CSS va JavaScript’ga o‘tkazish: brauzer dizayner chizgan narsani aynan o‘zidek ko‘rsatishi kerak. Bu mantiqni dasturlash ham, kontent bilan to‘ldirish ham emas, shuning uchun uni ko‘pincha alohida buyurtma qilishadi — studiyada dizayn va backend bor, belgilash uchun esa qo‘l yetishmaydi.

Bizga verstka bo‘yicha ikki xil buyurtma bilan kelishadi. Birinchisi: mijozda maket bor va sahifalarni puxta yig‘ib beradigan ijrochi kerak. Ikkinchisi: sayt allaqachon ishlab turibdi, lekin telefonlarda «sochilib» ketadi va qolgan tizimga tegmasdan shablonlarni qayta verstka qilish kerak.

Ikkala holatda ham bir xil narsadan boshlaymiz: maketni ko‘rib chiqib, nima to‘g‘ri yig‘ilganini va nimani aniqlashtirish kerakligini aytamiz — tugmalarning berilmagan holatlari, yo‘q mobil ekranlar, litsenziyasiz shriftlar. Bu savollarni qabul qilishda emas, ish boshlanishidan oldin bergan halolroq.

Moslashuvchanlik: bu yerda asosiy ekran — telefon

O‘zbekistonda saytga tashriflarning katta qismi mobil qurilmadan keladi — odamlar Instagram va Telegramdan o‘tadi, ko‘pincha beqaror tarmoqda. Shuning uchun mobil kenglikdan boshlab verstka qilamiz va bloklarni kompyuterga keyin joylaymiz, aksincha emas.

Saytning moslashuvchan verstkasi faqat «hammasi ekranga sig‘di» degani emas. Bu kattalashtirmasdan o‘qiladigan matn o‘lchami, barmoq uchun qulay bosish zonalari, sahifani yirtmasdan o‘z ichida aylanadigan jadval va narxnomalar, mobil internetda uch megabaytdan tortmaydigan rasmlar.

Natijani bitta o‘ylab topilgan nuqtada emas, haqiqiy kengliklarda tekshiramiz: tor Android ekranlar, standart iPhone’lar, ikki holatdagi planshet, keng monitor. Shakllarni alohida ko‘ramiz — kichik ekranlarda aynan ular ko‘proq buziladi va arizalarni jimgina «yeb» qo‘yadi.

Maket qanday qilib kodga aylanadi

Maketni Figma’da qabul qilamiz: qatlamlar, komponentlar va ko‘rsatilgan shriftlar bilan. Uni takrorlanadigan elementlarga ajratamiz — sarlavha qismi, kartochka, tugma, shakl — va sahifalarni shu komponentlardan yig‘amiz. Shunda tugma rangini o‘zgartirish yigirmata faylni titkilashga aylanmaydi.

Semantik belgilash yozamiz: darajalari bo‘yicha sarlavhalar, ro‘yxatlar ro‘yxat sifatida, rasmlarda alt. Bu chiroy uchun emas, qidiruv va foydalanish qulayligi uchun kerak — qidiruv roboti ham, ekran o‘qiydigan dastur ham rasmni emas, tuzilmani o‘qiydi.

Holatlarni ham alohida hisobga olamiz: kursor olib borilganda, bosilganda, maydondagi xato, bo‘sh ro‘yxat, qatorga sig‘maydigan uzun tovar nomi. Dizayner odatda ideal holatni chizadi, hayotda esa olti so‘zli nomli tovar ham uchraydi.

Tilda, shablonlar va tayyor verstkalar — qachon ular yetarli

Tilda’dagi sayt buyurtmalari va tayyor verstkalar bilan ishlash — tez soha sinab ko‘rish yoki reklama kampaniyasi uchun oddiy lending yig‘ish kerak bo‘lganda normal variant. Konstruktor xosting, shakllar va mobil to‘r masalalarini yechadi, kontentni esa mijozning o‘zi tahrirlay oladi.

Konstruktor qayerda tiqilib qolishini ochiq aytamiz: murakkab filtrlar mantiqi, standartdan tashqari 1C yoki CRM integratsiyalari, turli shablonli o‘nlab andoza sahifalar, yuklanish tezligi ustida nozik ish. Shunday paytda shablonni tuzatish o‘z verstkasidan qimmatga tusha boshlaydi.

Verstka shablonlari ham vaqtni tejaydi, lekin ularni deyarli doim tozalash kerak: ortiqcha kutubxonalar, begona shriftlar, mavjud bo‘lmagan bloklar uchun belgilash. Yo shablonni tartibga keltiramiz, yo o‘zimiznikini yig‘ishni taklif qilamiz — va tanlovga bosim o‘tkazmay, mehnat sarfidagi farqni tushuntiramiz.

Maxsus verstka: nima uchun alohida to‘lanadi

Maxsus verstka nostandart to‘r, animatsiya, yuklanish tezligi va brendga aniq moslik muhim bo‘lgan joyda kerak. Bu yerda hech kim dizaynni konstruktor imkoniyatlariga moslashtirmaydi — kod maketga qarab yoziladi, maket begona shablonga emas.

Ikkinchi dalil — mustaqillik. O‘z verstkangizni istalgan xostingga ko‘chirish, istalgan CMS’ga ulash va boshqa pudratchiga berish mumkin. Konstruktordagi loyiha begona ekotizimda yashaydi, undan ko‘chish esa alohida ish.

Uchinchisi — integratsiyalar. Sayt CRM, ombor, to‘lov tizimi yoki Telegram-bot bilan «gaplashishi» kerak bo‘lsa, verstka bunga tayyor bo‘lishi lozim: tushunarli ulanish nuqtalari, shakllar belgilanishi, analitika uchun hodisalar.

Narx va muddat: ular aslida nimaga bog‘liq

Saytlar va ishlab chiqish bizda loyiha bo‘yicha hisoblanadi. Verstka narxiga noyob ekranlar soni, animatsiyalar murakkabligi, moslashuvchan holatlar soni, eski brauzerlarni qo‘llab-quvvatlash zarurati va maket qanday ko‘rinishda topshirilgani ta’sir qiladi.

Ikki shaklli bitta lending va filtrlar, shaxsiy kabinet hamda savatli katalog — ikkalasi ham «sayt verstkasi» deb atalsa-da, hajmi jihatidan butunlay boshqa olamlar. Shuning uchun avval maketni ko‘ramiz, raqam va muddatni keyin aytamiz.

To‘lovni so‘mda yoki dollarda qabul qilamiz, shartnoma asosida ishlaymiz. Muddatlarni bosqichlar bo‘yicha qayd etamiz: avval umumiy komponentlar va bosh sahifa, keyin ichki sahifalar, so‘ng qabul qilishdan keyingi tuzatishlar.

Ishni qanday qabul qilish va muammoli kod bilan qolib ketmaslik

Faqat namoyish havolasini emas, manba fayllarini ham so‘rang. Repozitoriyga kirish berilmagan verstka sizni ijrochiga bog‘lab qo‘yadi: keyingi har qanday tuzatish yana faqat u orqali o‘tadi.

Pudratchining skrinshotlarida emas, o‘z telefoningizda tekshiring. Shakllarni oching, ekranni aylantiring, maydonga uzun matn kiriting, menyu o‘zini qanday tutishini ko‘ring. Muammolarning aksariyati shunday o‘n daqiqalik sinovda ko‘rinadi.

Buyurtmachining tez-tez qiladigan xatosi — chekka holatlar maketisiz verstkani qabul qilish. Dizaynda «hech narsa topilmadi» yoki «yuborishda xato» ekrani bo‘lmasa, ijrochi ularni o‘zi o‘ylab topadi va keyin qayta qilishga to‘g‘ri keladi.

Biz nima qilamiz

Jar Agency — Toshkentdagi to‘liq siklli agentlik. Verstkani mustaqil buyurtma sifatida ham, katta loyihaning bir qismi sifatida ham bajaramiz — lending va korporativ saytdan do‘kon hamda ilovalargacha, integratsiya va analitikasi bilan birga.

Faqat g‘oya bo‘lib, maket bo‘lmasa — dizaynni qilib, manba fayllarini topshiramiz. Maket bo‘lsa — verstkaga olamiz. Mobil qurilmalarda sochilib ketayotgan sayt bo‘lsa — kodini ko‘rib, nima arzonroq ekanini aytamiz: tuzatishmi yoki qayta verstka qilishmi.

Mijozlarimiz natijalari

Ko‘p beriladigan savollar

O‘xshash maqolalar

• Android ilova dizayni: platforma xususiyatlari va ish bosqichlari
• Android ilova uchun frilanser yoki agentlik — qaysi birini tanlash
• Android ilova ishlab chiqish xizmati: g‘oyadan Google Play’gacha
• Android uchun ilova buyurtma qilish qancha turadi
• Android Studio’da ilova yaratish: agentlik buni qanday qiladi
• Android uchun o‘yin yaratish: nimalarni o‘z ichiga oladi va biznes ilovadan qanday farq qiladi