​​Я всегда удивляюсь человеческим возможностям, а именно тому, как работает память и обучение. Когда-то давно я пытался начать использовать 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/

Интересное видео про технологии стриминга – https://youtu.be/ROlFGyOLBGk и технологии CarPlay и AndroidAuto.

Интерфейсы приложений для автомобильныъ систем строго регламентируются. В списках поддерживается лишь 6 элементов на Android Auto и 12 в CarPlay.

Twitter начали подключать свой шрифт Chirp – https://twitter.com/TwitterDesign/status/1425505308563099650

Дизайнерка из продукта, рассказала о нем более детально в своем треде - https://twitter.com/ashlie/status/1425506038506147840

Если вам вдруг нужно оформить текст простыми блоками, то шрифт BLOKK вам в помощь - https://github.com/los-gordos/BLOKK

Адресную строку в Safari обновили в последней бете iOS 15.

В первых версиях она кажется была плавающей. https://twitter.com/viticci/status/1427683610031702017?s=20