Чого Баугауз може навчити нас про дизайн інфографіки
Порівняно з образотворчим мистецтвом дизайн завжди сприймався як менш надихаючий через його практичний характер. Ми почали усвідомлювати неймовірну силу дизайну лише з минулого століття завдяки кільком дизайнерським рухам, які змінили парадигму.
Bauhaus був одним із тих рухів, які надали дизайну унікальне місце в людстві: унікальна дисципліна, яка поєднала мистецтво та майстерність із філософським підходом .
«Баугауз» — термін, що буквально означає «будівельний будинок» німецькою мовою — був художньою школою, заснованою архітектором Вальтером Гропіусом у 1919 році. Коли існувала школа Баугауз, вона сягала трьох міст — Дессау (1925-1932), Веймар (1919-1925 рр.) і Берліні (1932-1933 рр.). Незважаючи на те, що Баугауз проіснував недовго і врешті був закритий через нацистську політичну партію, як рух Баугауз мав величезний вплив на мистецтво, дизайн і архітектуру, який продовжується до наших днів. Деякі з найвідоміших художників і дизайнерів Bauhaus включають Пауля Клеє, Йоганнеса Іттена, Міса Ван дер Рое, Василя Кандінського та Ласло Мохолі-Надь.
Замість того, щоб зосереджуватися на елітарному ідеалі образотворчого мистецтва, Bauhaus був досить радикальним у той час, щоб інтегрувати принципи мистецтва та дизайну, такі як теорія кольору, композиція з невпинним прагненням до цілеспрямованої функціональності. Можна багато чому навчитися з революційних принципів Баухаузу щодо дизайну інфографіки. Тут ми ознайомимося з їхніми уроками, щоб оновити ваші думки про інформаційний дизайн за допомогою цікавого поєднання художнього чуття та модерністської раціональності.
Спадщина Баугауза
Існує шість основних принципів Баухаузу. Вони базуються на мінімалістичному підході, що визначається простими кольорами та чистим дизайном. Баугауз як рух, крім мистецької школи, дотримувався певних переконань, які сформували його підхід до мистецтва та дизайну:
- Продукти можна виробляти масово, але також вшановувати мистецький дух індивідуальності та служити більшості населення. Хоча подібна ідея вже існувала в Німеччині, вона потрапила в центр уваги після Баухаузу.
- Школа мистецтв Баугауз також вважала, що студенти повинні бути добре оснащені в мистецькому, соціальному, економічному, технічному та духовному аспектах. Це виявило б у них найкраще і зробило б їх важливими учасниками суспільства.
- Школа мистецтв Баугауз віддала перевагу далекоглядним викладачам, а не науковцям з академічною кваліфікацією. Ними заохочувалась художня творчість.
- Іншим її принципом було поєднання прикладного та образотворчого мистецтв.
- Послідовники Баухаузу вважали, що дизайнер повинен мати глибокий досвід роботи з матеріалами.
- Вони твердо вірили в раціональний дизайн і були захоплені сучасним почуттям прекрасного.
Уроки Bauhaus для інфографічного дизайну
Графічні дизайнери можуть багато чого навчитися про сучасний дизайн, який поєднує в собі майстерність, доступність і корисність. Давайте розглянемо уроки, які ми можемо застосувати до дизайну інфографіки сьогодні.
1 Форма слідує за функцією
Ефективний інформаційний дизайн розглядає комунікацію як головний пріоритет. Час від часу ми бачимо красиво оформлену інфографіку, яка не несе пам’ятного повідомлення. Основна мета інфографіки – передавати інформацію – форма та стиль повинні відповідати цій меті, а не навпаки.
Відомі таблиці гніздування Йозефа Альберта – це гра мінімалістичних форм і поєднання кольорів.
Школа Баугауз навчала студентів знімати непотрібні прикраси, які не слугували функціональному призначенню. Фраза «форма слідує за функцією», придумана американським архітектором Луїсом Салліваном, ідеально відображає дух часу Баухаузу. Дотримуючись цього правила, хороша інфографіка має надавати пріоритет читабельності та зменшувати візуальний безлад, щоб створити чіткий візуальний фокус. Іншими словами, треба оголосити смерть надмірним декоративним деталям.
Нижче представлена інфографіка, яка відповідає цьому правилу. Використовуючи мінімальну кількість кольорів і базові геометричні форми, він передає складну інформацію з дуже чистим, лаконічним дизайном.
Розпорядки дня відомих творчих людей
2 Візуальна ієрархія є королем
Школа Баугауз приділяла особливу увагу відносинам, що складаються між двома протилежностями. Наприклад, воно пояснювало зв’язок між темним і світлим, лівим і правим або великим і малим. І цей зв’язок між елементами створює візуальну ієрархію.
Візьмемо, наприклад, культові композиційні картини Кандинського (Мондріана?). Розмір і положення червоного прямокутника створює візуальну фокусну точку, утворюючи взаємозв’язок із суміжними контрастними кольорами та формами, за яким нашим очам дуже легко стежити.
Картина Кандинського «Біле-біле» демонструє чітку візуальну ієрархію.
Урок тут полягає в тому, щоб створити чіткий візуальний фокус у дизайні інфографіки за допомогою контрасту, форм і просторового позиціонування. У наведеному нижче прикладі інфографіки використання червоного та зеленого кольорів створює сильний контраст, який підкреслює кількісну різницю, тоді як форми, що накладаються в центрі, створюють чіткий візуальний фокус.
Інфографіка «Рік їжі в Нью-Йорку».
3 Колір як засіб
Яскравий учень школи мистецтв Баугауз на ім’я Йозеф Альберс розкрив цю тему у своїй культовій книзі «Взаємодія кольору». Йозеф навчив нас, що кольори є відносними і рідко розглядаються як їхні фактичні фізичні властивості. Як засіб, кольори можуть бути «оманливими» та «провокаційними». Тому розуміння того, як кольори взаємодіють один з одним, може значною мірою визначити ваше повідомлення.
У наведеному нижче прикладі, який ілюструє відносність кольору, квадрати одного коричневого кольору сприймаються як такі, що мають різні відтінки через контекст, у якому вони знаходяться. Першим кроком є розуміння внутрішніх властивостей колірної палітри. Щоб донести правильне повідомлення, потрібно також враховувати взаємодію між кольорами під час вибору колірної схеми.
Йозеф Альберс про відносність кольору.
Зараз дизайнери вибирають найкращі палітри, щоб зробити веб-сайти барвистими та відповідати внутрішнім властивостям відтінків.
Урок того, що кольори зберігають глибші зв’язки, використовують сучасні дизайнери. Тому вони обережно вибирають найкраще поєднання кольорів і повністю виявляють сенс.
Крім Йозефа Альберса, інші художники Баугаузу зробили внесок у теорію кольору, наприклад Йоганнес Іттен і його кольорова сфера. Класифікація кольорів на первинні, вторинні та третинні кольори сьогодні все ще широко використовується для графічного дизайну. Теорія кольорів Іттена може допомогти дизайнерам інфографіки вибрати найкращу колірну схему для своїх дизайнів.
12-колірне коло Йоганнеса Іттена.
З огляду на цю теорію кольорів, набагато легше вибрати найкращу колірну схему для вашої інфографіки на основі принципів послідовності та простоти. Хороша інфографіка використовує послідовну колірну палітру, зберігаючи при цьому поєднання кольорів простим. Ви хочете, щоб ваші кольори підтримували передачу інформації, а не заважали або відволікали читача від основного повідомлення.
Наприклад, якщо ви хочете створити інфографіку про приготування кави, найкраще використовувати коричневий як домінуючий колір, оскільки це колір, який асоціюється з кавовими зернами, зберігаючи при цьому всю палітру кольорів простою. У цій інфографіці Nespresso дизайн передає тему за допомогою коричневого кольору.
Щоб послідовно та просто використовувати кольори для вашого дизайну інфографіки, ви можете розглянути 3 колірні схеми: монохроматичну, триадичну та комплементарну. У монохроматичній колірній схемі використовуються кольори однакового відтінку, але різної насиченості, тому будьте обережні, щоб налаштувати кольори так, щоб вони не виглядали надто тьмяними. Початківцям простіше почати з тріадної колірної схеми, де кольори однаково віддалені на колірному колі. Додаткові кольори розташовані на протилежних кінцях колірного кола і чудово підходять для створення контрасту.
3 Типи колірних схем для інфографіки.
Нарешті, завжди враховуйте контекст вашої інфографіки, щоб вибрати кольори, які викликають правильні асоціації. Наприклад, якщо ви розробляєте інфографіку для різдвяного сезону, найкраще дотримуватися червоно-зеленої кольорової гами.
4 Типографіка має велике значення
Однією з найбільших спадщин школи мистецтв Баугауз є типографіка. Лідери Bauhaus вважали, що типографіка є невід’ємною частиною графіки, і що слова повинні бути розташовані під гострими кутами. Однак значення слова було більш пріоритетним, ніж його дизайн.
Ця віра навчила сучасних дизайнерів головним уроком. Це спонукало їх бути креативними зі стилями шрифтів, але також застерігало їх не відхилятися від фактичного повідомлення, яке вони хочуть висловити. Згідно з Баугаузом, основна функція типографіки — комунікація, і комунікація має проявлятися в «найкоротшій, найпростішій, найбільш проникливій формі».
Найкращі шрифти Bauhaus прагнуть до зрозумілості та простоти.
Для дизайну інфографіки, як правило, ми повинні використовувати шрифти, які є розбірливими та простими, щоб комунікувати зрозуміло. Надмірно декоративні шрифти для тексту ускладнять читання та відволікатимуть погляд, оскільки тексти рідко є центром дизайну.
5 Макет сітки
Гарне вирівнювання змінює графічний дизайн. Піонери Баухаузу вірили в мінімалістичний підхід до візуальної організації, де все щільно втиснуто в прямокутники та квадрати. Сітка ідеально підходить для практичних дизайнерів Bauhaus. Багато елементів дизайну Bauhaus відповідають строгій сітці, наприклад обкладинка книги та шахова дошка внизу.
Проектування для сітки.
Зараз система сітки – це система вирівнювання, яка широко використовується графічними дизайнерами та веб-дизайнерами для макетів сторінок. Вона залишається ефективною системою підтримки візуальної ієрархії в усьому розділі вмісту. Для дизайну інфографіки дотримання системи сітки є обов’язковим, оскільки кілька елементів потрібно впорядкувати, упорядкувати та структурувати, щоб створити чітку візуальну ієрархію.
Як сітка використовується в графічному дизайні.
Використовуючи систему сітки на основі стовпців, наприклад сітку з 6 стовпців вище, ви можете встановити орієнтир, як ваші елементи дизайну взаємодіють з кожним із них. Це закладає основу для міцних візуальних зв’язків у вашому дизайні. Крім того, системи сіток можна використовувати для створення ритму та руху. У наведеному вище кольоровому дизайні журналу Bauhaus розташована по діагоналі сітка створює відчуття руху, тоді як щільні елементи в центрі сітки створюють відчуття гравітації.
Якщо сітка на основі стовпців є тим клеєм, який утримує ваш вміст, тоді використання полів допоможе розчистити ваше щільне відображення інформації. Ви, напевно, помітили, як щедре використання білого простору та широких полів у дизайні Bauhaus створює чистий, незахаращений вигляд.
Нарешті, наявність сітки допоможе вам розірвати сітку. Ваш дизайн відразу стає вражаючим, коли ви навмисно порушуєте правила. Це зробить вашу інфографіку миттєво більш запам’ятовуваною серед багатьох макетів інфографіки у форматі печива. Візьмемо для прикладу інфографіку нижче: розрив прямокутної сітки вгорі створює вражаючий візуальний ефект, тоді як решта сітки сторінки залишилася недоторканою, щоб зберегти візуальну гармонію загального дизайну.
Хороший приклад розриву сітки.
Твоя черга
Ось п’ять важливих уроків Баухаузу, які ви можете використати у своєму наступному дизайні інфографіки. Чи вважаєте ви їх легкими для розуміння та практичними для виконання? Чи знайшли ви інші принципи Баухаузу, придатні для дизайну інфографіки?
І якщо ви готові зробити стрибок, спробуйте ці принципи дизайну з розробником інфографіки, таким як Visme, який постачається з шаблонами, щоб ви могли зосередитися на виборі правильного шрифту, кольору та візуального макета.