Web-dizaynerlar. Ular nima haqida gaplashayotganini tushunishni o'rganamiz
Frontend (Frontend)
Foydalanuvchi o'z brauzerida ko'radigan hamma narsa — bu saytning ko'rinishi, uning tuzilishi va interaktiv elementlari. Saytning ushbu qismini ishlab chiquvchilar frontendchilar deb nomlanadi.
Web-dizayner uchun uning qobig'i qanday ishlashini tasavvur qilish uchun frontendni asosiy tamoyillarini bilish muhimdir. Agar dizayner saytning tashqi qobig'ini o'zi qila olsa - bundan ham yaxshiroq.
Backend (Backend)
Serverda ishlaydigan va saytning tashqi ko'rinishiga bevosita taalluqli bo'lmagan har qanday narsa. Odatda bu ma'lumotlar bazalari, kirish buyruqlari, shablon sahifalarini yaratish. Masalan, foydalanuvchi qidiruvga biron bir so'zni kiritganda, u serverga yuboriladi va chiqish natijalari sifatida qaytariladi. Saytning ushbu qismini ishlab chiquvchilar backendchlar deb nomlanadi.
Dasturchilar bilan ma'lum bir funktsiyani amalga oshirish uchun, web-dizaynerlarga serverlar tuzilishi xaqida bilimlar asqotib qoladi. Masalan, sayt foydalanuvchilarning pochta manzillarini maxsus saqlashi va tartiblashi uchun.
WYSIWYG (Vizivig, "nimani ko'rsam, shuni olaman")
Webflow, Tilda va Readymag kabi web-sayt konstruktorlarini shunday deyiladi. Ular foydalanuvchilarga dasturlash bilimisiz standart bloklardan web-saytlar yaratishga imkon beradi. Viziviglardan kichik loyihalarda, ma'lumotlar bazalarini ulash yoki tarkibni doimiy ravishda o'zgartirish kerak bo'lmagan paytlarda foydalanish qulay.
Moslashuvchanlik
Saytning har qanday qurilma ekranlariga moslashish qobiliyati. Ba'zan uni "mobil versiya" yoki "mobil vyorstka"deb atashadi. Moslashuvchan sayt 4K piksellar soniga ega ulkan monitorda ham, eski iPhone SE-da ham yaxshi ko'rinishi kerak.
Moslashuvchanlikka tartibni modulli qayta qurish orqali erishiladi. Masalan, agar sizda katta ekranda uchta gorizontal bloki bo'lsa, telefonda esa bir xil bloklar tik vertikalga o'tadi.
Spetsifikatsiya
Sayt funktsiyalarini tavsiflovchi hujjat: funktsiyalar qanday ishlashi kerak, animatsiyalar qaerda bo'lishi kerak, aniq xususiyatlarni amalga oshirish uchun qanday ma'lumotlar kerak bo'lishi mumkin. Odatda spetsifikatsiya batafsil matn va skrinshotlarga ega bo'lgan katta hujjatdir.
Dizayner spetsifikatsiyani yozadi, shunda keyinchalik uning echimlari va texnik cheklovlarini ishlab chiquvchilar bilan muhokama qilish osonroq bo'ladi.
Web shrift formatlari (EOT, TTF, WOFF)
Saytlarda kompyuteringizdagi oddiy shrift yomon ishlaydi-hech bo'lmaganda, turli xil operatsion tizimlar turli formatlarni qo'llab-quvvatlaganligi sababli. Ushbu muammoni hal qilish uchun ishlab chiquvchilar brauzerlar uchun maxsus shrift formatlarini yaratdilar — EOT, TTF, WOFF, WOFF2.
SVG (Scalable Vector Graphics — kengaytiriladigan vektorli grafikalar)
Vektorli tasvir formati. Ichida SVG kod satrlariga o'xshaydi-ular saytda rasmga aylantiriladi. Bunday rasmlar tezda yuklanadi va ekranni kattalashtirishda sifatini yo'qotmaydi.
Ko'pincha dizaynerlar piktogramma va logotiplar uchun SVG formatidan foydalanadilar. Fotosuratlar va chizilgan rasmlarni raster formatlarida saqlash yaxshidir: JPG va PNG.
Nazorat punktlari
Sayt ma'lum ekran o'lchamlariga moslasha boshlagan nuqtalar. Sayt barcha qurilmalarda yaxshi ko'rinishi kerak bo'lganda, moslashuvchan tartibda juda keng tarqalgan: kompyuter monitorida, telefon va planshet ekranida.
Ushbu rasmda turli xil oyna kengliklarida sayt qanday ko'rinishi kerakligi aniq ko'rsatilgan. Eng tor - 600 piksel va undan kam. Eng keng - 1024 va undan ko'p.
Favikon (Favikon)
Brauzer yorlig'ida, qidiruv tizimida va xatcho'plarda sayt nomi yonida joylashgan belgi. Odatda favikonka-bu sayt yoki kompaniyaning logotipi bo'lib, foydalanuvchiga bitta havolani boshqasidan eslab qolish va ajratishni osonlashtiradi.
Balkim, siz brauzerda ko'plab yorliqlar ochilg'ligida va ularning nomlari yo'qligini ko'rgandirsiz. Aytish joizki, siz hali ham favikon tufayli qaysi sayt ochiqligini taxminan tushunib turgansiz.
Heder, sayt sarlavhasi (sarlavha)
Odatda yordamchi havolalar, logotip, menyu, bo'lim havolalari, qidirish va kerak bo'lganda akkauntga kirish tugmasi bo'lgan harid savatchasi mavjud bo'lgan saytning eng yuqori moduli. Foydalanuvchi web-saytingiz tarkibida yo'qolmasligi uchun heder barcha sahifalarda bo'lishi kerak.
Ko'pincha hederni "yopishqoq" qilishadi — hatto sichqonchani aylantirganda ham, bu blok sahifaning eng yuqori qismida qoladi. Ammo bunday qilish shart emas, ayniqsa kichik telefon ekranlarida bo'sh joy u siz ham kam bo'lganida.
Futer (Footer)
Ma'lumotlari bo'lgan saytning eng pastki moduli: foydalanuvchi shartnomasi, qo'llab-quvvatlash telefon raqami, ijtimoiy tarmoqlarga havolalar, aloqa uchun kontaktlar. Bularning barchasi eng pastki qismida joylashgan, foydalanuvchilarga bu juda kamdan-kam hollarda kerak.
Agar sizning futeringizda muhim ma'lumotlar bo'lsa, foydalanuvchi unga eta olishiga ishonch hosil qiling. Masalan, Twitter-da hech qanday pastki qism yo'q, chunki u bitta cheksiz lenta kabi joylashtirilgan va sahifaning oxirigacha siz uni hayotingizda hech qachon aylantirmaysiz.
Parallaks (Parallax)
Web-dizaynda bu bitta modulning bir nechta qismlari aylantirilganda har xil tezlikda harakatlanadigan effektdir. Buning yordamida kompozitsiyaning qismlari turli tekisliklarda ekanligi hissi paydo bo'ladi. Bundan tashqari, ob'ekt qanchalik sekin harakat qilsa, u foydalanuvchiga "yaqinroq" bo'ladi.
Odatda parallaks katta matn bloklari va fon fotosuratlari bilan ishlatiladi: matn sekinroq, fon esa standart tezlikda harakatlanadi.
"Burger"
Uchta gorizontal chiziq shaklidagi tugma, ustiga bosish orqali sayt menyusi ochiladi. Odatda, "Burger" katta onlayn-do'konlarda ishlatiladi, barcha toifalarni hederga yoki saytning asosiy qismiga joylashtirish imkoni yo'qligi sababli.
Ilgari, "Burger" faqat saytning mobil versiyalarida ishlatilgan-tor ekranga mos kelmaydigan sarlavhani "yashirish" uchun. Xozirda desktopda ham tez-tez uchraydi.