Veb-sayt yaratish texnologiyasi juda koʻp qirrali jarayondir. Ammo shunga qaramay, uning barcha bosqichlarini ikkita asosiy komponentga bo'lish mumkin - funktsional va tashqi qobiq. Yoki veb-ustalar orasida odatiy bo'lganidek, mos ravishda back-end va front-end. O'z veb-saytlarini veb-ishlab chiqish studiyalaridan buyurtma qilgan odamlar ko'pincha oddiygina funksionallikka e'tibor qaratishga arziydi va bu to'g'ri qaror bo'ladi. Ammo bu juda kamdan-kam hollarda, odatda beta-sinov bosqichidagi startap loyihalari uchun to'g'ri keladi. Aks holda, grafik dizayn va foydalanuvchi interfeysi veb-ishlab chiqish standartlariga mos kelishi va qulay bo‘lishi uchun oddiygina talab qilinadi.
Interfeys dizayneri yoki dizayner duch keladigan birinchi burchak toshi - bu sayt tartibining kengligi. Axir, buning uchun interfeyslarni chizish kerak. Sof intuitiv ravishda ikkita yondashuv paydo bo'ladi - yoki har bir mashhur ekran o'lchamlari uchun alohida tartiblarni yarating yoki barcha displeylar uchun saytning bitta versiyasini yarating. Va ikkala variant ham noto'g'ri bo'ladi, lekin birinchi navbatda.
Pikseldagi standart veb-sayt kengligiRunet uchun
Moslashuvchan tartibni ishlab chiqishdan oldin, kengligi ming piksel bo'lgan saytni ishlab chiqish ommaviy hodisa edi. Bu raqam bitta oddiy sababga ko'ra tanlangan - sayt har qanday ekranga mos kelishi uchun. Va buning o'ziga xos mantig'i bor, lekin faraz qilaylik, odamning ish stolida hech bo'lmaganda HD monitori bor. Bunday holda, sizning joylashuvingiz ekranning o'rtasida joylashgan kichik chiziq kabi ko'rinadi, bu erda hamma narsa bir uyumga yopishtirilgan va yon tomonlarida juda katta foydalanilmagan bo'sh joy mavjud. Keling, bir kishi veb-saytingizga 800px keng ekranga ega planshetda kirishini va sozlamalarda "To'liq veb-saytni ko'rsatish" belgilanishini faraz qilaylik. Bunday holda, saytingiz ham noto‘g‘ri ko‘rsatiladi, chunki u shunchaki ekranga sig‘maydi.
Ushbu mulohazalardan xulosa qilishimiz mumkinki, tartib uchun belgilangan kenglik, albatta, biz uchun mos emas va biz boshqa yo'l izlashimiz kerak. Keling, har bir ekran kengligi uchun alohida tartib g'oyasini tahlil qilaylik.
Barcha holatlar uchun tartiblar
Agar siz bozordagi barcha ekran oʻlchamlari uchun maketlarni yaratish strategiyasi sifatida tanlagan boʻlsangiz, sizning saytingiz butun Internetdagi eng noyob boʻladi. Axir, bugungi kunda har bir variant uchun nozik sozlashga harakat qilib, barcha qurilmalarni qamrab olishning iloji yo'q. Ammo agar siz monitorlar va qurilma ekranlarining eng mashhur rezolyutsiyalariga e'tibor qaratsangiz, unda g'oya yomon emas. Uning yagona kamchiligi moliyaviy xarajatlardir. Axir, interfeys dizayneri, dizayner va koder bir xil ishni 5 yoki 6 marta bajarishga majbur bo'lganda, loyiha qimmatga tushadi.dastlabki byudjet narxidan nomutanosib ravishda yuqori.
Shuning uchun faqat bitta sahifali saytlar turli xil ekranlar uchun koʻplab versiyalari bilan maqtana oladi, ularning maqsadi bitta mahsulotni sotish va uni yaxshi bajarishga ishonch hosil qilishdir. Xo'sh, agar sizda bunday saytlardan biri emas, balki ko'p sahifali saytingiz bo'lsa, ko'proq o'ylab ko'ring.
Eng mashhur sayt oʻlchamlari
Ikki ekstremal oʻrtasidagi kelishuv uch yoki toʻrtta ekran oʻlchamiga moʻljallangan tartibni yaratishdir. Ular orasida mobil qurilmalar uchun tartib bo'lishi kerak. Qolganlari kichik, o'rta va katta ish stoli ekranlari uchun moslashtirilishi kerak. Saytning kengligini qanday tanlash mumkin? Quyida biz 2017-yil may oyi uchun HotLog xizmati statistikasini taqdim etamiz, bu bizga turli xil qurilmalar ekrani ruxsatlarining mashhurligi taqsimotini, shuningdek, ushbu koʻrsatkich dinamikasini koʻrsatadi.
Jadvaldan siz foydalanmoqchi boʻlgan sayt hajmini qanday aniqlashni bilib olishingiz mumkin. Bundan tashqari, bugungi kunda eng keng tarqalgan format 1366 dan 768 pikselgacha bo'lgan ekran degan xulosaga kelishimiz mumkin. Bunday ekranlar byudjet noutbuklarida o'rnatiladi, shuning uchun ularning mashhurligi tabiiydir. Keyingi eng mashhuri Full HD monitor bo'lib, u videolar, o'yinlar va shuning uchun veb-sayt maketlarini yaratish uchun oltin standart hisoblanadi. Jadvalda biz 360 dan 640 pikselgacha bo'lgan mobil qurilmalarning o'lchamlari, shuningdek, undan keyin ish stoli va mobil ekranlar uchun turli xil variantlarni ko'ramiz.
Dizayn dizayni
Shunday qilibStatistikani tahlil qilgandan so'ng, biz optimal sayt kengligi 4 ta o'zgarishga ega degan xulosaga kelishimiz mumkin:
- 1366px kengligidagi noutbuk versiyasi.
- Toʻliq HD versiyasi.
- Kichik ish stoli monitorlarida koʻrsatish uchun kengligi 800px.
- Saytning mobil versiyasi - kengligi 360 piksel.
Aytaylik, sayt uchun yaratilgan manba uchun qanday hajmdan foydalanishga qaror qildik. Ammo bunday loyiha hali ham qimmatga tushadi. Keling, bu safar belgilangan kenglikdan foydalanmasdan boshqa variantlarni ko'rib chiqaylik.
Tarzni moslashuvchan qilish
Muqobil yondashuv mavjud, u faqat minimal ekran o'lchamiga moslashishga arziydi va sayt o'lchamlarining o'zi foizlar bilan belgilanadi. Shu bilan birga, menyular, tugmalar va logotip kabi interfeys elementlari piksellardagi ekran kengligining minimal hajmiga e'tibor qaratib, mutlaq qiymatlarda o'rnatilishi mumkin. Tarkibga ega bloklar, aksincha, ekran maydoni kengligining belgilangan foiziga ko'ra cho'ziladi. Ushbu yondashuv sizga saytlar hajmini dizayner uchun cheklov sifatida qabul qilishni to'xtatish va bu nuansni mohirlik bilan engish imkonini beradi.
Oltin nisbat nima va uni veb-sahifa tartibiga qanday qo'llash mumkin?
Hatto Uyg'onish davrida ham ko'plab me'morlar va rassomlar o'z ijodlariga mukammal shakl va mutanosiblikni berishga harakat qilishgan. Bunday nisbatning qiymatlari haqidagi savollarga javob olish uchun ular barcha fanlar malikasiga - matematikaga murojaat qilishdi.
Qadim zamonlardan beri bizning ko'zimiz eng tabiiy va nafis deb qabul qiladigan nisbat ixtiro qilingan.chunki u tabiatda hamma joyda mavjud. Bunday nisbat formulasining kashfiyotchisi Phidias ismli iste'dodli qadimgi yunon me'mori edi. U hisoblab chiqdiki, agar nisbatning katta qismi kichikroq bilan bog'liq bo'lsa, chunki butun kattaroq bilan bog'liq bo'lsa, unda bunday nisbat eng yaxshi ko'rinadi. Ammo ob'ektni assimetrik tarzda bo'lishni istasangiz, bu shunday. Bu nisbat keyinchalik oltin qism deb ataldi, bu esa jahon madaniyati tarixi uchun hali ham uning ahamiyatini oshirib yubormaydi.
Veb-dizaynga qaytish
Bu juda oddiy - oltin nisbatdan foydalanib, siz imkon qadar inson ko'zini quvontiradigan sahifalarni loyihalashingiz mumkin. Oltin nisbat formulasining ta'rifiga ko'ra, biz 6180339887 irratsional sonini olamiz …, lekin qulaylik uchun 1, 62 yaxlitlangan qiymatdan foydalanishimiz mumkin. Bu bizning sahifamiz bloklari 62 bo'lishi kerakligini anglatadi Siz foydalanayotgan sayt uchun yaratilgan manba qanday o'lchamda bo'lishidan qat'i nazar, % va butunning 38%. Misolni ushbu diagrammada ko'rishingiz mumkin:
Yangi texnologiyalardan foydalaning
Zamonaviy veb-saytlarni joylashtirish texnologiyalari rejalashtiruvchi va dizayner g'oyasini to'g'ri etkazish imkonini beradi, shuning uchun endi siz Internet texnologiyalari paydo bo'lganidan ko'ra ko'proq jasoratli g'oyalarni amalga oshirishingiz mumkin. Endi saytning o'lchami qanday bo'lishi haqida qattiq o'ylashingiz shart emas. Moslashuvchan bloklash tartibi, kontent va shriftlarni dinamik yuklash kabi narsalar paydo bo'lishi bilan veb-saytlarni ishlab chiqish ancha yoqimli bo'ldi. Axir, bu texnologiyalarkamroq cheklovlar, garchi ular hali ham mavjud. Ammo siz bilganingizdek, chegaralarsiz san'at bo'lmaydi. Biz sizga bitta haqiqiy ijodiy dizayn yondashuvidan foydalanishni tavsiya qilamiz - oltin nisbat. Uning yordamida siz shablonlarda qanday sayt o‘lchamlarini o‘rnatganingizdan qat’iy nazar, ish maydonini samarali va chiroyli tarzda to‘ldirishingiz mumkin.
Saytning ish maydonini qanday oshirish mumkin
Barcha UI elementlarini kichik maketga sig'dirish uchun yetarli joy bo'lmasligi ehtimoli bor. Bunday holda siz ijodiy fikrlashni yoki avvalgidan ham ijodiyroq fikrlashni boshlashingiz kerak bo'ladi.
Qalqib chiquvchi menyuda navigatsiyani yashirish orqali saytda maksimal joy boʻshatish. Ushbu yondashuvni nafaqat mobil qurilmalarda, balki ish stollarida ham qo'llash mantiqan to'g'ri. Axir, foydalanuvchi har doim saytingizda qanday sarlavhalar borligini ko'rib chiqishga hojat yo'q - u kontent uchun kelgan. Va foydalanuvchining xohish-istaklarini hurmat qilish kerak.
Menyuni yashirishning yaxshi usuliga quyidagi tartib misol boʻla oladi (quyidagi rasm).
Qizil maydonning yuqori burchagida xochni koʻrishingiz mumkin, uni bossangiz, menyu kichik belgiga yashiriladi va foydalanuvchi veb-sayt mazmuni bilan yolgʻiz qoladi.
Biroq, bu ixtiyoriy, siz doimo koʻrinadigan navigatsiyani tark etishingiz mumkin. Lekin siz uni saytdagi mashhur havolalar ro'yxatini emas, balki chiroyli dizayn elementi qilishingiz mumkin. Matn havolalariga qo'shimcha yoki hatto o'rniga intuitiv piktogrammalardan foydalaning. xuddi shundaysaytingizga foydalanuvchi qurilmasidagi ekran maydonidan samaraliroq foydalanish imkonini beradi.
Eng yaxshi veb-sayt sezgir
Agar siz sayt uchun qaysi tartibni tanlashni bilmasangiz, unda siz uchun hammasi oddiy. Ishlab chiqish xarajatlarini tejash va shu bilan birga ayrim qurilmalar uchun noto‘g‘ri joylashuv tufayli auditoriyangizni yo‘qotmaslik uchun sezgir dizayndan foydalaning.
Responsive dizayn turli qurilmalarda bir xil darajada yaxshi koʻrinadigan dizayndir. Ushbu yondashuv sizning saytingizga hatto noutbukda, hatto planshetda, hatto smartfonda ham tushunarli va qulay bo'lishiga imkon beradi. Ushbu effekt ekranning ish maydonining kengligini avtomatik ravishda o'zgartirish orqali erishiladi. Saytingiz uchun javob beruvchi uslublar jadvallaridan foydalanish orqali siz eng yaxshi qarorni qabul qilasiz.
Responsive dizayn va veb-sayt versiyalari oʻrtasidagi farq nimada
Responsive dizayn saytning mobil versiyasidan farq qiladi, chunki oxirgi holatda foydalanuvchi ish stolidagidan farqli HTML kod oladi. Bu server ish faoliyatini optimallashtirish, shuningdek, qidiruv tizimini optimallashtirish nuqtai nazaridan kamchilikdir. Bundan tashqari, saytning turli versiyalari uchun statistikani hisoblash qiyinroq bo'ladi. Moslashuvchan yondashuv bu kamchiliklarga ega emas.
Turli qurilmalar uchun sezgirlik koʻrsatilgan kenglik foiziga ega boʻlgan tartib orqali yoki bloklarni mavjud boʻsh joyga oʻtkazish orqali (smartfonda vertikal tekislikda oʻrniga) erishiladi.ish stolida gorizontal) yoki turli ekranlar uchun individual tartiblarni yaratish.
Oʻquv qoʻllanmalarimizda sezgir dizayn va ishlab chiqish haqida batafsil maʼlumot oling.
