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

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

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


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

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

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

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


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

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

Классное использование маски в вебе: видео проигрывается не только в контейнере, но и в контурах текста.
: https://dribbble.com/shots/1985144-Re-Designing-Travel-A-New-Skillshare-Class

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

Скотч
Модули-карточки, как бы приклеенные к странице цветным скотчем. Удивительно старый, материальный приём, который неожиданно смотрится в современном портфолио.


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

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

На сцене
Классная иллюстрация к тренингу про презентацию идей: заголовок стоит на сцене под светом софитов. Просто в реализации и очень уместно.


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

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

Широкие поля
Как здорово и необычно смотрятся сервисные инструменты, которые свёрстаны свободно — с широченными полями, воздухом, щедрыми отступами и деликатно небольшими размерами шрифтов (хотя пространство, безусловно, позволяет сделать их побольше).

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

​Инвертированная шапка
При скролле иконки в шапке не просто залипают вверху экрана, а инвертируются. Так шапка становится менее тяжёлой.


#mobile #навигация

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

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


#карты #данные

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

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


#цвет #паттерн

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

Наклон
Бодрый стиль, построенный на наклонах заголовков и сочной высококонтрастной палитре. Понравилась простота, лёгкость и смелость.

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

Этикетка на горлышке
Легко, просто, неожиданно.


#упаковка

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

Маска на видео
Старый добрый приём для зрелищного первого экрана. Выглядит эффектно, но в реализации на самом деле не так сложно: свгшная маска накладывается на обе части экрана, в одной половине фото, в другой зацепленное видео на фоне, и по ховеру маску сдвигаем, масштабируем или трансформируем. За наводку спасибо @yesiwannado

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

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

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

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


#иллюстрация #полукруг #фото

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

Неожиданный ховер
Очень замороченно и очень зрелищно.

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

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


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

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


#табы #текст

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

Рукав или автобус
На табло вылета в лаунже авиакомпании S7 показывается не только номер гейта, а ещё и соответствующая иконка: рукав или автобус. Удобная штука для понимания, как долго будет идти посадка и надо ли снимать пальто.

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