/designer
Источник видео
Гифки в Фигме и как их применять
Фигма делает правильный шаг, чтобы добавить нашим прототипам жизни: теперь можно добавлять в макеты гифки.
При этом во время работы над макетом они не проигрываются, экономя дизайнеру психику.
Это очень важное улучшение, которое давно напрашивалось. Это не про вставку в макеты смешных котиков и мемов. Это совершенно новое измерение прототипа, которое делает его гораздо более убедительным для зрителя.
Допустим, ты задумал сделать на сайте видео-фон. Есть огромная разница в восприятии обычного фото-фона и движущегося видео-фона, пусть даже со скидкой на плохое качество GIF-изображения.
При помощи ScreenFlow я нарезал из этого видео фрагмент, который использовал в качестве видео-фона в макете размером 1280х720. Я сделал тестовый проект, для которого сохранил гиф-видео в 6 вариантах качества, чтобы можно было подобрать оптимальные настройки. Сделал три размера холста гифки: 100%, 50% и 25%. Два значения FPS: 15 и 8. Самая тяжёлая гифка весит 51 мб, имеет лучшее качество и FPS, но гарантированно заставит зрителя ждать даже на быстром интернете. На моих офисных 20 мбит это ожидание заняло ровно минуту, что отсекает такой вариант. Самая лёгкая гифка весит 2,3 мб. Она загружается почти мгновенно, но она самая уродливая и с низким FPS.
Мой выбор пал на вариант 640х360 с FPS 8, которая весит почти 8 мб. По ощущениям просаживаться по FPS легче, чем терять в деталях.
Больше идей о том, как применить гифки в прототипах — в посте Фигмы.
Исходник в Фигме →
Прототип →
—
#для_профи #UI_анимация
Фигма делает правильный шаг, чтобы добавить нашим прототипам жизни: теперь можно добавлять в макеты гифки.
При этом во время работы над макетом они не проигрываются, экономя дизайнеру психику.
Это очень важное улучшение, которое давно напрашивалось. Это не про вставку в макеты смешных котиков и мемов. Это совершенно новое измерение прототипа, которое делает его гораздо более убедительным для зрителя.
Допустим, ты задумал сделать на сайте видео-фон. Есть огромная разница в восприятии обычного фото-фона и движущегося видео-фона, пусть даже со скидкой на плохое качество GIF-изображения.
При помощи ScreenFlow я нарезал из этого видео фрагмент, который использовал в качестве видео-фона в макете размером 1280х720. Я сделал тестовый проект, для которого сохранил гиф-видео в 6 вариантах качества, чтобы можно было подобрать оптимальные настройки. Сделал три размера холста гифки: 100%, 50% и 25%. Два значения FPS: 15 и 8. Самая тяжёлая гифка весит 51 мб, имеет лучшее качество и FPS, но гарантированно заставит зрителя ждать даже на быстром интернете. На моих офисных 20 мбит это ожидание заняло ровно минуту, что отсекает такой вариант. Самая лёгкая гифка весит 2,3 мб. Она загружается почти мгновенно, но она самая уродливая и с низким FPS.
Мой выбор пал на вариант 640х360 с FPS 8, которая весит почти 8 мб. По ощущениям просаживаться по FPS легче, чем терять в деталях.
Больше идей о том, как применить гифки в прототипах — в посте Фигмы.
Исходник в Фигме →
Прототип →
—
#для_профи #UI_анимация
Вышел выпуск подкаста @design_takoy с моим интервью
На протяжении 40 минут поговорили об инструментах для интерактивного дизайна: Фигме, Фреймере, Скетче, о моей книге про Фигму, куда имеет смысл развиваться современному продуктовому дизайнеру и как не быть инфоцыганом.
Слушай выпуск в Apple Podcasts →
В интервью я сказал, что тот, кто учит дизайну, обязан иметь публичное портфолио. Поэтому, это интервью было бы не до конца честным, если бы я не поделился своим:
bit.ly/okunev-portfolio
На Дизайн Такой можно подписаться где удобно:
Apple Podcasts
Castbox
Soundcloud
Интервью можно обсудить в @designchat2.
—
#интервью
На протяжении 40 минут поговорили об инструментах для интерактивного дизайна: Фигме, Фреймере, Скетче, о моей книге про Фигму, куда имеет смысл развиваться современному продуктовому дизайнеру и как не быть инфоцыганом.
Слушай выпуск в Apple Podcasts →
В интервью я сказал, что тот, кто учит дизайну, обязан иметь публичное портфолио. Поэтому, это интервью было бы не до конца честным, если бы я не поделился своим:
bit.ly/okunev-portfolio
На Дизайн Такой можно подписаться где удобно:
Apple Podcasts
Castbox
Soundcloud
Интервью можно обсудить в @designchat2.
—
#интервью
Правило близости
Читать в Медиуме →
Давно не писал ничего обучающего для самых маленьких. Сегодня поговорим о фундаментальном правиле восприятия. Если понимаешь эту конепцию и видишь косяки в отступах, ты уже сделал огромный шаг от джуна к мидлу.
Моя формулировка:
Восприятие человека группирует друг к другу близкие объекты и отделяет далёкие. Размер объектов и отступы между ними определяют их иерархию.
Если следовать этому принципу, это значительно облегчит жизнь твоим пользователям. Я разобрал на практике как это делать и показал ошибку в дизайне Телеграма.
—
#первые_шаги #вёрстка
Читать в Медиуме →
Давно не писал ничего обучающего для самых маленьких. Сегодня поговорим о фундаментальном правиле восприятия. Если понимаешь эту конепцию и видишь косяки в отступах, ты уже сделал огромный шаг от джуна к мидлу.
Моя формулировка:
Восприятие человека группирует друг к другу близкие объекты и отделяет далёкие. Размер объектов и отступы между ними определяют их иерархию.
Если следовать этому принципу, это значительно облегчит жизнь твоим пользователям. Я разобрал на практике как это делать и показал ошибку в дизайне Телеграма.
—
#первые_шаги #вёрстка
Medium
Правило близости
Очень важный пост для начинающих. Фундаментальное правило восприятия, которое не всегда осознают даже опытные дизайнеры.
❤1
Creative IT Talks — это трансляции-беседы на Ютюбе с креативными людьми из IT.
Первая беседа состоится в пятницу, 26 июля 2019, в 19:00 по Москве и гостем на ней будет иллюстратор и аниматор Настя Абрамова.
Настя училась в Хельсинки, рисовала иллюстрации для Snapchat, Google, The Village и Flow festival. Одна из авторов проекта Good & Bad Stuff — забавный блог двух иллюстраторов о их жизни в Финляндии.
Настя собирается рассказать:
- О начале карьеры иллюстратора
- как попала в веб и стоило ли оно того
- про дизайн-процессы и работу в команде
- как не зависеть от вдохновения
- как найти авторский стиль
- об удалённой работе и путешествиях
Трансляция →
—
#первые_шаги #иллюстрация #анонсы
Первая беседа состоится в пятницу, 26 июля 2019, в 19:00 по Москве и гостем на ней будет иллюстратор и аниматор Настя Абрамова.
Настя училась в Хельсинки, рисовала иллюстрации для Snapchat, Google, The Village и Flow festival. Одна из авторов проекта Good & Bad Stuff — забавный блог двух иллюстраторов о их жизни в Финляндии.
Настя собирается рассказать:
- О начале карьеры иллюстратора
- как попала в веб и стоило ли оно того
- про дизайн-процессы и работу в команде
- как не зависеть от вдохновения
- как найти авторский стиль
- об удалённой работе и путешествиях
Трансляция →
—
#первые_шаги #иллюстрация #анонсы
Что могут и не могут плагины в Фигме
Читать в Медиуме →
Я нашёл интереснейший текст в документации к API плагинов — What’s Supported и разобрал его в статье.
Он написан для разработчиков плагинов и раскрывает, что Фигма может им разрешить, не допустив при этом крэша клиента, тормозов и утечки персональных данных.
Кратко: Плагин имеет доступ только к структуре локального файла, открытого в Фигме.
Плагины могут менять его структуру, но с ограничениями. Могут рисовать и автоматизировать рутины.
Не могут работать в реальном времени, работать в браузере, менять интерфейс самой Фигмы и выходить за рамки локального файла.
—
#для_профи #плагины
Читать в Медиуме →
Я нашёл интереснейший текст в документации к API плагинов — What’s Supported и разобрал его в статье.
Он написан для разработчиков плагинов и раскрывает, что Фигма может им разрешить, не допустив при этом крэша клиента, тормозов и утечки персональных данных.
Кратко: Плагин имеет доступ только к структуре локального файла, открытого в Фигме.
Плагины могут менять его структуру, но с ограничениями. Могут рисовать и автоматизировать рутины.
Не могут работать в реальном времени, работать в браузере, менять интерфейс самой Фигмы и выходить за рамки локального файла.
—
#для_профи #плагины
Medium
Что могут и не могут плагины в Фигме
Что произошло с выходом плагинов: анализируем новые возможности.
Временно бесплатен: Complete ARKIT 2.0 : Build 15 Apps for iOS12 with Scenekit
Записаться на Udemy →
Делюсь годнотой. Это курс для разработчиков про то, как использвоать дополненную реальность в своих приложениях. Если ты в общих чертах освоил Xcode и Swift, надо срочно кликать Enroll.
Автор выложил в App Store демо-проект, который показывает, чему научимся.
Кстати, в этом году вышел большой апдейт — ARKit 3, подробнее о котором можно узнать в докладе Introducing ARKit 3 c WWDC 2019.
И курс и доклад на английском.
—
#для_профи #AR
Записаться на Udemy →
Делюсь годнотой. Это курс для разработчиков про то, как использвоать дополненную реальность в своих приложениях. Если ты в общих чертах освоил Xcode и Swift, надо срочно кликать Enroll.
Автор выложил в App Store демо-проект, который показывает, чему научимся.
Кстати, в этом году вышел большой апдейт — ARKit 3, подробнее о котором можно узнать в докладе Introducing ARKit 3 c WWDC 2019.
И курс и доклад на английском.
—
#для_профи #AR
Forwarded from Дизайн-Афиша
Организаторы секции «Дизайн» на G8 запустили прямую трансляцию с Хлебозавода.
Посмотреть лайв можно здесь:
https://youtu.be/whN5X91Nulc
Посмотреть лайв можно здесь:
https://youtu.be/whN5X91Nulc
/designer 2 года!
Всего 2 года назад, 31 августа 2017 я завёл этот канал, чтобы делиться знаниями о дизайне интерфейсов.
Он открыл мне многие двери и позволил познакомиться с кучей крутых людей. Я получил огромное количество положительных отзывов и это было приятно. Важнейшим событием в жизни канала стал мой переход на Фигму, и как следствие, книга.
На дизайн-блог меня вдохновило русское издание журнала Digital Creative Arts, который выходил в 2005, выдержал 6 выпусков и закрылся. Он был мощным пинком для развития кругозора и погружения в дизайн. Теперь при желании все его выпуски можно найти в PDF.
Другим ингредиентом в канале стала книга Максима Ильяхова Пиши, сокращай. Она вычистила мой текст от всего лишнего и дала понять, что главное в тексте — это польза и факты.
/designer стал не только телеграм-каналом. Это проект, объединяющий несколько площадок: сайт, Медиум, паблик, канал трансляций, 4 чата и дочерние каналы. К сожалению, пока не хватает времени и внимания на уснувшие каналы про UX и VR.
1. Лучшее из Медиума, в котором уже около 60 статей:
- Самым популярным текстом стал пост про то как использовать Телеграм в полную силу.
- Книга про Фигму до сих пор иногда сверкает в пабликах, а сопутствующий ей демо-проект живёт своей жизнью. Пост о книге второй в топе по просмотрам.
- На третьем месте — пост Стратегический дизайн интерфейсов, который я написал в 2017. До сих пор не потерял своей актуальности.
2. Фигма-чат вырос почти до 2500 участников, несмотря на строгие правила. В нём работает 10 модераторов. Спасибо им, это бескорыстные люди, готовые тратить своё время на важный общественный проект. Кстати, я начал наполнять канал Фигма-ответы, где собраны самые частые вопросы из чата.
3. Знатоки. Яндекс пригласил меня отвечать на вопросы в сервисе Яндекс Знатоки, и я ответил уже более чем на 60 вопросов про дизайн интерфейсов.
4. Трансляции. Также моим ноу-хау было вести телеграм-трансляции с интересных мне дизайн-событий. За идею текстовых трансляций спасибо Медузе. Это сложный формат, тем не менее я провёл 7 трансляций.
Я написал более личный пост о своих выводах и открытиях по поводу канала.
Поддержать проект →
Спасибо, что читаешь! Stay tuned.
Автор проекта, Саша @okunev
Всего 2 года назад, 31 августа 2017 я завёл этот канал, чтобы делиться знаниями о дизайне интерфейсов.
Он открыл мне многие двери и позволил познакомиться с кучей крутых людей. Я получил огромное количество положительных отзывов и это было приятно. Важнейшим событием в жизни канала стал мой переход на Фигму, и как следствие, книга.
На дизайн-блог меня вдохновило русское издание журнала Digital Creative Arts, который выходил в 2005, выдержал 6 выпусков и закрылся. Он был мощным пинком для развития кругозора и погружения в дизайн. Теперь при желании все его выпуски можно найти в PDF.
Другим ингредиентом в канале стала книга Максима Ильяхова Пиши, сокращай. Она вычистила мой текст от всего лишнего и дала понять, что главное в тексте — это польза и факты.
/designer стал не только телеграм-каналом. Это проект, объединяющий несколько площадок: сайт, Медиум, паблик, канал трансляций, 4 чата и дочерние каналы. К сожалению, пока не хватает времени и внимания на уснувшие каналы про UX и VR.
1. Лучшее из Медиума, в котором уже около 60 статей:
- Самым популярным текстом стал пост про то как использовать Телеграм в полную силу.
- Книга про Фигму до сих пор иногда сверкает в пабликах, а сопутствующий ей демо-проект живёт своей жизнью. Пост о книге второй в топе по просмотрам.
- На третьем месте — пост Стратегический дизайн интерфейсов, который я написал в 2017. До сих пор не потерял своей актуальности.
2. Фигма-чат вырос почти до 2500 участников, несмотря на строгие правила. В нём работает 10 модераторов. Спасибо им, это бескорыстные люди, готовые тратить своё время на важный общественный проект. Кстати, я начал наполнять канал Фигма-ответы, где собраны самые частые вопросы из чата.
3. Знатоки. Яндекс пригласил меня отвечать на вопросы в сервисе Яндекс Знатоки, и я ответил уже более чем на 60 вопросов про дизайн интерфейсов.
4. Трансляции. Также моим ноу-хау было вести телеграм-трансляции с интересных мне дизайн-событий. За идею текстовых трансляций спасибо Медузе. Это сложный формат, тем не менее я провёл 7 трансляций.
Я написал более личный пост о своих выводах и открытиях по поводу канала.
Поддержать проект →
Спасибо, что читаешь! Stay tuned.
Автор проекта, Саша @okunev
❤1
23 сентября: Дилан Филд в Москве на Figma Meetup
Начало выступления: 18:30
Сооснователь Фигмы приезжает в Москву, чтобы выступить и пообщаться. Это произойдёт в рамках серии митапов Сергея Андронова, Влада Зелинского и Дмитрия Быкова на площадке Digital October при поддержке Яндекса. Тема этой встречи — коллаборация. Я тоже собираюсь выступить там вместе с ребятами.
Трансляция на YouTube →
Доклады будут на английском и синхронного перевода не ожидается.
Текстовая трансляция →
Буду вести трансляцию в @slashlive на русском.
Мы в @figmachat собираем вопросы для Дилана при помощи хэш-тега #митап.
—
#для_профи #события #трансляции
Начало выступления: 18:30
Сооснователь Фигмы приезжает в Москву, чтобы выступить и пообщаться. Это произойдёт в рамках серии митапов Сергея Андронова, Влада Зелинского и Дмитрия Быкова на площадке Digital October при поддержке Яндекса. Тема этой встречи — коллаборация. Я тоже собираюсь выступить там вместе с ребятами.
Трансляция на YouTube →
Доклады будут на английском и синхронного перевода не ожидается.
Текстовая трансляция →
Буду вести трансляцию в @slashlive на русском.
Мы в @figmachat собираем вопросы для Дилана при помощи хэш-тега #митап.
—
#для_профи #события #трансляции
Программа митапа:
1. Dylan Field, CEO of Figma
2. Дарья Мартынюк, Яндекс Поиск
3. Серафим Четверухин, Яндекс Поиск
4. Влад Зелинский, Miro
5. Сергей Андронов, Digital October
6. Дмитрий Быков, Yandex Market Group
7. Сергей Томилов, Яндекс Дзен
8. Никита Шехов, МТС
9. Саша Окунев, /designer
В моей секции
Расскажу, почему я считаю, что синхронизировать макеты между разными редакторами и сервисами — путь в никуда. Загружать исправленные версии макетов в Зеплин, Инвижн и другие редакторы — это необходимость, которая нам дорого обходилась. Инструмент должен покрывать больше наших потребностей, чтобы мы не пользовались костылями и лучше автоматизировали наш рабочий процесс. Загружать макеты из Скетча в Зеплин или из Фигмы в Принципл — это так же дико, как перерисовывать их палкой на песке. Пустая трата ресурсов дизайнера.
1. Dylan Field, CEO of Figma
2. Дарья Мартынюк, Яндекс Поиск
3. Серафим Четверухин, Яндекс Поиск
4. Влад Зелинский, Miro
5. Сергей Андронов, Digital October
6. Дмитрий Быков, Yandex Market Group
7. Сергей Томилов, Яндекс Дзен
8. Никита Шехов, МТС
9. Саша Окунев, /designer
В моей секции
Расскажу, почему я считаю, что синхронизировать макеты между разными редакторами и сервисами — путь в никуда. Загружать исправленные версии макетов в Зеплин, Инвижн и другие редакторы — это необходимость, которая нам дорого обходилась. Инструмент должен покрывать больше наших потребностей, чтобы мы не пользовались костылями и лучше автоматизировали наш рабочий процесс. Загружать макеты из Скетча в Зеплин или из Фигмы в Принципл — это так же дико, как перерисовывать их палкой на песке. Пустая трата ресурсов дизайнера.
Организационное
В зале 350 сидячих мест и ещё примерно столько же стоячих. Регистрация, которую без всяких анонсов открыли в выходные, быстро разлетелась по каналам и захлебнулась. Желающих увидеть преподобного Дилана оказалось очень много и сейчас она закрыта, поскольку может не хватить места всем желающим.
Но если получится, последние 100 мест будут доступны на Таймпэде позже.
Порядок докладов может измениться.
В зале 350 сидячих мест и ещё примерно столько же стоячих. Регистрация, которую без всяких анонсов открыли в выходные, быстро разлетелась по каналам и захлебнулась. Желающих увидеть преподобного Дилана оказалось очень много и сейчас она закрыта, поскольку может не хватить места всем желающим.
Но если получится, последние 100 мест будут доступны на Таймпэде позже.
Порядок докладов может измениться.
Синхронизация макетов — путь в никуда
Всем вечера! Большой пост на основе моего выступления на Moscow Figma Meetup и видео.
medium.com/slashdesigner/mockup-sync-is-fail-f39997924cdc
О коллаборации с читателями моей книги, о проблемах рабочего процесса в больших компаниях, почему не надо тратить время на загрузку макетов, о будущем Фигмы, новых плагинах для анимации и о тенденциях, которые я вижу в дизайн-инструментах.
—
#для_профи
Всем вечера! Большой пост на основе моего выступления на Moscow Figma Meetup и видео.
medium.com/slashdesigner/mockup-sync-is-fail-f39997924cdc
О коллаборации с читателями моей книги, о проблемах рабочего процесса в больших компаниях, почему не надо тратить время на загрузку макетов, о будущем Фигмы, новых плагинах для анимации и о тенденциях, которые я вижу в дизайн-инструментах.
—
#для_профи
Medium
Синхронизация макетов — путь в никуда
23 сентября 2019 сооснователь Фигмы Дилан Филд выступал в Москве на Moscow Figma Meetup. Меня тоже пригласили выступить и я рассказал…
Холизм: дизайн-система Газпромбанка
medium.com/slashdesigner/holism-23aaeb1cf8f8
В публичный доступ вышла дизайн-система родного Газпромбанка. Теперь доступен промо-сайт и библиотека React-компонентов.
Сделал её обзор, вспомнил напряжённый и продуктивный прошлый год. Рассказал о своей роли в проекте и глубинном смысле названия. О шрифтах, иконках, цветах, компонентах, сетках и вот этом всём.
—
#для_профи #дизайн_системы
medium.com/slashdesigner/holism-23aaeb1cf8f8
В публичный доступ вышла дизайн-система родного Газпромбанка. Теперь доступен промо-сайт и библиотека React-компонентов.
Сделал её обзор, вспомнил напряжённый и продуктивный прошлый год. Рассказал о своей роли в проекте и глубинном смысле названия. О шрифтах, иконках, цветах, компонентах, сетках и вот этом всём.
—
#для_профи #дизайн_системы
Medium
Холизм: дизайн-система Газпромбанка
В публичный доступ вышла дизайн-система родного Газпромбанка. Теперь доступен промо-сайт и библиотека React-компонентов.
👎1