Дизайн інтерфейсу: як уникнути типових помилок

21 травня
Євген Григор'єв, UX/UI Lead, Анастасія Режепп, керівник дизайн-студії DataArt
Дизайн інтерфейсу: як уникнути типових помилок
UX/UI Lead Євген Григор'єв і керівник дизайн-студії DataArt Анастасія Режепп діляться порадами для початківців. Чи можна уникнути стандартних помилок, звіряючись з універсальним списком? Як дизайнеру тренуватись і за рахунок чого вириватись уперед? Де шукати зразки для наслідування і негативні приклади, як спілкуватися з більш досвідченими колегами?

ЄВГЕН ГРИГОР'ЄВ, UX/UI LEAD У DATAART:

У першу чергу, варто сказати, що не існує такого списку помилок, який дозволив би новачкам повністю уникнути фейлів у проектуванні будь-якої системи — будь то сайт, портал, стартап, мобільний додаток або щось зовсім інше.

Однак, завдяки досвіду, дослідженням і численним статтям колег з усього світу, я можу виділити ряд рекомендацій, за допомогою яких можна прискорити процес перетворення новачка на більш досвідченого дизайнера. Зупинюся на тих, які допомогли мені або з якими я зіткнувся. Хочу торкнутись фундаментальних принципів, а деталі — відступи, шрифти тощо — можна легко знайти в інтернеті чи базовому курсі.

Читай і вбирай інформацію, як губка

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

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

Не варто винаходити велосипед, якщо ти новачок

На мій погляд, тут важливо усвідомити наступне — причому не просто зрозуміти, а саме усвідомити, прийняти як даність і точку відправлення. В першу чергу зізнайся собі, що ти новий у цій справі й досвіду в тебе зовсім небагато. Краще використовувати на такому етапі перевірені рішення, які працюють. Зрозуміло, тобі дуже хочеться себе проявити, показати свою спроможність, висловити думку та зробити щось круте. Але врахуй декілька моментів:

  • Всі цього хочуть, і конкуренція є високою. Тут є лайфхак: хотіти — не означає робити, тож більшість якраз і не робить: не вивчає нові інструменти, не відточує навички, спирається лише на свій досвід. І ось це якраз твій шанс. Ти будеш попереду, якщо маленькими кроками вечорами будеш постійно вчитись і вдосконалюватись, консультуватись, створиш співтовариство. Не обов'язково високими темпами, головне регулярно. Рекомендую зайти на Dribbble/Behance/Awwwards і подивитись, як і що є у світі, як люди взагалі проектують, що користується попитом, які роботи й автори популярні. Переглянь уважно під тисячу картинок на перший раз, і ти вже матимеш уявлення, який стиль тобі близький, як роблять, а як — ні.
  • Подивись кілька сайтів про те, як робити не треба. Запам'ятай. Подивись на свій телефон і мобільні додатки в ньому, на мобільні версії сайтів. Запам'ятай.
  • Потім з усіх знань, що в тебе накопичилися, спробуй скласти перші десять робіт з хорошими патернами, просто скопіювавши їх. Так ти наб'єш руку та зрозумієш свої слабкості. А це вже крок до успіху. Все просто. Хороший той фахівець, який може вчасно сказати “я не можу”, ніж той, хто скаже “я можу все” і нічого не зробить. І замовник це розуміє. Використовуй готові рішення та спирайся на них у своїй роботі. Коли станеш досвідченішим, зможеш створювати свої рішення, які, цілком можливо, використовуватиме весь світ.

Вчися працювати з людьми, команда — це важливо

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

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

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

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

Я не знаю жодного дизайнера, який зробив би щось хороше, якби не любив свою роботу.

Не любиш робити те, що робиш, — зміни роботу

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

Тому якщо ти маєш проблеми з комунікацією та стресостійкістю, якщо тобі важко дається такий нервовий режим протягом усього часу роботи над проектом, подумай, чи варте воно того. Або вдосконалюй soft skills. Якщо ти все ж вирішив пробити цю стіну, йдемо далі.

Не бійся ставити запитання та просити про допомогу

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

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

Розширюй технічний бекграунд

Використовуй і вивчай інструменти та фреймворки, конструктори сайтів, готові бібліотеки компонентів і дизайн системи. Вони дають хорошу базу й основу для розуміння, як все влаштовано: по компонентах сайту, по тому, які є стилі, та й загалом кругозір розширюють. Tilda Education, наприклад, має приголомшливий розбір помилок дизайнерів для веб-сторінок, саме з точки зору відступів, типографіки тощо для базових компонентів їхнього продукту. Google має окрему бібліотеку компонентів і гайдлайни для дизайнерів з Material Design. Таких штук досить багато.

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

Пробуй щось нове, експериментуй

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

Хочеш бути трендсетером — навчися створювати щось нове та своїми руками. Будь то новий компонент або новий тренд у дизайні. Як правило, до того моменту ти вже будеш досвідченим дизайнером зі стажем.

АНАСТАСІЯ РЕЖЕПП, КЕРІВНИК ДИЗАЙН-СТУДІЇ DATAART:

Одна з головних помилок новачків у дизайні сайту, та й будь-якого інтерфейсу — невміння дивитись ширше конкретного завдання та бачити майбутнє. Почали з home page, придумали, як все вмістити в одну сторінку, а тут раптом з'явилися три нові розділи? Спорудили меню з п'яти пунктів у горизонталь, а клієнт подумав і вирішив, що пунктів повинно бути сім? Намалювали розділ “Контакти” з урахуванням одного офісу у Воронежі, а з'ясувалося, що офісів десяток по всьому світу?

Уникати такого допомагають три речі: довгі роки у професії, наполегливі тренування, інструменти проектування. Довгі роки важко отримати, будучи новачком, але влаштувати собі тренування цілком можливо. Ми мучимо практикантів запитаннями типу “Тут намальовано п'ять тегів, а що, якщо їх буде п'ятнадцять?”, “Куди потрапить користувач, якщо натисне на цю кнопку?” і т. ін. Ну і, звісно, перш ніж взагалі що-небудь малювати, завжди допомагає скласти майндмеп, карту сайту та інші блок-схеми, на яких буде видно картину цілком.