Exiterra
05 октября 2017, 18:35

DIЧ № 21: микроанимации и минизадания правят вебом — и это надолго

Red Collar собирает лучшие дизайнерские проекты и раскрывает секреты их магнетизма. Постарайтесь не моргать.

ursamajorsupercluster.com

Сайт URSA MAJOR SUPERCLUSTER от одноимённого агентства в коллаборации с дизайнером Даниэлем Спатзеком (его сайтом мы любовались ещё в четвёртом выпуске).

Экран по секторам

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

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

Нестыдные пиксели

Превращать обыденность в тренды и концептуальность — легко. То, что раньше казалось УГ и стремотой, начинает играть новыми красками, если грамотно вписано в концепцию.

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

Получи сертификат Digital Project Manager!

25 октября в Москве пройдет первая очная сертификация RDC по позиции Digital Project Manager.

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

Запись на очную сертификацию Digital Project Manager 25 октября — на этой странице. Cossa рекомендует!

Реклама

g-star.com

Сайт голландского молодёжного бренда одежды G-Star Raw от студии Cartelle. Промо новой коллекции одежды: дерзкой, современной, передающей сам стиль жизни.

Бесконечность и конечность

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

Например, отснять одежду и сделать мини-гифки, разбросанные по экрану. Порядок в хаосе.

Впрочем, у проекта два варианта просмотра: хаотичный, отвечающий духу бренда, и стандартная сетка. Авторы позаботились о пользователе, дали ему выбор и повысили уровень комфорта на сайте.

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

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

Музыкальная пауза

Adult Swim — проект телеканала Cartoon Network. Сайт с интерактивной крутотой, который в течение 52 недель выдаёт по новому треку в неделю. Для каждой композиции — своя интерактивная визуализация, сделанная на WebGL.

О брендинге

Презентация новой коллекции вещей COACH x Keith Haring

Coach Inc. совместно с дизайнером Китом Харингом (Keith Haring) создали коллекцию одежды и аксессуаров. Проект должен показать, как художник творил неповторимый стиль коллекции, и как его рисунки воплощаются на предметах. Это грандиозная и сложная (даже физически) работа: продуманный сценарий, море реквизита, специально созданные для съёмки вещи.

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

Конкурс и конференция в одном флаконе — INNOVATION 2017

Уникальное мероприятие, на котором рассматриваются работы с новаторскими решениями в области стартапов и электронной коммерции.

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

Миксуй мимикой!

Проект для группы Męskie Granie. С помощью технологии захвата движения (motion capture) можно управлять музыкой, гримасничая перед веб-камерой. Зажигайте!

Перевод от DEADSIGN

В этот раз перевели статью для фронтенд-разработчиков от Офера Вишну (Opher Vishnia). Рассказываем и показываем три способа повторения анимации: с помощью Sass, GSAP и Web Animations API. Про пошаговую анимацию и плавность, важность задержки и счёт элементов. Дизайнерам тоже будет полезно узнать, сколько расчётов и выверенных формул скрывается за простейшей, на первый взгляд, анимацией.

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

Не пропустите!

15 базовых SEO-советов о том, что сделать при переносе сайта на новый движок
24ttl — digital-агентство с экспертизой в креативе и стратегии и работе с крупным бизнесом
5 свежих сервисов для увеличения конверсии интернет-магазина
Ссылки в Instagram: где ставить, куда вести, что рекламировать
7 простых правил оформления посадочных страниц
Ситуативный маркетинг на ЧМ-2018: как Domino’s Pizza обошла конкурентов, сохранив почти весь бюджет
Как делать рассылку, от которой не отпишутся: главные принципы полезной и интересной рассылки
Новые форматы мобильной рекламы: проверьте, всё ли вы успели опробовать
«Синдром FoMO в каждом из нас». Детали рекламной кампании финансового сервиса
Как мы создали базу знаний по SMM, подключили к чатботу и теперь собираем подписчиков
Как мы делаем SEO для интернет-магазина сантехники
«Почему так дорого? Я видел, вон там намного дешевле!» О демпинге в SMM и его последствиях

Комментарии:

Реклама


📰 Чем живёт digital.
Главное — в рассылке:




Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Вконтакте, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой