↑ Ситуэйшн: чувак ругнулся, что в Фигме только по ховеру на поле становится видно интерактивное ли оно.
Говорит: «В профессиональном софте текстовые поля должны всегда выглядеть как текстовые поля (drop the mic)».
Залетает Расмус, который это всё проектировал: «Во-первых, в правой панели большая часть пикселей интерактивные, и если всё будет с рамками — будут буээ. Во-вторых, панель оптимизирована для того чтобы смотреть на нее и быстро находить нужные значения (на ресерчах узнали, что людям часто нужно убедиться что вот там 12px, а не 13px). Поэтому в первую очередь там всё сделано для чтения».
Интересно узнавать такое закулисье и предпосылки. Еще говорит, что при проектировании они пробовали сотни (!) вариантов правой панели.
@tg_knl
Говорит: «В профессиональном софте текстовые поля должны всегда выглядеть как текстовые поля (drop the mic)».
Залетает Расмус, который это всё проектировал: «Во-первых, в правой панели большая часть пикселей интерактивные, и если всё будет с рамками — будут буээ. Во-вторых, панель оптимизирована для того чтобы смотреть на нее и быстро находить нужные значения (на ресерчах узнали, что людям часто нужно убедиться что вот там 12px, а не 13px). Поэтому в первую очередь там всё сделано для чтения».
Интересно узнавать такое закулисье и предпосылки. Еще говорит, что при проектировании они пробовали сотни (!) вариантов правой панели.
@tg_knl
This media is not supported in your browser
VIEW IN TELEGRAM
Нашел крутую технику в Figma — автоконтраст. Цвет текста сам динамически подстраивается под фон. Для белой подложки он сам перекрасится в черный, для черной — наоборот.
На самом деле это просто хитро-мудрости с комбинацией blend modes. По ссылочке можете забрать себе кнопку с видоса и поглядеть сами: https://www.figma.com/file/C8B4X1RBXtOjatWapBjDs8/Auto-contrast-test
@tg_knl
На самом деле это просто хитро-мудрости с комбинацией blend modes. По ссылочке можете забрать себе кнопку с видоса и поглядеть сами: https://www.figma.com/file/C8B4X1RBXtOjatWapBjDs8/Auto-contrast-test
@tg_knl
Мы тут сделали iOS-приложение для смены лиц на фотках. Под капотом, конечно же, AI собственной разработки, никаких встроенных покупок, всё бесплатно. Механика наипростейшая — выбираешь фотку, тыкаешь на лицо, выбираешь на что хочешь его поменять (иногда даже срабатывает на кошках и собаках).
Запустили сегодня на Product Hunt, поэтому обниму каждого кто поддержит: https://www.producthunt.com/posts/face-swapper-for-ios
@tg_knl
Запустили сегодня на Product Hunt, поэтому обниму каждого кто поддержит: https://www.producthunt.com/posts/face-swapper-for-ios
@tg_knl
Product Hunt
Face Swapper for iOS - Product Information, Latest Updates, and Reviews 2024 | Product Hunt
Create high-res face swaps with AI right on your phone! Make a new version of yourself, troll your friends, or anonymize your photos. Create funny pics in just a few taps!
😱 Рабочей процесс дизайнера/основателя Cron.
Наткнулся на интересный видос про Рафаэля Шаада — шведского дизайнера и основателя того самого календарика. Что любопытного:
1. Чувак стартует со скетчей в блокноте (по-настоящему, а не чтобы потом в инстаграме шерить). Это такая зона экспериментов, где главное итерировать вширь, а не в глубину (go broad, not deep).
2. Прототипы сразу в коде — обычный HTML, CSS и JavaScript, без фреймворков. Одна механика — один прототипчик.
3. В видосе разбирают пикер таймзоны из гугл-календаря (обычный селект с дропдауном). В Cron же сделали typing-механику: пишешь локацию и выбираешь из автокомплита. Плюс он там прям на ходу показывает как приводит в порядок пикер в макете: фиксит иерархию, чинит типографику (табличные цифры, тирешечки, пробелы, всё что мы так любим).
4. Заметил интересную деталь: в его Figma-макетах вся структура построена по логике SwiftUI. Он взял оттуда все штуки аля VStack, HStack и тп., и воссоздал в компонентах. Зачем — хз, ведь Cron сделан на электроне, а не Swift.
Сам видос тут: https://www.youtube.com/watch?v=2MrNSjJFBBI
P.S. Сорян, что канал так долго молчал. Постараюсь продолжить писать интересности, как в старые-добрые.
@tg_knl
Наткнулся на интересный видос про Рафаэля Шаада — шведского дизайнера и основателя того самого календарика. Что любопытного:
1. Чувак стартует со скетчей в блокноте (по-настоящему, а не чтобы потом в инстаграме шерить). Это такая зона экспериментов, где главное итерировать вширь, а не в глубину (go broad, not deep).
2. Прототипы сразу в коде — обычный HTML, CSS и JavaScript, без фреймворков. Одна механика — один прототипчик.
3. В видосе разбирают пикер таймзоны из гугл-календаря (обычный селект с дропдауном). В Cron же сделали typing-механику: пишешь локацию и выбираешь из автокомплита. Плюс он там прям на ходу показывает как приводит в порядок пикер в макете: фиксит иерархию, чинит типографику (табличные цифры, тирешечки, пробелы, всё что мы так любим).
4. Заметил интересную деталь: в его Figma-макетах вся структура построена по логике SwiftUI. Он взял оттуда все штуки аля VStack, HStack и тп., и воссоздал в компонентах. Зачем — хз, ведь Cron сделан на электроне, а не Swift.
Сам видос тут: https://www.youtube.com/watch?v=2MrNSjJFBBI
P.S. Сорян, что канал так долго молчал. Постараюсь продолжить писать интересности, как в старые-добрые.
@tg_knl
This media is not supported in your browser
VIEW IN TELEGRAM
Ух ты, оказывается можно не корячиться с инспектором, а просто написать в консоль document.designMode = 'on'. И весь сайт превратится в канвас.
UPD. Точнее не в канвас, а в редактируемый документ.
@tg_knl
UPD. Точнее не в канвас, а в редактируемый документ.
@tg_knl
This media is not supported in your browser
VIEW IN TELEGRAM
Стив Руиз (создатель tldraw) решил покошмарить дизайнеров интерфейсов и впилил в продукт вот такое.
Рисуешь скетч интерфейса → Жмешь “Make it real” → получаешь готовый интерактивный UI.
Чтобы потыкать нужна API-шка OpenAI. Впечатляет! Демка тут: makereal.tldraw.com
@tg_knl
Рисуешь скетч интерфейса → Жмешь “Make it real” → получаешь готовый интерактивный UI.
Чтобы потыкать нужна API-шка OpenAI. Впечатляет! Демка тут: makereal.tldraw.com
@tg_knl
This media is not supported in your browser
VIEW IN TELEGRAM
В пятницу в Twitter завирусился мой пост (впервые!). Дублирую сюда.
«Думаю это мудрый ход — добавлять в дизайн-систему градации прозрачностей. Потому что:
🎛️ Это делает компоненты более гибкими — они отлично выглядят на любом фоне.
💡 Дизайн-система меньше связывает руки. Появляется больше решений для одной и той же дизайнерской задачи.»
В комменты пришло много дизайнеров.
Adham Dannaway (автор книги Practical UI) — сказал, что его ресерч показал что такой подход оказался самым гибким для UI, где фон может сильно варьироваться.
Adam Przewoski (дизайнер Netguru) — поделился своим сервисом, который как раз генерирует такие палитры.
David Aerne (разработчик Elastiq Ltd) — предложил для таких целей использовать CSS-функцию color-mix(), и даже сделал демку.
Aen Tan (Head of Design в Bake) — развеял опасения по поводу перфоманса. В теории он должен был снизиться, но по факту никакого заметного снижения не происходит.
Сам твит здесь (подписывайтесь, кстати): twitter.com/danilov_den_/status/1725441615504736534
@tg_knl
«Думаю это мудрый ход — добавлять в дизайн-систему градации прозрачностей. Потому что:
🎛️ Это делает компоненты более гибкими — они отлично выглядят на любом фоне.
💡 Дизайн-система меньше связывает руки. Появляется больше решений для одной и той же дизайнерской задачи.»
В комменты пришло много дизайнеров.
Adham Dannaway (автор книги Practical UI) — сказал, что его ресерч показал что такой подход оказался самым гибким для UI, где фон может сильно варьироваться.
Adam Przewoski (дизайнер Netguru) — поделился своим сервисом, который как раз генерирует такие палитры.
David Aerne (разработчик Elastiq Ltd) — предложил для таких целей использовать CSS-функцию color-mix(), и даже сделал демку.
Aen Tan (Head of Design в Bake) — развеял опасения по поводу перфоманса. В теории он должен был снизиться, но по факту никакого заметного снижения не происходит.
Сам твит здесь (подписывайтесь, кстати): twitter.com/danilov_den_/status/1725441615504736534
@tg_knl
This media is not supported in your browser
VIEW IN TELEGRAM