Фигма-чат вновь открыт

Всем привет! С момента закрытия чата 1 марта прошло полтора месяца и мы приняли решение вновь продолжить с новыми силами.

Наша команда надеется, что нам удастся удержать его в тематике Фигмы и взаимоуважительного общения по правилам.

Я вижу, что битвы в обсуждениях немного утихли, хотя это не отменяет ужас того, что происходит в Украине.

В этом чате по-прежнему не будет места политическим дебатам и призывам, за это мы будем мьютить. Если непременно хочешь выговориться, иди в комментарии @slashdesigner.

А вот весёлая история про массовое приглашение наших участников в клон Фигма-чата. Ну как тут не вспомнить песню группы Fleur - Формалин?

→ @figmachat

Unreal Engine 5 доступен для скачивания

Получил фидбэк, что стало мало постов #для_профи. Исправляем положение.

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

На сегодня наша норма в том, чтобы работать в Фигме, создавать дизайн-системы, продумывать сценарии работы с фильтрами и графиками на плоском экране, уметь делать современный UI. Эта парадигма не меняется уже довольно много лет.

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

5 апреля в открытый доступ вышла долгожданная новая версия игрового движка Unreal. На нём можно делать игры, моушн-дизайн, синематики (3D-мультфильмы), приложения для VR, архитектурные визуализации, виртуальные видеостудии. C такими мощными возможностями в плане графики для моушна Unreal может поконкурировать с After Effects. Главное преимущество работы в Unreal в том, что при внесении изменений в проект они видны сразу и чтобы их оценить, нет необходимости делать рендер. Это экономит много времени и делает работу над проектом более естественной.

В новой версии сразу две инновационные технологии — Lumen (перевод доки на русский) и Nanite (перевод).

Lumen — новая система динамического глобального освещения, которая позволяет значительно ускорить работу со светом: тени больше не нужно запекать в текстуры.

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

О новых возможностях движка год назад был впечатляющий демо-ролик.

Теперь единственным ограничением на пути к UE5 стали технические возможности компьютеров. И то, что в установленном виде он весит минимум 40 GB — не самое главное. Мой макбук 2018 года с 16 GB RAM и средненькой видеокартой Radeon Pro 555X с 4 GB видео памяти всегда казался мне мощным. Но я поставил на него UE5 и первый билд пустого проекта с подготовкой шейдеров занял больше часа, а навигация в пространстве возможна с просадкой до 20 FPS, поэтому Lumen остаётся мне пока недоступен. Чувствую, что под серьёзное погружение в UE явно придётся собирать отдельный компьютер.

Бонус: ещё одна демонстрация возможностей UE — ироничный синематик The Matrix Awakens Experience. Исходник проекта с городом доступен для бесплатного скачивания и разбора.

#для_профи #3D #Unreal

Ноушен блокирует российские аккаунты

В последнее время канал превратился в источник грустных новостей. Штош поделать, в такое время живём.

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

https://vc.ru/services/407771-notion-nachal-blokirovku-rossiyskih-akkauntov-tri-shaga-chtoby-spasti-svoi-dannye

Основа основ при работе с сеткой: Синхронизируем Nudge Amount и Grid

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

Базовая сетка хороша как для веба, так и для мобилок. Может использоваться параллельно с классической модульной 12-колонной, которая популярна у веб-дизайнеров. Нет смысла накладывать 12-колонную на базовую так, чтобы они сходились идеально, это стремление в никуда. Надо смириться с тем, что они существуют параллельно, чаще всего не бьются между собой. Они используются для разного: 12-колонник для плавающей ширины в адаптиве, а базовая для порядка в компонентах.

По гайдам Material для разработки мобильных приложений на Android долгое время рекомендовали использовать сетку 8 px (в их терминологии, dp), которую авторы Material называют Baseline grid. Но в моей практике она показала себя как слишком крупная для плотных интерфейсов, поэтому с годами я перешёл на 4 px. А потом она и в Material появилась. Теперь 4 px кажется всеобщим стандартом.

В мире iOS базовая сетка вообще нигде не упоминается, есть только Layout, который диктует отступы по краям экрана. Но для iOS я всё равно использую 4 px, потому что она даёт успокаивающее чувство контроля и ощущение пространства на холсте.

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


Теперь главное: Работу с сеткой значительно облегчает настройка шага, на который сдвигаются объекты при зажатом Shift

Это позволяет очень быстро и точно перемещать объекты с клавиатуры стрелками, не съезжая с сетки и лишний раз не прикасаясь к мыши.

Я развил эту идею для презентаций и стал использовать в них только 40 px. Она отлично ложится на слайд формата Full HD и ощущается просторно. Попробовав этот подход, ты всегда будешь смотреть на любые презентации в PowerPoint как на говно.

О том как настроить шаг сдвига Nudge Amount и включить сетку на фрейме, я написал инструкцию для новой версии справочника по Figma.

