UI чи UX: гід для тих, хто хоче стати дизайнером інтерфейсів

АвторЄвгенія Каташинська
16 Липня 2018
Теги:
База знань дизайн інструкція

Інтерфейси оточують нас всюди: телефони, автомобілі, вулиці та літаки, квиткові автомати і сайти – вони у всьому, на що людина може вплинути своїми діями. І, звісно, інтерфейс – король у діджиталі. Разом зі школою Projector ми розбираємося, що треба знати, читати і робити тим, хто вирішив зайнятися напрямками UI та UX.

Якщо інтерфейс – це взаємодія людини з неживим предметом, то користувацький інтерфейс – це взаємодія людини і комп’ютера: сайти, мобільні додатки, програми. І цю взаємодію має хтось проектувати. Цим займаються дизайнери інтерфейсів, яких ще називають UI/UX-дизайнерами. Вони працюють над принципами роботи системи, послідовністю дій, які може здійснити користувач, результатом, який він отримає на виході, зрозумілістю, красою і зручністю об’єкта в користуванні. Мета роботи дизайнера інтерфейсів – зробити взаємодію людини та програми приємною, логічною і дружньою. Це робота на перетині дизайну, інженерії, маркетингу і психології.

Зручність та красу інтерфейсів часто проектує одна й та сама людина, але інтерфейси стають все складнішими, тому професію ділять на дві. User Interface Designer (UI) – той, хто відповідає за красу та задоволення. User Experience Designer (UX) – той, хто відповідає за зручність та відповідність бізнес-задачам.

UI-дизайнер займається усім, що стосується оформлення інтерфейсу і створює зрозумілі, цілісні та гарні інтерфейси для користувача. Його ключові обов’язки: розробка стилю, створення макетів, безпосередній дизайн сторінок. Він працює з кольорами, іконками, типографією, навігацією, меню, кнопками, вікнами, анімацією, сповіщеннями. UI-фахівець створює дизайн, базуючись на даних, отриманих від UX-спеціаліста.

UX-дизайнер вивчає проблеми користувача, розбирається у його поведінці, досліджує досвід. UX-дизайнер повинен впевнитися, що продукт працює логічно та вирішує конкретні проблеми. Ключові обов’язки UX-профі: дослідження аудиторії та продукту, проектування користувацьких сценаріїв. UX-дизайнер займається «щастям» користувача: задоволенням і продуктивністю від роботи з інтерфейсом, загальним розумінням і легкістю вирішення проблем.

Ролі обох дизайнерів перетинаються, тому займатися лише UI неможливо без знань UX – і навпаки.

 

Дізнайтеся, якими є звичайні обов’язки дизайнерів, як проходить їхній типовий робочий день і які в них рутинні задачі. Якщо ви готові змиритися з мінусами професії і вас захоплюють плюси, переходьте до теорії, а в процесі підключайте вивчення інструментів.

Це класичні книги з акцентом на UX, але вони будуть корисні всім, хто займається інтерфейсами (і не лише дизайнерам):

«The Design of Everyday Things» Дональда Нормана. Книга, в якій вперше з’явився термін UX. У цій захопливій роботі Дон розповідає про принципи дизайну побутових речей, якими ми користуємося щодня: двері, чайники, плити, праски. А потім розповідає, як ці універсальні принципи використати у своїй роботі, розробляючи технологічні продукти.

«Don’t Make Me Think» Стіва Круга називають біблією основ UX. Книга, що має бути на поличці в кожного дизайнера, нагадує, на чому треба фокусуватися в роботі над сайтами.

«Web Form Design» Люка Врублевські. Практична книга з детальним розбором, як створювати форми. Варто читати, коли у вас вже буде базове знання інструментів, щоб одразу спробувати поради з книги в дії.

