Совет по дизайну интерфейсов.

За большинство «мультяшных» анимаций выпадающих меню отвечает всего одно значение — scale: 0.

Начинайте с 0.97.

Тогда меню не раздувается из ниоткуда, а просто мягко встаёт на своё место.

👉 @PortalToDesign

UI/UX-дизайнеры, вот мои любимые ресурсы по дизайну в интернете, которые стоит сохранить:

Библиотека дизайна → http://curations.supply
Landing pages → http://landing.love
SaaS-сайты → http://saaspo.com
Создание мобильных приложений с AI → http://sleek.design
Типографика → http://uncut.wtf
Анимации → http://60fps.design
Мобильные приложения → http://mobbin.com
Бренды → http://rebrand.gallery
Иконки → http://hugeicons.com
Дизайн-системы → http://component.gallery

👉 @PortalToDesign

Koboyo Icon Library — 133K нарисованных вручную SVG-иконок, и всё полностью бесплатно

Здесь есть всё: от UI и tech до людей, объектов и бизнеса.
Отличный ресурс для UI/UX-дизайнеров.

https://koboyo.com/icons

Не пролистывайте пост — поставьте лайк и сделайте репост, чтобы этот ресурс увидели те, кому он действительно пригодится.

👉 @PortalToDesign

Нужны чистые и минималистичные иконки для UI и дизайн-задач? 🐇

Griddy Icons — это бесплатное опенсорс семейство иконок с чётким, утилитарным стилем. В наборе более 1100 иконок, толщина обводки 1.5px и сетка 24×24px. Всё выдержано в единой системе и сразу готово к использованию в U

Забираем здесь

👉 @PortalToDesign

Совет по графическому дизайну: никогда не используйте чистый чёрный цвет (#000000).

Чистый чёрный выглядит слишком резким и может сильнее напрягать глаза.

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

👉 @PortalToDesign

Появился инструмент для создания Android-интерфейсов по новой дизайн-системе Google Material 3 Expressive:

https://lnkiai.github.io/m3e-canvas/

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

Если делаете Android-приложения через вайбкодинг, стоит попробовать. 🥳

👉 @PortalToDesign

UI/UX-дизайнеры, вот мои любимые ресурсы в интернете для поиска вдохновения.

Сохраняйте, чтобы не потерять:

Веб-сайты → http://godly.website
Портфолио → http://prettyfolio.com
Bento Grid → http://bentogrids.com
Галерея изображений → http://ogimage.gallery
Мобильные и веб-приложения → http://mobbin.com

👉 @PortalToDesign

UI/UX-дизайнеры, возможно, это именно та библиотека анимаций иконок, которую вы искали.

Morphicons позволяет плавно превращать одну SVG-иконку в другую с помощью бесшовных анимаций.

Работает с популярными библиотеками иконок, включая Lucide, Tabler и Heroicons, не имеет зависимостей и весит всего 6,5 КБ.

https://www.morphicons.com/

Сохраняйте, чтобы не потерять

👉 @PortalToDesign

9 сайтов, которые помогут сгенерировать для вас DESIGN.md

1. styles.refero.design — библиотека готовых дизайн-систем реальных сайтов для AI-агентов.
2. designmd.me — вставьте URL и получите DESIGN.md с цветами, типографикой и компонентами.
3. open-design.ai — open-source workspace с готовыми DESIGN.md-системами и поддержкой локальных AI-агентов.
4. designmd.supply — превращает публичный сайт в готовый DESIGN.md для AI-агента.
5. getdesign.md — большая коллекция готовых DESIGN.md + создание анализа по своему URL.
6. aura.build — импортирует сайт по URL, извлекает его визуальную ДНК и позволяет использовать её в AI-дизайне.
7. neuform.ai — создаёт AI-интерфейсы и переиспользуемые DESIGN.md-дизайн-системы.
8. design-md.hyperbrowser.ai — извлекает DESIGN.md из любого сайта через Hyperbrowser.
9. typeui.sh — генерирует и предлагает готовые DESIGN.md для AI-кодинга.

Теперь у ИИ будет на одну причину меньше сделать вам очередной фиолетовый градиент 🤭

👉 @PortalToDesign

Библиотека UI-компонентов с набором готовых анимированных элементов для интерфейсов

Компоненты можно открывать непосредственно в AI-инструментах для разработки, включая Claude и ChatGPT, чтобы агент самостоятельно установил и подключил их к проекту.

Для ручной интеграции доступны полный исходный код и инструкции по настройке.

Подойдёт разработчикам, дизайнерам и тем, кто использует AI-инструменты для быстрой сборки интерфейсов

https://github.com/Harshjdhv/componentry

👉 @PortalToDesign

👉 @PortalToDesign

Meta выложила в опенсорс свою внутреннюю дизайн-систему — Astryx

Её используют внутри Meta уже более 8 лет, и на ней работают 13 000+ внутренних приложений.

→ 150+ доступных UI-компонентов
→ 7 встроенных брендовых скинов
→ кастомизируемые темы
→ рассчитана как на разработчиков, так и на ИИ кодинг-агентов

https://astryx.atmeta.com/

👉 @PortalToDesign

Дизайнерам и фронтам вкусная плюша генератор палитр «COLORPALETTEPRO»

Нашёл удобный инструмент создания и настройки цветовых палитр, который работает как «синтезатор цвета».

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

Можно менять яркость, насыщенность, оттенки, проверять контраст (под accessibility), а потом экспортировать палитру в CSS, HEX и другие форматы.

👉 @PortalToDesign

CSS Pattern

Сборник красивых фонов на чистом CSS

Можно настраивать цвета, плотность, отступы, размеры и другие параметры, чтобы идеально попасть в ваш дизайн

https://css-pattern.com/

👉 @PortalToDesign

Мгновенно извлекайте всю дизайн-систему любого сайта

Dembrandt — это NPM-пакет, который сканирует сайт и вытаскивает его визуальные стилевые параметры: цвета, типографику, отступы и паттерны лейаута.

Вместо того чтобы вручную инспектировать стили в DevTools, вы можете быстро понять, как сайт структурирован и стилизован

GitHub тут, сайт здесь 👜

👉 @PortalToDesign

Этот мощный инструмент для работы с цветом позволяет тестировать палитры на реальных дизайн-примерах, упрощая подбор оптимальных сочетаний для интерфейсов

Идеально подходит для генерации идей и создания визуально безупречных UI 👍

https://palettemaker.com/

👉 @PortalToDesign

Только что нашёл очень крутой каталог UI skills для design engineers.

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

Посмотреть → ui-skills.com

👉 @PortalToDesign

«SVGL» огромная коллекция SVG-иконок

Библиотека SVG-логотипов популярных продуктов и сервисов. С более чем 400+ иконок в категориях — от дизайна и баз данных до AI и DevTools — сервис позволяет быстро найти, скачать или вставить SVG прямо в проект 🥳

👉 @PortalToDesign

Не каждая UX-проблема требует одинаковой срочности.

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

Сохраните для следующего design sprint.

👉 @PortalToDesign

👉 @PortalToDesign

Легендарный бренд клавиатур Keychron только что сделал нечто масштабное: он выложил в открытый доступ все дизайны и исходники своих клавиатур! 83 модели и 640 дизайн-проектов.

https://github.com/Keychron/Keychron-Keyboards-Hardware-Design

👉 @PortalToDesign