2/4 первые эскизы

Здесь вы найдёте основные принципы, которыми дизайнерам стоит руководствоваться при создании пользовательских интерфейсов Install ️

🔶 Abstracto Demo Демо‑набор крупных цветных PNG‑форм, которые хорошо работают как выразительные фоны и центры композиции. 🔶 Texturas Abstractas Пакет текстур, удобных для фоновых заливок, наложений и лёгкого «зашумления» плоских макетов. 🔶 Geometrical Abstraction with Gradients Серия геометрических абстракций с мягкими градиентами, напоминающими плакатный графдизайн и digital‑арт. 🔶 AbstractForms Vol.1 Коллекция аккуратных фигур, которые можно собирать в постеры, аватары и иллюстративные блоки. 🔶 Abstract Lines Подборка линий и контуров, добавляющих движение и ритм фонам, шапкам и разделителям секций. 🔶 Fondos Abstractos 3D‑фоны с неоновыми формами и глубиной, которые хорошо работают как обложки и главные экраны. 🔶 Abstract Blob Vector Shapes Набор векторных «блобов» и пятен, которые удобно использовать как мягкие подложки под текст и карточки. 🔶 50 Abstract Posters & Wallpapers Part 2 Коллекция готовых постеров и обоев, которые можно брать в качестве фонов и референсов. 🔶 Abstract Geometric Waves Геометрические волны и полосы, создающие динамичный рисунок для фона. 🔶 Glassmorphism Wallpaper Abstract 3D Figure Обои с абстрактными 3D‑фигурами в стиле стекломорфизма, идеальны под UI-заставки. 🔶 12 Abstract Banners Free 12 готовых баннеров с яркой графикой, оптимизированных под веб и соцсети. 🔶 Abstract Geometric Pattern Simple Shapes 03 Простые геометрические паттерны из базовых форм для повторяющихся фонов и плиточной сетки. 🔶 M‑513 Abstract 3D Illustrations Набор 3D‑иллюстраций, которые можно использовать как ключевые визуалы в лендингах и презентациях. 🔶 Gradient Abstract Banners Баннеры на градиентных подложках, хорошо заходящие как промоблоки, превью и обложки. 🔶 3D Abstract Shapes Коллекция объёмных 3D‑форм, годящихся для центральных изображений, постеров и визуальных акцентов. 🔶 Monochrome Abstract Монохромные абстракции со сдержанной графикой, которые поддерживают минималистичный и строгий визуальный стиль. 🔶 36 Abstract Graphic Elements Pack 36 графических элементов, из которых удобно собирать коллажи и декоративные композиции. 🔶 Free Abstract Flower Elements Collection Набор «цветочных» элементов, стилизованных для декоративных вставок и паттернов. 🔶 350 Vector Doodles Weird Creatures & Abstract Forms Большая коллекция векторных дудлов с причудливыми существами и абстрактными формами для живых, экспериментальных макетов. [Фабрика Дизайна]

Кирилл Улитин и Стася Кабанова из МойОфис разбирают проблему, с которой сталкивается почти любое исследование: человек на интервью рассказывает не сам опыт, а его отредактированную версию. Он забывает мелкие действия, упрощает сценарий, пропускает автоматические шаги и иногда сам не замечает, как на самом деле обходит неудобства продукта. Поэтому команда попробовала контекстное интервью: сначала поговорить с пользователем, а потом смотреть, как он реально выполняет задачу в живой системе. В этот момент начинают проявляться вещи, которые нельзя достать обычными вопросами. Кто-то вытаскивает фотографию через инструменты разработчика, потому что интерфейс не дает скачать ее нормально. Кто-то раскладывает окна как личный рабочий дашборд. Кто-то компенсирует неудобство продукта связкой из нескольких приложений. Внутри: – Почему обычное интервью часто показывает логичную версию опыта, а не реальную; – Как внимание, память и социальная желательность искажают ответы пользователей; – Чем контекстное интервью отличается от глубинного интервью и юзабилити-теста; – Почему наблюдение помогает находить не только боли, но и обходные практики; – Когда можно просить пользователя выполнить задачу прямо во время исследования; – Зачем заранее предупреждать участника, что нужно будет показывать экран и рабочие действия; – Как диаграмма сходства помогает разобрать разрозненные наблюдения; – Когда контекстное интервью полезно, а когда оно не даст соразмерной ценности. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Делаем блиц-интервью про AI и доступность. Задаем одинаковые вопросы и получаем разные ответы ) Наш третий гость — Алексей Назаренко @alexnozer_dev — фронтенд-разработчик, специализирующийся на вёрстке, доступности, производительности и веб-стандартах. Леша, спасибо 💜 Ты пробовал использовать Claude или ChatGPT со скринридером или с клавиатуры? Как это работает на практике? — Лично я не пробовал. Но читал о том, что в интерфейсах таких платформ полно проблем с доступностью. Ты знаешь кейсы, где AI улучшил доступность продукта? — Есть несколько фич, которые кажутся мне хорошим использованием AI в доступности: - Автогенерация субтитров на видео в TikTok, YouTube и подобных сервисах; - Возможность сгенерировать описание изображения (alt) в Firefox или Shopify; - Функция распознавания изображения с камеры в реальном времени в ChatGPT или Seeing AI; Ещё знаю, что AI используют при аудите для анализа контента и поиска нарушений WCAG. Но пока о каких-то серъёзных успеха в этом направлении не слышал. Есть ли риск, что AI-инструменты для доступности обучены на данных, которые не отражают реальный опыт людей с ограничениями по здоровью? Что должно измениться в том, как мы обучаем модели? — Все современные модели знают о доступности много, потому что это гигантские базы знаний. Сложность в том, чтобы эти знания оттуда извлечь. По умолчанию модели выдают статистически наиболее вероятный код. Дела с доступностью обстоят плохо, что подтверждают отчёты WebAIM. Поэтому в среднем сгенерированный код будет содержать проблемы доступности. С обучением моделей, скорее всего, уже ничего не сделать. Разве что в мире резко большинство сайтов и сервисов станут доступными и появятся новые хорошие кодовые базы, где это всё учтено. Но такого не будет. А учитывая волну нового сгенерированного кода за последние годы, всё только хуже. Поэтому нужно обкладывать агентов скиллами, правилами, инструкциями для работы, давать примеры доступного кода, проводить код ревью людьми, которые разбираются. ИИ волшебным образом не сделает мир доступнее, нужна инициатива и эксперты. 70% новых приложений создаётся на low-code и no-code платформах. Люди без технической базы делают продукты для миллионов. AI научит их паттернам доступности? — Я не слышал, чтобы без технической базы с помощью AI создавали продукты на миллионы пользователей. Истории «я за два вечера навайбкодил SaaS и заработал много денег» мне кажутся пылью в глаза. Десятки, сотни или тысячи пользователей, но не миллионы. Если говорить о крупных корпорациях, которые массово внедряют AI в процессы разработки, то там, всё же, есть техническая база. Не думаю, что AI научит доступности. Он способен воспроизводить шаблоны доступности и выдавать неплохие решения при должной настройке и в руках опытных разработчиков. Тех, кто росто генерирует код и не вникает в него, AI ничему не научит. В России активно пользуются технологиями с Ai — зарубежные скринридеры, программы по типу Open your eyes, есть ли надежда, что подобные сервисы будут разрабатываться российскими разработчиками? — Думаю, что надежда есть. Однако стимулов меньше, чем в странах Евросоюза или США. Нужно развивать культуру доступности и работать над законодательной базой, по аналогии с ADA или EAA. Культура будет способствовать информационной осведомлённости о важности доступности, а законы обяжут выделять на это ресурсы.

