Вышел подкаст со мной: поговорили с ребятами активными в области open source дизайна про моё виденье того, что такое open design и каким открытым и совместным дизайн будет в будущем, а также про мои текущие разработки, плагины и сообщество Figma. (на английском)

→ https://sosdesign.sustainoss.org/6

Наткнулся на очень милую и полезную организацию, которая занимается UX исследованиями и публикует много образовательных статей на эту тему. Изучай плодотворные способы улучшения своих исследований с Apple & Banana.

→ https://www.appleandbanana.org/

Сделал новый плагин: FigJam Custom Colors. Он позволяет расширить доступные в джеме по дефолту цвета и даже использовать свои библиотеки стилей при необходимости. В Jam не нужна полная панель выбора любого цвета, но небольшая кастомизация не помешает.

Вчера потратил на него три часа и записал процесс разработки на видео — как думаешь, стоит ли его показывать?

→ https://youtu.be/sLTeombJub0

У моего нового плагина FigJam Custom Colors появился компаньон! Конечно хорошо иметь под рукой обширную палитру цветов, но иногда всё, что тебе нужно — это розовый. 🎨 Как раз для таких случаев я создал плагин Pink. Всё, что он делает, это красит выбранные объекты в FigJam в мой #FF5386 розовый цвет.

Плагины в FigJam будут доступны всем этой осенью. А пока мне нужно придумать хорошую стандартную палитру для первого плагина. Если хочешь помочь, залетай в файл, предлагай свои варианты: https://figma.fun/zQdF1u

Переделал “гостевую книгу” на своём сайте. До этого она была сделана встроенным на сайт напрямую Figma файлом через iframe. Так как она довольно сильно разрослась со временем, файл начал заметно грузить страницу.

Теперь гостевая книга является простым изображением. Оно автоматически обновляется на сервере каждые 12 часов 15 минут — новая версия загружается из Figma через REST API.
1. Собираю и отправляю запрос на экспорт изображения: ключ доступа + ссылка на файл + ID страницы для экспорта + формат и размер экспорта.
2. Figma выдаёт ссылку на картинку.
3. Если ссылка отличается от предыдущей (что значит, что картинка изменилась), нужно скачать новую картинку, идём дальше.
4. Создаю новый запрос на эту ссылку и скачиваю изображение на сервер, заменяя старую. Также сохраняю ссылку.

Оно хранится в папке статичными ресурсами, так что практически не нагружает сервер, и весит всего около 100 Кбайт без сжатия. Это намного меньше, чем целый Figma-файл! Кстати, если твоего следа ещё нет в истории — самое время зайти и написать что-нибудь в гостевой книге!

→ https://gleb.sexy/#guest-book

Починил старый фотик: получил невероятный опыт! 📸 Так приятно, когда что-то совсем новое получается и работает, особенно когда чинишь что-то своими руками. Кратко о самом интересном:

• Сейчас мало такой техники, которую можно разобрать одной отвёрткой. Это удивительно круто! Apple, учитесь.

• Оказалось, что самолётный мотор за 70 рублей из местного магазина может заменить оригинальный, который стоит 700 на али. В видео показываю как он классно жужжит-бесится! 🔥 А камера теперь делает не только «щёлк-щёлк», но и «жж-жж».

• В электромоторах есть щётки??? Узнал немного больше про электронику. И про себя — что паять не умею. Практики надо больше!

• У меня теперь есть ещё один самолётный двигатель, есть идеи, что с ним собрать?

Написал статью с подробностями, вдруг кому-то в будущем будет полезно: https://teletype.in/@gleb.sexy/sony-a55-fix

Лучше создать что-то неидеальное, чем ничего не создать.

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

Перфекционизм — мой злейший враг в работе. Из-за него многие из моих творений оказываются не закончены, а ещё больше даже не начаты. Поэтому как можно чаще я пытаюсь напоминать себе, что лучше сделать что-то неидеальное, чем вообще ничего. Так же было и с этим постом: у меня много идей, но кажется, что в каждую надо очень сильно углубляться, чтобы рассказать. Но нет! Достаточно просто начать и добиться хорошего, не идеального результата.

Серебряная цепочка Figma в готическом шрифте — задизайнил и заказал такую красоту недавно, вдохновившись случайной картинкой в интернете. Теперь это мой любимый аксессуар, после розовых очков-сердечек конечно!! 😍

