✨ SBS-анимация фоновых картинок

Для оживления любого блока можно поставить на фон видео или написать код для эффектного слайдера, а можно воспользоваться тем, что дает нам сама Тильда и собрать вручную зацикленную пошаговую анимацию с плавной сменой фоновых картинок. Делюсь с вами готовым шаблоном с анимацией для бесконечного слайдера из семи изображений, которые медленно увеличиваются и плавно сменяют друг друга через прозрачность — Template id: 148628486 ✨ Примечания: 🧡 Если вам надо уменьшить или увеличить количество картинок, соответственно отнимайте или добавляйте ко времени ожидания (delay) 6 секунд за каждое убранное или добавленное изображение. ❤️ Сами картинки удаляйте, начиная с предпоследней (или добавляя после предпоследней), первую и последнюю не удаляйте, только меняйте время. 💜 Если вместо эффекта увеличения нужен другой, например, сдвиг вверх или вниз, то напишите мне, я помогу объяснить какие настройки требуются, тут не все так просто 😅 ❤️ Любые вопросы по анимации можете задать в комментариях к посту #тильда #верстка

Команда дизайна и исследований Делимобиля собрала гайд по безопасным интерфейсам для сервисов, которыми могут пользоваться в машине. Это не только про карты и навигацию. Сюда же попадают звонки, музыка, заправки и любые сценарии, которые человек хотя бы теоретически может открыть во время движения. Важная рамка здесь простая: сначала нужно спросить не «как сделать удобнее», а «должен ли водитель вообще делать это за рулём». Если нет, функция должна уходить в режим стоянки или автоматизироваться. Если да, интерфейс проектируется по другим правилам: меньше действий, выше читаемость, крупнее цели, понятнее состояние, меньше визуального шума. На скорости 60 км/ч одна секунда взгляда в экран это уже 16 метров без полноценного внимания к дороге. Внутри: – Почему водительский интерфейс нельзя считать упрощённой версией мобильного приложения; – Как решить, можно ли вообще оставлять сценарий доступным во время движения; – Почему лучшая функция для водителя часто та, которая не требует действия; – Какие правила помогают оценивать читаемость, контраст, шрифты и анимации; – Что разрешено делать за рулём, а какие сценарии лучше блокировать до стоянки; – Из каких компонентов собирать безопасные экраны для машины; – Почему дизайн-решения здесь оцениваются не только по удобству, но и по риску отвлечения; – На какие стандарты опирается гайд: ГОСТ, ISO, NHTSA и Android Automotive. ➡️ Читать гайд ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Я кайфанул от статьи, это прям продуктово покопаться в таком незначительном элементе) Даня из команды Транспорт в 2ГИС рассказывает, как в навигаторе запускали подсказку для проезда светофоров без лишних остановок. Идея звучит просто: если известны состояния светофоров по маршруту, можно подсказать водителю скорость, при которой он попадёт в зелёную волну. Но в машине простой идеи недостаточно, потому что каждый новый элемент на экране конкурирует не с красивой пустотой, а с дорогой, маршрутом, манёврами, камерами и вниманием водителя. Самое интересное в кейсе, как команда искала форму для этой подсказки. Текстовые сообщения оказались слишком тяжёлыми, одно число требовало постоянного сравнения, а зона спидометра уже была занята предупреждениями. В итоге решение собралась из двух слоёв: плашка с диапазоном скорости даёт точность, а аналоговая шкала с зелёной зоной помогает быстро понять, в потоке ты или нет. Отдельно сильная часть кейса, что дизайнер не остановился на макетах, а полез в математику стрелки, код и параметры анимаций, чтобы фича доехала до релиза в нужном виде. Внутри: – Почему «просто показать скорость» оказалось плохой постановкой задачи; – Как интерфейс навигатора ограничивает любое новое решение; – Почему зелёная волна должна ощущаться как состояние, а не как уведомление; – Как диапазон скорости оказался понятнее одного целевого числа; – Зачем в интерфейсе появился аналоговый спидометр с зелёной зоной; – Как анимации помогают дать обратную связь без лишнего шума; – Почему дизайнеру пришлось проверять техническую реализацию самому; – Что 2ГИС планирует добавить дальше: награды за серию зелёных светофоров и новые города. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Воркшоп | 21.06 12:00 | «Моушн на слух: визуализируем звук в After Effects» 21.06 в 12:00 разберёмся, как визуализировать звук и музыку через движение, форму и трансформацию объектов в After Effects. Спикер: Евгения Никонова — моушн-дизайнер в Rambler&Co, новый куратор курса БМГ. Ex-ревьюер в Яндекс Практикуме, преподаватель, выпустила более 300 студентов. Работала с Авито, ВТБ, VK, Купер, ВДНХ, Ростех и другими На воркшопе разберём базу ключевой анимации, траекторию и приёмы трансформации объектов. Покажем, как синхронизировать вайб трека с графикой и собрать видеоарт на свою музыку. В финале Женя даст фидбек по работам участников. По итогам у вас: — видеоарт на ваш трек — базовый навык работы в After Effects и моушн-дизайне — лайфхаки и обратная связь от куратора Воркшоп подойдёт новичкам и тем, кто ни разу не открывал программу. After Effects нужно будет установить заранее, ссылкой поделимся. [ занять место ] любые вопросы можно задать в @alkali_support_bot

моушн-событий июня! ❤️ начнём отсюда ❤️ Вебинар | 14.06 12:00 | «Как моушн превращает кейсы в вау-презентацию» 14 июня в 12:00 по мск разберём, как моушн-дизайн помогает усиливать портфолио и продавать проекты быстрее. Статичные работы можно показать динамично: через анимацию, ритм, акценты. Моушн помогает за несколько секунд объяснить идею, удержать внимание и сделать так, чтобы портфолио хотелось досмотреть до конца. Спикер: Евгения Никонова — моушн-дизайнер в Rambler&Co, новый куратор курса БМГ. Ex-ревьюер в Яндекс Практикуме, преподаватель для абитуриентов, выпустила более 300 человек. Еx-арт-директор в креативном агентстве полного цикла НСМ, сотрудничала с Авито, ВТБ, VK, Купер, ВДНХ, Ростех и другими. 1. Посмотрим, в каких областях дизайна можно применять моушн (спойлер: везде, даже в книгах) 2. Разберём примеры выигрышного использования анимации в портфолио, на которое залипнут работодатели 3. Личный опыт Жени, как за счет моушн-дизайна повысить свой чек, а в конце ответим на все вопросы участников [ бесплатная регистрация ]

Люблю анимацию про кинетическую, подвижную типографику. Особенно как промо и попытку привлечь внимание дизайнеров. Дизайн для дизайнеров от дизайнеров. Десятилетний юбилей шрифтовой студии Blaze Type. Обновили сайт по этому поводу.

Анимированные логотипы становятся все более популярными для размещения их на сайтах. Многие бренды анимируют существующие логотипы или создают новые модные варианты анимации. Анимированный логотип приковывает взгляд и нарушает однообразие дизайна благодаря движению. Лучше сделать анимацию понятной и простой. Слишком сложный интерактивный логотип может оказывать противоположный эффект. Пользователям будет трудно его прочитать или понять его суть. Figma

СПОРТ КЛУБ Щ® х REP CHESS x 3DЩ совместно с креативной мастерской керамики ТЫ ЧО ТВОРИШЬ создай 3D модель чемпионского кубка в виде шахматной фигурки! Формат: изображение или видео 1920 x 1920 (квадрат) статика (png) или анимация (вращение, до 10 сек, mp4) черный фон (важна именно форма) краткое описание концепта приветствуется! Критерии: Критериев, кроме эстетического, нет, но есть нюансы: 1) модель должна быть не более 30см в высоту и ширину 2) модель не должна иметь острые углы 3) модель не должна иметь слишком мелких деталей Призы: 10.000 рублей сертификат на шахматное обучение от Rep chess edu сертификат на мастер-класс от студии «Ты чо творишь» Дедлайн: 13 июня Работы присылать под этот пост!

Нежный и дерзкий эльзевир… Это всё о Хельзе Ника Недашковского — стройной и эксцентричной антикве для заголовков и коротких текстов. В Хельзе есть ноги-шпоры «R», шипастая «К», политонический греческий, тире и двоеточие, выравнивающиеся по центру прописных, есть цифры на все случаи жизни и математические символы в индексах. Что ещё спрятано внутри этой антиквы, а также истории о шрифтовых пасхалках — в статье Ника «Helsa Display — история, картинки и разговоры». Рисунок букв Хельзы основан на голландских образцах, а в деталях есть отсылки и к американским шрифтовым каталогам, и к литерам из словолитен Вольфа и Гербека. И теперь вся эта красота ожила благодаря курсу Кирилла Пестовского Motion Type на площадке школы «Вольница». Мы обещали, что буквы будут танцевать. И это случилось. Автор анимации Хельзы: @daryatokk Если понадобится промокод на Хельзу, играйте в игру от наших партнеров — SPELLLENS, где нужно собирать три в ряд, только с диджитал-брендами 🐶

Держите ссылки на сервисы из этого видео: — Jter — Rive — SVGator — LottieFiles — Haiku Animator #подборка #лайфхаки