Кстати, на slashdesigner.ru/f уже можно найти свыше 100 таких страниц о функциях Figma с примерами. Их можно фильтровать по типам меню и искать через поиск. Этот справочник буду анонсировать по готовности, но им можно пользоваться уже сейчас.

@slashdesigner #первые_шаги #сетка #Figma

Пример: сетка 10 px синхронизирована с шагом сдвига

Большое обновление DaVinci Resolve 18 с облачной синхронизацией

Продолжаю экспериментировать с темами канала и рассказывать о новых интересных инструментах. Сегодня поговорим о монтаже видео.

Базовое умение монтировать видео для любого дизайнера совершенно необходимо, если есть задача, чтобы портфолио выделялось. Это даёт возможность выбраться из рамки «картинка-текст» и на новом уровне демонстрировать свои работы, показать себя живьём, нарезать 3D-мокапы, делать динамичные титры, накладывать музыку и звуковые эффекты.

Лучшее приложение для старта в монтаже на сегодня — DaVinci Resolve от Blackmagic Design. Оно доступно на macOS и Windows, кроме того, в отличие от сверхпопулярного Premiere Pro от Adobe, оно бесплатно. Модель монетизации продукта строится на продаже профессиональных железок и камер, которые плотно интегрированы с DaVinchi.

Вышла публичная бета DaVinci версии 18, в которой можно синхронизировать работу в реальном времени между несколькими клиентами приложения, как в Figma. Для этого появился режим Multiple User Collaboration, который пока едва ли пригоден для повседневной работы, однако в нём есть большой потенциал. Вот обзор про то, как работает облачная синхронизация в DaVinci от Кейси Ферриса. В видео он и его напарник спотыкаются о шероховатости процесса и веселятся. Коллаборация работает не моментально, но то, что она в принципе возможна в таком сложном продукте — это очень круто. Эта возможность была в предыдущих версиях, но для того чтобы она завелась, нужно было поднимать свой сервер. Теперь всё работает через Blackmagic Cloud даже в бесплатной версии.

Об обновлениях подробно рассказал Женя Тен.

До этого отсматривать сырой материал перед монтажом и коллективно вносить правки можно было в сервисе frame.io, который не является полноценным монтажным приложением.

Да, Premiere Pro всем привычен и позволяет выполнить любую задачу монтажа. Да, для него есть множество плагинов и туториалов, но вкладывать время в его изучение сегодня я бы не стал. DaVinci — один из тех продуктов, которые когда-нибудь позволят отказаться от подписки на Creative Cloud.

Более подробно сравнивал DaVinci и Premiere Pro в своём видео Сабатовский. Спойлер: он сам остался на Premiere Pro, потому что считает себя дедом, не хочет переучиваться, хотя видит минусы Премьера.

Основываясь на своём опыте, я бы подобрал бы эпитеты так:

DaVinci 17 — незнакомый, свежий, технологичный, стабильный, быстрый, бесплатный.

Premiere Pro — привычный, перегруженный, медленный, устаревший, вылетающий, платный, Adobe.

Если есть желание погрузиться в DaVinci, рекомендую часовой крэш-курс от Жени.

Поделись мнением в комментариях: в чём пробовал монтировать? Полезно ли уметь?

#для_профи #монтаж #DaVinci

На /designer нужен стенографист

Апдейт: набор кандидатов завершён

Вижу много годного контента, который понятно как каталогизировать на slashdesigner.ru. Не имею времени его оформлять сам. Долгие обучающие видео и лекции удобно сначала сканировать глазами в виде текста, прежде чем решить, что их надо смотреть.

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

Требования: экран Retina или с аналогичной плотностью пикселей, печать слепым методом 80 lvl, хороший письменный русский, желание прокачиваться в дизайне, много свободного времени. Английский будет преимуществом.

Оплата по хронометражу. Будет тестовое на 5 минут видео.

#UI_ревью
3. Анимация приложения для горных прогулок

Автор:
Iryna Makiievska для Fireart Studio, Польша

Шот в статике

Восстанавливаю забытую рубрику про UI и анимацию. В ней планирую публиковать не только красочные шоты, но так же и разбор фишек. Также прикладываю уроки, которые помогут повторить эту работу.

Я разделил ролик на 3 условных сцены: онбординг, маршрут и экраны плиткой.

Комментарии по каждой сцене →

Инструменты:

1. Blender или C4D для рендера гор. Как сделать похожие горы в Blender

2. Experience Design для сборки макета и экспорта его в After Effects. Можно и в Figma, но сложнее экспорт: Figma → SVG → Illustrator → AE.

3. AE для общей анимации. Как анимировать макет в АЕ

Что круто:

1. Вау-эффект построен на том, что зритель не сможет осознать такое количество движения с первого раза.

2. Вайб ретровейва: cочетание фиолетовых неоновых 3D-гор и UI в тёмной теме.

3. Видео зациклено бесшовно, что даёт ощущение его бесконечности и гипнотизирует.

#первые_шаги #анимация