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


#ux #web #фича

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

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


#web #анимация

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

Заголовок бегущей строкой
Просто и эффектно. За наводку спасибо каналу Бездарные ссылки


#web #анимация

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

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


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

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

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


#web #модули

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

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


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

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

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


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

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

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


#анимация #web

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

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


#промо #web

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

Круглые лейблы
Журнал «Шрифт» недавно провёл редизайн. Некоторые материалы маркируются интересным круговым лейблом проекта Tomorrow.


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

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

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


#анимация #web

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

Сплошная тень
Забавная тень-заливка на карточках с нарочито мультяшным эффектом.


#web #модули

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

Наглядные параметры
Понравилось представление данных в новом кейсе Бюро про Гисметео. В панели синоптик может выбрать способ демонстрации данных на карте (например, закраской, изолиниями или кодом). В интерфейсе нужные параметры для наглядности проиллюстрированы мини-схемами около каждого пункта.


#интерфейс #web

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

Календарь
Календарь, который используется для демонстрации работ. Классная задумка и такое же классное исполнение.


#web

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

Ритм
Лонгрид про метро, в котором здорово обыгран ритм движения вагонов. Привычный дизайнерам параллакс становится органичным инструментом для передачи ощущения и метафоры движения вагона.


#web #анимация

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

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


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

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

Минималистичные лейблы
Приятные лейблы новинок в интернет-магазине Unique Fabric — без лишних плашек, фонов, иконок и мишуры.
Интересен не сам приём, а контекст: дизайнер может позволить себе такой минимум изобразительных средств, потому что этому способствует общая среда — все фотографии выдержаны в одном духе, у них слева всегда есть свободное пространство из ровного бежевого фона, и нет никаких дополнительных элементов, которые боролись бы за внимание (например, лейблов распродажи, хитов продаж, скидок, доставки и т.д.)


#web

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

Анимация тега
Классная анимация тега в заголовке. За наводку спасибо каналу Product design.


#ui #web #анимация

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

Объёмные карточки
Эффектная объёмная галерея с карточками-модулями: они собраны в барабан, искажаются в перспективе по скроллу и управляются по свайпу. Лучше смотреть вживую.


#модуль #web

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

Размытие
Вдогонку ко вчерашнему шоту ещё один типографический эффект в вебе — размытие по ховеру.


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

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