Динамика против статики и stop motion для интернет-магазинов. Это DIЧ

Где растёт агава: volcan.com

Сайт премиальной марки текилы Volcán De Mi Tierra от студии WILD. Голубая агава выращивается здесь прямо под склонами вулкана. Образ и упаковка продукта построена на этом факте. Промосайт продукта с большой историей, которую сделали центральным элементом сайта.

Дополнение реальности

Анимация — это иллюзия физики. Образы на сайте можно отлично усилить с её помощью. Разные трансформации, переходы и микроанимации. Всё работает на восприятие и атмосферу. К примеру, на сайте про спорт изображения могут «выпрыгивать» при появлении, и это будет хорошим дополнением смыслового составляющего сайта.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

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

Элегантная эстетика

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

Курсор в виде контурного ромба. Подводишь его к меню-гамбургеру, ромб становится квадратом, который обрамляет две полосы, и получается полноценная кнопка. Намёк на продолжение страницы в виде тонкой золотистой линии с надписью «Наша история». Чисто, нетривиально и при этом интуитивно понятно.

Пять копеек про звук

Не будем в очередной раз расписывать его важность. Но убрать его с сайта — всё равно что выключить экран или вообще весь JavaScript :–)

Цифровой дом моды: creationolivierlapidus.paris

Сайт с работами Оливье Лапидуса (Olivier Lapidus) от студии Werkstatt. Переосмысление ecommerce для люксовых брендов. Уникальная концепция с мощным контентом и навигацией.

Два в одном

Интернет-магазины часто делают не только каталог товаров, но и лукбук — место, где вещи можно посмотреть на моделях (или в интерьерах). Специально подобранные образы, композиции и локации помогают показать товар в наиболее выгодном свете.

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

Объёмный stop motion

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

Танцы!

В природе часто самые простые формы образуют невероятно сложные и красивые вещи. Flow/er — это визуальное стихотворение, позволяющее наблюдать сотворение природы через призму motion-дизайнера. Цифры и органика, геометрия и физика. Смотрите, как природные элементы сливаются в странном танце продуманной хореографии! Для любителей закулисья: видео с кусочками процесса отрисовки.

Как создаются бренды

Мир в движении: 29Rooms

Айдентика для сюрреалистического пространства от команды Refinery29, состоящего из 29 комнат, где каждая оформлена в своём стиле. Концепция — чудеса за каждой дверью.

Если у вас намечается мощная рекламная кампания или нечто, что будет транслироваться на цифровых носителях (десктопы, цифровые билборды, ТВ и так далее) — используйте в айдентике анимацию. Динамика всегда выигрывает перед статикой.

29Rooms о том, что необычные вещи скрываются в повседневных мелочах. Совместно с фотографом Роки Нолан (Rockie Nolan) авторы создали серию анимаций с яркими лентами и пузырями, возникающими из люков, зонтов и даже из самих людей. Кампания включала в себя серию иллюстраций, анимаций и росписей, написанных с помощью Colossal Media.

Ретро-нарко-бургерная: Big Fernand

«Большой Фернанд» — французская бургерная компания. Сеть разрослась по всему миру, рестораны можно найти во Франции, Дубае, Гонконге и Лондоне.

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

Эта история про смелое смешение стилей в графике. Ретро+современность, психодел и щепотка котиков. Отрисовали меню, этикетки для бутылок, вывески, штампы, газеты, карты и даже создали собственный шрифт. Отдельная пикантность — фирменные марки, которые клеятся на упаковку.

Без лишних слов: wefail.com

Это просто бомба. Открывайте просто ради наслаждения, с десктопа и со звуком. Сайт студии Wefail из Лос-Анджелеса. Даже не сайт, а полноценная игра, где главным героем путешествуешь по разделам (пасхалочка — можно взрывать крыс!). Истинно прекрасная наркомания по-настоящему отвязной студии.

Перевод годноты от DEADSIGN

Что дизайнер может почерпнуть из граффити? Amanda Oliver проанализировала работы граффитистов со всего мира и вывела общие принципы, которые помогут дизайнерам в работе. Например, что дизайн должен быть громче слов, чётким, эффективным и говорить сам за себя. Интересные и полезные рассуждения на примере работ Ройда, Бэнкси, Миллса и Джонстона. Изучайте любимое дело с новых ракурсов — выходите из зоны комфорта.

Ранее в сериале: Как сделать пользователя соавтором вашего сайта — разбираем наш собственный проект, который взял «Сайт дня» на CSS Design Awards и Awwwards, плюс два серебра на «Рейтинге Рунета».

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.