Add a picture and make it work

Когда человечество с головой погрузилось в Интернет, личные письма перестали пахнуть духами, из разговоров исчезли жесты, мимика и голоса, а книги утратили свое сходство с ларцами, полными запахов, звуков, пышных иллюстраций, тактильных ощущений и других драгоценностей, еще в процессе распространения изобретения Гутенберга. Интернет продолжил то, что начал книгопечатный станок, и превратил текст в неосязаемый молчаливый поток букв. В то же время он позволил человечеству вновь открыть для себя поликодовость: мы старательно погружаем высушенный интернетом текст во влагу музыки, в ароматы изображений, добавляем ему человечности с помощью эмоций из видеороликов. Таким образом мы стараемся компенсировать утрату живого общения посредством мультимедийности. Однако наращивание разных кодов на одну текстовую ось может обернуться неудачей, как это происходит и при личной коммуникации. О том, как повысить эффективность интернет-текста с помощью иконических элементов, рассуждает Патрик МакНейл в своей статье The use of illustration in web design, с переводом которой можно ознакомиться далее.

Использование иллюстрации 
в веб-дизайне

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

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

Давайте начнём с того, с чего я редко начинаю, — с основного определения: 

иллюстрировать — 

1. объяснять; 
2. пояснять, давая пример или служа в качестве примера; 
3. снабжать визуальными деталями для объяснения или украшения.

Похоже, что в реальном мире веб-дизайна иллюстрация стремится выполнять обе функции одновременно. Она и украшает, и объясняет. Только если она делает лишь одно из двух, у вас, возможно, появится вопрос, почему так. 

Вероятно, заставить иллюстрацию играть обе роли — верный способ действительно реализовать весь потенциал этого элемента дизайна.

Это, конечно, не значит,  что дизайн, который обходится только первым или только вторым, не может быть успешным. Разумеется, может. Однако я считаю, что для того, чтобы получить от работы максимум, полезно бросать вызов нашему мышлению. Как обычно, давайте разберём некоторые группы примеров и посмотрим, что можно сделать с этим визуальным средством. Попутно анализируйте, какие подходы ставят акцент на ясности, какие — на декоративности, а какие — и на том, и на другом.

Тематическая иллюстрация

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

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

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

Get my boss to North Cape

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

В этом случае тема чётко показывает цель сайта и помогает пользователю понять концепцию.

Launch Kit

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

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

Atelier Anonyme Design

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

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

Дизайн и содержание сайта многое сообщают его посетителям. Я убежден, что в данном качестве он служит как мощный фильтр для их клиентской базы. Либо вам понравится их игривый и креативный подход, и вы сочтёте его привлекательным, либо он покажется вам абсолютно отталкивающим. Так что я по-прежнему считаю, что он многое говорит об агентстве и менталитете его работников.

Allure Graphic Design

На этом сайте иллюстрация также является показательным примером тематического подхода. Хотя сайт оформлен в соответствии со стандартными шаблонами внешнего вида, весь дизайн состоит из тематических элементов. Эти элементы не только определяют дизайн сайта, но и перекликаются с основным логотипом и текстом. Тема объединяет все элементы и задаёт тон всему сообщению, представляемому сайтом.

Дополнительные тематические образцы

Перед вами несколько дополнительных примеров сайтов, в которых для создания контекста или темы сайта применяется тематическая иллюстрация:

Chipmunk

Drift Boys

Iutopi

Chandu4u

Персонажи-талисманы

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

inkFinder

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

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

The Evnt

По иронии судьбы мы находим здесь ещё одного нарисованного осьминогоподобного маскота (что за трёхногое морское существо?). В этом случае персонаж-талисман очевидно предстаёт гораздо более далёким от реальности созданием: это трёхногий робот с мозгом в пузыре.

Хотя выбор может показаться странным, эта иллюстрация все же представляет собой красивый опознавательный знак для конкретного события. Этот уникальный талисман служит замечательным визуальным элементом, ассоциирующимся с данным событием. Живя своей жизнью, он действительно вызывает у людей конкретные ассоциации. Я думаю, именно это является задачей любого талисмана.

