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


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

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

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

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

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


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

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

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


#композиция

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

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


#композиция

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

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

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

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

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



#упаковка

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

Модуль-свитчер
Частая история: в приложении есть набор опций, которые можно включать/отключать, но сами по себе они не очень понятные и «продающие». А штука нужная. Приходится выкручиваться, добавляя к элементу управления подсказки и мелкие подписи.
В этом примере автор выкрутился иначе: сделал из переключателей отдельные модули с иконками, поясняющим текстом и дополнительными ссылками. Получилось просто, понятно и заметно.


#mobile #UI

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

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


#анимация

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

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


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

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

Альтернатива
Приём из клиентоориентированнного мира. На карточке отсутствующего продукта в интернет-магазине Demeter показывается доступная альтернатива: мол, нет апельсинового скраба — возьми черносмородиновый, он тоже ничего. Похожий приём «Предложить альтернативу» ещё используется в интернет-магазине «Перекрёстка».


#web

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

Рифма
Буква C в логотипе (необычные смещённые утолщения штрихов) рифмуется с обводками знаков на упаковке.


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

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

Повторение
Классная метафора стука в дверь, воплощённая в типографическом приёме.


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

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

Зеркало
Бугристая поверхность зеркала, искажая предметы вокруг, порождает интересный визуальный приём — роскошный, таинственный, слегка декадентский. За наводку спасибо классному каналу «Заметки на полях».


#поверхность #искажения

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

Острые предметы
На упаковке латексных перчаток изображается, как острые предметы пытаются прорвать материал, а он держится. Классный способ показать прочность товара. За наводку спасибо Оди.


#упаковка #айдентика

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

Спрятанная картинка
Картинка спрятана под основным фоном страницы и иногда проглядывает, если наводишь на края. Классный приём для демонстрации намёков, создания атмосферы таинственности и оформления спецпроектов про заговоры.


#картинка #анимация

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

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


#композиция

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

Фигуры с наложением
Очень старый приём, встречавшийся ещё в работах ВХУТЕМАСа. Простые фигуры смело накладываются на фото и на картинку с режимом наложения (в терминологии фотошопа — затемнение, жёсткий свет или оверлей). Места пересечений красятся в другой цвет. Хороший способ объединить две картинки в одну и придать иллюстрации исторический оттенок.


#композиция

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

Голография
Шикарный абстрактный паттерн на упаковке мороженого — сочный, голографический, передающий ощущение свежести льда в жаркий день. За наводку спасибо дайджесту Оди.


#упаковка #паттерн

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

Дублирующийся заголовок
Огромный заголовок из одного слова, повторяющийся и обрезающийся. В такой форме он уже становится иллюстрацией и самостоятельным объектом, а не текстом, несущим информационную нагрузку. И смотрится смело.


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

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

Частичная заливка
Понравился приятный стиль иллюстраций — лёгкий, контурный, но с частичной заливкой, — и работа с цветом. Дизайнер, с одной стороны, остаётся в рамках палитры бренда (здесь речь о «Вкусвилле»), а с другой — добавляет оттенков, немного «припыляет» цвета, чтобы сделать более приятные сочетания пятен.


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

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