Створення Rooh, частина 3
Як перетворити один логотип у цілу дизайн-систему
Ця стаття написана двома мовами, українською та англійською. Англійська версія тут. Будь ласка, обирайте ту, яка вам зручніша.
Отже, логотип
Як ви пам’ятаєте, я розробила кілька версій знака. Разом із командою ми обрали один з них — із символом нескінченності.
Окрім логотипу, я зробила “ескіз айдентики” — гіпотетичний стиль, що виріс із знаку.
Чудово, що далі? Сам знак є важливим, проте він складає дуже малу частину системи. Потрібно було ще подумати про кольори, основні форми та їх подальшу взаємодію: роботи — непочатий край.
Подальші кроки
Хоча ми вибрали варіант, який нам сподобався, ми не були впевнені в кольорах. Версія “вічність” була натхнена пелюстками маку на сонці, тому кольори утворювали фіолетово-рожево-червоний градієнт. Такі відтінки свіжі та сучасні, але ми хотіли дотримуватися традиційного поєднання — натхненного вишивкою.
Таким чином, ми вирішили взяти червоний та чорний кольори з версії “меч”.
Це було чудове рішення: чорний та червоний — це універсальні кольори, вони могли створювати гарні поєднання з білим. Білий, в свою чергу, може перемикатися на чорний (наприклад, для нічної версії сайту). Отже, перше завдання було виконано.
В пошуках форми
Знак вічності досить складно перетворити на що-небудь. Експериментуючи, я спробувала обрізати його і отримала хрестик. Я побудувала візерунок і отримала щось на зразок вишивки, але дуже складної для сприйняття.
Я вирішила пошукати інший шлях. Найближча фігура — це коло, і, якщо ви подивитесь на конструкцію знака, ви це зрозумієте:
На своєму першому ескізі я використовувала кола, але розуміла, що цього недостатньо — мені потрібен був більш повний образ.
Я вирішила поглянути на вишивки (ще раз). Так, вони більше нагадують піксельне мистецтво, яке складається з квадратів, але коло також може грати роль частинки інформації про колір. Тому я вирішила створити власний піксель-арт, але замість цього використовувала кола, які, я зрозуімла, будуть основними фігурами.
Розвиток форми
Результат мені дуже сподобався. Насправді я могла би на цьому зупинитися, але вирішила продовжити дослідження.
По-перше, кола можуть бути різного розміру (але вони повинні охайно лягати на модульну сітку). По-друге, вони можуть містити отвір всередині (різного розміру). Деякі кола — це лише половинки. Деякі з них можуть мати градієнтне тло. Іноді це не коло, а два кола разом, створюючи прямокутник із закругленими кутами. Деякі з них можуть бути маскою для фотографії або зображення. І всі ці кола складаються у патерн у довільному порядку, створюючи інший візерунок кожного наступного разу. І цей візерунок буде нагадувати вишивку своїм кольором та формою.
Як бачите, я розробила широкий спектр кіл, і всі вони можуть бути не тільки красивими, але функціональними. Але спочатку поговоримо про тло.
Тло
Звичайно, ми можемо використовувати звичайне біле (або чорне) тло. Тим не менш, іноді потрібен акцент, якщо простір занадто порожній і вимагає деяких додаткових елементів. Для таких випадків я вирішила використовувати розмиті напівпрозорі червоні кола, щоб вони створювали світлий градієнтний фон від білого до світло-рожевого. Значення прозорості можуть змінюватися, так що розмиті плями мають різний вигляд і створюють більш цікаве тло.
Біле тло є основним — тим не менше, чорна або навіть червона версії можуть бути використані при необхідності.
Коротко про шрифт
Шрифт є одним з основних елементів дизайну. Для цієї системи я вирішила використовувати сімейство шрифтів Jura. Він геометричний, майже квадратний, і створює хороший дует з колами.
Створення елементів дизайну
Я вже згадувала, що візерунок як частина системи дизайну, насамперед, функціональний. Давайте поглянемо на його основні випадки використання:
Тут ви можете побачити стандартний візерунок, який запам’ятовується та асоціюється з нашою організацією. Він містить усі описані вище форми і є скоріше декоративним, ніж функціональним. А тепер давайте поглянемо на банери в соціальних мережах.
Я розпочала комунікацію з цих банерів:
Лівий — перший. Розмитість фону, наш логотип, текст. Твердження: “Ми тут! Привіт, будь ласка, запам’ятай наш логотип”. Той, що був праворуч, був зроблений за кілька днів, з меседжем до людей приєднатися до нас. Логотип перемістився; зліва з’явилися деякі кола — зображення динамічне, воно відображає рух.
Кола можна використовувати для іконок. Наприклад:
Усі ці банери мають випадкові візерунки, але піктограми в червоних і чорних колах надають додаткову інформацію.
Кола можуть представляти метафору теми на банері:
На банері проджект-менеджера є кола, охайно розкладені за кольором та зовнішнім виглядом, що показує характер менеджера: він логічний, охайний та точний. Кола на банері бізнес-аналітика створюють візерунок, близький до віх діаграми, і він також зростає (як має робити прибуток).
Іноді кола створюють зображення:
Наприклад, червоні кола представляють пелюстки, а чорний — кулю. Одна з пелюсток розбита на дві частини — додатковий драматичний ефект.
Ця серія присвячена видатним українським людям, тому велике коло використовується для фотографій, а довгі фігури — для імен людей.
Деякі з банерів мають червоний фон:вони привертають максимум уваги.
Великі елементи
Це були приклади дизайну соціальних мереж. Система довела свою зручність та легкість у використанні. Якщо ви можете використовувати дизайн на невеликих елементах і він все ще буде виглядати інформатвино, гарно та автоентично — безумовно, ви зможете використовувати його і у великій системі, де є місце для творчості.
Наприклад, ось як використовується система у презентації:
Зверніть увагу на ізометричні зображення — вони є новим елементом дизайну. Додайте лише відтінок корпоративних кольорів, і ви не сплутаєте елемент з іншим брендом. Так і працює система: кольори, форми та їх унікальна комбінація створюють незабутню асоціацію.
Це дійсно важлива річ, цей дизайн. Українська культура досі невідома багатьом людям в світі. Надаючи друге дихання нашому національному візерунку, який є одним із наших символів, ми робимо його сучасним і крутим — ці речі якраз і потрібні нам сьогодні. І це і є метою нашої організації: зробити нашу культуру широко відомою та цікавою для багатьох людей.
Наступна стаття буде присвячена веб-сайту, який буде доступний найближчим часом. Залишайтеся з нами!