UX va UI dizaynerlari nima qiladi va front-end ishlab chiquvchilar nima qiladi?

IT sanoatida dizayn bilan bog'liq juda ko'p sohalar mavjud. Ulardan eng keng tarqalgani UX va UI qisqartmalari orqasida yashiringan dizaynerlardir. Xo'sh, ba'zi odamlar hatto front-end ishlab chiquvchilarni dizaynerlar sifatida qo'shishga muvaffaq bo'lishadi. Keling, IT olamida dizaynerlar kim ekanligini, UI va UX o'rtasidagi farq nima va front-end muhandislari loyihalashtirishlari kerak bo'lgan munosabatlarni aniqlashga harakat qilaylik.

Dizaynerlar

Ilovalar, veb-saytlar yoki o'yinlar interfeysini ishlab chiqish juda murakkab jarayon bo'lib, turli sohalardagi bilimlarni qo'llashni talab qiladi: muhandislik, psixologiya va dizayn. Foydalanuvchi interfeysi dizaynerlari (ingliz tilida - User Interface yoki UI) sayt funksionalligi (qidiruv, yorliqlar, menyular) ko'rsatilishiga va mijoz va interfeys o'rtasidagi o'zaro aloqa tafsilotlariga e'tibor qaratadi. UI dizaynerining maqsadi - estetik jihatdan maqbul zamonaviy mahsulot dizayni . UX “User Experience” degan maʼnoni anglatadi, bu “foydalanuvchi tajribasi” degan maʼnoni anglatadi. UX dizayneri potentsial foydalanuvchi interfeysning qulayligi va tushunishiga ko'proq e'tibor qaratadi. Bunday mutaxassis ko'pincha dizayn kontseptsiyasini yaratish uchun asos bo'ladigan tadqiqot va so'rovlarni o'tkazadi, shuningdek, ishlab chiqish paytida va undan keyin kontseptsiyalarni sinab ko'radi. U odatda struktura, tarkib, navigatsiya va foydalanuvchining ushbu elementlar bilan qanday munosabatda bo'lishiga e'tibor beradi. U dasturiy ta'minotni yaratishda asosiy tuzilma bo'lgan sayt xaritalarini, prototiplarini ishlab chiqaradi. UX dizayneri ishining maqsadi foydalanuvchi bu erga nima uchun kelganini tez va og'riqsiz saytdan olishdir . Biroq, bugungi kunda bu ikki mutaxassislikni slash bilan yozilganini ko'rish juda keng tarqalgan. Ya'ni, har ikki yo'nalishning vazifalari bitta mutaxassis tomonidan amalga oshiriladi. UX/UI dizayneri foydalanuvchining interfeys bilan o‘zaro munosabatini loyihalashtiradi, aynan nima qilishi kerakligini hal qiladi va natijada bu interfeys qanday ko‘rinishi uchun javobgardir.

UX/UI dizayneri nimani bilishi kerak

• Grafik muharriri . Bozordagi eng mashhur vositalar Adobe Photoshop, Adobe Illustrator, shuningdek Sketch, Figma. Siz uchun qulay bo'lgan muharrirni tanlang va avval veb-sayt yoki ilovaning skrinshotlarini chizishga harakat qiling, ularni biroz modernizatsiya qiling.

  Eskiz uchun qo'llanma

• Prototiplash vositalari (Mockplus, Axure) . Prototiplash vositasi g'oya va uni amalga oshirish o'rtasidagi bog'liqlikdir. Qaysi vositadan foydalanganingiz muhim emas. Siz bir nechtasini sinab ko'rishingiz va uslubingiz va afzalliklaringizga mos keladiganini tanlashingiz mumkin.

• Foydalanuvchi psixologiyasi. Dizayn bosqichida siz ushbu interfeysdan foydalanish sizga yoki boshqa birovga qulay bo'ladimi, deb o'ylashingiz kerak. O'zingizni mijozning o'rniga qo'ying, u bilan mustahkam aloqa o'rnating va uning ehtiyojlariga e'tiborli bo'ling. Axir, agar mahsulotga talab bo'lsa, mahsulot muvaffaqiyatli bo'ladi.

  Dizayn psixologiyasi: loyihalashda foydali bo'ladigan 8 ta psixologik tamoyil

