Анимация градиентов №1, подробнее

#файл Как сделать анимацию градиентов

Выкладываю результат своих экспериментов с анимацией в Figma. Файл поможет накрутить градиенты, которые стильно смотрятся в качестве фона на лендингах и экранах логина.

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

Файл в Community →

В этом файле можно посмотреть, как устроена раскадровка, какие анимации настроены, из каких объектов всё состоит.


Что использовал

- Шейпы разной формы: Rectangle, Ellipse, Polygon. Для рисования треугольников произвольной формы — Pen.
- Все шейпы обёрнуты компонентами для облегчения контроля над ними
- Смещение координат по X и Y для движения компонентов
- Масштабирование компонентов — Scale
- Изменение ширины и высоты, параметры Width и Height
- Вращение объектов — Rotation, чтобы создать дополнительное разнообразие в движении
- Набор стилей Blurs, которые позволяют накладывать типовые эффекты размытия с радиусом от 100 до 400
- Логотип с градиентом, слой которого в режиме наложения Color Dodge. Движение градиента под этим слоем создаёт блики, будто логотип состоит из стекла.


Что понял

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

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

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

Чтобы контролировать его более эффективно, нужно начать с анимации геометрических фигур, а потом усложнять более мелкими элементами.

Если тема c градиентами зайдёт, сделаем видео-обзор. Приглашаю обсудить в комментариях!

@slashdesigner #первые_шаги #Figma #UI

#задача 3. Добавление контакта в Zoom

Клиент: Zoom
Приложение: Zoom Desktop Client for macOS

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

Зум — сплошной учебник плохого UX и полное недоразумение. Однако, с точки зрения возможностей для профессионала это лучший инструмент из тех, что я встречал. У него лучшее качество связи, легко записать видео и есть возможность подключить аудио-карту с нормальным микрофоном, что очень важно для музыкальных занятий.

Улучшать опыт пользователя в Зуме легко и просто даже без всяких исследований. Только на кейсах из Зума можно собрать себе хорошее продуктовое портфолио.


Итак, джоб-стори:

«У меня регулярные встречи с моим преподавателем. Если он не в списке контактов, единственный способ пригласить его на звонок — отправить зум-ссылку. Для регулярных встреч это неудобно и мне нужно добавить его в контакты, чтобы позвонить ему без манипуляций со ссылками.»

Открыть в Figma →

Как и всегда, разбор этого флоу выложим через неделю. Присылай свой вариант решения в комментарии.

Предыдущие разборы: Получение ИИН, Подключение наушников к двум устройствам.

Новые задачи на разбор принимаем в комментариях специального поста.

@slashdesigner #для_профи #UX

#гайд
Как дизайнеру найти работу за рубежом
Гайд в 4 частях от Анны Лесной

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


Часть 1. CV

У тебя есть всего 6 секунд, чтобы произвести первое впечатление. Именно столько рекрутеры тратят на просмотр CV (резюме). На что нужно обращать внимание при составлении CV, чтобы не получить отказ уже на этом этапе?

Читать: slashd.ru/lib/hanna-guide/cv

В этой части
- Что такое ATS и как адаптировать для них CV
- Почему следует делать резюме в PDF или Ворде
- Структура эффективного резюме дизайнера
- Как подавать свой опыт: доказывать цифрами, формула XYZ, сильные глаголы
- Эволюция CV Анны: проследим, как развивалось CV.

@slashdesigner #для_профи #карьера #эмиграция

#подкаст Интервью с Настей Мироновой, продуктовым дизайнером из Whatsapp

Под конец недели делюсь выпусками «Форточку Открой» для прослушивания на выходных.

Это годный подкаст про IT и макретинг, который ведут Даша Никулина и Никита Остапчук. Ребята взяли большое аудио-интервью у Насти, в котором обсудили её взгляд на дизайн, карьеру и переезд в Лондон.

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


Часть 1: Apple Podcasts, Яндекс Музыка, Spotify, 29 минут

В первой Настя поделилась мыслями, которые были, когда она уходила из аспирантуры Физтеха работать дизайнером-новичком, много училась и нарабатывала свой первый опыт.

Дальше был Яндекс, продукты Яндекс Телефон и Дзен, позиция лида и решение попробовать себя на международном рынке.

Спустя полгода после первого собеседования она попала в команду мессенджера Whatsapp и вот уже год работает над этим продуктом.


Часть 2: Apple Podcasts, Яндекс Музыка, Spotify, 27 минут

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

Канал подкаста в Телеграме: @fortochkuotkroi →

@slashdesigner #полезная_реклама #интервью #для_профи