Візуальна ієрархія в типографике
У кожного дизайнера є улюблені прийоми, які він дуже часто використовує в своїх проектах. І якщо він відстежує модні тренди, то в результаті його стиль стає оригінальним і пізнаваним. Але буває так, що звичні підходи не працюють - дизайн «мовчить» і не взаємодіє з глядачем або користувачем. І тоді дизайнерові доводиться повертатися до основ і згадувати те, про що він в гонитві за модою якось непомітно і забув. Це теорія кольору, типографіка, композиція.
Якщо стає ясно, що з дизайном щось не так, найперше, на що слід звернути увагу - це візуальна ієрархія елементів. Якщо елементи «сперечаються» між собою і глядачеві важко відрізнити головне від другорядного, то для виправлення ситуації можна використовувати найрізноманітніші способи. Можна поекспериментувати з кольором, контрастом, шрифтами, інтервалами і сіткою. Можна навіть створити композицію з нуля, якщо нічого не допомагає. Потрібно лише прагнути до поставленої мети. Завдання дизайнера - правильно організувати всі об`єкти в межах відведеного простору і розставити пріоритети.
Найголовніше в роботі над візуальної ієрархією - знайти центр композиції, «точку входу», яка вкаже глядачеві подальший шлях. Якщо центр обраний правильно, то буде дуже легко за рахунок допоміжних навігаційних елементів звернути увагу глядача на найважливішу інформацію.
Є кілька способів, за допомогою яких можна акцентувати елементи дизайну і створити візуальну ієрархію з центром і потоком.
ВИКОРИСТАННЯ РОЗМІРУ ДЛЯ ПІДВИЩЕННЯ ВИДИМОСТІ
Як відомо, скрипуче колесо вимагає мастила. Те ж можна сказати про не надто вдалих елементах дизайну - вони потребують доопрацювання. Як правило, основна увага відтягує на себе найбільший об`єкт. Збільшення його розміру або масштабу щодо інших елементів є одним з найпростіших і ефективних способів підвищення значущості смислового блоку.
Також потрібно пам`ятати, що різні елементи можуть розташовуватися на різних планах. Всі головні елементи повинні розташовуватися на передньому плані, а менш значущі - на другому, третьому і т.д. Що найцікавіше, так це те, що другорядний об`єкт може бути більше головного, але завдяки використанню планів основна увага отримає елемент, розташований на передньому плані. Ось хороший приклад. Це робота дизайнера Ерін Ланкастер. Буклет створювався для турецької кав`ярні і, отже, тема кави повинна бути основною, а тема закладу, яке його пропонує, другорядною. Ось що вийшло:
Як ми бачимо, на передньому плані розташована чашка кави. Розмір ілюстрації менше, ніж напис Kafe. Але за рахунок того, що типографіка знаходиться на другому плані і до того ж частина букв виходить за межі друкованого аркуша, у глядача не виникає плутанини у визначенні значущості об`єктів. Чашка з кавою - це центр композиції, а напис - просто частина фону. Рішення сміливе, дизайнер ризикував, але в результаті робота вийшла цікавою цільної і збалансованою.
КОЛІР І КОНТРАСТ: ЗАЛУЧЕННЯ УВАГИ ГЛЯДАЧА
Люди завжди реагують на колір, особливо якщо він використовується умислом, наприклад, для того, щоб виділити важливу інформацію або привернути увагу до зображення. Яскраві кольори, такі як червоний або жовтий, важко не помітити.
Однак при роботі з кольором, так само як і з співвідношенням розмірів елементів, дуже важливі помірність і збалансованість. Якщо використовувати в дизайні всі кольори веселки, то навряд чи з цього вийде щось вдале - вплив кольору зійде нанівець, а візуальна ієрархія буде просто неможливо розрізнити на тлі нестримного буяння фарб. Колір потрібно використовувати економно, дотримуючись цілий ряд принципів.
Є безліч способів використання кольору і контрасту, які з успіхом можна застосовувати в дизайні. Контраст дозволяє розставити акценти, а колір можна використовувати для залучення уваги.
Також не варто забувати про тпловом сприйнятті відтінків (температурі), так як люди інтуїтивно поділяють кольору на теплі і холодні. Прохолодні кольори - це синій, зелений і їх відтінки. Червоний, жовтий і оранжевий відносяться до теплих кольорів. Є також група нейтральних кольорів - це чорний, білий, іноді бежевий або коричневий. Використовуючи колірну температуру в поєднанні з контрастом, дизайнер може маніпулювати увагою глядача, спрямовуючи його погляд на найважливіші елементи композиції.
Перед нами плакат, створений дизайн-студією Zee. У дизайні використовувалося досить спірне поєднання кольорів: яскравий і теплий помаранчевий сусідить з холодним синім кольором. Така колірна гамма викликає інтерес, головним чином за рахунок контрасту між колірними температурами елементів.
Якщо ж дотримуватися єдиної колірної гами і використовувати тільки теплі або холодні кольори, то це допоможе досягти єдності композиції.
Наприклад, дизайнер Кіт Джонсоніспользовал в роботі над листівкою і дизайном веб-сторінки одні і ті ж кольори зі схожою температури, що дозволило уніфікувати дизайн без створення додаткових акцентів.
Також не варто забувати, що колір має значення. Колір може сприйматися як легкий або важкий, радісний або похмурий. Як і у випадку з тепловим сприйняттям кольору, значення може бути використано з метою досягнення драматичного ефекту. Якщо ж потрібно створити менш емоційну композицію, то в цьому випадку краще знайти спокійні і близькі по тону поєднання кольорів.
У плакаті дизайнера Бреда Веттера світлі і спокійні пастельні відтінки на тлі дозволяють вивести на передній план типографіку. Насичений темно-синій колір букв різко контрастує з практично нейтральними відтінками фону, привертаючи увагу глядача до найголовнішого.
Насиченість кольору також може відігравати важливу роль при створенні візуальної ієрархії в типографике. Чим насиченіший колір, тим він помітніше. А якщо він ближче до нейтральних кольорів, наприклад, сірому, то його значення знижується. Використовуючи яскраві або приглушені кольори, як самі по собі, так і разом, можна створити в дизайні зони з сильним і слабким контрастом. Це іноді буває потрібно щоб послідовно перемикати увагу глядача з однієї частини композиції на іншу.
Обкладинка книги, створена дизайнером Джейсоном буєрах, являє собою відмінний приклад поєднання яскравих і приглушених кольорів. При цьому вміло використовується не тільки насиченість, а й контраст. Інтенсивний червоний привертає увагу і сильно виділяється на нейтральному тлі. Однак шрифт залишається добре помітним, так як він хоч і не сильно, але відрізняється від фону. Дизайнерський прийом з теплової різницею елементів дозволяє дизайнеру перемикати увагу з однієї частини обкладинки на іншу.
Ієрархія ЕЛЕМЕНТІВ У типографіка
Будь-дизайн, в якому є текст, не може обійтися без візуальної ієрархії смислових блоків. Ігнорувати цей принцип не можна - інакше композиція просто розпадеться на складові частини. Щоб зрозуміти, як працює візуальна ієрархія в типографике, досить згадати, як виглядає перша сторінка будь-якої газети. Там завжди є головний заголовок, підзаголовки і власне текст. Цей основний трирівневий підхід, який може використовуватися практично в будь-якому дизайні - від візиток до веб-сайтів.
Перший рівень. Як правило, на першому рівні розташований найголовніший елемент типографіки. Це може бути заголовок, логотип, назву анонсованого заходу. Назви книг або журналів також розташовуються на першому рівні візуальної ієрархії. Це центральна частина композиції, яку видно відразу, з першого погляду.
другий рівень. На другому рівні зазвичай знаходяться елементи, які дозволяють організувати дизайн в секції або смислові блоки. Елементи другого рівня не повинні сильно виділятися, вони «молодший за рангом», ніж заголовки або назви. Однак вони повинні бути добре помітні і глядач повинен чітко розуміти думку, яку намагався донести дизайнер.
третій рівень. На третьому рівні візуальної ієрархії знаходиться основний текст. Він може бути довгим або коротким, це може бути стаття, замітка або просто короткий опис. На цьому рівні вже не потрібно виділяти елементи кольором, контрастом або розмірами. Завдання тексту, розташованого на третьому рівні - донести представлену інформацію в повному обсязі. Це означає, що текст повинен бути набраний шрифтом, зручним для читання. Як правило, шрифт третього рівня набагато менше, ніж інші елементи типографіки, тому хороша читаність дуже важлива. Саме на це працюють елементи, розташовані на першому і другому рівнях: вони не тільки привертають увагу і пояснюють контекст, а й підводять читача до найважливішого - основного контенту.