Ты задумывалась(-ся), почему клавиатуры, которыми мы пользуемся каждый день, выглядят именно так? Что такое QWERTY и зачем клавиши расположены не прямо друг над другом, а по диагонали, со сдвигом?

Эти вещи пришли к нам со времён пишущих машинок, из середины-конца 19 века, а пользуемся мы ими до сих пор! Возможно ты подумаешь, что это всё для удобства печати. А что если я скажу, что их предназначение в точности противоположно?

Продолжение в статье: https://teletype.in/@gleb.sexy/bad-keyboards

——————

Создал канал для всяких интересных материалов по этой теме и своих клавиатур (пока у меня только одна). Заходи: @sexy_keyboards

Pixel Art в Figma — хочу сделать плагин, который будет в реальном времени трансформировать кривые в пиксель арт. На удивление получилось сделать такую демонстрацию довольно быстро и просто (особенно для человека, которому четыре часа назад удалили зубы мудрости), как будто я что-то понимаю в кривых Безье после написания плагина Blend...

→ Поиграться можно тут: https://editor.p5js.org/zyumbik/sketches/CaNy2mFvj

Стоит делать такой плагин? Буду рад услышать твои идеи или предложения!

Прогресс!

Как назвать плагин?

Подарок тебе на новый год от меня! Знакомься: это Pixel Princess, мой новый плагин — твоя помощница для создания пиксель арта в Figma. ❤️ Довёл алгоритм до ума и успел опубликовать до нового года! Пока принцесса умеет только переводить векторы в пиксели заданного размера, но планируется и поддержка заливок, а также улучшения производительности. 🎨

Устанавливай → https://pixxxel.art/

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

→ https://teletype.in/@gleb.sexy/creative-platform

Инструмент для создания и экспорта анимаций просто при помощи мыши. 🏃‍♂️

Попробовать и использовать можно прямо на лендинге, потом экспортировать анимацию в код и разместить на своём сайте. Это просто гениально! ❤️ Мне сразу приходит в голову куча идей, как можно развивать эту идею...

→ https://animatize.com/

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

Эту идею я подчерпнул из заметок Энди и планирую активно использовать. К слову, интересная деталь на его сайте: там нет индекса всех заметок и найти их можно только по ссылкам из других заметок.

А познакомился с заметками Энди я по этому посту. В нём Энди говорит, что для эффективного проектирования систем, проектировщики сами должны быть активными пользователями этих систем. Многие ключевые инсайты приходят именно в процессе использования продукта. И не просто использования ради тестирования, а профессионального глубокого использования. Это намекает, что я на верном пути: активно пользуюсь системой (Figma) и разрабатываю улучшения, основываясь на опыте.

Впечатления и наблюдения от первых дней работы на клавиатуре Afternoon Breeze: низкопрофильной раздельной клавиатуре. Собрал пока только основную часть, а боковые стороны оставил, чтобы попользоваться и определиться, нужны ли они вообще, и если да, то какая нужнее. Ненужную можно просто отломать — так задумано.

Мне намного приятнее и легче на ней печатать, отсутствие необходимости много перемещать пальцы чувствуется. Разведённые руки более расслабленны и удобнее лежат на столе. И в целом есть ощущение, что эта клавиатура сделана для людей. Ей удобно пользоваться! Но удобно — не значит легко. Хотя скорость печати обычных букв не пострадала.

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

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

Инсайт про дизайн раскладки: если какое-то сочетание клавиш можно нажать только двумя руками, надо располагать все кнопки так, чтоб одна из рук нажимала все модификаторы, а вторая только одну кнопку. Нажать две кнопки на одной стороне и потом две на другой намного сложнее, чем три на одной и одну на другой.

В целом интересно, осваиваюсь потихоньку. Фото клавиатуры есть тут: https://teletype.in/@gleb.sexy/less-keys-better

Можно ли отказаться от HTML и JS в вебе? Да! Наверное... Это звучит странно, но Google Docs и Figma тому пример. Но зачем?

Ни для кого не секрет, что JS — не слишком быстрый созданный за 10 дней одним человеком язык, дизайн которого оставляет желать лучшего. HTML тоже не подарок, особенно в динамичных интерфейсах. Чтобы его как-то оживлять приходится писать много JS. Я говорил, что JavaScript — медленный язык с плохим дизайном? Так вот, в добавок к этому он ещё и плохо дружит с HTML: они такие разные и браузерам приходится буквально склеивать два несовместимых концепта. А ещё JS медленный.

