Айдентика не може бути закріплена за автором, слідувати сталим правилам чи повністю вписуватися в певні рамки. Вона завжди розвивається та ніколи не закінчується, адже є нескінченним процесом. Дизайнер Марко Іваник прочитав лекцію про основні складові айдентики, а Telegraf.design законспектував ключові моменти. Повну відеоверсію прочитаного дивіться тут.

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

1. Логотип

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

Логотип має бути горизонтальним

Логотип або його частина мають підходити під іконку майбутнього мобільного додатку

2. Колір

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

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

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

Нещодавно Google випустив корисний плагін для Sketch. Він дозволяє підбирати кольорові палітри і одразу генерує градації кольору в обидві сторони.

Якщо ми використовуємо чорний на 80-90% – виходить «дизайнерський колір». У вебі більше можливостей. Ми, наприклад, часто домішуємо до чорного сині відтінки – так виглядає благородніше, дорожче, більш по-дизайнерськи. Потім з отриманого відтінку множимо сірі. Якщо ви створюєте айдентику, яка буде використовуватися в цифрі, варто зробити чорний для друку і чорний для екрану.

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

3. Шрифт

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

Рекомендую прочитати «Why fonts matter» Сари Хідман. Вона описує дослідження сприйняття шрифтів.

Шрифти сприймаються на мікрорівні. Навіть коли ви думаєте, що не помічаєте різниці – ви її помічаєте.

У Google Fonts та не тільки є чудові безкоштовні шрифти. Але потрібно бути уважним, наскільки підходить обраний варіант. Наприклад, може не вистачати окремих символів або цілої мови. А шрифт – це 90% всієї айдентики.

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

Наприклад, у лівій частині картинки нижче заголовок і текст набрані шрифтом Gotham, а в правій шрифтом San Francisco. Gotham працює в розмірі 16-18, але як тільки зменшується хоча б до 14 – розчиняється. З San Francisco подібного не відбувається.

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

4. Лейаут

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

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

Пам’ятаєте Еріка Шпікермана? Коли вийшов IOS7, окрім градієнтних іконок там з’явилася тонка Helvetica. Суперсексуально! Але Шпікерман сказав,що виглядає добре, а працювати не буде. З часом версія пройшла перевірку та Apple повернувся до товстого заголовку и регулярного тексту.

5. Віжуали

До віжуалів відноситься все, що стосується графіки – картинки, фотографії, будь-які зображення, які використовується для формування бренду. В інтерфейсах це здебільшого іконки. Але їх неможливо збільшити. Зазвичай це 24*24 пікселі. Коли виникає потреба намалювати 48*48, потрібно створювати графіку.

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

Наприклад, в Petcube в процесі з’явились три стилістики ілюстрацій та аутлайн-іконки в двох розмірах.

Мені дуже подобається прогрес Макдональдсу. Вони обрали золоту арку як головний елемент, але айдентика, стилістика постійно змінюється. Раніше колір був червоний – це про швидкість, а зараз зелений – це вже про екологію. І це нормально, все змінюється.

6. Якщо любиш – відпусти

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

Раніше Telegraf.design писав про значення логотипів та задачі, які вони виконують для брендів.