Роман Шамин, дизайнер из Злых Марсиан опубликовал большой гайд по доступности для дизайнеров – https://teletype.in/@romanshamin/a11y-for-designers

Матвей, анонсировал «Канон» — большая система знаний для дизайнеров ВКонтакте. Это полезная точка входа для всех новых дизайнеров в команде и база знаний для остальных. Рекомендую ознакомиться со статьей и самим документом если хотите понять больше о процессах дизайна в ВК.

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

Подробнее обо всем в статье —
https://vc.ru/design/265595-publikuem-kanon-biblioteku-znaniy-dizaynerov-vkontakte

Подробная статья про цветовые профили.

Из статьи я узнал, что для создания правильных и красивых градиентов лучше применять профиль Lab. Он в отличии от RGB градиента не делает серые и бледные переходы между двумя цветами.

https://skillbox.ru/media/design/rgb-cmyk-lab/

​​Я всегда удивляюсь человеческим возможностям, а именно тому, как работает память и обучение. Когда-то давно я пытался начать использовать Origami для прототипирования, но не смог уехать далеко, в итоге использовал Principle долгое время. Но всегда хотелось освоить что-то более серьезное, и наверно даже стать чуть ближе к коду. Origami нравится тем, что в нем можно собирать прототипы прод уровня с логикой и работой с реальными данными.

Вообщем к чему я это все, недавно я решил опять потыкаться в Origami Studio и без лишних проблем понял, как создавать примитивную анимацию. Голова вспомнила, как и что нужно нажимать. И я понял, что большинство микро анимаций можно собирать на нескольких патчах: Transition, Switch и Curve. Этого более менее достаточно для базового уровня работы.

В общем сделал интеракшен с появлением кнопок, по лонгтапу на главную кнопку с иконкой.

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

Демка прототипа + исходник

Вообще Origami отличный инструмент, который может вас приблизить к коду.

По сути это инструмент с визуальным программированием, но работа с ним будет проще тем, кто примерно представляет, как устроенна работа с кодом. Вам нужно явно понимать, как разложить любое действие на шаги (атомы).

Дополнение к предыдущему посту про цветовые профили. Очень кайфовая и интересная статья, почему в CSS лучше использовать HSL систему цвета вместо HEX кодов (RGB).

Очевидные плюсы HSL.
— Эта система цвета понятнее для чтения, в отличии от шестнадцатиричного кода hex, который никто не поймёт глядя на него. HSL же можно попытаться считать, особенно если выучить наизучить какому градусу на круге соответствует Hue.
— Можно регулировать каждый параметр в отдельности. Задали определенную Saturation и просто дергаете остальные свойства Hue, и Lightness. Тем самым рождаете другие цвета.
— Удобно и быстро создавать различные цветовые темы для сервиса.

https://www.smashingmagazine.com/2021/07/hsl-colors-css/

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

Люблю внимание к деталям. В Apple Watch приложение часы при активном циферблате «положение солнца» раскрывается плавно в значок солнца на кривой.

Практичной функции от этой анимации нет, но какой же кайф, что она есть и что часы превращаются в солнце.

Набор CSS свойств для подчеркивания текста и выбора стиля подчеркивания.

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

Поэтому если вас интересует, как сделать эту анимацию в Origami Studio, то го смотреть свежий видос на моем канале – https://youtu.be/ihTQ0W1kuDM

Открыл для себя новый патч Random для генерации случайных значений в Origami.

Сделал на нём интеракшен, когда нажатие меняет позицию розового шарика в случайные координаты

Иногда в дизайне хочется сделать цвет фона взятый из изображения.

Если у вас возникает такая потребность, то рекомендую простой сервис – https://matkl.github.io/average-color/