«About Face: The Essentials of Interaction Design» Алана Купера. Обов’язкова книга для всіх, хто так чи інакше пов’язаний з дизайном інтерфейсів. Вона пояснює, як зробити правильний інтерфейс, ретельно досліджуючи всі аспекти UI/UX.

 

Якщо є можливість, пройдіть базовий курс з веб-дизайну у вашому місті, якщо ні – є багато онлайн-ресурсів, які навчать основам.

Coursera пропонує спеціалізацію User Interface Design (англійською мовою) та курс «Дизайнер інтерфейсів. Введення у спеціальність» (російською). Також зверніть увагу на курси від Udemy, короткі курси на Edx, місячний курс TryDesignLab та курси на Skillshare.

Офлайн-навчання складне, але набагато ефективніше. Ви будете отримувати постійний фідбек, бачити власні помилки та знати, над чим працювати. Наприклад, в Києві можна пройти курси з дизайну інтерфейсів у школі Projector, в KAMA або MEAT Studies. Коли ви знатимете основи професії, зможете вибрати для себе вужчу спеціалізацію і розвиватися у ній.

 

Літери та слова – теж елементи інтерфейсу і фундамент, на якому тримається дизайн. Щоб інтерфейс, який ви створюєте, був зручним та зрозумілим, потрібно вміти грамотно працювати з типографікою. Важливо розуміти, як люди сприймають текст, які потреби є у користувачів і як вони змінюються в залежності від середовища.

Ось кілька корисних джерел для початку:

Ключові книги з типографіки для тих, хто лише починає:

«The Elements of Typographic Style» Роберта Брингхерста

«FontBook» Еріка Шпікермана

«Жива типографіка» Олександри Королькової

«Just My Type: A Book About Fonts» Саймона Гарфілда

 

А ще – грайте! Відеогра Type:Rider проведе через історію шрифтів та розповість про їхній розвиток з часом.

 

 

Для початку вивчати всю теорію не обов’язково. Головне – зрозуміти, як на практиці працюють кольори в дизайні інтерфейсів. У цьому вам допоможуть такі матеріали:

Колір в дизайні інтерфейсів. Практичні поради.

HSB-система кольору в дизайні інтерфейсів.

7 правил створення інтерфейсу. Частина І.

7 правил створення інтерфейсу. Частина ІІ.

 

UI-дизайнер співпрацює з розробниками, тому базове розуміння HTML-верстки, JavaScript та фреймворків буде корисним для ефективної роботи. Знайти курси та уроки можна на Envato Web Design Tuts або Treehouse.

 

Вже після прочитання кількох книг та паралельно з вивченням теорії можна починати братися за інструментарій.

Редактори, в яких працюють UI-дизайнери можуть бути різними, але найпопулярніші – Sketch, Figma, InVision, Adobe Photoshop, Adobe Illustrator.

Курсів та уроків з Photoshop і Illustrator насправді безліч. Ось тут можна знайти деякі з них: Design Tuts, Lynda, Skillshare.

Sketch – простий і зрозумілий інструмент, який спеціально створено для дизайну інтерфейсів. Безліч уроків є на самому сайті Sketchapp, на LearnSketch, Lynda, Treehouse, Udemy. Єдиний нюанс – інструмент працює лише з Mac OS.

Figma – більш універсальний інструмент, тому що працює в браузері та доступний на всіх платформах. Уроки є прямо на офіційному сайті.

Щоб побачити дизайн в дії, створюють прототипи сторінок. Найчастіше це задача UX-дизайнера, але UI-дизайнер теж повинен розуміти, як це працює. Для цього використовують InVision та MarvelApp.

InVision
MarvelApp
Readymag
Tilda
Wix

Також корисно пробувати конструювати сайти на Readymag, Tilda і Wix. Ці онлайн-інструменти найчастіше використовують для створення лендингів, сайтів-портфоліо, презентацій та інтернет-магазинів. Працюючи з шаблонами та простими інструментами, ви зможете непогано прокачати відчуття стилю, навички роботи з типографікою, блоками, сіткою та анімацією.

 