• Bundan tashqari, sizga rang nazariyasi haqida ma'lumot kerak bo'ladi . Biz, ayniqsa, san’at maktabida o‘qiganlarni bolalikdan bilamiz. Biroq, dizaynerlarning ishi bilan bog'liq ma'lum xususiyatlar mavjud. Asosiy bilimlarni Internetdagi kitoblar yoki maqolalardan olish mumkin.

  Dizaynerlar uchun rang nazariyasi 1-qism: Rangning ma'nosi

  UI dizaynida ranglardan qanday foydalanish kerak

• Matn va vizual komponentlarni birlashtirish vositasi bo'lgan tipografiya haqida tushunchaga ega bo'lish tavsiya etiladi .

  Boshlang'ich dizaynerlar uchun 25 tipografiya qoidalari

  Internetda tipografiya

• Sayt tarkibi va foydalanish qulayligi.

  Veb-dizayndagi kompozitsiya yoki Photoshop darsliklari nima haqida sukut saqlaydi

• Ishning o'ziga xos xususiyatlariga qarab, sizga HTML va CSS yoki (ba'zi) dasturlash tillarini tushunish kerak bo'lishi mumkin (resurslarga havolalar quyida "Front-end dasturchi bilishi kerak" bo'limida mavjud).

Front-end dasturchi

Front-end dasturchining asosiy vazifasi interfeysning mijoz qismini ishlab chiqishdir. Ya'ni, bunday mutaxassis dizaynerlar ishlab chiqqan narsalarni "jonlantiradi". U interfeysning ishlashi va ishlashi uchun mas'uldir va vizual tarkib uchun kamroq. Front-end ishlab chiqaruvchisi ko'pincha uni ishlab chiqish bosqichida foydalanuvchi interfeysi uchun yaxshi echim topishi kerak, shuning uchun u ko'pincha UX/UI dizayneri bilan hamkorlik qiladi. Front-end ishlab chiqaruvchisi tomonidan yozilgan kod foydalanuvchi brauzerida ishlaydi (ular aytganidek, "mijoz tomonida"). Bundan tashqari, eng muhim vazifalardan biri sayt yoki veb-ilovaning barcha platformalar va brauzerlarda bir xil ko'rinishini ta'minlashdir.

Front-end dasturchi nimani bilishi kerak

Qoida tariqasida, front-end uchta ustunga asoslanadi: HTML sahifani belgilash tili, CSS uslublar jadvallari va JavaScript dasturlash tili. Bundan tashqari, front-end ishlab chiqaruvchisi HTTP protokoli, serverlar va brauzerlarning ishlash tamoyillarini va hozirda bozorda mavjud bo'lgan turli xil qurilmalarda interfeysni ko'rsatish xususiyatlarini tushunishi kerak. Veb-interfeyslarni yaratish vositalari va usullari doimo rivojlanib, o'zgarib turadi, shuning uchun ishlab chiquvchi buni doimiy ravishda kuzatib borishi kerak.

HTML va CSS (tartib)

Bu tartib, sayt qurilgan g'ishtlarning o'zi. HTML belgilash tili saytning tashkil etilishini, mazmunini va ular o'rtasidagi barcha o'zaro munosabatlarni belgilaydi. Bu sizga sahifaning yuqori qismini, pastki qismini, yon bloklarini mazmuni, sarlavhalari, matn va multimedia elementlarini ko'rsatishga imkon beradi. CSS uslublar jadvallari HTML elementlarini bezash uchun ishlatiladi. Ular sahifada joylashgan har bir grafik element qanday ko'rsatilishini aniq belgilaydi. HTML5 va CSS3 ning eng so'nggi versiyalaridan foydalanib, siz sahifaga video va audio komponentlarni joylashtirishingiz, 2D tasvirlar va animatsiyalarni yaratishingiz va hatto oddiy o'yinlarni yozishingiz mumkin. Bir vaqtning o'zida barcha teglar va uslublarni eslab qolishga harakat qilishning hojati yo'q. Asoslarni o'rganish va ularni darhol amalda qo'llash foydali bo'ladi. HTML va CSS asoslarini o'rganishingiz mumkin bo'lgan juda yaxshi sayt bu W3School. Lekin faqat ingliz tilini kamida asosiy bilimga ega bo'lsangiz.

• W3School
• CSS

