Veb dizayn

Ishorat qoʻshish
Vikipediya, ochiq ensiklopediya

Veb dizayn (inglizchadan web design) — vebsaytlar, veb-ilovalar uchun veb-foydalanuvchi interfeyslari loyihalanadigan dizayn turi. U nisbatan yosh kasb boʻlib, Oʻzbekistonda hali keng tarqalmagan. Internetda katta miqdordagi foydalanuvchi oqimiga erishish uchun boʻlgan raqobat veb-dizaynerlarga boʻlgan talabning ortishiga sabab boʻlmoqda.

Veb-dizayn veb-saytlarni ishlab chiqarish va ularga xizmat koʻrsatishda koʻplab turli koʻnikmalar va fanlarni oʻz ichiga oladi. Veb-dizayn turli sohalarni oʻz ichiga oladi: foydalanuvchi interfeysi dizayni (UI dizayni); standartlashtirilgan kod va xususiy dasturiy taʼminotni oʻz ichiga olgan mualliflik; foydalanuvchi tajribasi dizayni (UX dizayni); va qidiruv tizimini optimallashtirish.

Asosan, dizaynerlar veb-dizaynning koʻplab sohalarini biriktirgan jamoalarda ishlashadi. Yaʼni jamoada har bir soha odami ishlaydi, fikr almashadi.[1]

Insonlar uchun qulay va foydali vebsayt dizaynini yaratish uchun malakali veb-dizayner eng soʻngi texnologik(grafika yoʻnalishi yoki dasturlash boʻyicha) yangiliklardan boxabar boʻlishi darkor. Aksariyat hollarda malakali dizaynerlar dizayn studiyalarida faoliyat olib borishadi.

Tarix[tahrir | manbasini tahrirlash]

1988-2001[tahrir | manbasini tahrirlash]

Bizga unchalik tanish boʻlmagan veb-dizayn juda yaqin tarixga ega. U grafik dizayn, foydalanuvchi tajribasi va multimedia sanʼati kabi boshqa sohalar bilan bogʼlanishi mumkin, ammo texnologik nuqtai nazardan koʻproq mos keladi. Bu odamlarning kundalik hayotining katta qismiga aylandi. Internetni animatsion grafikalar, turli tipografiya uslublari, fon, video va musiqasiz tasavvur qilish qiyin.

Veb va veb-dizaynning boshlanishi[tahrir | manbasini tahrirlash]

1989-yilda Tim Berners-Li CERNda ishlagan vaqtida global gipermatn loyihasini yaratishni taklif qildi, keyinchalik u World Wide Web nomini oldi. 1991-yildan 1993-yilgacha "World Wide Web" yaratildi. Matnli sahifalar faqat oddiy chiziqli brauzerlarda koʻrinardi.[2]


1993-yilda Mark Andreessen va Erik Bina Mosaic brauzerini yaratdilar. Oʼsha paytda bir nechta brauzerlar mavjud edi, ammo ularning aksariyati Unix-ga asoslangan va matnli sahifalarni foydalanuvchiga yetkazib berishi qiyin edi. Bu paytgacha tasvirlar yoki tovushlar kabi grafik dizayn elementlariga integratsiyalashgan yondashuv mavjud emas edi. Mosaic brauzeri bu qolipni buzdi. Endi gipermatn shunchaki hujjat emas, balki grafik dizaynga ega jurnalga oʻxshardi.[3]

1994-yilda Andreessen Mosaic Communications Corporation tuzildi, keyinchalik u Netscape Communications, Netscape 0.9 brauzeri sifatida tanildi. Netscape anʼanaviy standartlash jarayonini hisobga olmagan holda oʻzining HTML teglarini yaratdi. Masalan, Netscape 1.1 fon ranglarini oʻzgartirish va veb-sahifalardagi jadvallar bilan matnni formatlash uchun teglarni oʻz ichiga olgan. 1996-1999-yillar davomida brauzerlar urushi boshlandi, chunki Microsoft va Netscape brauzerlar ustunlik uchun kurashdilar. Bu vaqt ichida sohada koʻplab yangi texnologiyalar, xususan, kaskadli uslublar jadvallari(CSS), JavaScript va Dynamic HTML(DHTML) mavjud edi. Umuman olganda, brauzer raqobati koʻplab ijobiy oqibatlarga olib keldi va veb-dizaynning tez surʼatlarda rivojlanishiga yordam berdi.[4]