В процесі самостійного навчання починайте шукати роботу – з базовими знаннями можна отримати позицію стажера чи інтерна, практикуватися на реальних проектах, прокачувати теоретичні знання на практиці. Якщо гарно себе проявите на стажуванні, цілком реально отримати роботу.

В Україні можна слідкувати за відкриттям позицій стажера чи інтерна на Ain і Dou.

Не соромтеся писати напряму в компанії, в яких хотіли б працювати. Часто про стажування не пишуть, але така можливість є.

 

Надихайтеся проектами на Awwwards, Behance, Dribbble, Httpster, колекціями на UI Movement та Pttrns.

Читайте англійською найпопулярніше світове медіа з веб-розробки Smashing.Magazine, а українською – журнал Telegraf.design.

 

Awwwards
Behance
Dribbble
Httpster
UI Movement
Pttrns
Smashing.Magazine
Telegraf.design

Оля Шевченко, арт-директорка Vintage Web Production, кураторка курсу UI. Digital Communications Design

Професія дизайнера інтерфейсів цікава та захоплива. Її розвиток лише набирає обертів, і в ній завжди буде місце для спеціалістів, які піклуються про людей і хочуть зробити світ зручнішим. Я за те, щоб людина займалася професією, слухаючи своє серце і виходячи з того, чи справді вона цього хоче. Не вибирайте професію за принципом «зараз це модно» і «туди пішли всі мої друзі».

Крок 0 – дізнайтеся, хто такі UI-дизайнери, що входить в їх обов’язки, чим вони займаються. Крок 1 – візьміть і спробуйте щось намалювати. Не маючи ні знань, ні теоретичної основи, просто знайдіть якусь сторінку сайту і повністю скопіюйте її. Це важливий крок, бо він перевіряє, чи справді ви хочете цим займатися. Аналогічні кроки необхідні, якщо ви хочете бути економістом, викладачем чи тренером.

Далі – графічні навички. UI-дизайнеру не потрібно досконало вміти малювати, але знання інструментарію необхідні. Дивіться відеоуроки: як намалювати кнопку, додати якийсь ефект, зберегти, конвертувати. Вистачить максимум місяця, щоб це все вивчити до того рівня, коли ви зможете вже щось створити. Друга важлива навичка – допитливість розуму, щоб розбиратися в чомусь новому, не маючи поруч людини, у якої можна запитати. Щоб самостійно шукати та фільтрувати потрібну інформацію.

Ще потрібна база: основи композиції, кольорознавства, розуміння, що таке перший та другий герой, з чого складаються графічні форми. База – це те, без чого можна працювати, але потім, коли ви прокачаєтеся, відсутність бази буде кожного разу заважати робити свою роботу якісно та впевнено. Можна вивчити базу і вже за кілька місяців знайти роботу стажера, інтерна, помічника в агентстві чи студії, де ви зможете прокачатися на справжніх проектах.

Насправді для старту потрібно просто мати величезне бажання працювати у цьому напрямку. Без «вогню» в очах, без бажання нічого не вийде – це єдиний двигун, який потрібен. Все інше прийде.

Спочатку здається, що дизайнеру потрібно лише «малювати інтерфейси», але це не зовсім так. UI – це інструмент комунікації із зовнішнім світом через візуальне сприйняття. Тут потрібно дуже багато думати, поглиблено все дослідити, проаналізувати, розвивати емпатію, відчувати користувача, аналізувати ринок, врешті зрозуміти клієнта і його бажання, трансформувати це в графічну мову, щоб клієнт ставав щасливим. Саме це приносить мені найбільше задоволення.

 

Артем Цимбал, CEO в Artkai, куратор курсу «Веб-дизайн. Основи»