Bundan tashqari, front-end ishlab chiqaruvchisi o'zaro faoliyat brauzer va platformalararo ishlab chiqish, moslashuvchan va sezgir tartibni tushunishi kerak.

Bootstrap

Bu HTML, CSS va JavaScript uchun ramka. Ya'ni, ba'zi shablonlardan, masalan, konstruktordan, ularsiz saytlarni tezroq yig'ishingiz mumkin. Lekin, albatta, uni o'zingizning ehtiyojlaringizga moslashtirishingiz kerak. Agar siz ingliz tilini bilsangiz, getbootstrap veb-saytini va xuddi shu w3schools ni tavsiya qilamiz .

JavaScript

Javascript front-end ishlab chiqishning asosidir. Bu birinchi va eng keng tarqalgan interfeysli dasturlash tilidir. Bu saytga ko'plab xususiyatlarni qo'shishi mumkin. Asosiy darajada, bu til sahifaga interaktiv elementlar qo'shish imkonini beradi. U real vaqtda yangilanadigan xaritalar, interaktiv onlayn o'yinlar va filmlarni yaratish uchun ishlatiladi. Katta JavaRush kurslarimizda biz biroz JavaScript-ni o'rganamiz. Siz uni xuddi shu W3School- da o'rganishingiz yoki javascript.ru veb-saytida rus tilida o'qishingiz mumkin .

jQuery

jQuery - bu Javascript kutubxonasi bo'lib, unda plaginlar va kengaytmalar mavjud bo'lib, ular rivojlanishni yanada oson va tezlashtiradi. Noldan kod yozish o'rniga, kutubxonalar sizga tayyor komponentlarni qo'shish imkonini beradi, keyinchalik ularni ma'lum bir loyiha uchun moslashtirish mumkin. Siz qidiruv shakllarini avtomatik to'ldirish, to'rni qayta tartiblash va o'lchamini o'zgartirish, ortga hisoblash taymerlarini o'rnatish funksiyalaridan foydalanishingiz mumkin. w3school da amaliy jQuery kursi

Javascript ramkalar

Ramkalarning har xil turlari mavjud, ammo siz o'zingiz uchun qulay bo'lganini tanlashingiz mumkin. Eng mashhurlari Angular, Backbone, Ember va React. Ular kod uchun tayyor tuzilmani ifodalaydi. Ular rivojlanishni tezlashtirishga yordam beradi. Va kutubxonalar bilan birgalikda ular veb-sayt yoki dasturni noldan ishlab chiqishni minimallashtirishi mumkin. 2017-yilning 5 ta eng mashhur JavaScript ramkalari va kutubxonalarini ko'rib chiqish

Git versiyasini boshqarish tizimi

Versiyalarni boshqarish tizimlari vaqt o'tishi bilan kodga kiritilgan o'zgarishlarni kuzatishi mumkin. Shuningdek, ular loyihaning oldingi versiyasiga qaytishga imkon beradi. Git eng ko'p ishlatiladigan versiyalarni boshqarish tizimidir. Git bilan qanday ishlashni bilish har bir dasturchi uchun muhim mahoratdir. Git rus tilida darslik

Qisqacha xulosalar

UI foydalanuvchi interfeysi, ya'ni "foydalanuvchi interfeysi" degan ma'noni anglatadi. Ya'ni, foydalanuvchi interfeysi dizayneri birinchi navbatda mahsulot foydalanuvchiga qanday taqdim etilishi uchun javobgardir. U tugmalar, piktogrammalarni ishlab chiqadi, shriftlarni tanlaydi va maketni tayyorlaydi. UX foydalanuvchi tajribasini anglatadi. Shunday qilib, UX dizayneri veb-sayt, ilova yoki boshqa narsaning dizaynini loyihalashtiradi, shunda foydalanuvchi qulay va nima ekanligini tushunadi va u minimal harakat bilan saytdan kerakli narsani olishi mumkin. Ko'pincha ikkala turdagi ish bir kishilik orkestr tomonidan amalga oshiriladi: UI/UX dizayneri. Front-end ishlab chiqaruvchisi dinamikani kiritish orqali dizaynerlarning ishini jonlantiradi: tugmalar bosila boshlaydi va rasm o'zgara boshlaydi. U dasturlash tillarini bilishi, ramkalar, preprotsessorlar va kutubxonalar bilan tajribali bo'lishi kerak.