В ІТ-галузі досить багато напрямків, пов'язаних з дизайном. Найпоширеніші з них – дизайнери, приховані за абревіатурами UX та UI. Ну а дехто примудряється записати в дизайнери навіть розробників front-end. Спробуймо розібратися, хто такі дизайнери у світі ІТ, у чому різниця між UI та UX, і яке відношення до дизайну мають фронтендники.
Дизайнери
Розробка інтерфейсу додатків, сайтів або ігор є досить складним процесом і потребує застосування знань з різних галузей: інженерії, психології та дизайну. Дизайнери інтерфейсу користувача (по-англійськи — User Interface або UI) фокусуються на способі відображення функціональності сайту (пошук, вкладки, меню) і деталях взаємодії клієнта та інтерфейсу. Мета UI-дизайнера – естетично прийнятний сучасний дизайн продукту. UX розшифровується як User Experience, що в перекладі означає «користувацький досвід». UX-дизайнер більше зосереджений на зручності та розумінні інтерфейсу потенційним користувачем. Такий спеціаліст найчастіше проводить дослідження та опитування, які стануть основою для створення концепції дизайну, а також тестує концепції під час розробки та після неї. Зазвичай він зосереджений на структурі, змісті, навігації та тому, як користувач взаємодіє з цими елементами.
Він виробляє карти сайтів, прототипи, які є базовою структурою під час створення програмного забезпечення. Мета роботи UX-дизайнера - щоб користувач швидко і безболісно отримав від сайту те, навіщо він сюди приходить . Проте сьогодні дуже часто можна зустріти написання цих двох спеціалізацій через сліш. Тобто завдання обох напрямків виконує один фахівець. UX/UI дизайнер проектує взаємодію користувача з інтерфейсом, вирішує, що саме йому потрібно зробити та відповідає за те, як цей інтерфейс в результаті виглядатиме.
Що потрібно знати UX/UI-дизайнеру
Графічні редактори . Найпопулярніші на ринку інструменти – це Adobe Photoshop, Adobe Illustrator, а також Sketch, Figma. Виберіть зручний для себе редактор і спробуйте для початку намалювати скріншоти сайту або програми трохи їх модернізувавши.
Інструменти прототипування (Mockplus, Axure) . Інструмент для створення прототипів є сполучною ланкою між ідеєю та її реалізацією. Будь-яким інструментом при цьому ви будете користуватися. Можна спробувати кілька і визначитися з тим, який підійде саме вам за стилем та уподобаннями.
Користувальницька психологія. Вже на етапі розробки макета варто подумати про те, чи зручно вам чи комусь ще користуватися цим інтерфейсом. Уявіть себе дома клієнта, побудуйте міцний зв'язок з ним і будьте уважні до його потребам. Адже продукт буде успішним, якщо на нього є попит.
Також знадобляться знання теорії кольору . Дещо ми знаємо з дитинства, особливо ті, хто ходив до мистецької школи. Проте є певна специфіка, що стосується саме роботи дизайнерів. Початкові знання можна отримати із книг або статей в інтернеті.
Залежно від специфіки роботи може знадобитися розуміння HTML і CSS або (небагато) мов програмування (посилання на ресурси можна переглянути нижче, у розділі «Що має знати Front-end розробник»).
Розробник Front-end
Основним завданням фронтендника є розробка клієнтської частини інтерфейсу. Тобто такий фахівець «оживляє» те, що спроектували дизайнери. Він відповідає за роботу та експлуатацію інтерфейсу та менше – за візуальне наповнення. Front-end розробник часто повинен знайти хороше рішення для інтерфейсу користувача на стадії його розробки, тому часто взаємодіє з UX/UI дизайнером. Код, написаний front-end розробником, виконується у браузері користувача (як кажуть, "на стороні клієнта"). Також одним із найважливіших завдань є перевірка того, що сайт або веб-додаток виглядає однаково на всіх платформах та браузерах.
Що має знати Front-end розробник
Як правило, front-end стоїть на трьох китах: мова розмітки сторінки HTML, таблиці стилів CSS та мова програмування JavaScript. Крім того, фронтендщик повинен розуміти принципи роботи протоколу HTTP, серверів та браузерів, особливості відображення інтерфейсу на різних пристроях, які зараз знаходяться на ринку. Інструменти та методи створення веб-інтерфейсів постійно розвиваються та змінюються, тому розробник повинен за цим постійно стежити.
HTML та CSS (верстка)
Це верстка, та сама цегла, з якої будується сайт. Мова розмітки HTML диктує організацію сайту, вміст та всю взаємодію між ними. Він дозволяє позначити верхню частину сторінки, нижню, бічні блоки із вмістом, заголовки, відображення тексту та мультимедійних елементів. Таблиці стилів CSS використовуються для прикраси HTML-елементів. Вони визначають, як відображається кожен графічний елемент, який розміщується на сторінці. За допомогою найсвіжіших версій HTML5 та CSS3 можна розміщувати відео та аудіо компоненти на сторінку, створювати двовимірні зображення та анімацію, і навіть писати нескладні ігри. Не треба намагатися запам'ятати одразу всі теги та стилі. Корисно буде вивчити основи і відразу ж застосувати їх у дії. Дуже непоганий сайт, де можна вивчити основи HTML та CSS – W3School.
Також фронтендник повинен розбиратися в крос-браузерній та кросплатформовій розробці, адаптивній та чуйній верстці.
Bootstrap
Це фреймворк для HTML, CSS та JavaScript. Тобто певні шаблони, з яких, як із конструктора, можна збирати сайти набагато швидше, ніж без них. Але, зрозуміло, його потрібно заточувати під ваші потреби самостійно. Якщо знаєте англійську, рекомендуємо сайт getbootstrap і той самий w3schools .
JavaScript
Javascript – ядро front-end розробки. Це перша і найбільш поширена мова програмування інтерфейсів. Він здатний додати безліч можливостей на сайт. На базовому рівні ця мова дозволяє додавати інтерактивні елементи на сторінку. Його використовують для створення карт, які оновлюються в режимі реального часу, інтерактивних онлайн-ігор та фільмів. На старших курсах JavaRush ми вивчаємо трохи JavaScript. Також його можна вивчати на тому ж W3School або почитати про нього російською, на сайті javascript.ru .
jQuery
jQuery – це бібліотека Javascript, в якій містяться плагіни та розширення, здатні зробити розробку ще простіше і швидше. Замість того, щоб писати код із нуля, бібліотеки дозволяють додавати готові компоненти, які потім можна налаштувати під певний проект. Ви можете використовувати функції автозаповнення форм пошуку, переставлення та зміну розмірів сітки та налаштування таймерів зворотного відліку. Практичний курс з jQuery на w3school
Javascript-фреймворки
Існують різні типи фреймворків, але ви можете вибрати один із них, який буде зручний у використанні саме вам. Найвідоміші — Angular, Backbone, Ember та React. Є готовою структурою для коду. Вони допомагають прискорити розробку. А разом з бібліотеками здатні мінімізувати розробку сайту або програми з нуля. Огляд 5 найпопулярніших JavaScript фреймворків та бібліотек 2017
Система керування версіями Git
Системи контролю версій здатні відстежувати зміни, які вносять до коду з часом. Також дозволяють повернутись до попередньої версії проекту. Git - найширше використовується система управління версіями. Вміння працювати з Git є важливою навичкою для кожного розробника. Туторіал Git російською
Короткі висновки
UI розшифровується як User Interface, що у перекладі означає «інтерфейс користувача». Тобто Дизайнер UI відповідає в першу чергу за те, як продукт представлений користувачеві. Він розробляє кнопки, іконки, вибирає шрифти, готує макет. UX розшифровується як User Experience (користувацький досвід). Так що UX-дизайнерпроектує дизайн сайту, додатки - та чого завгодно - так, щоб користувачеві було зручно і зрозуміло, що до чого, і він міг отримати від сайту те, що йому потрібно з мінімальними зусиллями. Дуже часто обидва види робіт виконує одна людина-оркестр: UI/UX-дизайнер. Розробник Front-end пожвавлює роботу дизайнерів, вносячи до неї динаміку: кнопки починають натискатися, а картинка змінюватися. Він повинен знати мови програмування, приправлені фреймворками, препроцесорами та бібліотеками.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