Займатися дизайном інтерфейсів варто людям, які люблять вирішувати задачі, робити світ кращим та зручнішим, у кого інженерний склад розуму і одночасно розвинута емпатія. Тому що інтерфейси – це більше про функцію, ніж про гарні картинки. Якщо хочеться творчості, краще йти в графічні дизайнери. Також ця робота не дуже підходить інтровертам – професія вимагає виходити «в поля» і працювати з людьми.

Мінуси професії бачу в тому, що у найближчі п’ять років технології недостатньо розвинуться і в роботі дизайнера інтерфейсів поки залишиться багато рутини. Але я впевнений, що в найближчому майбутньому процеси автоматизуються і рутинних задач поменшає. Дизайнери будуть більше займатися дослідженнями та тестуванням, ніж малюванням тисяч кнопок та сотень екранів.

Зараз стирається межа між розробниками і дизайнерами. З’являється все більше перспектив розвитку у професії – дизайнери сильніше впливають на бізнес та світ в цілому.

Найцiкавiше на сайтi

«Ничем я пока не горжусь»: как украинский дизайнер работает с Röyksopp и Adobe

Украинец Алексей Романовский долгие годы занимается моушн-дизайном. Его анимационная графика появлялась на заставках продуктов Adobe, в рекламе Tumblr и на концертах Röyksopp. Platfor.ma поговорила с одним из самых заметных мировых моушн-дизайнеров о том, как он несколько лет сидел без работы, почему с Майли Сайрус не сложилось и что делать молодым талантам, чтобы привлечь больших заказчиков.

– Расскажите немного о себе – где живете, как работаете, как пришли к дизайну?

– Сейчас я работаю просто по фрилансу, живу в Киеве. В дизайн пришел случайно. Вообще-то я геолог, окончил соответствующий вуз. С детства хорошо разбирался в компьютерах, первый у меня появился еще лет в 6-7, это был 90-й год. В юности много возился со всякими программами 3D-моделирования.

Однажды выпала возможность и я стал виджеить во всяких киевских клубах вроде Cinema, Most и других. Много концертов сделал, буквально сотни – и вроде бы все устраивало.

Со временем понял, что некоторые штуки я могу делать сам, например, ЗD нарисовать. Я начал заниматься этим абсолютно в свое удовольствие, вообще нигде ничего не учил – сам копался и пробовал. Просто приблизительно понимал, что эту задачу можно выполнить, гуглил и получал решение – ну, или в Help смотрел.

Потом начал работать более профессионально, перешел в компанию, которая занималась дизайном. Там я сильно вырос – правда, и работал без выходных месяцами, но мне все нравилось. Мой день выглядел так: работа до двенадцати ночи, до часу, потом дом и сон, а после подъем и снова работа с утра. И так все время. Зато я выучил абсолютно все, что можно было знать, научился всему, что можно, у ребят, которые там работали. И понял, что нужно двигаться дальше.

Я ушел в никуда, остался ни с чем, очень долго искал работу. Ничего не получалось, ведь я не хотел идти работать на какую-то сумму поменьше, оставаться в проигрыше, я хотел вырасти. В целом это, конечно, было глупо, потому что в итоге я просидел пару лет без работы. Просто чем-то занимался сам по себе.

Однажды я решил выложить на Behance пару своих работ, посмотреть, что там люди скажут. Перед этим у меня уже был профиль на Tumblr, которому я очень понравился – они меня три раза крутили по всему миру в рекламе Tumblr Radar. В общем, вот так я сидел, выкладывал что-то на Behance, особо не заморачиваясь. В какой-то момент мне начали писать люди, ставили больше лайков, работы стали заметнее – и однажды ко мне обратились из Adobe, чтобы предложить поучаствовать в проекте, в котором 48 дизайнеров по всему миру делали мозаику. Так я начал дружить с их арт-директором.

Еще через некоторое время они хотели сделать какой-то ролик и взяли что-то из моих работ. То есть, мне не нужно было даже ничего делать. За короткий срок мне удалось поработать со всей их командой, узнать их. Было забавно, они очень классные ребята с чувством юмора.