🔵Авиация В работе пилотов, где ответственность за пассажиров и экипаж колоссальны важны скорость и предсказуемость в UX. Поэтому даже самые современные самолёты сохраняют большое количество физических переключателей и кнопок, на первый взгляд расположенных хаотично. Исследования неоднократно показывали, что в стрессовых условиях пилоты быстрее находят нужный физический элемент управления, чем соответствующую функцию на экране. 🔵Автомобили Похожая ситуация сейчас происходит а автомобильных интерфейсах — китайские производители так и норовят перевести большинство управления на тач-скрины, спрятав управляющие элементы куда-нибудь во второй, а то и в третий уровень меню 🔵Медицина Многие медицинские системы выглядят устаревшими не потому, что их забыли обновить. Иногда это осознанное решение. Врач, который годами работает с определённым интерфейсом, может совершать меньше ошибок в знакомой среде, чем в новой и визуально более современной. 🔵Электростанции После анализа ряда инцидентов выяснилось, что проблема часто заключалась не в нехватке информации, а наоборот — в её избытке. Когда оператор одновременно получает десятки предупреждений, критически важный сигнал может просто потеряться. 🔵Космос В космической отрасли при тестировании интерфейсов чаще задают вопрос: что произойдёт, если всё пойдёт не по плану? Астронавтов регулярно тренируют на отказах оборудования и потере связи в аварийных сценариях, но катастрофы могут происходить и из-за ошибок на Земле — при проектировании интерфейсов. Один из самых известных примеров — потеря космического аппарата Mars Climate Orbiter Loss. Причина была удивительно простой: одна команда использовала метрическую систему измерений, другая — имперскую. В результате аппарат стоимостью более ста миллионов долларов был потерян ещё до начала научной миссии. Этот случай напоминает важную вещь: интерфейс — это не только кнопки и экраны. Это ещё и язык, обозначения, единицы измерения, правила передачи информации между людьми и системами. Авиация, медицина, атомная энергетика и космонавтика уже давно показали: хороший интерфейс — это тот, который помогает человеку принимать правильные решения. Возможно, именно поэтому самые ценные уроки UX рождаются не в приложениях для доставки еды, а там, где цена ошибки измеряется совсем другими величинами. 🌊🌊

справился, нашел и выдаст на воркшопе по кириллическим шрифтам в ui. завтра, 10 июня, в 18:00 (gmt+3) ждем в онлайне 🦅 обсудим, как использовать выразительные кириллические шрифты в цифровых продуктах, искать шрифтовые пары и добавлять характер интерфейсу. ⚪️ регайся в боте

