Дизайнери часто постають перед проблемою браку натхнення. Можна чекати на творчі пориви й не дочекатись. Ще один спосіб – шукати рішення та ідеї серед інших дизайнів, тобто референси.
Як правильно працювати із референсами й створювати унікальний дизайн, ділиться Юлія Федотова, Lead UX/UI Designer в ІТ-команді NIX.
Референси – це реалізовані проєкти, із яких інший автор запозичує ідеї. Це можуть бути ілюстрації, сайти, книги, фільми тощо.
Наприклад, ви розробляєте дизайн мобільного застосунку для домашніх тренувань. Референси шукайте не лише серед подібних продуктів. Для дизайну можна орієнтуватися на колірну палітру новорічної листівки, анімацію – з дитячого відеоролику, шрифт – із порталу про античну літературу, патерн навігації взяти з онлайн-магазину кімнатних рослин тощо.
У виборі референсів немає жодних обмежень ані за темами, ані за різновидами продуктів.
Як на основі «чужого» зробити «своє»
Чим більше референсів оберете для власного дизайну, тим унікальнішим він буде. Ви наслідуєте елементи чужих робіт: пошукове поле, повзунки, типи іконок, кнопку виходу з акаунту, сторінку ліцензії. Якщо із двох-трьох ресурсів усе скопіювати, то плагіат рано чи пізно помітять.
А якщо спеціально не шукати референси? Це не означає, що ваша робота буде цілком унікальною. Усе нове – це добре забуте старе.
Проаналізувавши наявні дизайни, в них можна знайти схожі елементи. Це нормально. Щоб виділити ваш проєкт, не потрібно створювати чудернацькі форми кнопок чи розташовувати меню замість хедеру у футері сайту. Замість очікуваної wow-реакції, отримаєте непорозуміння від користувачів*. Ваш дизайн має вирішувати проблеми, а не створювати нові.
* Для wow-ефекту допускаються нестандартні рішення, щоб виділитися й запамʼятатися. Щоб порушувати правила, треба їх добре знати. Тоді ви свідомо йдете проти правил. Для більш утилітарних продуктів краще користуватися знайомими користувачеві патернами.
З чого почати пошук референсів
Головне правило створення дизайну – every element should make sense. Зрозумійте, яку проблему користувача вирішуєте, і шукайте відповідне візуальне рішення. Наприклад, на сайті потрібна кнопка «Замовити». Сенс такої кнопки – спонукати до покупки товару чи скористатися послугою.
Колір, форма і текст елементу мають запевнити юзера, що його дії на сайті приведуть до бажаної цілі. Тобто кнопка повинна бути інтуїтивно зрозумілою, привертати увагу та легко розпізнаватись. Інакше потенційний клієнт покине сайт.
Або інша задача: зробити таблицю з великим вмістом. Пошукайте референси, як інші впорались із цим, оцініть, чи дійсно вдало. Ви можете натрапити на чужі помилки, але вбережете власний дизайн від них. Проаналізуйте, як «розвантажити» дизайн, оберіть найбільш вдалий варіант відповідно до вимог проєкту.
За який би елемент дизайну ви не взялися (меню навігації, форма зворотного зв’язку, інтерактивні переходи) все має створюватися для чогось. Як-от для полегшення сприйняття інформації, покращення обслуговування клієнтів, швидкого пошуку тощо. Аргумент «Тому що так красиво» не є достатнім.
Ідеї для пошуку референсів
Best practices
В інтернеті є багато добірок, де круто реалізоване те чи інше рішення. Ви швидко знайдете готові варіанти та зрозумієте вектор для подальшого пошуку.
Наприклад, потрібно зробити сайт інклюзивним для людей з інвалідністю. Так і загугліть задачу. У пошуковому рядку пишіть ключові слова на кшталт best practices of web accessibility або examples of inclusive UI/UX. Англійська – мова міжнародного бізнесу, тому такий пошук надає доступ до більшої кількості ресурсів, ідей.
Подивіться, як реалізована певна функція у продуктах Google, Apple, Microsoft. Лідери ІТ-галузі задають тренди та використовують найновіші практики. Навіть якщо не знайдете у них потрібний референс, то хоча б прокачаєте надивленість. А це теж плюс у роботі дизайнера.
Ресурси для дизайнерів
Нижче наведений список ресурсів, які дають змогу потренувати надивленість, розвивати фахове бачення, знаходити натхнення та конкретні рішення.
- Behance. Одна з найвідоміших платформ, де креативники викладають свої проєкти. Тут можна обмінюватись відгуками та знаходити референси на будь-яку тематику.
- Pinterest. Онлайн-сервіс з останніми трендами у світі дизайну. Дозволяє створювати власні дошки з натхненням і ділитися своїми ідеями («пінами»).
- Awwwards. Тут змагаються дизайнери та web-розробники з усього світу. Професійне журі визначає переможців у таких номінаціях: «Сайт дня», «Сайт місяця», «Сайт року». На порталі зібрано багато цікавих робіт. Є розділи з інтерв’ю від впливових дизайнерів, а також статті з вебдизайну.
- Mobbin. Колекція застосунків, що відображає найкращі рішення в mobile-дизайні. На платформі зібрані скріншоти, які показують user journey map різних програм. Є платна версія з розширеним доступом.
- Siiimple. Ресурс для тих, хто хоче навчитися створювати мінімалістичний дизайн. Ця добірка прикладів вебдизайну для поціновувачів простоти постійно оновлюються.
- Typewolf. Онлайн-ресурс спеціалізується на типографіці. Тут зібрані сайти різноманітної тематики. За фільтрами можна швидко знайти потрібний референс.
- Landbook. На платформі зібрані вдалі приклади дизайну елементів web-сайту. Галерея постійно оновлюється. Є можливість купити готовий шаблон та адаптувати його під свої потреби.
- Muzli. Тут ви зможете слідкувати за трендами в дизайні. Знайдете ілюстрації, логотипи, приклади web-сайтів та мобільних застосунків тощо.
- Refero. Колекція елементів інтерфейсу та UX-шаблонів, щоб покращити свої дизайнерські навички.
- App Motion. Підходить поціновувачам мікроанімації та анімаційного дизайну.
- AppShots. Бібліотека із шаблонами для iOS, Android і web-дизайну. За фільтрами можна знайти потрібну ідею.
Щойно знайшли потрібні референси, погодьте їх із розробниками. Не всі елементи можна технічно реалізувати в межах лімітів: часових, фінансових, технічних.
Так ви ще до створення дизайну розпізнаєте ймовірні труднощі, які можуть виникнути при реалізації дизайнерських елементів у коді.
Для успішної взаємодії між командами розробників та дизайнерів потрібні:
- Регулярна комунікація. Обговорюйте референси, щоб уникнути непорозумінь.
- Детальна специфікація. Тобто набір вказівок для відтворення дизайнерських елементів. На його основі розробники оцінюють можливості для реалізації.
- Готовність до змін. Навіть у тісній зв’язці з розробниками ви не убезпечите себе від правок, але мінімізуєте їх.
Ще більше користі від референсів
Збирайте мудборди. Це добірка матеріалів, яка дозволяє спланувати настрій, стиль майбутнього дизайну. Сюди входять фотографії, іконки, зображення, скріншоти, шрифти, набір кольорів. Зібрати мудборд можна в Google-документах, Figma, створити дошку в Pinterest чи Behance.
Хоча створення мудборду й необов’язковий етап у роботі з референсами, але багато дизайнерів ними користуються. Такий підхід покращує співпрацю в команді та з клієнтом, адже формує однакове бачення спільного проєкту.
Перш ніж взятися за пошук референсів для мудборду, попросіть клієнта надіслати посилання на вдалі, на його думку, сайти чи застосунки. Приклади дизайнів допоможуть вам краще зрозуміти уподобання клієнта та співставити їх із вимогами проєкту.
Якщо до вашої команди приєднався дизайнер-початківець, також не ігноруйте етап створення мудборду. У процесі роботи ви побачите його навички, наскільки він розуміє завдання та загалом як мислить. З часом необхідність у цьому етапі роботи може відпасти.
Робота із референсами – це нескінченний пошук, який триває і поза проєктами й не обмежується інтернетом. Переглянутий нещодавно фільм, реклама в метро, побачене у подорожі нове місце чи захід сонця – все у житті може стати джерелом для референсів. Переносьте ідеї у професійну діяльність і створюйте дизайни, що надихають!
Підписуйтеся на ProIT у Telegram, щоб не пропустити жодної публікації!