У сайта красивый дизайн, но представьте, каким скучным он был бы без этого невообразимого талисмана. Создать такой элемент непросто, но в данном случае он чрезвычайно эффективен.

Big Eye Creative

Для примера с маскотом, не похожим на осьминога, взгляните на сайт Big Eye Creative. Здесь талисман не играет доминирующей роли в дизайне. Тем не менее, он все же наделяет его индивидуальностью. Очевидно, что другие изображения и общий стиль сайта служат для менее формализованной презентации продукта. Но персонаж с логотипа присутствует на сайте повсюду. Это способствует тому, что их непринужденный стиль распространяется на весь дизайн.

Дополнительные иллюстрации маскотов

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

Pioneer Records Management

Argyle Octopus

Coucou

Konsebt

Иллюстрация как украшение

Следующий тип использования, о котором я бы хотел рассказать, — это то, что я называю тематическим украшением. 

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

1000 WP Themes

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

Теперь я хочу полностью опровергнуть собственные слова. Я считаю, что данный стиль преимущественно декоративен. Но на самом деле я знаю, как можно аргументировать утверждение о том, что он всё же в некоторой степени относится к объясняющим элементам сайта. Стиль, используемый в дизайне, ориентирован на определённую аудиторию. Он сообщает информацию и о дизайне самого сайта, и о темах, которые предлагаются авторами. Во многих отношениях качество исполнения иллюстративного материала демонстрирует качество работы, которое можно ожидать, просматривая данный сайт. В этом плане объяснение может быть более тонким и менее заметным, но оно всё же присутствует.

Coca-Cola History

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

Metaphiziks

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

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

Ещё примеры дизайна с иллюстрацией в качестве украшения

Перед вами несколько дополнительных образцов в завершение рассказа об этом типе использования иллюстрации в дизайне:

Moo’s Cupcakes

Tech Jobs

Pixel Stadium

Custom Bags HQ

Иллюстрированный текст

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

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

Rangus

Это идеальный пример иллюстрированного текста. Стиль совершенно потрясающий, уникальный и очень располагающий. Но на этом его достоинства не заканчиваются. На самом деле авторский текст демонстрирует таланты своего автора. Он показывает, что тот создаёт произведения своими руками, и это прекрасно сочетается с его навыками анимации. Особенно мне нравится тот факт, что основой является стилизация под доску для рисования мелом, так как это действительно идеально связывает между собой тему и её элементы. По моему мнению, этот сайт показывает, насколько высока способность иллюстрации органично воплощать цель и сообщение сайта.

Joey Lomanto

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

Go live

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

Дополнительные образцы иллюстрированного текста

Следующие примеры условно относятся к данной категории. Я говорю «условно», потому что порой сложно сказать определённо, так как иногда это слишком неявно. В некоторых из этих примеров текст представляет собой настоящий шедевр, так что я добавил их в эту коллекцию.

Contrast Rebellion

Fakta

La Web Shop

Информативные иллюстрации

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

Bookish

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

Conferize

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

Activate

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

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

Ещё информативные иллюстрации

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

Vitality City

Uklizenodoma.cz

Qubiq

Технологический антидот

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

Иллюстрация — один из самых мощных инструментов, предназначенных для достижения этой цели.

Shipment App

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

Muziekpark

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

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

Egopop

Перед нами очередной необычный дизайн, и мы обнаруживаем, что иллюстрация в нём выполняет свои функции. Здесь изображение не только знакомит нас с человеком, которого представляет сайт, но также изменяет представления посетителя о нормальном веб-сайте. И вновь это больше похоже на интерактивное произведение искусства, чем на веб-сайт. Если вы ставите перед собой подобную цель и вам нужно добиться именно такого эффекта, тогда вам стоит обратить внимание на этот подход.

Zaarly

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

Этот сайт представляет собой приложение, задуманное для того, чтобы его использовали. А иллюстрация помогает составить определенный набор ожиданий. Она создаёт непосредственную, доброжелательную атмосферу, тем самым вызывая ощущение естественности и органичности. Сравните это с минималистичными, совершенно обезличенными приложениями. Дизайн вызывает у посетителей сайта ощущение доступности и изменяет наши ожидания.

Заключение

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