Фигма выложила майский Workflow Lab про Code to Canvas. Если коротко: прототип, который вы собрали в коде через Cursor, Codex, Claude Code или другой агент, можно затащить обратно в Фигму как редактируемые экраны. Дальше уже смотреть флоу целиком, править компоненты, токены, состояния и при желании пушить изменения обратно в код. Сама связка «дизайн-код-дизайн» не новая. Интереснее другое. Последний год все очень радостно продавали вайбкодинг как короткий путь: написал промпт, получил интерфейс, запустил, погнал дальше. Типа Фигма больше не нужна, дизайнеры мешают скорости, агент сам всё соберёт. А потом выясняется, что быстро собранный экран всё равно надо где-то нормально посмотреть. Вайбкодинг быстро даёт экран, но плохо показывает продуктовый сценарий целиком В браузере ты видишь один экран. Иногда пару состояний, если не лень потыкать. В коде видишь компоненты, файлы, стили, условия. А продуктовый флоу целиком обычно расползается по вкладкам, роутам и «сейчас я тебе покажу, только сначала залогинюсь». Для разработки ок, для обсуждения интерфейса так себе. У меня так постоянно. Быстро сделал фичу, локально вроде работает, в голове всё ясно. Потом открываешь рядом несколько экранов и видишь: • кнопка называется иначе • пустое состояние забыто • фильтр ведёт себя странно • мобильная версия поехала • пользователь попадёт в тупик и будет смотреть на экран как на квест от плохого диза И всё. Твоя «почти готовая» фича уже не такая готовая В доке Фигма прямо описывает похожий сценарий. Агент берёт локальный прототип, переносит уникальные экраны на холст, использует компоненты и стили из дизайн-системы, добавляет страницу с саммари. Потом дизайнеры уже могут смотреть и чинить: где лишний элемент, где лучше взять нормальный компонент, где просела иерархия, где токены уехали итд Это хорошая роль для Фигмы. Она не обязана быть местом, где всё начинается. Иногда она может быть местом, куда продукт возвращается на проверку. Быстро накидали в коде, положили на холст, посмотрели весь сценарий, привели в чувство, отправили обратно в разработку. Тут, кстати, спор «фигма или код» становится совсем уставшим. В реальной работе чаще нужен круг: 1. быстро собрать рабочий вариант 2. увидеть весь флоу рядом 3. поправить продуктовую логику 4. вернуть изменения туда, где это реально живёт Главное, чтобы этот круг не превратился в новый ритуал ради ритуала. Типа сначала агент сделал экран, потом агент перенёс его в Фигму, потом агент поправил, потом агент вернул в код, а команда всё это время сидела и смотрела на красивую автоматизацию. Дизайнерское решение всё равно кто-то должен принять. Пока что, желательно человек. Что думаете? ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Карина Веласкес рассказывает историю не про то, как Claude Code «сам собрал дизайн-систему», а про то, как накопленное знание наконец получило быстрый способ материализоваться. На работе она не могла использовать Claude Code, сервер Фигма MCP и другие инструменты из-за политики безопасности, поэтому взяла личный ноутбук, пустой файл в Фигме и за один пятничный день собрала Prisme, личную дизайн-систему с токенами, темами, компонентами и плагином для синхронизации. Самое интересное здесь не скорость сама по себе, а то, почему эта скорость сработала. Карина уже понимала архитектуру токенов: где нужны глобальные значения, где живут брендовые темы, как должен работать семантический слой, почему алиасы важны и чем нативный формат переменных Фигмы отличается от Token Studio JSON. Claude Code не придумал это за неё. Он просто оказался достаточно быстрым исполнителем, чтобы описание превращалось в структуру, структуру можно было сразу проверить, а ошибки быстро поправить. Внутри: – Почему сильный результат с ИИ начинается не с промпта, а с внутренней модели; – Как Фигма MCP позволяет работать с переменными и токенами без ручного кликанья в интерфейсе; – Зачем дизайн-системе нужны глобальный, брендовый и семантический слои; – Почему токены, которые живут только в Фигме, остаются артефактом, а не инфраструктурой; – Как Prisme Bridge переводит данные между Token Studio JSON и переменными Фигмы; – Почему кнопка стала хорошей проверкой всей токенной архитектуры; – Как Claude Code помог собрать компонент с размерами, состояниями, вариантами и заменяемыми иконками; ➡️ Читать статью (EN) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

uimates.com