Veb-dizayn rivojlanishi[tahrir | manbasini tahrirlash]

1996-yilda Microsoft oʻzining birinchi raqobatbardosh brauzerini chiqardi, u oʻzining xususiyatlari va HTML teglari bilan toʻla edi. U, shuningdek, uslublar jadvallarini qoʻllab-quvvatlovchi birinchi brauzer boʻlib, u oʻsha paytda noaniq mualliflik texnikasi sifatida qaralgan va bugungi kunda veb-dizaynning muhim jihati hisoblanadi. Jadvallar uchun HTML belgilash dastlab jadval maʼlumotlarini koʻrsatish uchun moʻljallangan.[5] Dizaynerlar HTML jadvallarini murakkab, koʻp ustunli koʻrinishlarini yaratish haqida oʻylab koʻrishdi. HTML saytlari oʻzlarining dizayn imkoniyatlari bilan cheklangan edi, hatto HTMLning oldingi versiyalarida ham. Murakkab dizaynlarni yaratish uchun koʻplab veb-dizaynerlar murakkab jadval tuzilmalaridan foydalanishlari kerak edi. CSS 1996-yil dekabr oyida W3C tomonidan taqdim etilib, tartibni qoʻllab-quvvatlash(yaʼni bir ketma-ketlik, jadval koʻrinishi asosida saytlarga elementlar qoʻshish) uchun kiritilgan.[6] Bu HTML kodining koʻrinishini ancha yaxshi tomonga oʻzgartirdi, veb-saytlarga kirish imkoniyati yaxshilandi.

Birinchi brauzerlar urushining tugashi[tahrir | manbasini tahrirlash]

1998-yilda Netscape korporatsiyasi Netscape Communicator brauzer kodini ochiq kodli litsenziya ostida chiqardi, bu esa minglab ishlab chiquvchilarga dasturiy taʼminotni takomillashtirishda ishtirok etish imkonini berdi. Biroq, ishlab chiquvchilar Internet uchun standartlashni noldan boshlashga qaror qilishdi hamda ochiq kodli brauzerni ishlab chiqishdi. Tez orada bu yagona platforma darajasigacha kengaytirildi.

Veb-standartlar loyihasi yaratildi va brauzerning HTML va CSS standartlariga muvofiqligini targʼib qildi. Brauzerlarni veb-standartlarga muvofiqligini tekshirish uchun Acid1, Acid2 va Acid3 kabi dasturlar yaratilgan. 2000-yilda Internet Explorer Mac kompyuterlari uchun chiqarildi, u HTML 4.01 va CSS 1-ni va PNG tasvirlarni toʻliq qoʻllab-quvvatlovchi birinchi brauzer edi.[7]

2001-yilga kelib, Microsoft tomonidan Internet Explorer-ni ommalashtirish kompaniyasidan soʻng, Internet Explorer veb-brauzerdan foydalanish ulushi 96%ga yetdi, bu esa birinchi brauzerlar urushining tugashini anglatadi, chunki Internet Explorer-da haqiqiy raqobat yoʻq edi.

2001–2012[tahrir | manbasini tahrirlash]

21-asrning boshidan beri Internet odamlar hayotiga tobora koʻproq kirib borgan. Keyinchalik, veb-texnologiyalar ham oʻzgardi. Odamlarning internetdan foydalanish va kirish usullarida ham sezilarli oʻzgarishlar roʻy berdi va bu saytlar dizaynini oʻzgartirdi.

Brauzerlar urushi tugaganidan beri yangi brauzerlar chiqarildi. Ularning aksariyati ochiq manba boʻlib, ular tezroq rivojlanishga moyil va yangi standartlarni koʻproq qoʻllab-quvvatlaydi. Koʻpchilik yangi variantlarni Microsoft Internet Explorer-dan yaxshiroq deb hisoblaydi.