На самом деле он не такой уж медленный, но в связке с HTML любые попытки оптимизации будут тщетны. Для удобства разработки стали появляться фреймворки типа React. HTML можно писать прямо в JS! Ура, решение! Нет. Фреймворки обычно создают дополнительные сложности и замедляют интерфейсы ещё больше, в частности React становится дополнительной прослойкой между браузером и твоим кодом (отступление: поэтому я выбираю Svelte). Костыль на костыле — так сейчас выглядят для меня изнутри многие веб-приложения.

Ещё отступление: я говорю именно про корпоративные веб-приложения для работы с большими объёмами данных. В таких сложных продуктах больших компаний возникает потребность в оптимизации. И кто-то в твиттере сказал, что веб был изначально создан не для них: «Large companies find HTML & CSS frustrating “at scale” because the web is a fundamentally anti-capitalist mashup art experiment, designed to give consumers all the power.» Интересная точка зрения! Не знаю насколько всё так, но веб действительно является отличной площадкой для самовыражения и экспериментов. Даже код всех сайтов открыт по дефолту — разве не рай?

Так к чему это всё? В веб разработке сейчас наблюдается одно занятное явление. Пока оно не слишком популярно, но я думаю, что за этим будущее. Редактор и режим прототипа в Figma не используют HTML. Google Docs тоже в прошлом году заявили, что планируют отказаться от HTML и продемонстрировали, как они собираются это сделать.

Как? Ответ прост: <canvas>. В то время как JS и HTML сами по себе неплохи, их связка убивает всю производительность. Большие интерактивные документы заставляют даже самые мощные машины кряхтеть и нагреваться добела. И чтобы обеспечить беспрецедентную производительность для документов почти любого размера (в пределах разумного), Figma и Google Docs используют кастомный рендеринг на канвасе вместо использования HTML + JS. Система получается более низкоуровневой, работает на практически прямой связи с железом без лишних слоёв, поэтому всё очень быстро

Много вопросов при этом остаются открытыми, в частности общедоступность (accessibility). Но если прикладывать усилия, это возможно решить. Да и чистый HTML без намеренных усилий не сильно более доступен, чем сырой канвас. Также это всё можно назвать ещё одним костылём: да, но зато он очень быстрый! И он будет работать, пока веб не перейдёт на другие технологии и языки.

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

Начал не с полноразмерной клавиатуры, а с макропада. Это небольшое устройство ввода, которое обычно используется для удобного вызова часто используемых команд или их серий — макросов. И мне как раз понравилось использовать модули от клавиатуры Work Louder в виде макропадов, но хотелось что-то своё, менее громоздкое и более удобное для моего рабочего процесса.

Так родился Sexypad. Над дизайном, как и названием, долго не думал, он максимально прост: три энкодера, две кнопки — получилось очень удачно. Энкодеры удобно использовать для повторяющихся нажатий кнопок: стрелочки, перелистывание вкладок, отмена/повтор действия, зум и т.п. А кнопки для переключения слоёв (один энкодер может выполнять разные действия в зависимости от слоя).

Изучил как и куда присоединять энкодеры и кнопки к пинам микроконтроллера: это оказалось довольно просто в теории. Вырезал и покрасил корпус из листа ПВХ, прикрепил компоненты. Время припаивать, но оказалось, что рисунка с пинами покрашенными в разный цвет в Figma недостаточно. Нарисовал схему, чтоб понять, куда какой провод должен идти. Припаял, работает! Длины некоторых проводов не рассчитал. Заметка на будущее: лушче лишнее отрезать, чем слишком короткий провод. В целом мне очень понравился процесс и результат. Есть также идеи для улучшения — как раз сейчас над ними работаю и публикую в @sexy_keyboards.

Фотографии процесса и готового творения в статье: https://teletype.in/@gleb.sexy/sexypad-v1

Любишь играть с данными? Встретился такой проект для работы с данными и их интерактивной презентации: https://www.decipad.com/

Интерфейс похож на Notion, но с фокусом на таблицы и разные подсчёты, как в Excel. А также интерактив: можно вставлять поля ввода и создавать таким образом интерактивные модели. Пример: https://alpha.decipad.com/n/The-Perfect-Coffee-Drip-Brew-%3Aqi0EWqpCXpIq5b95aP1uj?secret=Jq6MiKBXqUk8vUN0BVTOG

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