Replit 15 мая добавил в каталог MCP новый сервер Lazyweb. Если коротко, он позволяет агенту искать по базе из 257k+ реальных экранов приложений. Replit прямо пишет: для UI-референсов и дизайн-исследований. На первый взгляд, маленькая новость из списка обновлений. Добавили ещё один MCP, ну ок. Но для вайбкодинга это довольно важная штука. Потому что сейчас у AI-интерфейсов есть очень узнаваемая болезнь. Попросил собрать сервис, личный кабинет, страницу вакансии, CRM или дашборд, и через минуту получаешь что-то аккуратное, чистенькое и до боли одинаковое. Карточки, табы, серые подписи, синий акцент, график, три метрики сверху. Всё вроде нормально. Только ощущение, что этот экран уже видел тысячу раз и ни один раз не хотел им пользоваться. Проблема часто не в том, что модель не умеет рисовать. Она рисует как среднее арифметическое интернета. А среднее арифметическое обычно выглядит как SaaS, который стесняется сказать, чем он занимается. У агента появляется не только промпт, но и шанс посмотреть, как похожие задачи уже решили живые продукты Это уже ближе к работе дизайнера. Перед тем как делать новый сценарий, ты смотришь, как это устроено у других. Не чтобы скопировать. Просто чтобы понять, какие паттерны вообще существуют, где люди обычно ошибаются, какие решения уже стали привычными, а где можно сделать иначе. Например, тебе надо собрать экран подписки. Вариант «сделай красиво» почти гарантированно даст три карточки с тарифами и зелёную кнопку. А если агент видит реальные примеры, он хотя бы может заметить детали: – где показывают ограничения тарифа – как объясняют пробный период – куда прячут отмену – как оформляют сравнение – где начинается тёмная сторона UX После этого уже можно спорить. Не с пустым экраном и не с абстрактным «сделай современно», а с конкретными паттернами. Это полезнее, чем бесконечно гонять модель по кругу, пока она сама случайно не попадёт в нормальное решение. Конечно, референсы не спасают от плохого дизайна. Можно насмотреться 257 тысяч экранов и всё равно собрать помойку. Особенно если агент будет просто усреднять всё подряд. Но сама идея правильная: интерфейс нельзя делать только из текста в промпте. Ему нужен визуальный и продуктовый контекст. Для дизайнеров тут есть смешной момент. Раньше насмотренность была чем-то личным: папки с референсами, скриншоты, закладки, сохранёнки, чужие продукты, которые ты руками разбирал. Теперь эта насмотренность постепенно превращается в подключаемый источник данных для агента. Референсы становятся не только материалом для дизайнера, но и частью работы инструмента. Агент может искать примеры, сравнивать паттерны, приносить варианты, а дизайнер уже решает, что из этого имеет смысл. Ну, если дизайнер вообще есть в процессе, а не где-то потом приходит чинить результат. По мне главное, чтобы такие базы не превратили всё в ещё более одинаковую массу. Если агент будет брать референсы как повод подумать, это полезно. Если как повод собрать «усреднённый лучший экран», то мы просто получим SaaS-дашборд 2.0, только теперь с доказательной базой. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Дилан Филд говорит о дизайне не как о финальной упаковке интерфейса, а как о новом рабочем слое между идеей, кодом и продуктом. В эпоху ИИ важнее становится не просто написать промпт, а уметь визуально управлять намерением: быстро пробовать варианты, смотреть на результат, отбрасывать лишнее и сходиться к решению. Главная мысль в том, что дизайнер не исчезает из процесса. Наоборот, его роль становится шире: нужен вкус, ремесло, точка зрения, понимание пользователей, умение работать с прототипами, кодом, агентами и обратной связью от реальных клиентов. ИИ может ускорить перебор вариантов, но выбор направления, качество решения и ответственность за продукт всё равно остаются за человеком. Внутри: – Почему «дизайн как новый код» не означает замену дизайнеров; – Как Фигма пытается соединить canvas, код, прототипы и продуктовую разработку; – Почему прямые визуальные манипуляции могут быть сильнее одних промптов; – Зачем дизайнерам и лидерам быстрее включаться в прототипирование; – Как агенты ИИ помогают исследовать варианты, но не принимают продуктовые решения; – Почему процесс разработки всё меньше похож на линейную цепочку; – Как слияние ролей может быть полезнее гиперспециализации; – Почему вкус, ремесло и точка зрения становятся важнее в эпоху доступных инструментов. ➡️ Смотреть видос (EN) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

10 июня в 18:00 (gmt+3) делаем открытый воркшоп про кириллицу в ui. вместе с дизайн-лидами pragmatica ⚪️ дианой кузнецовой и ⚪️ денисом суворовым расширим базу кириллических шрифтов, разберем, как работают шрифтовые пары, и научимся применять выразительный шрифт, чтобы добавить характер интерфейсу✏️ формат: 1,5 часа онлайн, теория + практика будем работать с макетами участников и с интерфейсами большой практики, где есть кириллица: покажем, как применять Lebowski by Pragmatica и другие дополняющие шрифты пять человек попадут на разбор своих работ, для этого нужно пройти регистрацию и заполнить анкету. зрители тоже смогут тренироваться и пробовать миксовать шрифты на готовых макетах от нас ⚪️ регистрация в боте collective

