6 правил Массимо Виньелли, которые пригодятся веб-дизайнеру

>

Массимо Виньелли — один из самых известных дизайнеров-модернистов ХХ века. Он родился в 1931 году и начинал как архитектор в Италии, но в итоге прославился логотипами и рекламными постерами для крупных мировых брендов. 

Massimo Vignelli, Изображение: Flickr

Виньелли творил вплоть до 2014 года. Хотя интерфейсами он сам не занимался, многие принципы его работы актуальны для современного UX/UI-дизайна. Лаконичность и функциональность — главные качества графики Массимо Виньелли.

Посмотрим на знаковые работы мастера и разберемся, какие уроки можно из них извлечь в смежной сфере — в веб-дизайне.

Использовать простую типографику

Виньелли вошел в историю как амбассадор Helvetica: он считал эту гарнитуру универсальной и использовал регулярно. 

Изображение: логотип American Airlines с 1968 по 2013 год
Изображение: постер для театра Piccolo в Милане, 1964 год, / Moma

Набор шрифтов в арсенале Виньелли вообще был ограниченным. Он предпочитал использовать всего несколько простых классических гарнитур: Bodoni, Garamond, Futura, Century. В большинстве работ он брал один из этих шрифтов и придавал ему новое звучание с помощью композиции и цвета. Большое многообразие шрифтов Виньелли считал «визуальным мусором». 

В графическом дизайне такой подход остается спорным. Классических шрифтов не всегда достаточно, чтобы быстро привлечь внимание к брендам — трудно найти современного графического дизайнера, который обходится всего пятью гарнитурами. А вот для типографики в вебе до сих пор актуален принцип «чем проще — тем лучше». Разные вариации Helvetica, которую популяризировал Виньелли, часто можно встретить в интерфейсах.

Изображение: Helvetica Neue в интерфейсе Sunday App

На сайтах и в приложениях часто используют Open Sans, Lato, Noto, Roboto, Montserrat или создают уникальные брендовые гарнитуры, похожие на них. Всё это — легко читаемые гротески, функциональные и «незаметные». Мода меняется, но в большей степени ей подвержена рекламная графика — а в интерфейсах удобство всегда будет на первом месте. 

В любой непонятной ситуации можно, подобно Массимо Виньелли, взять один из самых простых шрифтов, и не ошибётесь. А чтобы прокачать навыки выбора шрифтов под задачи проекта, стоит анализировать сайты крупных брендов с точки зрения типографики. Также бывают короткие курсы, заточенные именно под эту задачу — например, How to Choose Fonts на платформе Domestica. 

Создавать шрифтовые композиции

Стремясь к минимализму, Виньелли в своих плакатах и упаковках часто обходился без иллюстраций и фотографий: он умел оформить текст так, чтобы он смотрелся самодостаточно.

Изображение: постер для текстильной компании Knoll / Cooper Hewitt

Даже используя дополнительную графику, Виньелли часто делал основной акцент именно на надписи. Фото и рисунки в этом случае отходили на второй план и служили фоном.

Изображение: постер к выставке Ивана Леонидова в Нью-Йорке, 1977 год / Moma

Крупные надписи с интересными композиционными решениями — прием,  актуальный для заголовков и рекламных баннеров в интерфейсах. Текст на весь экран точно не останется незамеченным. А непривычная компоновка букв или пересечение с другими объектами заставит пользователя задержать взгляд.

Изображение: интерфейс Cash Wagon  

Работы Виньелли — кладезь идей для создания шрифтовых композиций. За вдохновением заходите в галерею Google Arts & Culture, Archivio Grafica Italiana и на Tumblr. А на Amazon можно купить книгу The Vignelli Canon — в ней мастер рассказывает про свой подход к дизайну и, в частности, к типографике.

Экспериментировать и не бояться ошибок

Одна из самых известных работ Виньелли — карта метро Нью-Йорка. Когда метро только начинало появляться в крупных городах, карты подземки напоминали обычные, географические. В них перечисляли все подробности: основные улицы и достопримечательности на земле, изгибы путей поездов метро. 

Первую попытку сделать карту более лаконичной предприняли в Лондоне, но там было всего несколько линий метро, и проект не вызвал большого шума. В Нью-Йорке уже в середине прошлого века метро представляло собой разветвленную сеть, и без карты там было никуда. Виньелли разработал новаторский дизайн: убрал все лишнее, а сами линии сделал прямыми — вертикальными или идущими под углом 45 и 90 градусов.

Изображение: дизайн карты метро Нью-Йорка от Массимо Виньелли, 1972 год / NYC Urbanism

Дизайнер постарался упростить карту, сделать её более удобной и функциональной, но среди нью-йоркцев это решение не было популярным. Люди привыкли ассоциировать станции с городскими достопримечательностями, и без них было трудно ориентироваться. К тому же, чтобы избежать лишних изгибов линий метро, их реальное положение пришлось исказить — это тоже почитали минусом. В итоге карту Виньелли отправили в музей, а в метрополитене повесили более традиционный вариант.

Изображение: карта метро Нью-Йорка от Майкла Херца, 1979 год/ Wikimedia Commons

