Округлые формы
Возвращаемся с каникул. Как здорово смотрятся округлые формы на сайте Коломенского от Charmer — и аутентично, и свежо, и воздушно. Приём поддерживается и в фонах, и в модулях, и в шрифтовой работе.


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

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

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


#композиция

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

Контраст движения
Прямые линии, квадраты и модули здорово резонируют с дрожащим шрифтом. За наводку спасибо typetoday.


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

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

Цвет
Понравился подход к работе с цветом — смелое сочетание тепла и холода, сочности и пастельности оттенков.


#цвет

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

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


#композиция #web #модули

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

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


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

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

Невечный логотип
Концепт айдентики Чернобыля: логотип в форме реактора меняется каждый год, истончаясь и рассыпаясь, пока в 2064 совсем не исчезает. В этот год Чернобыльская АЭС будет полностью выведена из эксплуатации.
Классный пример динамической айдентики, растянутой во времени. Время становится главным визуальным приёмом.


#айдентика #композиция #время

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

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


#кнопка #тень #градиент

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

Эмодзи
Мини-иллюстрация посильными средствами: телеграм-канал «Блумберг», анонсируя новости, ставит перед абзацем эмодзи в тему. За наводку спасибо @pptxmen


#эмодзи #иллюстрации

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

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


#анимация #web

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

Плашки
Контрастные градиентные плашки, ворвавшиеся в изометрическую схему парка. Получилось достойно: многослойно, ярко, но не пёстро и не мусорно. За наводку спасибо @vladkorobov


#навигация

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

Градиенты в ряд
Ещё один интересный вариант использования градиентов — в полосах и лентах. Создаётся интересный объём.


#градиент #обложка

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

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


#mobile

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

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


#модули

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

Абстрактный фон
Промо-сайт без иллюстраций. Весь стиль построен на абстрактном угловатом фоне, который анимируется при скролле. Это история не про полезное действие и не про продажу, но для имиджевого сайта в консервативной сфере решение ок.


#промо #web

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

Минимум
Кайф минимализма в тач-интерфейсе. Не уверена в боеспособности проекта, но эстетика на высоте.


#mobile

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

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


#паттерн

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

Классная модульная конструкция в навигации. Вариативность и узнаваемость: квадраты можно заполнить цветом, текстом, цифрой или простым диагональным узором, перемешать по-разному, но в целом конструкция будут выглядеть единообразно.
— https://www.behance.net/gallery/62634503/Forum-Nastavnik

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