– Иногда кажется, что сотрудники таких крупных компаний позиционируют себя выше, чем их коллеги из более мелких.

– Вообще, бывает по-разному. Я проработал с огромным количеством компаний по всему миру. Например, было крупное рекламное агентство DDB New York. Они предложили мне сделать рекламную кампанию Reebok. К сожалению, я был очень некомпетентен, совершенно не знал, как с ними работать, совершил много ошибок. Мы посотрудничали, я все сделал, но никуда это дальше не пошло.

После этого была долгая пауза. Примерно три года назад мне написали одновременно два классных чувака. Одним из них был Эрик Арль, менеджер лейбла Deutsch Englische Freundschaft, – конторы, которая занимается отличными музыкантами, например, Moby, Fever Ray, М83 и Röyksopp. Вот с последними мне и предложили поработать. Röyksopp – очень особенные люди. Они как-то догадались, что я могу еще и виджеить, хотя я нигде это не афишировал. Röyksopp попросили меня сделать им контент и плюс поехать с ними повиджеить.

Практически одновременно мне написал еще один крутой чувак. Есть студия Production Club, которая работает над всякими перформансами, я с ними тогда уже сотрудничал. Они занимаются такими ребятами, как Skrillex и другими мировыми артистами. Делают им что угодно – вплоть до каких-то сумасшедших космических кораблей. У них условия шикарные – я когда называл цену, они сказали, что, мол, да ладно, давай в три раза больше сделаем.

И когда они написали мне одновременно с Röyksopp, то это, конечно, был непростой выбор. Но я все-таки предпочел Röyksopp.

Зніміть це негайно: книги, сайти та курси, з якими ви станете кращим фотографом

Традиційно 12 липня по всьому світу відзначають День фотографа – свято навіть затверджене Папою римським на честь святої Вероніки – покровительки фотографії. За іншою версією, на вибір святкування вплинув день народження засновника компанії Kodak – Джорджа Істмена. Як би там не було, Platfor.ma разом з Програмою студій для молодих художників PortArtStudio та групою компаній «Нові продукти» створили креативну підбірку ресурсів, щоб навчитися, набратись досвіду, віднайти власний стиль та подивитись на світ крізь призму об’єктива.

Світлана Пожарська «Фотомастер»

У цій книзі видатна представниця художньої фотографії ділиться міркуваннями про природу фотографічної майстерності, композиційні видіння, те, як народжується фотообраз, а також про те, що таке авторський стиль. Підходить як аматорам – мінімум технічної та наукової термінології, так і фанатам рідкісних світлин з архівів.

 

Dutch Design Week: как дизайн радует, спасает и сходит с ума

АвторНадія Шейкіна
27 Грудня 2017

Недавно в голландском Эйндховене прошла Dutch Design Week. На одном из главных дизайнерских событий года впервые был и украинский стенд – а также журналистка Надежда Шейкина. Для Platfor.ma она написала о том, как дизайн может быть сумасшедшим, удобным и даже одновременно бессмысленным и полезным – и почему это важно.

Лишь 17% пространства наших домов активно используется для жизни. Зачем тогда нужно все остальное? Почему бы не сделать квартиры пластичными и многофункциональными? А что если поставить кровать в библиотеке и разделить гостиную с соседями? Или так: кладем порцию еды в полый «кирпич» из двух половинок, складываем мангал и разводим огонь. Сколько «кирпичей» использовали – столько и порций еды готовим. Дизайн – это не только когда красиво, это еще и о том, как нам жить счастливо, когда ресурсов будет меньше, а людей больше.

В общем, если вы все еще думаете, что дизайн – это о диванах и красивых канделябрах, отправляйтесь на Dutch Design Week в конце октября. Неделя дизайна в Эйндховене не оставляет камня на камне от этих стереотипов. Дизайн, представленный на ней, философски осмысливает потребности человека, спасает мир от пластикового хаоса и учит детей быть изобретателями. А еще в этом году в Эйндховене впервые был представлен отдельный украинский проект.

