Розумний і усвідомлений вибір кольору в дизайні

140

Давайте поговоримо про важливість кольору. Замість нудною теорії (ну хто її читає) просто наведемо яскраві приклади «з життя».

В кінці 50-х рр. XX століття в південно-східній Азії Pepsi поступилася частиною ринку Coca-Cola через зміну кольору своїх автоматів з «царствено» синього на крижаній синій (в деяких частинах Азії холодні світлі відтінки синього асоціюються з сумом).

А компанії UPS, що вийшла на ринок Німеччини в 1976 р, довелося замінити коричневий колір уніформи через невдоволення місцевих споживачів (коричневий колір прийнято пов’язувати з нацистами, а коричневу уніформу носили в СС, їх ще називали «коричневі сорочки»).

Ще приклад – компанія United Airlines вітала пасажирів білими гвоздиками на перших рейсах з Гонконгу, що призводило останніх в замішання (білі гвоздики асоціюються у жителів Азії зі смертю і нещастями). Авіакомпанії довелося швидко замінити їх на червоні.

Який висновок можна зробити?

КОЛІР МАЄ ЗНАЧЕННЯ

… .і виконує певні функції. Наприклад, один і той же відтінок червоного може використовуватися як основний колір бренду (Coca-Cola) або як елемент інтерфейсу, який привертає увагу. Кольори викликають у людей різні асоціації, і це активно використовується в рекламі.

Вплив кольорів на дизайн

Кольори сильно впливають на створюваний вами дизайн. Тому хороші дизайнери свідомо підходять до їх вибору. Тобто не просто створюють гарні комбінації кольорів, а й цілі системи кольорів, які враховують різні аспекти – культурні, психологічні, функціональні і контекстуальні. Для документування таких систем є хороші інструменти – Zeplin, Avocode і Craft Library – напевно ви про них знаєте. Вони дають відмінну можливість отримувати кольору з існуючих дизайнів і збирати їх в сукупність зразків. На основі цього можна розробити назви кольорів таким чином, щоб співробітники, що працюють над проектом, краще розуміли основну ідею і основу вибору конкретного кольору, і могли це застосувати в таблицях стилів (в CSS, BootStrap і т. Д.).

Тобто, поточний стан кольору ви можете просто передати колезі за допомогою скрін екрану! І всі зміни, внесені в дизайн, не зажадають великих зусиль.

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

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

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

У додатку Open Color Tools ви зможете перетворювати ваші колірні палітри – вибравши трансформацію, можна легко оптимізувати їх код, позбутися від дублікатів або змінити назви. Також ви зможете експортувати палітри в різні формати (SCSS, JSON або Swift).

Осмисленість колірних рішень

Розширення Open Color в Sketch також дозволяє закріплювати важливі назви в шарах – замість визначення властивості типу «сірий з відтінком» ви зможете назвати його «фон хедера» або «колір фону хедера».

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