Мазмұны
Мен мансабымды бастаған кезде веб-дизайнер болдым. Мен төрт жыл бойы веб-дизайнда жұмыс істедім, шағын бизнес сайттарынан бастап, үлкен клиенттерге көштім. Мені графикалық дизайн емес, үлкен брендтер үшін жұмыс жасамайтынын білдім. Мені веб-беттің көрнекі дизайнынан гөрі парақтау үлгілері, адамдардың формалармен қарым-қатынасы және қабылданған өнімділік сияқты нәрселер көбірек қызықтырды.
Мен ғылыми-фантастикалық фильмдерді көргенде, интерфейстерге қарайтын едім. Мен видеоойындарды ойнағанда, мәзірлердің орналасуын қадағалайтынмын. Егер сізге осы белгілердің кез-келгені таныс болып көрінсе, сіз интерфейстің дизайнері бола аласыз.
Мен агенттік жұмысымды тастап, жеке компания құрдым. LinkedIn парақшасында мен мансаптағы жаңа мақсатымды қорытындылауға тырыстым: бағдарламалық жасақтаманы мүмкіндігінше жақсарту. Менің фрилансер болғаныма төрт жыл болды, және менің сапарым тоқтаған жоқ. Осы күндері мен UI дизайнерлік компаниясын басқаруға көмектесемін Моно. Жақында біз төртінші команда мүшесін қарсы алдық.
Бұл мақалада мен интерфейстің дизайнері болу қандай болатынын, оның ішінде жұмыс нақты нені білдіретінін, қайда жақсы оқу ресурстарын табуға болатындығын және өз қолөнеріңде қалай жақсара алатындығымды сипаттағым келеді.
UI дизайнері не істейді?
Менің ойымша, жалпы интерфейс дизайнерінің жұмысын төрт санатқа бөлуге болады. Сіз клиентпен қарым-қатынас жасайсыз, зерттейсіз, дизайн және прототип жасайсыз, әзірлеушілермен байланыс жасайсыз. Осы фазалардың әрқайсысын толығырақ қарастырайық.
Клиенттермен байланыс
Клиенттің қарым-қатынасы - бұл клиенттің проблемасын түсіну. Мақсат - сіздің клиентіңіздің ісін түсіну, сондықтан жобаның басталуы әдетте көп сөйлесуді білдіреді. Сіз бастаған кезде клиенттің домені туралы көп білмеуіңіз жақсы - дизайнерлік шешімдерді қарастырған кезде олардың бизнесіне жаңа көзқараспен қарай аласыз.
Интерфейстің жақсы дизайнері болу үшін сіз өз клиентіңіздің ісімен бірге ойлана білуіңіз керек. Мысалы, сіздің клиентіңіз авиацияда болуы мүмкін. Олар үшін жұмыс жасау сізді сол сала туралы білімді етеді. Сонымен, мұнда өзіңіздің бақытты болуыңызға кеңес - жұмыс істейтін салаларды таңдау болып табылады, осылайша сіз өзіңіз қызықтырмайтын немесе қызықтырмайтын нәрселердің маманы бола алмайсыз.
Жоба барысында байланыс үзілмейді. Дизайнер ретінде сіз өз жұмысыңызды үнемі ұсынатын боласыз. Біздің компанияда біз қашықтағы командамыз, сондықтан жеке кездесулер көп болмайды. Керісінше, біз бейнеконференциялар арқылы экранды бөлісуді қатты қолданамыз. Skype және Slack сияқты байланыс құралдары күн сайын қолданылады.
Синхронды және асинхронды байланыс әдістерін біріктіру пайдалы. Егер сізге көп ақпарат қажет болса, қоңырау өте жақсы болады, бірақ сіз сол уақытта болуыңыз керек. Біз Slack-ті «виртуалды су салқындатқыш» деп санаймыз және Basecamp-ті күрделі дизайн жобаларын басқару үшін қолданамыз. HTML және CSS-ті қолданып прототиптер жасағанда, біз кодты тікелей талқылау үшін GitHub Issues қолданамыз.
Зерттеу
Клиентпен қарым-қатынас жасаумен қатар, сіз көптеген зерттеулер жүргізесіз. Бұған далалық зерттеулер, клиентпен семинарлар, бәсекелестікті талдау немесе стратегияны анықтау кіруі мүмкін - негізінен, сіз проблеманы түсінуге көмектесетін кез келген нәрсе туралы.
Зерттеу - бұл сіздің дизайн таңдауыңызды хабарлайды. Бұл сіз бұрын оқыған мақала немесе Apple жаңа шығарған жаңа нәрсе. Неліктен дизайнерлік таңдау жасағаныңызды түсіндіретін уақыт келгенде, сіздің зерттеулеріңіз сізге қолдау көрсетеді.
Зерттеулер өте кең болуы мүмкін. Мен зерттеу мақсатында жаңа құрылғыларды жиі сынап көремін немесе оның интерфейсін зерттеу үшін жаңа веб-бағдарламаға тіркелемін.
Дизайн және прототип жасау
Дизайнер ретінде сіз өзіңіздің көп уақытыңызды дизайн және прототиптік жұмыстармен айналысуға жұмсайсыз. Интерфейсті жобалау жобасы кез-келген жолмен, эскиздерден егжей-тегжейлі жобалаудан, кодтауға дейін алға жылжи алады.
Сіз қолданатын әдіс көбіне жоба түріне байланысты болады. Сіз не жобалап жатырсыз? Бұл веб-сайт па, әлде оны қосымша деп атау керек пе? Ол отандық технологияны қолдана ма? Бұл қайта жобалау ма, жоқтан бастайсыз ба?
Біздің компанияда тұрақты үрдіс жоқ, бірақ жобалардың көпшілігі бірдей тәртіппен жүреді: олар эскиздер мен сым кадрларынан басталып, визуалды және өзара әрекеттесудің егжей-тегжейлі дизайнына өтіп, прототипімен аяқталады.
Дизайнерлер ретінде біз өзіміздің құралдар туралы ойлауға көп уақыт жұмсаймыз. Керемет құралдар маңызды болғанымен, олар ең маңыздысы емес. Adobe Creative Suite пен Sketch сияқты қосымшаларды сауатты қолдана білу сурет салу үшін қарындашты немесе сурет салу үшін қылқаламды қолдана білумен тең. Сізге кескіндеме жасау керек.
Бұл құралдарға деген сау қызығушылық жақсы нәрсе. Мен өнімді болуға көмектесетін жаңа құралдарды қолданғанды ұнатамын. Менің сүйікті векторларды өңдеу құралы - Illustrator, бірақ менің визуалды дизайн жұмысымның көпшілігі осы күндері Sketch-те жасалады. Топтың басқа мүшелері Affinity Designer сияқты жаңа құралдарға көшті.
Құралдар - бұл өте жеке таңдау. Біз оңай бірлесіп жұмыс жасай алсақ, әркім өзін өзі таңдай алады. Клиенттермен дизайн туралы сөйлесуді жеңілдету үшін біз InVision көмегімен прототиптер жасаймыз. Неғұрлым жетілдірілген прототиптеу үшін біз HTML және CSS-ті қолданамыз. Сізге қажет құрал онымен айналысқыңыз келетін жұмысқа байланысты.
Әзірлеуші байланысы
Пайдаланушы интерфейсі дизайнері жұмысының ұмытылатын бөлігі - бұл әзірлеушілермен байланыс. Бұл күндері сіз өзіңіздің дизайныңызды девтерге жіберіп, олардың дұрыс орындалғанына үміт арта алмайсыз. Ең жақсы дизайнерлердің міндеті дизайнды жасауда емес, оны жеткізуде маңызды екенін біледі - тек мақұлдауы керек мүдделі тараптарға ғана емес, оны жүзеге асыруға тиісті әзірлеушілерге де.
Дизайн туралы хабарлау әр түрлі формада болады: егжей-тегжейлі сипаттамалар, активтерді ұсыну, дизайнды бірге қарау. Әрбір нұсқада жеткізу мағынасы көбінесе жобаның жергілікті немесе веб-қосымшасына байланысты.
Дәстүрлі тәсіл - экрандық дизайнның қасында активтерді жеткізу. Экрандық дизайндар дизайнның қандай болатынын білу үшін пайдаланылуы мүмкін, ал активтер пайдалануға дайын PNG және SVG белгішелері, сондықтан әзірлеушілер графикалық редактормен жұмыс істемейді.
Біздің компанияда біз бұдан да көп өнімді жеткізуді қолдаймыз. Біз дизайндағы үйлесімділікті сақтауға көмектесетін компоненттер стилі бойынша нұсқаулықтарды қолданамыз. Веб-жобамен айналысқанда, біз HTML-мен CSS-ті егжей-тегжейлі құжатталған, іске асыруға дайын егжей-тегжейлі жеткіземіз. Бағдарламалық жасақтаманы әзірлеудің әр кезеңінде дизайнерлік көзге ие болу - мақсатқа жету үшін әлемдік деңгейдегі бағдарламалық жасақтаманы құрудың жалғыз жолы деп ойлаймын.
Веб және жергілікті қолданбалар
Платформаға арналған жергілікті бағдарламаны (мысалы, iOS немесе Android) жасағанда, сіз белгілі бір нұсқауларды ұстануға бейімсіз. Веб-сайтты жасағанда, нұсқаулық онша көп болмайды. Әдетте, сіздің клиентіңізде заттардың қалай көрінетіндігін анықтайтын өз брендіне арналған графикалық нұсқаулар жиынтығы болады.
Алайда, бұл нұсқаулар маркетингтік веб-сайттарға бейімделуге бейім, ал ондағы нәрсе әрдайым қолданушы интерфейсінің жақсы шешімдеріне әкелмейді. Қаріптер оқылу себептерімен емес, маркетингтік себептермен таңдалады. Түстер батыл және таңқаларлық болуы мүмкін, бұл жарнама науқанында жұмыс істейді, бірақ сіз күнделікті қолданатын қолданбада емес. Бұл нұсқаулықтарды түсіндіру керек.
Интернетте интерфейске қатысты бірнеше нұсқаулық бар. Сіз вебтің әр түрлі стильдегі балқытқыш екендігі туралы дау айтуыңыз мүмкін. Егер сіз веб-сайттан гөрі қосымшаға ұқсайтын нәрсе жасасаңыз, Bootstrap және ZURB Foundation сияқты кеңінен қолданылатын құрылымдар туралы білуіңіз керек. Рамка заттардың қалай көрінетіндігін анықтай бастайды, өйткені сіз дөңгелекті қайтадан ойлап тапқыңыз келмейді. Бұл, мүмкін, жақсы нәрсе.
Біздің компанияда біз Bootstrap қолданғанды ұнатамыз. Бұл батырмалар, деректер кестелері және модальдар сияқты жалпы интерфейс элементтері үшін әдепкі өлшемдерді ұсынады.
Веб-дизайнда сіз вебтің техникалық мүмкіндіктерімен шектелесіз. Бұрын веб-сайттағы дөңгелек бұрыштар сияқты қарапайым көрнекі гүлденуді енгізу қиын болар еді. Бұл күндер артта қалды - сіз қазір көлеңкелермен, өтпелермен, анимациялармен және тіпті 3D-мен интерфейстерді еркін сала аласыз.
Дизайнер ретінде процесс пен дизайнды браузерде бақылау өте шынайы. Мен интерфейстің көптеген дизайнерлерінің жергілікті қолданбаның интерфейсті бағдарламалауын қабылдағанын көрген жоқпын, бірақ веб-қосымшаның HTML және CSS-ті жасайтын дизайнер бұл жиі кездеседі. Егер сіз өзіңіздің дизайныңызды кодтай алсаңыз, сізде кодталмайтын құрдастарыңызда болады, ал мен үшін бұл вебтің қалай жұмыс істейтінін түсінудің жалғыз әдісі.
Веб-шектеулер
Жақында сіз білетін барлық керемет трюктер кез-келген шолғышта қолдау көрсетілмейтінін және бұл веб-дизайнның шындық екенін білесіз. Мүмкіндігінше жақсартылған мазмұнды жүктейтін, сонымен бірге мазмұнның қалай нашарлайтыны туралы ойланатын прогрессивті жақсарту сияқты белгілі қағидаларды ұстанған жөн.
Жақында «қыша кесу» танымал болды. ВВС-дің веб-командасы чемпиондыққа шақырады, бұл «жақсы» мен «нашар» браузерлерді ажыратып, «нашар» браузерлерге шектеулі тәжірибе ұсынады. Алайда, бұл шын мәнінде тек мазмұн сайттары үшін жұмыс істейді.
Қолданбаға ұқсас тәжірибелер туралы айтатын болсақ, көптеген адамдар дамуды жеңілдету үшін бірнеше жетекші браузерлерді ғана қолдайды. Өкінішке орай, бұл бізді мазмұнды қарау үшін белгілі бір браузер қажет болатын 1996 жылғы жағдайға қайтарады.
Дағдыларыңызды жетілдіру
Сонымен, сіз жылдам дамып келе жатқан веб-индустриядан қалай хабардар бола аласыз және біліктілік деңгейіңізді қалай көтересіз? Сіздің біліктілігіңізді арттырудың бірнеше түрлі әдістерін қарастырайық ...
Платформа туралы білім
Дизайнер арсеналының негізгі бөлігі платформалық білім болып табылады. Сіз әртүрлі операциялық жүйелер туралы және оларды қалай қолданып жатқанын білуіңіз керек. Дизайнерлер ретінде біз Mac-тарды қолданамыз, бірақ сол кезде адамдардың көпшілігі өз жұмысын аяқтау үшін Windows қораптарын қолданатындығын ұмытып кету қиын емес.
Егер сіз оны өзіңіз қолдансаңыз ғана сіз бір нәрсені шынымен түсінетіндігіңізді сеземін. Мен өзімнің Mac-ты жобалау үшін пайдаланғанды жөн көремін, бірақ басқа платформалардың эволюциясын зерттеуге көп уақыт жұмсаймын. Менің Mac-та виртуалды машиналар ретінде бірнеше Windows көшірмелері орнатылған. Мен интерфейстегі әртүрлі өзгерістерді тексеру үшін Microsoft-тың Insider бағдарламасын қолдана отырып, Windows 10-дің жаңа нұсқаларын тексерумен айналысып келемін.
Мен сондай-ақ оның жұмысын тексеру үшін үнемі жаңа жабдық сатып аламын. Мен платформаны тексеру үшін Apple Watch сатып алдым. Содан кейін мен оны саттым, өйткені бұл менің өміріме көп нәрсе қоспайтынын сездім.
Одан әрі вебті өзінің операциялық жүйесі ретінде қарастыруға болады. Әр апта сайын әр шолушы жеткізушісіне жаңа мүмкіндіктер қосылып, үнемі дамып отырады. Браузерлердің техникалық аспектілері туралы, әсіресе CSS және графикалық мүмкіндіктер туралы білу өте қажет. Сізге SVG және WebGL деген не және Web Animations API-ді қалай қолдануға болатындығын білуіңіз керек.
Кез-келген платформа уақыт өте келе дамиды және қолданушы интерфейсінің дизайнері ретінде жаңарып отыру сіздің міндетіңіз. Ақыр соңында, сіз қандай жобаны жасасаңыз да, ол жеке өмір сүрмейді, бірақ үлкен бағдарламалық жасақтама экожүйесінің бөлігі болып табылады.
Негіздерге қайта оралыңыз
Бүгін біз күресіп жатқан нәрсе 20 жыл бұрын күрескеннен онша айырмашылығы жоқ. Кітаптарда көптеген жақсы кеңестер бар. Джейсон Фрид пен Мэттью Линдерманның Интернеттегі қорғаныс дизайнын қолданып көріңіз және бастаушылар үшін мені ойландырмаңыз.
Егер сіз модальділік пен афкорданс сияқты ұғымдар туралы білмесеңіз, сізге оқып шығуыңыз керек. Сіз Фитц заңының не екенін түсіндіре білуіңіз керек. Жақындықтың гештальт заңы? Бұл UI дизайнындағы нан мен май.
Ойындар мен фильмдерден шабыт алыңыз
UI дизайнері ретінде мен өз жұмысымды орындау үшін басқа шабыт көздеріне сүйенемін. Мен ойыннан көп шабыт аламын. Кейбір ойындар өте күрделі және интерфейс дизайнерлері интерфейс проблемаларын бизнес жобаларда жұмыс жасайтын интерфейс дизайнерімен бірдей шешуге мәжбүр болды.
Ойындар трендтерді де білдіре алады. Колин Макрей Раллидің мәзірлерінде кездесетін минимализм маған iOS7 бағытын еске түсіреді. Қазіргі уақытта сәнді болып табылатын UI анимациялық дизайны бірнеше жыл бұрын ойындарда пайда болды. Скеоморфизмнен жалаң, функционалды интерфейстерге және «жалпақ дизайнға» көшу ойындарда да айқын болды. 2006 жылғы Oblivion пен 2011 жылғы Skyrim-ті салыстырыңыз. Екі ойын бірдей сериядағы RPG ойындары, бірақ айырмашылық керемет.
Marvel фильмдеріндегі футуристік интерфейстер мен үшін де Iron Man болды. Олар дәл қолдануға болатын мысалдар емес, бірақ мені тұтастай есептеу туралы көбірек ойлауға мәжбүр етеді. Біз экранның болашағын қалаймыз ба, әлде экранның жоғалып кеткенін қалаймыз ба? Бұл дизайнерлерге толы пабта қоюға болатын жақсы сұрақ шығар.
Сіз дизайнер ретінде еңбексүйгіштік, табандылық, құрдастарыңызбен сөйлесу және өте көп оқу арқылы өсесіз. Шамамен бір жыл бұрын мен Нью-Йорк Таймста 80 жастан асқан адамдар туралы өз шығармашылығын шыңдай беретін адамдар туралы шығарма оқыдым. Мен енді ғана бастағандай сезінемін. Сен ше?
