UI / UX дизайн – що це і як стати веб-дизайнером?

Зміст:

  1. Що значить UI і UX?
  2. Що таке UI дизайн
  3. Що таке UX дизайн
  4. Чи можна займатися одночасно UI і UX дизайном
  5. Як стати проектувальником інтерфейсів?
  6. З чого почати вивчення UI / UX
  7. Як створити портфоліо веб-дизайнера

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

UI і UX design – це два різних, але взаємодоповнюючих відгалуження в веб-дизайні. Деякі дизайнери спеціалізуються тільки на одному з них, деякі можуть працювати відразу в 2х напрямках. UI – це “user interface”, і дослівно з англійської перекладається як інтерфейс користувача. UX – це “user eXperience”, перекладається як досвід користувача. Дуже часто ці поняття плутають в міру того, що роботодавці і самі можуть не поділяти напрямки завдань, а тільки вимагають певний набір Скіл для конкретного проекту. При цьому дизайнери часто володіють навичками відразу двох напрямків, так як неможливо розробляти візуальну сторону сторінки, не розуміючи при цьому як з цим дизайном буде справлятися користувач. Давайте розберемо більш детально поняття UI / UX дизайну і з’ясуємо, в чому все таки їх відмінності.

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

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

Іншими словами, UI дизайнер відповідає за те, щоб все, що ми бачимо на сторінці, було зрозумілим, логічно розташованим по відношенню один до одного, красиво оформленими, щоб всі елементи відповідали єдиному стилю оформлення.

При роботі з UI дизайном, фахівець повинен стежити за тим, щоб:

інтерфейс був зрозумілим і лаконічним (уникати двозначності, не перевантажувати інтерфейс вспливашка і не розпорошувати увагу користувача на велику кількість елементів);
елементи були впізнавані відразу і легко розрізнялися навіть при першому відвідуванні;
користувач розумів, що відбувається на екрані і за що відповідає кожна кнопка або іконка;
щоб на всіх сторінках і розділах були використані однакові елементи веб-інтерфейсу;
щоб користувачі витрачали мінімум часу на необхідні йому дії;
щоб були продумані шляхи повернення, якщо у користувача щось піде не так;
ну і звичайно, щоб інтерфейс був естетично-привабливим і викликав позитивні емоції від використання.
Що таке UX дизайн?
UX дизайн – це більш комплексний підхід до взаємодії користувача з візуальною складовою, причому не тільки на сторінці веб-сайту, але і на всьому сайті, в додатку або програмі. UX дизайнери називаються “дизайнерами користувацького досвіду”, тобто вони продумують логіку використання користувачем, аналізують її, тестують, і вирішують як зробити використання продукту зручнішим і привабливішим.

В UX входить:

інформаційна архітектура сторінки,
проектування взаємодії користувача і всіх активних елементів на сторінці,
безпосередньо варфрейми і скетчі.
Часто дизайнери вважають, що UX стосується тільки “пересування” користувача на сайті, їх дій всередині програми. Але на практиці справа не обмежується тільки взаємодією, адже візуальна складова в дизайні грає ключову роль. У той же час, якщо користувач здійснив дію на сайті, наприклад відправив заявку на покупку або бронювання, і не отримав відповідної реакції (наприклад спливаючого вікна з підтвердженням), або зіткнувся з проблемами і в результаті не зробив фінальне дію, то це питання погано продуманого UX.

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

Чи можна займатися одночасно UI і UX дизайном?
Якщо замовник надсилає техзавдання, в якому просить веб-дизайнера продумати дизайн для великого і довгострокового в перспективі сайту, він розраховує отримати не лише гарну картинку, а й повноцінне планування всіх елементів і їх взаємодію. В такому випадку дизайнер займається і UI, і UX дизайном.

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

У більшості випадків, веб-дизайнери вивчають і розуміють обидва підходи, але на практиці часто йде перевага в одну зі сторін. Чим більше дизайнер займається або тільки UI, або тільки UX дизайном, тим сильніше відточує свої скіли в одному напрямку. З цього отримуючи завдання в незвичному йому напрямку, може знадобитися більше часу для його виконання. Але в цілому, можливо як і поєднувати роботу по обох напрямках, так і займатися тільки якимось одним.

Як стати проектувальником інтерфейсів?
В першу чергу, потрібно визначитися, що вам ближче – UI (складання візуального оформлення) або UX (продумування логіки взаємодії користувача і інтерфейсу). Також, слід розуміти, що дизайн – це не той випадок, коли можна сказати “я художник, я так бачу”. Потрібно освоїти технічну сторону, щоб знати, що буде зручно користувачеві, що може зверстати верстальник, чи зможе це втілити в життя програміст, як це оформити, і тільки потім приступати до роботи.