W3C HTML (HTML5) va CSS (CSS3), shuningdek, har biri yangi, lekin individual standart sifatida yangi JavaScript API-lari uchun yangi standartlarni chiqardi. HTML5 atamasi faqat yangi versiyaga ishora qilish uchun ishlatiladi. HTML va JavaScript-ning baʼzi API-larida undan yangi standartlar toʻplamiga (HTML5, CSS3 va JavaScript) murojaat qilish uchun foydalanish odatiy holga aylangan.

2012-yil va keyin[tahrir | manbasini tahrirlash]

3G va LTE internet qamrovining yaxshilanishi bilan veb-saytlar trafigining katta qismi mobil qurilmalarga toʻgʼri keldi. Bu veb-dizayn sanoatiga taʼsir qildi va uni minimalistik, yengillashtirilgan va soddalashtirilgan uslublar yaratishga undadi. Xususan, “Avval mobil” yondashuvi paydo boʻldi, bu avvalo mobilga yoʻnaltirilgan maket bilan veb-sayt dizaynini yaratishni, keyin esa uni yuqoriroq ekran oʻlchamlariga moslashtirishni nazarda tutadi. Barcha turdagi qurilmalarga moslashuvchan saytlar davri boshlandi.

Asboblar va texnologiyalar[tahrir | manbasini tahrirlash]

Veb-dizaynerlar ishlab chiqarish jarayonining qaysi qismida ishtirok etishiga qarab turli xil vositalardan foydalanadilar. Bu vositalar vaqt oʻtishi bilan yangi standartlar va dasturiy taʼminot bilan yangilanadi, ammo ularning ortidagi tamoyillar bir xil boʻlib qolaveradi. Veb-dizaynerlar veb-formatlangan tasvirlar yoki dizayn prototiplarini yaratish uchun vektor va rastrli grafika muharrirlaridan foydalanadilar. Masalan: Figma, Adobe Illustrator, Inkscape va boshqalar. Veb-saytlarni yaratish uchun ishlatiladigan texnologiyalar HTML va CSS kabi W3C standartlarini oʻz ichiga oladi, ularni qoʻlda kodlash yoki WYSIWYG tahrirlash dasturi tomonidan yaratish mumkin. Veb-dizaynerlar foydalanishi mumkin boʻlgan boshqa vositalar qatoriga markirovka tekshiruvchilari va veb-saytlarni veb-sahifalarga kirish koʻrsatmalariga mos kelishi imkoniyatlarini tekshirish vositalari kiradi.[8]

Koʻnikmalar[tahrir | manbasini tahrirlash]

Marketing va aloqa dizayni[tahrir | manbasini tahrirlash]

Veb-saytdagi marketing va aloqa dizayni uning asosiy bozoriga aynan nima mos kelishini aniqlashi mumkin. Bu yosh guruh yoki madaniyatning alohida bir yoʻnalishi boʻlishi mumkin. Shunday qilib, dizayner oʻz auditoriyasining tendentsiyalarini anglab yetishi mumkin. Dizaynerlar oʻzlari yaratayotgan veb-sayt turini, maʼnosini tushunishadi.[9] Masalan, marketing bilan aloqa dizayni bir-biridan tubdan farq qiladi.[10] Kontentning ravshanligi va aniqligiga, ayniqsa veb-saytning qulayligiga eʼtibor berish muhim sanaladi.

UX va UI dizayni[tahrir | manbasini tahrirlash]

Foydalanuvchining veb-sayt mazmunini tushunishi koʻpincha foydalanuvchining veb-sayt qanday ishlashini tushunishiga bogʼliq. Bu UX(inglizcha - user experience) dizaynining bir qismi hisoblanadi. UX dizayni — veb-saytdagi tartib, aniq koʻrsatmalar va etiketkalar bilan yasalgan veb-sayt dizayni. Foydalanuvchining saytda qanday munosabatda boʻlishini qanchalik yaxshi tushunishi saytning interaktiv dizayniga ham bogʼliq boʻlishi mumkin. Agar foydalanuvchi veb-saytning samarali ekanligini tushunsa, undan foydalanishni davom ettirish ehtimoli yuqori. Malakali va veb-saytlardan foydalanishni yaxshi biladigan foydalanuvchilar, shunga qaramay, oʻziga xos, ammo kamroq foydalanuvchilarga ega, qulay veb-sayt interfeysini foydali deb topishlari mumkin. Biroq, kamroq tajribaga ega foydalanuvchilar kamroq intuitiv veb-sayt interfeysining afzalliklari yoki foydaliligini koʻrish ehtimolligi past. Bu yanada universal foydalanuvchi tajribasi va foydalanuvchi mahoratidan qatʼi nazar, iloji boricha koʻproq foydalanuvchilarni joylashtirish uchun kirish qulayligi tendentsiyasini kuchaytiradi. UI(inglizcha - user interface) dizaynida foydalanuvchi tajribasi dizayni va interaktiv dizaynning katta qismi hisobga olinadi.[11]

