Canal interfaces.prjctr - @interfaces_prjctr - №1332
Кейс: як пофіксили невдалу палітру кольорів SkyscannerДілиться Адам Вілсон, що обіймав посаду Senior Product Designer у Skyscanner.Проблема: «Навіть через кілька місяців я все ще не міг зрозуміти, які кольори де використовуються. Посилання були різних кольорів. Основні кнопки були зеленого кольору. Але якщо вони призначалися для конкретного типу бронювання — синього. Заплуталися? Я теж…»Завдання: зробити так, щоб бренд і продакт команди послуговувалися однаковими правилами використання кольорів. Одна палітра має бути простою та легкою у використанні, а інша — сміливою та виразною. При цьому всі комбінації треба було зробити інклюзивними.Основні рішення: систематизувати та спрощувати.• Ми визначили більш сфокусовану палітру з основними та розширеними комбінаціями.Темне стало темнішим, а світле — яскравішим. У якості брендових ми змішали нові додаткові кольори.• Потім ми подивилися на назви: поетичні назви мали піти. Вони просто не працювали.«Калькутта» → «той оранжуватий колір»«Ерфаунд» → «той жовтуватий колір»• Для інклюзивності необхідно дотримуватися стандартів контрастності.25% комбінацій кольорів на iOS і 17% на Android були недоступні.Ми вже використовували 31 колір у нескінченних комбінаціях, тож ми прийняли просте рішення це прининити. Текст став чорним або білим, що обмежило кількість доступних комбінацій і дозволило залишити інклюзивні.• Всередині продукту ми презюмували, що вже отримали певну увагу користувача.Тож не треба кричати усіма кольорами, як на креативах. Продуктова палітра має бути протиотрутою від тривоги — створювати відчуття спокою. Less is more.• Ми написали правила і зберегли все це разом у Figma.Розділили палітри на бібліотеки Brand і Product. Екрани ретельно вивчалися, правила ставилися під сумнів, а комбінації досліджувалися. Але у нас був основний набір кольорів і принципів як бачення. • Джерело — стаття Адама на Medium. У ній про імплементацію нових підходів у код і кольори, відправлені на цвинтар.
2100
24-10-04 08:08