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


#композиция #web

Визуальный код

Первый экран
Классная компоновка первого экрана сайта про сервис: две трети пространства отданы под заголовок и меню, а оставшееся место отдано под анонсы. В сочетании с аккуратной типографикой выглядит очень чисто, но не скучно.


#композиция

Визуальный код

График как декорация
На фоне фактоидов — ненавязчивые графики, которые используются как декорация. Графики не несут никакого заметного смысла, но здорово оживляют вёрстку.


#фактоид

Визуальный код

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


#кейсы

Визуальный код

Анонсы в виде пути. Каждая точка — круговая иллюстрация с заголовком и разводящим действием.  — https://www.villesetpaysages.fr/

Визуальный код

Абстрактные иллюстрации с потёртостями
Старая добрая абстрактная графика, дополненная простыми фигурами с потёртостями. Такое и нарисовать несложно, и спектр применения очень широк. Всё решает приятный контраст: гибкая и вариативная тонкая линия + увестистая геометричная фигура.


#графика #иллюстрации #линия

Визуальный код

Диалог
Яркие плакаты в одном стиле общаются между собой. Фишка стиля — в том, как плакаты расположены, как между ними протягивается линия, как цвета и шрифты перекликаются друг с другом. Очень классный приём для демонстрации живости и диалога.


#цвет #композиция #линия

Визуальный код

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


#цвет

Визуальный код

Более
Маленькая игра с формой: знак > превращён в текстовую надпись по форме знака.


#композиция #форма

Визуальный код

Флэт + фото
В обучалке новой версии 2ГИСа в качестве иллюстраций используются картинки в интересной технике — уже привычный упрощённый стиль с текстурами дополняется фотографическими вставками. Здорово сделано.


#иллюстрации

Визуальный код

Куб
Грань куба как пространство для вариативности.

Визуальный код

Скролл как приём
Классная презентация вариативного шрифта: жирность меняется по скроллу. Просто и наглядно.


#web #типографика

Визуальный код

Колд брю
Роскошное сочетание цветов: пастельно-кофейный оттенок колд брю и насыщенно-синяя, сочная этикетка с примесью фиолетового.


#цвет

Визуальный код

Диалог
Интересный способ задействовать панораму в проекте «Музей принятия». Это истории матерей, которые приняли своих ЛГБТ+ детей. Диалог показан с помощью круговой видеопанорамы: переключаясь между точками, можно посмотреть на сына глазами матери и мать глазами сына.

#web #панорама

Визуальный код

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


#mobile #иллюстрации

Визуальный код

Фильтры-лента
Фильтры событий спрятаны в ленту; каждая сопровождается иконкой, и за счёт специфических пропорций (не совсем «кнопочных») здорово смотрится. Так можно оформлять сортировку, выбор параметров в интернет-магазине или на сайте недвижки.


#кнопки #лента

Визуальный код

Стикеры
Ещё один приятный пример айдентики, в которой главным приёмом становятся стикеры, беспорядочные налепленные на холст и друг на друга.

Визуальный код

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


#градиент #объём #иконки

Визуальный код

Диагональ
Приём-игра: все посты в ленте подогнаны под диагональ, всё повёрнуто на 45 градусов. Для восприятия сложновато, зато зрелищно и остроумно. За наводку спасибо @tim_or_timofey


#композиция

Визуальный код

Движение
Классный способ придать композиции динамику. Это разворот о том, как готовить яйца. Иллюстрация разбита на две части — наверху руки разбивают яйцо, внизу подставлен ковшичек. Между ними две колонки текста, размещённые так, чтобы яйцо «пролетало» в отступ между ними.
Очень просто, динамично и забавно: дизайнер как бы не показывает само действие, но расчищает на макете путь для него.


#композиция

Визуальный код

Простейший интерактив на Редимаге
Бывает, нужно сделать наглядную схему, а ресурсов на вёрстку, маски и админку нет. В таких случаях спасает Редимаг с его функцией анимации по ховеру: можно нафигачить несколько картинок одна поверх другой и на каждую навесить появление по ховеру на другой элемент — легенду.

(лонгрид вашей покорной слуги)
#анимация #схемы #интерактив

Визуальный код