Murakkab interaktiv funksiyalar, agar ilgʼor kodlash tili koʻnikmalariga ega boʻlmasa, plaginlarni talab qilishi mumkin. Plaginlarni talab qiladigan interaktivlikdan foydalanish yoki foydalanmaslikni tanlash UX-ni loyihalashda muhim qaror hisoblanadi. Agar plagin koʻp brauzerlarda oldindan oʻrnatilgan boʻlmasa, foydalanuvchi kontentga kirish uchun plaginni oʻrnatishni uchun vaqt sarflashni istamasligi yoki buni bilmasligi kabi xavf mavjud. Agar funksiya ilgʼor kodlash tili koʻnikmalarini talab qilsa, u UX-ga qoʻshadigan takomillashtirish miqdori bilan solishtirganda kodlash vaqt yoki pul jihatidan juda qimmat boʻlishi mumkin. Kengaytirilgan interaktivlik eski brauzerlar yoki apparat konfiguratsiyalari bilan mos kelmasligi xavfi ham yoʻq emas, albatta. Ishonchli ishlamaydigan funktsiyani nashr qilish foydalanuvchi tajribasi uchun hech qanday urinmaslikdan koʻra yomonroqdir. Bu maqsadli auditoriyaga bogʼliq, agar kerak boʻlsa yoki biron bir xavfga arziydi.[12]

Tipografiya[tahrir | manbasini tahrirlash]

Veb-dizaynerlar butun boshli saytda yagona shriftdan foydalanish oʻrniga veb-sayt shriftlarining xilma-xil qilib, faqat bir nechta uslublar asosida cheklagan holda tanlashlari mumkin. Koʻpgina brauzerlar maʼlum miqdordagi xavfsiz shriftlarni taniydilar, dizaynerlar asosan bundan murakkablikning oldini olish uchun foydalanadilar. Yaʼni xavfsiz shriftlarni ishlatish, maʼlum bir uslubdagi shriftlar guruhidan foydalanish orqali veb-saytlarni barcha brauzerlarda ochish mumkin boʻladi.

Shriftni yuklab olish keyinchalik, CSS3 shrift moduliga kiritilgan va shu vaqtdan boshlab Safari 3.1, Opera 10 va Mozilla Firefox 3.5 da ham joriy qilingan. Bu keyinchalik veb-tipografiyaga, shuningdek, shriftlarni yuklab olib foydalanishga boʻlgan qiziqishni oshirdi.[13]

Yaratish turlari[tahrir | manbasini tahrirlash]

Veb-saytlarni yaratishning ikki yoʻli mavjud: statik yoki dinamik.

Statik veb-saytlar[tahrir | manbasini tahrirlash]

Statik veb-sayt — veb-saytning har bir sahifasi uchun noyob faylni saqlaydi. Har safar bu sahifa soʻralganda, xuddi shu tarkib qaytariladi. Ushbu tarkib veb-saytni loyihalash paytida bir marta yaratiladi. Odatda qoʻlda mualliflik qilinadi, garchi baʼzi saytlar dinamik veb-saytga oʻxshash avtomatlashtirilgan yaratish jarayonidan foydalansa ham, natijalari tugallangan sahifalar sifatida uzoq muddat saqlanadi. Bu avtomatik ravishda yaratilgan statik saytlar Jekyll va Adobe Muse kabi generatorlar bilan 2015-yilda yanada ommalashdi.[14][15]

