IT индустриясында дизайнмен байланысты көптеген салалар бар. Олардың ең көп тарағандары UX және UI аббревиатураларының артында жасырылған дизайнерлер. Кейбір адамдар тіпті дизайнерлер ретінде алдыңғы қатарлы әзірлеушілерді қоса алады. IT әлемінде дизайнерлер кім екенін, UI мен UX арасындағы айырмашылық неде және фронт-end инженерлері қандай қатынаста жобалау керек екенін анықтауға тырысайық.
Дизайнерлер
Қолданбалардың, веб-сайттардың немесе ойындардың интерфейсін әзірлеу өте күрделі процесс және әртүрлі салалардағы білімді қолдануды талап етеді: инженерия, психология және дизайн. Пайдаланушы интерфейсінің дизайнерлері (ағылшын тілінде - User Interface немесе UI) сайттың функционалдық мүмкіндіктерін көрсету тәсіліне (іздеу, қойындылар, мәзірлер) және клиент пен интерфейс арасындағы өзара әрекеттесу мәліметтеріне назар аударады. UI дизайнерінің мақсаты - эстетикалық тұрғыдан қолайлы заманауи өнім дизайны . UX «Пайдаланушы тәжірибесі» дегенді білдіреді, бұл «пайдаланушы тәжірибесі» дегенді білдіреді. UX дизайнері әлеуетті пайдаланушы интерфейстің ыңғайлылығы мен түсінуіне көбірек назар аударады. Мұндай маман көбінесе дизайн тұжырымдамасын құруға негіз болатын зерттеулер мен сауалнамалар жүргізеді, сонымен қатар әзірлеу кезінде және одан кейін тұжырымдамаларды сынайды. Ол әдетте құрылымға, мазмұнға, навигацияға және пайдаланушының осы элементтермен әрекеттесетініне назар аударады.
Ол бағдарламалық жасақтаманы жасау кезінде негізгі құрылым болып табылатын сайт карталарын, прототиптерін шығарады. UX дизайнерінің жұмысының мақсаты - пайдаланушы сайттан мұнда не үшін келгенін тез және ауыртпалықсыз алу . Дегенмен, бүгінде бұл екі мамандықтың қиғаш сызықпен жазылғанын жиі кездестіруге болады. Яғни, екі бағыттың тапсырмасын бір маман атқарады. UX/UI дизайнері пайдаланушының интерфейспен өзара әрекеттесуін жобалайды, ол нақты не істеу керектігін шешеді және нәтижесінде бұл интерфейстің қалай көрінетініне жауап береді.
UX/UI дизайнері нені білуі керек
Графикалық редактор . Нарықтағы ең танымал құралдар Adobe Photoshop, Adobe Illustrator, сонымен қатар Sketch, Figma болып табылады. Сізге ыңғайлы редакторды таңдап, алдымен веб-сайттың немесе қолданбаның скриншоттарын салып көріңіз, оларды аздап модернизациялаңыз.
Прототиптеу құралдары (Mockplus, Axure) . Прототип жасау құралы – идея мен оны жүзеге асыру арасындағы байланыстырушы. Қандай құралды қолданатыныңыз маңызды емес. Сіз бірнеше нұсқаны сынап көре аласыз және сіздің стиліңіз бен қалауларыңызға сәйкес келетінін таңдай аласыз.
Пайдаланушы психологиясы. Дизайн кезеңінде сіз бұл интерфейсті пайдалану сізге немесе басқа біреуге ыңғайлы болатынын ойлануыңыз керек. Өзіңізді клиенттің орнына қойып, онымен берік байланыс орнатыңыз және оның қажеттіліктеріне мұқият болыңыз. Өйткені, тауарға сұраныс болса табысты болады.
Түс теориясын білу де қажет болады . Кейбір нәрселерді бала кезімізден білеміз, әсіресе өнер мектебіне барғандар. Дегенмен, дизайнерлердің жұмысына қатысты белгілі бір ерекшеліктер бар. Негізгі білімді кітаптардан немесе Интернеттегі мақалалардан алуға болады.
Жұмыстың ерекшеліктеріне байланысты сізге HTML және CSS немесе (кейбір) бағдарламалау тілдерін түсіну қажет болуы мүмкін (ресурстарға сілтемелерді төменде, «Фронттік әзірлеуші не білуі керек» бөлімінде табуға болады).
Front-end әзірлеушісі
Front-end әзірлеушінің негізгі міндеті интерфейстің клиенттік бөлігін әзірлеу болып табылады. Яғни, мұндай маман дизайнерлер жасаған нәрсені «жандандырады». Ол интерфейстің жұмысы мен жұмысына жауапты, ал көрнекі мазмұн үшін аз. Функционалды әзірлеуші көбінесе оны әзірлеу кезеңінде пайдаланушы интерфейсі үшін жақсы шешім табуы керек, сондықтан ол жиі UX/UI дизайнерімен ынтымақтасады. Функционалды әзірлеуші жазған code пайдаланушының шолғышында (олар айтқандай, «клиент жағында») жұмыс істейді. Сондай-ақ, ең маңызды міндеттердің бірі сайттың немесе веб-қосымшаның барлық платформалар мен браузерлерде бірдей көрінуін қамтамасыз ету болып табылады.
Front-end әзірлеушісі нені білуі керек
Әдетте, интерфейс үш тірекке негізделген: HTML бетін белгілеу тілі, CSS стиль кестелері және JavaScript бағдарламалау тілі. Сонымен қатар, алдыңғы қатарлы әзірлеуші HTTP протоколының, serverлер мен браузерлердің жұмыс істеу принциптерін және қазіргі уақытта нарықта бар әртүрлі құрылғыларда интерфейсті көрсету мүмкіндіктерін түсінуі керек. Веб-интерфейстерді құрудың құралдары мен әдістері үнемі дамып, өзгеріп отырады, сондықтан әзірлеуші оны үнемі қадағалап отыруы керек.
HTML және CSS (орналасу)
Бұл макет, сайт салынған кірпіштің өзі. HTML белгілеу тілі сайттың ұйымдастырылуын, мазмұнын және олардың арасындағы барлық әрекеттесуді белгілейді. Ол беттің жоғарғы бөлігін, төменгі жағын, мазмұны, тақырыптары, мәтіндік және мультимедиялық элементтерді көрсетуі бар бүйірлік блоктарды белгілеуге мүмкіндік береді. CSS стиль кестелері HTML элементтерін безендіру үшін қолданылады. Олар бетте орналасқан әрбір графикалық элементтің қалай көрсетілетінін дәл анықтайды. HTML5 және CSS3 соңғы нұсқаларын пайдалана отырып, бетке бейне және аудио құрамдас бөліктерді орналастыруға, 2D кескіндер мен анимацияларды жасауға, тіпті қарапайым ойындарды жазуға болады. Барлық тегтер мен стильдерді бірден есте сақтауға тырысудың қажеті жоқ. Негіздерді үйреніп, оларды бірден іске қосу пайдалы болады. HTML және CSS негіздерін үйренуге болатын өте жақсы сайт - W3School. Бірақ егер сізде кем дегенде ағылшын тілін негізгі біліміңіз болса ғана.
Сондай-ақ, фронтальды әзірлеуші кросс-браузерді және кросс-платформаны әзірлеуді, бейімделу және жауап беруді түсінуі керек.
Bootstrap
Бұл HTML, CSS және JavaScript үшін негіз. Яғни, конструктор сияқты сайттарды оларсыз қарағанда әлдеқайда жылдам жинауға болатын белгілі үлгілер. Бірақ, әрине, оны өз қажеттіліктеріңізге сәйкес келтіруіңіз керек. Ағылшын тілін білсеңіз, біз getbootstrap веб-сайтын және сол w3schools ұсынамыз .
JavaScript
Javascript - бұл фронтальды әзірлеудің өзегі. Бұл бірінші және кең таралған интерфейстік бағдарламалау тілі. Ол сайтқа көптеген мүмкіндіктерді қоса алады. Негізгі деңгейде бұл тіл бетке интерактивті элементтерді қосуға мүмкіндік береді. Ол нақты уақытта жаңартылатын карталарды, интерактивті онлайн ойындар мен фильмдерді жасау үшін қолданылады. Біздің жоғары сыныптағы JavaRush курстарында біз аздап JavaScript үйренеміз. Сіз оны сол W3School -да оқи аласыз немесе ол туралы javascript.ru веб-сайтында орыс тілінде оқи аласыз .
jQuery
jQuery — Javascript кітапханасы, оның құрамында плагиндер мен кеңейтімдер бар, олар әзірлеуді одан да жеңіл әрі жылдам етеді. Кодты нөлден жазудың орнына, кітапханалар дайын құрамдастарды қосуға мүмкіндік береді, содан кейін оларды белгілі бір жоба үшін теңшеуге болады. Іздеу пішіндерін автоматты түрде толтыру, торды қайта реттеу және өлшемін өзгерту және кері санақ таймерлерін орнату функцияларын пайдалануға болады. w3school-те практикалық jQuery курсы
Javascript фреймворктері
Рамкалардың әртүрлі түрлері бар, бірақ сіз өзіңізге ыңғайлысын таңдай аласыз. Ең танымалдары - бұрыштық, магистральдық, эмбер және реакция. Олар code үшін дайын құрылымды білдіреді. Олар дамуды тездетуге көмектеседі. Және кітапханалармен бірге олар веб-сайттың немесе қосымшаның дамуын нөлден азайта алады. 2017 жылдың ең танымал 5 JavaScript фреймворктары мен кітапханаларына шолу
Git нұсқасын басқару жүйесі
Нұсқаларды басқару жүйелері уақыт бойынша codeқа енгізілген өзгерістерді бақылай алады. Олар сонымен қатар жобаның алдыңғы нұсқасына оралуға мүмкіндік береді. Git - ең көп қолданылатын нұсқаларды басқару жүйесі. Git-пен қалай жұмыс істеу керектігін білу әрбір әзірлеуші үшін маңызды дағды болып табылады. Орыс тілінде Git оқулығы
Қысқаша қорытындылар
UI пайдаланушы интерфейсі дегенді білдіреді, бұл «пайдаланушы интерфейсі» дегенді білдіреді. Яғни, UI дизайнері ең алдымен өнімнің пайдаланушыға қалай ұсынылатынына жауапты. Ол түймелерді, белгішелерді әзірлейді, қаріптерді таңдайды және макетін дайындайды. UX пайдаланушы тәжірибесі дегенді білдіреді. Сонымен, UX дизайнері веб-сайттың, қолданбаның немесе кез келген нәрсенің дизайнын пайдаланушыға ыңғайлы және не екенін түсінуі үшін жобалайды және ол сайттан өзіне қажет нәрсені аз күш жұмсай алады. Көбінесе жұмыстың екі түрін де бір адамдық оркестр орындайды: UI/UX дизайнері. Front-end әзірлеушісі оған динамика енгізу арқылы дизайнерлердің жұмысын жандандырады: түймелер басыла бастайды және сурет өзгере бастайды. Ол фреймворктармен, препроцессорлармен және кітапханалармен тәжірибелі бағдарламалау тілдерін білуі керек.
GO TO FULL VERSION