Динамика против статики и stop motion для интернет-магазинов. Это DIЧ
Red Collar собирает лучшие дизайнерские проекты и раскрывает секреты их магнетизма. Постарайтесь не моргать.
Где растёт агава: volcan.com
Сайт премиальной марки текилы Volcán De Mi Tierra от студии WILD. Голубая агава выращивается здесь прямо под склонами вулкана. Образ и упаковка продукта построена на этом факте. Промосайт продукта с большой историей, которую сделали центральным элементом сайта.
Дополнение реальности
Анимация — это иллюзия физики. Образы на сайте можно отлично усилить с её помощью. Разные трансформации, переходы и микроанимации. Всё работает на восприятие и атмосферу. К примеру, на сайте про спорт изображения могут «выпрыгивать» при появлении, и это будет хорошим дополнением смыслового составляющего сайта.
Мексика — жаркая страна, а уж вулканы и подавно ассоциируются с пеклом. Фоновые фотографии исказили так, будто они «наливаются» в экран, подобно напитку в бокал. А тексты в главах трансформируются как пейзаж в знойный день, да ещё и реагируют на движение курсора.
Элегантная эстетика
Дизайн интерфейса — техническая сторона сайта, она помогает посетителю ориентироваться в пространстве. Здесь опасно ставить смелые эксперименты: стоит сделать привычную кнопку неузнаваемой, и пользователь запутается, разозлится и уйдёт с сайта. При этом раздражение вызовет не столько сайт, сколько сам бренд. Будьте аккуратными, но смелыми, делайте так, чтобы всё пространство было гармоничным и запоминающимся.
Курсор в виде контурного ромба. Подводишь его к меню-гамбургеру, ромб становится квадратом, который обрамляет две полосы, и получается полноценная кнопка. Намёк на продолжение страницы в виде тонкой золотистой линии с надписью «Наша история». Чисто, нетривиально и при этом интуитивно понятно.
Пять копеек про звук
Не будем в очередной раз расписывать его важность. Но убрать его с сайта — всё равно что выключить экран или вообще весь JavaScript :–)
Цифровой дом моды: creationolivierlapidus.paris
Сайт с работами Оливье Лапидуса (Olivier Lapidus) от студии Werkstatt. Переосмысление ecommerce для люксовых брендов. Уникальная концепция с мощным контентом и навигацией.
Два в одном
Интернет-магазины часто делают не только каталог товаров, но и лукбук — место, где вещи можно посмотреть на моделях (или в интерьерах). Специально подобранные образы, композиции и локации помогают показать товар в наиболее выгодном свете.
Авторы совместили лукбук и каталог и сделали это, на наш взгляд, невероятно круто и профессионально. Инновационная вещь. Одежда из коллекции представлена на моделях, которые стоят полукругом, как на подиуме, а при приближении сетка равномерно растягивается и появляются стрелки для перелистывания.
Объёмный stop motion
Минус интернета при продаже вещей — невозможность их пощупать, увидеть «вживую». А одежда вообще непонятно как будет сидеть, как выглядеть в движении. Фотографиям, какими бы качественными они ни были, не хватает объёма.
Новое решение — ряд фотографий снятых в 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. А наши требования к ним — вот тут.