Statik veb-saytning afzalliklari shundaki, ularni joylashtirish osonroq, chunki ularning serveri server tomonidagi skriptlarni bajarish uchun emas, balki faqat statik tarkib kodlariga xizmat qilishi kerak edi. Bu kamroq server xotirasini talab qilardi. Ular, shuningdek, arzonroq server uskunasida sahifalarga tezroq xizmat koʻrsatishi mumkin edi. Arzon veb-xosting dinamik xususiyatlarni taklif qilish uchun kengaytirilganligi sababli, bu afzallik kamroq ahamiyat kasb etdi va virtual serverlar qisqa vaqt oraligʼida arzon narxlarda yuqori ishlash imkonini berdi.

Deyarli barcha veb-saytlar baʼzi statik tarkibga ega, chunki rasmlar va uslublar jadvallari kabi qoʻllab-quvvatlovchi aktivlar, hatto yuqori dinamik sahifalarga ega veb-saytlarda ham odatda statik boʻladi.[16]

Dinamik veb-saytlar[tahrir | manbasini tahrirlash]

Dinamik veb-saytlar tezda yaratiladi va veb-sahifalarni yaratish uchun server tomoni texnologiyasidan foydalanadi. Ular odatda oʻz mazmunini bir yoki bir nechta orqa maʼlumotlar bazalaridan chiqaradilar: baʼzilari katalogni soʻrash yoki raqamli maʼlumotlarni umumlashtirish uchun relyatsion maʼlumotlar bazasi boʻylab maʼlumotlar bazasi soʻrovlaridir, boshqalari kattaroq kontent birliklarini saqlash uchun MongoDB yoki NoSQL kabi hujjat maʼlumotlar bazasidan foydalanishi mumkin. Masalan, blog postlari yoki viki-maqolalari.[17]

Dizayn jarayonida dinamik sahifalar koʻpincha statik sahifalar yordamida masxara qilinadi yoki simli ramkalanadi. Dinamik veb-sahifalarni ishlab chiqish uchun zarur boʻlgan koʻnikmalar toʻplami server tomoni va maʼlumotlar bazasini kodlash, shuningdek, mijoz interfeysi dizaynini oʻz ichiga olgan statik sahifalarga qaraganda ancha kengroqdir. Hatto oʻrta hajmdagi dinamik loyihalar ham deyarli har doim jamoaviy harakatdir.

Dinamik veb-sahifalar birinchi marta ishlab chiqilganda, ular odatda Perl, PHP yoki ASP kabi tillarda kodlangan. Ulardan baʼzilari, xususan, PHP va ASP, "shablon" usulidan foydalangan, bunda server tomonidagi sahifa toʻldirilgan mijoz sahifasining tuzilishiga oʻxshardi va maʼlumotlar "teglar" bilan belgilangan joylarga kiritiladi. Bu Perl kabi sof protsessual kodlash tilida kodlashdan koʻra tezroq rivojlanish vositasi edi.

Ushbu ikkala yondashuv koʻplab veb-saytlar uchun kontentni boshqarish tizimlari kabi yuqori darajadagi ilovalarga yoʻnaltirilgan vositalar bilan almashtirildi. Ular umumiy maqsadli kodlash platformalari ustiga qurilgan va veb-sayt vaqt ketma-ketligi boʻyicha blog, tematik jurnal yoki yangiliklar sayti, wiki yoki foydalanuvchi forumi kabi taniqli modellardan biriga muvofiq tarkibni taklif qilish uchun mavjud deb taxmin qiladi. Ushbu vositalar bunday saytni amalga oshirishni juda oson va hech qanday kodlashni talab qilmasdan, faqat tashkiliy va dizaynga asoslangan vazifani bajaradi.

Tarkibning oʻzini (shuningdek, shablon sahifasini) tahrirlash ham saytning oʻzi, ham uchinchi tomon dasturlari yordamida amalga oshirilishi mumkin. Barcha sahifalarni tahrir qilish imkoniyati faqat foydalanuvchilarning maʼlum bir toifasiga (masalan, maʼmurlar yoki roʻyxatdan oʻtgan foydalanuvchilar) taqdim etiladi. Baʼzi hollarda anonim foydalanuvchilarga maʼlum veb-kontentni tahrirlashga ruxsat beriladi, bu kamroq uchraydi (masalan, forumlarda - xabarlarni qoʻshish). Anonim oʻzgarishlarga ega saytlarga misol sifatida Vikipediya-ni keltirish mumkin.[18]

