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

ursamajorsupercluster.com

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

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

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

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

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

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

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

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

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

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

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

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. А наши требования к ним — вот тут.