Forwarded from After Effects / Motion Design
Как анимировать интерфейсы в After Effects
Анимация — неотъемлемый скилл для UX/UI дизайнера, если вы претендуете на позицию выше, чем Junior. Ни для кого из дизайнеров не секрет, что самый продвинутый инструмент для анимации — After Effects.
Нужно ли разбираться в таком сложном инструменте, если есть более простые программы. Мой ответ — да. Вы не сделаете в Principle, Proto.io… то, что можно сделать в AE, и рано или поздно придется изучать возможности этой программы. Тем более YouTube кишит туториалами практически под любую задачу.
Все учат делать анимацию, но не показывают, как её делать быстрее. Я покажу вам свои фишки, которые помогают сэкономить мне лишний час для похода в Starbucks.
Читать статью
#AE | #WebDesign | #интрфейсы
Анимация — неотъемлемый скилл для UX/UI дизайнера, если вы претендуете на позицию выше, чем Junior. Ни для кого из дизайнеров не секрет, что самый продвинутый инструмент для анимации — After Effects.
Нужно ли разбираться в таком сложном инструменте, если есть более простые программы. Мой ответ — да. Вы не сделаете в Principle, Proto.io… то, что можно сделать в AE, и рано или поздно придется изучать возможности этой программы. Тем более YouTube кишит туториалами практически под любую задачу.
Все учат делать анимацию, но не показывают, как её делать быстрее. Я покажу вам свои фишки, которые помогают сэкономить мне лишний час для похода в Starbucks.
Читать статью
#AE | #WebDesign | #интрфейсы
Teletype
Как анимировать интерфейсы в After Effects
AEUX – это плагин, который экспортирует все слои из Sketch или Figma в After Effects. Установка займет не более 15 минут, а в будущем...
Artboard Studio
Плагин дает доступ к более чем 5300 высококачественным мокапам Artboard Studio из файлов Фигмы.
Простое преобразование фреймов Фигмы в реальные макеты продуктов одним нажатием кнопки. Каждый день в постоянно растущую библиотеку добавляется новые предметы.
Как пользоваться
-Следуйте инструкциям на экране и создайте секретный ключ API в Artboard Studio.
-Вставьте свой секретный ключ API в окно плагина, сохраните и начните добавлять элементы макета прямо в текущий файл Фигмы.
-Все импортируемые элементы полностью настраиваемы.
-Элементы, которые имеют визуализируемые метки, поставляются с соответствующими фреймами. -Скопируйте и вставьте свои рисунки в эти фреймы, убедитесь, что фрейм выбран, и нажмите «Render Selected Frame».
-Вы можете изменять размеры фреймов и макетов, они будут работать, пока вы сохраняете соотношение сторон.
-Чтобы разблокировать доступ к премиальным товарам, подпишитесь на один из премиальных планов. Он автоматически разблокирует все элементы при следующем использовании плагина Artboard Studio в Figma.
-Используйте меню в верхней части элементов для поиска и фильтрации элементов на основе имени, точки обзора и категории.
#FigmaPlugins
Плагин дает доступ к более чем 5300 высококачественным мокапам Artboard Studio из файлов Фигмы.
Простое преобразование фреймов Фигмы в реальные макеты продуктов одним нажатием кнопки. Каждый день в постоянно растущую библиотеку добавляется новые предметы.
Как пользоваться
-Следуйте инструкциям на экране и создайте секретный ключ API в Artboard Studio.
-Вставьте свой секретный ключ API в окно плагина, сохраните и начните добавлять элементы макета прямо в текущий файл Фигмы.
-Все импортируемые элементы полностью настраиваемы.
-Элементы, которые имеют визуализируемые метки, поставляются с соответствующими фреймами. -Скопируйте и вставьте свои рисунки в эти фреймы, убедитесь, что фрейм выбран, и нажмите «Render Selected Frame».
-Вы можете изменять размеры фреймов и макетов, они будут работать, пока вы сохраняете соотношение сторон.
-Чтобы разблокировать доступ к премиальным товарам, подпишитесь на один из премиальных планов. Он автоматически разблокирует все элементы при следующем использовании плагина Artboard Studio в Figma.
-Используйте меню в верхней части элементов для поиска и фильтрации элементов на основе имени, точки обзора и категории.
#FigmaPlugins
Эстетика типографики
Цель типографики — улучшение разборчивости, читабельности и привлекательности текста. Перевод статьи, где рассмотрены элементы типографики, классификация шрифтов и лучшие практики их применения на примере крупных брендов.
Читать статью
#TypographyLesson
Цель типографики — улучшение разборчивости, читабельности и привлекательности текста. Перевод статьи, где рассмотрены элементы типографики, классификация шрифтов и лучшие практики их применения на примере крупных брендов.
Читать статью
#TypographyLesson
Teletype
Эстетика типографики
Шрифт — это графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов...
Microsoft показала ненастоящее меню «Пуск» и новый дизайн иконок
Дизайн Fluent приходит на смену Modern
Дизайнерская команда компании Microsoft опубликовала на видеосервисе YouTube новый ролик, демонстрирующий значки с переработанным дизайном для операционной системы Windows 10.
Значки выполнены в дизайне Fluent, который приходит на смену прежнему Modern. Однако самое интересное в этом ролике то, что в нём показано «не настоящее» меню «Пуск», а только официальный концепт, созданный командой дизайнеров Microsoft.
Внимательные пользователи заметили, что концепт выглядит заметно лучше, чем настоящее меню «Пуск», что вызвало изрядный ажиотаж в сети.
Речь идёт о новом меню «Пуск», которое появилось в тестовых сборках Windows. Как ожидается, простые пользователи получат доступ к обновлённому «Пуск» с выходом осеннего обновления Windows 10.
#Microsoft
#DesignNews
Дизайн Fluent приходит на смену Modern
Дизайнерская команда компании Microsoft опубликовала на видеосервисе YouTube новый ролик, демонстрирующий значки с переработанным дизайном для операционной системы Windows 10.
Значки выполнены в дизайне Fluent, который приходит на смену прежнему Modern. Однако самое интересное в этом ролике то, что в нём показано «не настоящее» меню «Пуск», а только официальный концепт, созданный командой дизайнеров Microsoft.
Внимательные пользователи заметили, что концепт выглядит заметно лучше, чем настоящее меню «Пуск», что вызвало изрядный ажиотаж в сети.
Речь идёт о новом меню «Пуск», которое появилось в тестовых сборках Windows. Как ожидается, простые пользователи получат доступ к обновлённому «Пуск» с выходом осеннего обновления Windows 10.
#Microsoft
#DesignNews
С плагином Arrow Auto не нужно рисовать стрелки между интерфейсами для потоковых диаграмм пользовательского интерфейса. Просто одним щелчком мыши, чистая и гладкая стрелка будет нарисована между двумя выбранными элементами, с изменяемыми направлениями.
Отрегулируйте цвет всех стрелок одновременно. Блокируйте / разблокируйте, скройте / покажите все стрелки вместе, чтобы они не мешали вашей работе.
Всегда двигать элементы вокруг? Не волнуйтесь! Просто нажмите «Обновить», и все стрелки будут автоматически отслеживать положение элементов и переподключаться. Легко!
#FigmaPlugins
Отрегулируйте цвет всех стрелок одновременно. Блокируйте / разблокируйте, скройте / покажите все стрелки вместе, чтобы они не мешали вашей работе.
Всегда двигать элементы вокруг? Не волнуйтесь! Просто нажмите «Обновить», и все стрелки будут автоматически отслеживать положение элементов и переподключаться. Легко!
#FigmaPlugins
Может ли нейросеть отобрать у человечества создание дизайна?
Вы наверняка встречали это громогласное саморазоблачение студии Артемия Лебедева. Якобы логотипы для реальных клиентов в тарифе «Экспресс-дизайн» создавала нейросеть.
Кое-где и правда получилось недурно. Но помимо очевидных рассуждений о реальности существования Николая Иронова, меня вот уже месяц мучает другой важный вопрос.
Читать статью
#ArtificialIntelligence
#Design
Вы наверняка встречали это громогласное саморазоблачение студии Артемия Лебедева. Якобы логотипы для реальных клиентов в тарифе «Экспресс-дизайн» создавала нейросеть.
Кое-где и правда получилось недурно. Но помимо очевидных рассуждений о реальности существования Николая Иронова, меня вот уже месяц мучает другой важный вопрос.
Читать статью
#ArtificialIntelligence
#Design
Дизайнеру приложений: как создать и передать в разработку тёмную тему
В конце 2019 года зарелизили iOS 13 и Android 10 с поддержкой автопереключения на тёмную тему. Мы решили добавить её в приложение «Ростелеком Ключ» под iOS и Android, над которым работали в тот момент. В процессе не обошлось без сложностей. Рассказываем о нашем опыте, чтобы вы в аналогичной ситуации сэкономили время и нервы.
Читать статью
#DesignLesson
#DarkTheme
В конце 2019 года зарелизили iOS 13 и Android 10 с поддержкой автопереключения на тёмную тему. Мы решили добавить её в приложение «Ростелеком Ключ» под iOS и Android, над которым работали в тот момент. В процессе не обошлось без сложностей. Рассказываем о нашем опыте, чтобы вы в аналогичной ситуации сэкономили время и нервы.
Читать статью
#DesignLesson
#DarkTheme
Teletype
Дизайнеру приложений: как создать и передать в разработку тёмную тему
Может показаться, что это всё на волне хайпа. Но не только :)
Moscow Digital Academy приглашает на онлайн-интенсив по веб-дизайну бесплатно.. Количество мест ограничено! Первые 100 записавшиеся получат бесплатно закрытый мини-курс по веб-дизайну для новичков.
Узнать подробности и записаться: https://clc.am/design_webinar
Что вы получите:
1. Узнаете все о профессии веб-дизайнера
2. Разберетесь UX и UI
2. Сделаете прототип веб-сайта
3. Нарисуете блок сайта в Figma
4. Получите домашнее задание, которое проверят наши арт-директора и дадут подробное ревью!
Все участники вебинара получат полезные материалы и ссылки, после его окончания.
Чтобы записаться на бесплатный интенсив, переходите на сайт Moscow Digital Academy.
Узнать подробности и записаться: https://clc.am/design_webinar
Что вы получите:
1. Узнаете все о профессии веб-дизайнера
2. Разберетесь UX и UI
2. Сделаете прототип веб-сайта
3. Нарисуете блок сайта в Figma
4. Получите домашнее задание, которое проверят наши арт-директора и дадут подробное ревью!
Все участники вебинара получат полезные материалы и ссылки, после его окончания.
Чтобы записаться на бесплатный интенсив, переходите на сайт Moscow Digital Academy.
Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне
У начинающего дизайнера может возникнуть соблазн пропустить консультационный процесс с клиентом. Но подход, построенный на «основных принципах», совсем не освобождает вас от этого этапа. Принципы дизайна существуют по определенной причине, а знание того, когда и как их можно нарушать, отличает великих дизайнеров от посредственных.
Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?
На самом деле, бывают ситуации, когда простой подход будет как никогда кстати. Хитрость в том, чтобы знать, когда именно.
Читать подробнее
#DesignLessons
У начинающего дизайнера может возникнуть соблазн пропустить консультационный процесс с клиентом. Но подход, построенный на «основных принципах», совсем не освобождает вас от этого этапа. Принципы дизайна существуют по определенной причине, а знание того, когда и как их можно нарушать, отличает великих дизайнеров от посредственных.
Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?
На самом деле, бывают ситуации, когда простой подход будет как никогда кстати. Хитрость в том, чтобы знать, когда именно.
Читать подробнее
#DesignLessons
Плагин Batch Create Component превращает выбранные слои в отдельные компоненты, а не в один большой компонент.
#Figmaplugins
#Figmaplugins
Почему кнопки отмены должны быть бесцветными
Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.
Вот почему кнопки «Отмена» должны быть бесцветными.
Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.
Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.
Нейтральный цвет обозначает нейтральную, не призывающую ни к каким действиям кнопку. Когда пользователи замечают, что кнопка «Отмена» не имеет цвета, они быстрее распознают ее как запасной вариант. Это важно для людей, которые по ошибке активируют экран подтверждения и хотят вернуть всё, как было.
Когда у каждой кнопки на экране есть цвет, они «соревнуются» за внимание пользователя. Это заставляет юзеров обдумывать каждое действие дольше. Кнопка отмены нейтрального цвета позволяет им быстрее принимать решение. Те же, кто хочет совершить действие, не будут отвлекаться на кнопку «Отмена».
У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.
Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.
Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.
Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.
Сделайте свою кнопку нейтральной
В большинстве случаев, когда пользователи активируют экран подтверждения, они готовы к действиям. Но если это вышло случайно, или юзер просто передумал, кнопка «Отмена» должна стать для него спасением.
Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.
#UXLesson
Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.
Вот почему кнопки «Отмена» должны быть бесцветными.
Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.
Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.
Нейтральный цвет обозначает нейтральную, не призывающую ни к каким действиям кнопку. Когда пользователи замечают, что кнопка «Отмена» не имеет цвета, они быстрее распознают ее как запасной вариант. Это важно для людей, которые по ошибке активируют экран подтверждения и хотят вернуть всё, как было.
Когда у каждой кнопки на экране есть цвет, они «соревнуются» за внимание пользователя. Это заставляет юзеров обдумывать каждое действие дольше. Кнопка отмены нейтрального цвета позволяет им быстрее принимать решение. Те же, кто хочет совершить действие, не будут отвлекаться на кнопку «Отмена».
У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.
Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.
Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.
Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.
Сделайте свою кнопку нейтральной
В большинстве случаев, когда пользователи активируют экран подтверждения, они готовы к действиям. Но если это вышло случайно, или юзер просто передумал, кнопка «Отмена» должна стать для него спасением.
Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.
#UXLesson
This media is not supported in your browser
VIEW IN TELEGRAM
Один из способов сообщить пользователю о состоянии системы в UI, показать его местоположение
Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.
Местоположение
Информирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение.
#UIlesson
#UXlesson
Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.
Местоположение
Информирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение.
#UIlesson
#UXlesson