Bosh sahifa dizayni[tahrir | manbasini tahrirlash]

Bosh sahifa — brend bilan tanishtirishi, ham yangi, ham mavjud mijozlarga kerakli narsalarni topish uchun biznesni boshqarishga yordam beradigan kodlangan koʻrsatmalar toʻplami boʻlib xizmat qiladi. Har bir tafsilot kuchli birinchi taassurot qoldirish va moʻljallangan harakatni ragʼbatlantirishga qaratilgan boʻlishi kerak. Bosh sahifani loyihalashning yagona usuli yoʻq.[19]

Foydalanuvchilar saytning bu qismida koʻp vaqt sarflashmaydi lekin, ikki-uch soniya ichida u veb-saytning mavzusi va foydali jihatlari haqida maʼlumot ola olishlari kerak.[20]

Manbalar[tahrir | manbasini tahrirlash]

  1. ↑ Georgina, Lester „Different jobs and responsibilities of various people involved in creating a website“ (19-mart, 2008-yil). Qaraldi: 19-iyun, 2022-yil.
  2. ↑ „History of the web“. Qaraldi: 20-iyun, 2022-yil.
  3. ↑ „NCSA Mosaic — революционный браузер, популяризовавший World Wide Web“ (22-aprel, 2016-yil). Qaraldi: 19-iyun, 2022-yil.
  4. ↑ Jennifer Niederst Robbins. „Web Design in a Nutshell“. Qaraldi: 26-iyun, 2022-yil.
  5. ↑ „Microsoft Internet Explorer web browser avialable“ (30-aprel, 1996-yil). Qaraldi: 25-iyun, 2022-yil.
  6. ↑ „CSS 1 - 1996“. Qaraldi: 26-iyun, 2022-yil.
  7. ↑ „Internet Explorer for Mac“. Qaraldi: 24-iyun, 2022-yil.
  8. ↑ „Web design tools and techniques“ (6-dekabr, 2022-yil). Qaraldi: 26-iyun, 2022-yil.
  9. ↑ „Understanding the Different Types of Design (How To)“. Qaraldi: 1-iyul, 2022-yil.
  10. ↑ „19 Types Of Design, Guide To Different Designs“ (24-mart, 2020-yil). Qaraldi: 1-iyul, 2022-yil.
  11. ↑ „UX vs UI Design: What's the difference?“ (7-iyun, 2022-yil). Qaraldi: 1-iyul, 2022-yil.
  12. ↑ Nick Babich. „UI vs UX Design“ (4-oktabr, 2019-yil). Qaraldi: 1-iyul, 2022-yil.
  13. ↑ „Typography Font Design & Style Guide for UI“ (2-oktabr, 2019-yil). Qaraldi: 1-iyul, 2022-yil.
  14. ↑ DeXPeriX. „Продвинутый Jekyll“ (Rus tili) (26-avgust, 2017-yil). Qaraldi: 1-iyul, 2022-yil.
  15. ↑ „What's Adobe Muse?“. Qaraldi: 1-iyul, 2022-yil.
  16. ↑ „Static website“. Qaraldi: 1-iyul, 2022-yil.
  17. ↑ Roxanne Paredes. „What are Dynamic Websites“ (7-dekabr, 2020-yil). Qaraldi: 1-iyul, 2022-yil.
  18. ↑ Adobe Glossary. „What is a dynamic web page?“. Qaraldi: 1-iyul, 2022-yil.
  19. ↑ Evan Ferguson. „Homepage Design: What to Include“ (31-oktabr, 2018-yil). Qaraldi: 1-iyul, 2022-yil.
  20. ↑ Vincent Brathwaite. „How to Design the Best Homepage in 3 Steps“ (3-noyabr, 2020-yil). Qaraldi: 1-iyul, 2022-yil. 
"https://uz.wikipedia.org/w/index.php?title=Veb_dizayn&oldid=4178265" dan olindi