Waymo разрабатывает технологию полностью беспилотных такси. Увидела статью в New York Times и пошла с Клодом проверять, а что же по доступности? А они-то молодцы! Начали ей заниматься давно. Причем как физической, так и цифровой! Клод сделал интерактивный отчёт со всеми WCAG-критериями, user journey и рекомендациями → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/ А тут давайте тут расскажу, что мне очень понравилось. Заказать поездку можно только через мобильное приложение Waymo One. После вызова к вам приезжает полностью пустой электромобиль и всё взаимодействие от посадки до климат-контроля и музыки идёт через приложение. И вот его-то и разберем. · Приложение работает с VoiceOver (iOS) и TalkBack (Android). Во время поездки информация дублируется голосом, включая статусы («машина приехала», «можно отстегнуть ремень»). · Audio guidance («Голосовые подсказки»): при приближении к автомобилю приложение через динамик телефона проговаривает расстояние и направление. · Honk to find («Посигналить для поиска»): кнопка в приложении удалённо подаёт звуковой сигнал автомобиля. · Световые сигналы фар: визуальный аналог гудка для глухих и слабослышащих. · Extra time to board: пассажир может заранее выбрать увеличенное время на посадку, чтобы водительский автомобиль дольше ждал. · Braille-надписи на кнопке двери и поручнях. · Текстовые субтитры всех голосовых объявлений на экране в салоне. · Приложение минималистично. Основной экран — это карта с минимумом элементов. Как же это важно! · Фирменная анимация «радара». При поиске машины над кнопкой появляется вращающаяся дуга, напоминающая лидар-сканер. Такой индикатор активности системы. · Микро-взаимодействия и тактильная отдача. Когда машина подъезжает, телефон даёт характерную вибрацию. Анимация подсказывает, с какой стороны и на каком расстоянии автомобиль. · Инициалы на крыше. При заказе пассажир может включить отображение своих инициалов на куполе автомобиля. Приложение подсказывает: «Ищите свои буквы». Ну гениально же ) · Waymo проводит регулярные юзабилити-сессии с участием людей с нарушениями зрения, слуха, подвижности и когнитивными особенностями. Недоработки тоже есть и они в отчете → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/

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

Появилась возможность добавлять анимацию для иконок в кнопках Zero Block. Например, анимацию увеличения (Scale) или прозрачности (Opacity). Это поможет акцентировать внимание пользователей на важных действиях и сделает интерфейс сайта более отзывчивым. Где найти: Настройки (Settings) 👉 Иконка (Icon) 👉 Анимация (Animation) #tildaupdates

Смотреть

Пошаговый гайд по созданию анимированной плашки звонка в After Effects. Вдохновившись этим примером можно создать практически любую плашку быстро и просто! #aftereffects

пересобирались и улучшались в течение трёх месяцев, зацените! что это за курс? БМГ — стартовый курс по моушн-дизайну по созданию анимации для брендинга, плакатов и графики, работе с векторной графикой и оживлению статичных проектов. В ходе курса вы не только освоите программу After Effects и базовые принципы анимации, но и углубитесь в процесс создания динамичного контента: от анимации логотипов и плакатов до стильных титров и рилсов для социальных сетей. Вы узнаете, как работать с векторной графикой, звуком и ритмом, а также получите инсайты из реальной практики моушн-дизайна и советы по применению анимации в брендинге и рекламе. кому подойдёт? новичку в индустрии дизайна и анимации начинающему моушн-дизайнеру графическому дизайнеру начинающему арт-директору и многим другим, кто хочет эффектно оживлять статику — будь то портфолио, брендинг, плакат или стикер. динамичное > статичное чем научитесь? — истории и теории моушн графики и базовым принципам анимации — основам работы в профессиональных программах для монтажа и анимации — созданию вертикальных и горизонтальных динамичных роликов, от рилсов до шоурилов — научитесь анимировать текст, логотипы, плакаты, фирменную графику, работать со звуком, ритмом, композицией — познакомитесь с анимацией через нейросети 🔡 новый куратор 🔡 Никонова Евгения — моушн-дизайнер в Rambler&Co, иллюстратор и преподаватель. ex-ревьюер на курсе моушн-дизайна в Яндекс Практикуме, ex. арт-директор в онлайн-школе «Шизайн» выпустила более 300 студентов, победитель Typomania, участник выставок. создавала графику и анимацию для Avito, ИРИ, ВТБ, Купер, Мегафон, Россия-Культура, VK, Ростех, ВДНХ и других компаний всего 20 мест, стартуем 29-го июня 🤩 программа курса 🤩

Выложили наши самые заметные кейсы, большинство из которых ещё не освещали в канале — переходите любуйтесь! Сайт будет постепенно пополняться, следите за обновлениями #Щстудия❤️ Сайт - https://alkali.design Напоминаем, что мы открыты к сотрудничеству: • брендинг • анимации (2D, 3D) • VFX • AI • графический дизайн и любые другие креативные задачи для заказа услуг заполняйте форму на сайте, либо пишите в тг @appoligeya *рекомендуем смотреть с ПК и без ВПН, т.к из-за ограничений сервисов на мобильном устройстве могут единично возникать баги