Несмотря на то, что версией Виньелли пользовались совсем недолго, многие знают дизайнера именно по этой работе. К тому же, Виньелли задал тренд для многих других городов: карты подземки часто делают упрощенными. Осенью 2021 года и в Нью-Йорке представили новую карту метро. Она очень близка к дизайну Виньелли, так что мастер просто опередил своё время.

Непривычные решения в дизайне могут приживаться не сразу, но только новаторы остаются в истории. Карты метро Виньелли — подтверждение тому, что даже непризнанные работы могут принести известность. А спустя десятки лет некогда революционный дизайн как раз может стать актуальным.

Не гнаться за трендами

Как подобает настоящему модернисту, Виньелли предпочитал минимализм. Вместо детализированных иллюстраций, сложных паттернов и градиентов — упрощенные силуэты, геометрические формы и однотонные заливки.

Изображение: дизайн упаковок сахара, 1969 год / Tumblr
Изображение: фрагмент брендбука Hover Speed, 1998 / Tumblr
Изображение: постер Pirelli, 1963 год / Moma

Упрощенные формы актуальны и для интерфейсов. Фотографии и рисунки с обилием деталей могут хорошо смотреться на сайте-портфолио дизайн-студии или в отдельных спецпроектах. Но если речь о каком-то сервисе, узнаваемые цветные силуэты зачастую работают лучше, чем фотореалистичные картинки. Использование простых фигур — универсальное решение для иконок и иллюстраций.

Изображение: иллюстрации в интерфейсе сервиса займов «Мокка»

Выбирать насыщенные цвета

Работы Виньелли отличаются насыщенными «чистыми» цветами и сильными контрастами. Одно из его излюбленных сочетаний — синий с красным: он использовал эти цвета в айдентике Hover Speed, American Airlines, Xerox, Cinzano.

Изображение: страница из брендбука Cinzano, 1984 год / Tumblr

В дизайне рекламных постеров и обложек Виньелли тоже придерживался лаконичной палитры. Во многих работах он ограничивался одним-двумя насыщенными цветами, не считая черного и белого.

Изображение: обложка Dot Zero Magazine, 1966 год / Moma
Изображение: рекламный плакат Triennale di Milano, 1964 год / Triennale di Milano

В интерфейсах эти принципы Виньелли очень актуальны. Ненасыщенные оттенки иногда смотрятся грязными, если у пользователя не очень яркий экран, так что лучше отдавать предпочтение чистым цветам. А слишком широкая палитра может сделать интерфейс запутанным. 

Обойтись одним-двумя цветами, как Виньелли, в дизайне интерфейса было бы сложно, но важно стремиться ограничивать палитру. Чтобы пользователю было легко ориентироваться, каждый цвет должен быть функциональным: привлекать внимание к CTA-элементам или обозначать отдельный раздел сайта.

Изображение: Цветовое кодирование в интерфейсе Sympreal

Пробовать себя в разных направлениях

Одна из знаменитых цитат Массимо Виньелли: «Если вы можете сделать дизайн одной вещи, вы можете сделать дизайн чего угодно». Итальянский мастер, помимо рекламы, айдентики и инфографики, создавал эскизы для мебели и посуды. Многие произведения промышленного дизайна он создавал совместно со своей женой Леллой. 

Изображение: Массимо и Лелла Виньелли, 1964 год / Design Culture
Изображение: Массимо и Лелла Виньелли, Дэвид Лоу, 1985 год / Moma
Изоюражение: Массимо и Лелла Виньелли, 1983 год / 1stDibs

В мебели, стекле и керамике прослеживался всё тот же стиль Виньелли — вещи простые и лаконичные. Несмотря на то, что дизайнер прежде всего известен своей графикой, мебель и предметы интерьера по его эскизам тоже были востребованы — у семьи Виньелли было собственное дизайн-бюро. 

В разных областях дизайна нужны схожие навыки — не обязательно ограничиваться чем-то одним. Если вы создаете интерфейсы, можно попробовать делать к ним иллюстрации в Adobe Illustrator или  освоить что-то кардинально новое: флористику, дизайн среды и предметов, ювелирное дело. На Domestica есть много коротких курсов, с которых можно начать знакомство с новой сферой дизайна.

TL;DR

Вдохновляться можно не только работами коллег на Behance и Dribbble, но и творениями дизайнеров в смежных сферах. В частности, у мастеров прошлого всегда есть чему поучиться, ведь в истории остаются лучшие. Массимо Виньелли прославился своей любовью к минимализму. Легко читаемые шрифты, простые силуэты и ограниченная цветовая палитра — главные отличительные черты его работ. И несмотря на то, что большинство своих известных произведений Виньелли создал ещё до появления веб-дизайна, в интерфейсах сегодня актуальны всё те же принципы.

Реклама на Bubble

Читайте по теме

Дизайн
Дизайн
1

Дизайн

Как все дизайнить. Дизайновый дизайн.
Скидки и специальные условия
Курсы со скидками для пользователей Bubble
Выбрать курс
Освоить за выходные
Экспресс-курсы программирования
Выбрать курс
Баг пофиксил
Курсы для QA-инженеров
Выбрать курс
Аналитик сотого левела
Курсы по аналитике данных
Выбрать курс
Подписывайся на Bubble в соцсетях
Подписывайся на BUBBLE в соцсетях