Для голландского дизайна важен не сам факт переработки и повторного использования, а поиски форм и фактур, которые можно получить в итоге. Скажем, возьмем вторичный пластик в пупырышки, с разноцветными вкраплениями или текстильными волокнами внутри. Делаем прорезиненные носки – и это новая обувь!

Из безликих сервизов получаются изысканные люстры, а если обить синим дерматином европалету, то будет красивая уличная мебель. При этом важно то, что использование вторсырья не делает предмет дешевым или неполноценным.

В 90-е годы прошлого века в Эйндховене случился кризис – компания Philips, которая была крупнейшим предприятием города, перенесла производство в Азию. К счастью, вовремя подсуетились урбанисты, которые при поддержке местных властей перепрофилировали город и, по сути, спасли его судьбу. Сегодня на опустевших заводах и мастерских работают архитектурные бюро и дизайн-студии – им предоставили льготные условия аренды. А Эйндховенская академия дизайна, основанная в 1947 году, тем временем приобрела статус культового учебного заведения и стала инкубатором креативных мозгов.

Один из важных проектов Dutch Design Week – Graduation Show от выпускников этой самой академии. Студенческие проекты не стремятся соригинальничать во что бы то ни стало. Вместо этого они действительно погружаются в тему, продумывают мысль до конца и показывают, что из этого вышло. Интересный и слегка чуждый для нас принцип: неприменимый к жизни результат – тоже результат! Все дело в том, что из таких исследований складывается базис для будущих социальных трендов, на них тренируется эмпатия и пластичность мышления. Так что в любом случае все не зря.

Конфуцій, дзен і комунізм: автостопер про подорож до Китаю

Мандрівник, поет та громадський діяч Олександр Ткачинський за свої 24 роки відвідав 20 країн Європи, а також дістався автостопом уздовж Чорного моря через всю Євразію до Китаю. Для Platfor.ma він розповів про людей і небезпечні ситуації, які траплялися йому під час подорожі, а також про специфічну китайську кухню.

Олександр Ткачинський © BOROVETS, 2014

Я – киянин і все своє життя, окрім часу, коли подорожував, жив у столиці. Київ – це квінтесенція всього хорошого і поганого в Україні.

За спеціальністю я соціолог, навчався на факультеті соціології і права у КПІ. Але я не пішов на магістратуру, вважаючи, що немає гіршого рішення, ніж ще два роки життя віддати університетській парті в Україні. Прийшовши на державний екзамен з наплічником, я першим з аудиторії склав іспит, захистився і одразу ж поїхав в Одесу.

Після Одеси я зрозумів, що мені потрібна велика мандрівка, і восени я подорожував Європою. До речі, в мене є прикрий досвід поїздки з людиною, якої не знаєш. Побачивши на «Студкаучі» оголошення дівчини, що шукала напарника для подорожі у Францію, я погодився. Ми посварилися на десятий день під Ліоном і повністю розділились. Жодної романтики, ми просто не зійшлися характерами та інтересами. Після цього я вирішив, що буду подорожувати один.

Коли ти їдеш автостопом сам, більшу частину дороги спілкуєшся з водіями. А якщо б вас, стоперів, було двоє, тоді не було б такої атмосфери «дорожнього тет-а-тету».

Після Європи я почав планувати подорож до Китаю. В мене була своя причина їхати саме в цю країну. Я розмовляю китайською, яку опанував ще в школі – у Гімназії східних мов. Колись я взагалі думав, що пов’яжу своє життя з Китаєм. Ще у 15 років, навчаючись у 10-му класі, я представляв Україну на Всесвітній олімпіаді з китайської. Погодьтеся, дуже неправильно знати настільки поширену мову і не користуватися нею.