З чого почати вивчення UI / UX?
Багато дизайнери-початківці, або ті, хто тільки мріє потрапити в дизайн, вважають, що знань фотошопу буде досить, як мінімум на початковому етапі, але ця думка помилкова. Освоїти потрібно буде кілька програм, і основні (базові) це:

Adobe Photoshop;
Adobe Illustrator;
Adobe XD;
Adobe Acrobat;
Adobe After Effects;
Figma;
Sketch;
Axure;
Invision App;
RedPen тощо.

Не обов’язково вивчати всі ці програми, в залежності від проекту та напрямки, вам можуть знадобитися тільки кілька з них. Також, можуть використовуватися і інші, всіх їх перерахувати неможливо. Такі як Photoshop, Figma, Sketch і програми з серії Adobe – найбільш затребувані. Для взаємодії з девелоперами бажано вивчити основи HTML і CSS. А ще слід розуміти mobile first принцип, основи адаптивності сайтів і Респонс інтерфейсу, використання векторної графіки.

Також дуже корисним буде почитати тематичну літературу. Наприклад, настільною книгою веб-дизайнерів вважається “Не змушуйте мене думати” Стіва Круга. Вона несе головний посил – ви не повинні змушувати користувача думати про те, що йому потрібно зробити на сторінці, сайті або в додатку. Далі, вивчіть гайдлайни гугла. Вони написані вони на англійській мові, але цілком можливо знайти переклад. І звичайно ж, шукайте актуальні статті по темі, читайте тематичні форуми та обговорення, збирайте Лайфхак.

Зараз можна знайти багато інформації про програми, принципах дизайну, теорії кольору та ін. У вільному доступі. Цей обсяг можливо освоїти самостійно, але це займе досить багато часу. До того ж, в цьому величезного потоку інформації новачкові буде складно фільтрувати потрібну і створювати логічний зв’язок між усіма цими знаннями. Звичайно, можна знайти багато дизайнерів-самоучок, але у роботодавців часто виникають сумніви з приводу рівня кваліфікації таких веб-дизайнерів. Тому багато хто з них продовжують працювати у вільному плаванні на фрілансі, стрибаючи від одного замовника до іншого.

Найбільш оптимальним і максимально продуктивним рішенням буде пройти повний курс веб дизайну і відразу отримати структуровані і систематизовані знання. Досвідчені ментори навчать як використовувати той же фотошоп технічно правильно саме в напрямку веб-дизайну, і покажуть багато Лайфхак, які складно знайти у вільному доступі. Вони також вкажуть на помилки і порадять поліпшення, тим самим прискорять процес входження в веб-дизайн.

Як створити портфоліо веб-дизайнера
Перш ніж приступити до створення портфоліо потрібно багато багато практикуватися, щоб почати відчувати себе досить вільно в роботі. Найпростішим радою буде повторювати за професіоналами і відточувати навички, але ці “копірки” не годяться для портфоліо, так як це буде вважатися просто крадіжкою. На цьому етапі ви тренуєтеся й прикидається яким ви хочете зробити ваше особисте портфоліо. Знайдіть красиві сайти або вільні Лендінзі і повторюйте за макетом, піксель в піксель, кожну обведення, відступи, шрифт, і т.д – це розвине почуття міри і дасть розуміння стилю. Є, наприклад, окремі платформи-портфоліо для веб-дизайнерів, такі як Behance, Dribbble і Awwwards, де ви можете черпати натхнення.

Після цього можна починати малювати щось своє. Наприклад, знайти сайт з невдалим дизайном і придумати як його поліпшити. Або придумати свій продукт і створити сторінку з нуля виходячи з вашого бачення. Коли з’явиться більше впевненості і знань, можна починати реєструватися на сайтах для фрілансерів, залити портфоліо своїх (!) Робіт і намагатися починати брати замовлення. Починайте з невеликих замовлень (логотипи, іконки, невеликі Лендінзі, додатки і т.д) і поступово нарощуйте портфоліо. Можна також взяти цікавий проект безкоштовно, для портфоліо. Не беріться відразу за великі і дорогі проекти, так як ви можете втратити багато часу і не виправдати очікування замовника. Коли ви зможете похвалитися 5-6 хорошими проектами, їх вже можна буде оформляти в повноцінне портфоліо, на тому ж Behance або Dribbble.

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

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

Веб-дизайн – шалено цікавий напрямок для тих, хто любить вносити творчість в свою роботу. Читайте, вивчайте, пробуйте і у вас все вийде!

Всі статті
Контакти
/