Сократить слово «бык» — «бк» — «б». Хорошая практика для дизайнера работать на минимизацию концепта. Когда уже есть визуальная, проработанная концепция и её надо свести к минимуму не потеряв смысла и узнаваемости. Хорошо подходит для задач и брендинга и продуктового дизайна и работы с промышленным дизайном. Это не про удаление лишнего, а скорее мышление от рационального и точного к абстрактному, но интуитивно понятному, чтобы снизить когнитивную нагрузку. Условно, упрощение, минимализация интерфейса помогает пользователю быстрее принимать нужные решения, узнавать, вспоминать, использовать свой опыт и испытывать радость от того, что «сразу всё понятно». Часто проблема у дизайнера в том, что он излишне может усложнять систему коммуникации и перегружать решение дополнительными «подсказками». Этот прием подходит и для работы с брифом и ТЗ на дизайн, его сокращение до ключевой сути и задачи. «Бык» Пабло Пикассо — это серия из одиннадцати литографий, созданная в 1945 году. На ней изображен бык на разных этапах абстракции: от довольно реалистичного изображения до нескольких линий. Кстати, обратите внимание, что буква «б» естественным образом может напоминать быка. 

Фигма 28 мая выкатила важный апдейт Make: теперь инструмент можно подключить к локальной кодовой базе. Открываешь существующий проект, выбираешь элемент на экране, правишь свойства, отступы, цвет, размер, раскладку, а агент уже находит нужное место в коде и вносит изменения. Пока это ограниченная бета в десктопном приложении для Mac. И сама Фигма честно пишет, что лучше всего это подойдёт дизайнерам, у которых уже есть доступ к кодовой базе компании. Раньше вайбкодинг в дизайне чаще был про быстрый черновик. Собрал экран, показал идею, выбросил половину, что-то утащил в работу. Вроде полезно, но всё равно чуть отдельно от настоящего продукта. А теперь Фигма Make пытается работать с тем местом, где продукт уже живёт. Самый важный вопрос теперь: кто имеет право двигать кнопку, если эта кнопка уже в коде? Потому что визуальная правка реального интерфейса звучит очень соблазнительно. Увидел, что отступ кривой, выбрал блок, поправил. Текст не тот, поменял. Цвет уехал, вернул. Не надо писать разработчику «можешь тут 8 пикселей вместо 12», ждать, объяснять, показывать скрин, потом снова смотреть, что получилось. Но чем ближе дизайнер подходит к коду, тем быстрее появляются взрослые вопросы: 1. кто проверяет такие изменения 2. что считается безопасной правкой 3. где начинается логика, а где просто внешний вид 4. кто отвечает, если агент поменял не тот компонент 5. как откатиться, если всё поехало Фигма это понимает, поэтому делает не «пуш в прод», а нормальный путь через разработку. Изменения сначала лежат как локальные коммиты. Можно создавать ветки, смотреть историю, откатываться, а потом открыть пулл-реквест, чтобы инженеры проверили правку как обычное изменение в коде. И это, по-моему, правильная часть новости. Не сам факт, что дизайнер может подвигать блок в живом проекте. А то, что Фигма пытается встроить это в нормальный процесс разработки. Через ветки, коммиты, проверку и возможность отката. Потому что без этого будет весело примерно два дня. Потом кто-то визуально поправит карточку, агент заденет общий компонент, уедет ещё десять экранов, разработчик откроет код и спросит, кто вообще это сделал. Но я бы не хотел, чтобы это стало режимом «дизайнеры теперь сами чинят фронт». Скорее это должно быть как быстрый слой для понятных UI-правок. Поправить отступ. Проверить состояние. Подкинуть вариант. Открыть пулл-реквест. Дальше уже обычная проверка. Ещё важная штука: Фигма разрешает копировать экраны из Make обратно на холст как слои, обсуждать с командой и потом приносить решения назад в код. Это уже похоже на нормальный круг: продукт живёт в коде, команда думает на холсте, изменения возвращаются через понятный процесс. Если Фигма сможет удержать этот круг без бардака, будет сильно. Потому что дизайнеру часто не нужен ещё один генератор красивого прототипа. А вот дизайн-ревью проводить и за качеством прода следить гуд, ибо разработчики лажают оч часто. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы