🗂 Вкладки работают, пока не пытаются заменить всю навигацию

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

Набор из 16 паттернов Install ️

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

Набор самых базовых паттернов Install ️

Порой эти птицы высокого полёта прилетают к дизайнерам с неописанными, как с позиции дизайнера часто кажется, непродуманными и даже субъективно нелепыми задачами. Задачами, в которых не учитываются интересы смежных команд или нарушаются UX-паттерны. Задачами, в постановке которых уже присутствует решение, которое остается лишь визуализировать в Фигме. Даже если дизайн-процесс подробно описан, есть шаблоны и правила заведения задач, чеклисты и прочее, всё это часто игнорируется высокоуровневыми менеджерами, да и простыми продактами, чего уж там. То, как дизайнер с этим работает — это тоже скилл. Многие синьоры, лиды и даже хэды считают себя не в праве оспаривать постановку задачи, поправлять заказчика и предлагать иную точку зрения для достижения того же или более высокого результата. Другие же просто опасаются негативных карьерных последствий (не хотят быть «сложными», боятся попасть под сокращение или просто тяжело переживают напряжение и конфликт). Но ловушка здесь в том, что соглашаясь выполнять заведомо некорректную задачу, которая может привести к негативному результату, дизайнер становится ответственным за этот негативный результат. В итоге именно дизайнера, будь он синьор, джун или хэд и обвинят в том, что он «знал, но не поправил, знал, но промолчал», а ещё влетит от смежников. Поэтому никогда не стоит молча соглашаться на заведомо некорректно поставленную задачу, даже под разными методами манипуляций и давления на вас. Прежде, чем начать что-то делать, всегда нужно использовать опцию диалога — высказать все аргументы против, привести в доказательство результаты тестов аналогичных кейсов или данные ваших исследований, решения конкурентов и другие аргументы. И приводить их столько, сколько потребуется. 🌊🌊

Впервые в истории турнир с 48 командами станет более доступным 💜 Сурдоперевод Опять же впервые в истории FIFA трансляция с сурдопереводом на каждом матче. Это иммерсивный опыт для глухих и слабослышащих болельщиков: переводчики передают не только игровые моменты, но и ключевые звуковые сигналы — свистки арбитра, рёв трибун, эмоциональные сдвиги атмосферы, — чтобы зрители чувствовали каждый момент в реальном времени. Всё это живёт в официальной аппке FIFA World Cup 2026™. Я хотела протестировать её на доступность, но она недоступна в рф. Субтитры На стадионах они идут на бегущих строках, табло и экранах, плюс по ссылкам в приложении — для тех, кто хочет следить за голосовым контентом во время матча. Хаптика Это доска размером с планшет с рельефной схемой поля. Кладёшь пальцы на поверхность и следишь за игрой на ощупь: по схеме движется магнитное кольцо — мяч, а у каждого события свой паттерн вибрации — пас, подкат, удар. Незрячий болельщик буквально чувствует игру: где мяч, в какую сторону атака, гол. Будут на стадионах в Далласе, Нью-Йорке, Сиэтле и Ванкувере. Сенсорные пакеты и сенсорные комнаты На каждом стадионе будут доступны сенсорные пакеты с шумоподавляющими наушниками, fidget-инструментами и средствами коммуникации. Также будет оборудована сенсорная комната с приглушённым освещением, звукоизоляцией, тактильными арт-объектами и мягкими сиденьями. Моя дочка устаёт от шума, и для нас такие комнаты — огромное спасение. Когда вокруг 50 тысяч кричащих людей, возможность выйти на десять минут в тихое место, выдохнуть и вернуться к игре — спасает от побега с игры ) Официальное приложение турнира тоже сделано с учётом доступности — обещают регулируемый размер шрифта, настройку цветового контраста и субтитры к видео. Ну вот это я проверить не могу. Если вы не в рф, качните, гляньте, что там. И если несложно, напишите в комментах, как всё реализовано на самом деле. Очень интересно ) На сайте FIFA посмотрела быстро: работает со скринридером (но нужно тщательнее проверять), альты прописаны, даже есть изображения в разных размерах, значит сайт быстрее загрузится, контрастность гуд, таб работает, зуммируется все прекрасно, текст не обрезается. И знаете, это большая работа. Просто молодцы! За кого болеть будем? ⚽️

🔶 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. Культура будет способствовать информационной осведомлённости о важности доступности, а законы обяжут выделять на это ресурсы.

#уроки

#уроки

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

Install plugin

Юрий Ветров в отрывке из «Паттернов дизайн-менеджмента» разбирает T-образного специалиста как ответ на реальную проблему продуктовых команд. Чем сложнее продукт, тем дороже становится конвейер, где один человек собирает требования, второй рисует, третий исследует, четвертый объясняет разработке, а пятый пытается вернуть всё обратно в продукт без потерь. Главная мысль в том, что современному дизайнеру недостаточно хорошо делать макеты. Ему нужно понимать бизнес, продуктовые требования, пользователей, разработку, аналитику, ограничения платформы и процесс запуска. Не на уровне «я теперь продукт-менеджер и фронтендер», а на уровне, который позволяет брать ответственность за результат, договариваться с командой и проводить решение до живого продукта. Внутри: – Почему сложные дизайн-задачи почти всегда лежат на стыке ролей; – Как узкая специализация увеличивает транзакционные издержки; – Почему дизайнеру важно отвечать не только за макет, но и за продукт; – Зачем продуктовый дизайнер должен понимать менеджеров, разработчиков и бизнес; – Почему лучшая спецификация часто не документ, а работающий продукт; – Какие hard skills и soft skills формируют T-образного специалиста; – Чем отличаются осведомленность, умение, экспертиза и лидерство; – Почему автоматизация и работа руками становятся частью современной дизайн-практики. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🔶 В Ташкенте бывшая мечеть стала центром традиционных ремесёл. Ливанский дизайнер Нада Дебс адаптировала заброшенную мечеть Охун Гозар под общественное пространство с мастерскими и выставками. Конструкция здания сохранена почти полностью: остались арки, коридор анфиладного типа и купола. Восстановлены колоритные узбекские штукатурки, добавлены деревянные панжары (геометричные решетки). В интерьере много дерева, местного, газганского мрамора и света, отчего ярче чувствуется история места. 🔶 Четыре A’Design Awards 2026 получили работы Алексея Данилина. Коллекции российского предметного дизайнера для бренда Maytoni отметили не только за форму и функциональность, но и за концептуальную идею. Проекты выиграли в категориях интерьерного, архитектурного и уличного света. Особое внимание привлекла коллекция Anima, в которой сплетены техника, философская концепция единства противоположностей и отсылка к юнгианскому архетипу «анима». 🔶 Народная роспись как стритстайл: дроп Monochrome × «Гжель». Кобальтовые цветы и орнаменты переехали с сервизов на худи, аксессуары и лимитированные коллекции предметов для дома. Дизайнеры собрали из архивных материалов гжели цельный современный паттерн, объединив его с фирменным визуалом Monochrome. Также в коллекции есть крупные вазы, созданные вручную мастерами творческого объединения. 🔶 Меньше шума, больше смысла: бренд-платформа осознанных коммуникаций Okkam Creative. Okkam Creative переупаковали себя как агентство, которое делает креатив не только красивым, но и заранее просчитываемым. Команда собрала бренд-платформу «осознанных коммуникаций», где каждая идея должна опираться на данные, инсайты и медийный контекст, а не рождаться в вакууме и оправдываться постфактум. В новой айдентике использованы спокойная серая палитра, жёлтый акцент как метафора энергии и ясности, плюс монограмма OC. 🔶 Неразборчивый, но осмысленный: создан новый шрифт с «почерком врача». Шрифт Hellcare Regula собрал в себе все стереотипные признаки «врачебного» письма: рваные ритмы, скачущую толщину штриха, спаянные между собой буквы, которые читаются только «посвящёнными». Это потенциальный медиум для проектов о медицине, а также социальный проект о том, как пациентам бывает сложно воспринимать информацию. [Фабрика Дизайна]

Install plugin

Здесь вы найдёте коллекцию милых цветочных паттернов для самых разных задач. 👀Скачать паттерны👀 #материалы

Если в дизайн-системе у иконок ограниченный набор размеров, это почти всегда превращается в отдельную архитектурную проблему. Снаружи всё выглядит просто: ну есть 12, 16, 20 и 24 пикселя, что тут обсуждать. А потом выясняется, что один подход удобен библиотекарю, но раздражает потребителя, второй красиво выглядит в теории, но ломается на вложенных компонентах, а третий требует больше ручной поддержки, зато лучше всего ведет себя в реальной работе. Алиса Пакард очень внятно разбирает эти варианты и приходит к практичному выводу: лучший компромисс сейчас это size-свойство на каждом icon-компоненте, а не отдельные компоненты на каждый размер и не обертка для иконок. Потому что этот способ дает больше контроля там, где он нужен, не ломает опыт потребителя и лучше сочетается с preferred swaps и другими паттернами внутри библиотеки. Внутри: – Почему отдельные компоненты под каждый размер иконки быстро захламляют библиотеку; – Зачем подход с variable modes выглядит заманчиво, но плохо масштабируется; – Чем icon wrapper удобен для поддержки, но неудобен в реальном UI; – Почему вложенные иконки внутри кнопок и других компонентов всё усложняют; – Как size-свойство на каждом icon-компоненте решает проблему гибче; – Почему этот подход лучше для preferred swaps и настройки конкретных компонентов; – Какой компромисс приходится принять библиотекарю при таком решении; – Почему в управлении размерами иконок сейчас важнее опыт потребителя, чем удобство внутренней поддержки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Сейчас я больше работаю с Claude, поэтому задумалась об экономии ) Что накопала — делюсь ) Токен — это кусочек текста, чуть меньше слова, для английского ≈ ¾ слова, для русского дороже, кириллица дробится на большее количество токенов). Вот тут первый лайфхак: пишите на английском ) При каждом сообщении модель обрабатывает: • Входные токены — вся история чата целиком, системные инструкции, прикреплённые файлы, инструкции проекта. • Выходные токены — собственно ответ Claude. Ключевой момент: история читается заново на каждом шаге. Поэтому чем длиннее диалог, тем дороже каждая следующая реплика, даже если она короткая. Как тратить меньше токенов? • Планировать сообщение. Объединять связанные вопросы в одно сообщение. • Новая тема — новый чат. Не таскать за собой длинную нерелевантную историю. • Длинные тексты и документы, к которым обращаешься многократно, держать в Проектах и формате md: содержимое кэшируется (а в RAG-режиме подгружается только релевантными кусками) и не списывается заново при каждом сообщении. • Отключить ненужные инструменты и коннекторы в настройках. • Выключать extended thinking, когда задача простая. • Выбирать текст, а не скрин. Для сравнения: 1 000 токенов ≈ 750 слов текста. • Подбирать модель под задачу — для простого незачем брать Opus. Как отслеживать расход? Сlaude.ai/settings/usage — прогресс-бары текущей сессии и недели для Pro/Max/Team. Это запаздывающий индикатор: он показывает «сколько процентов плана съедено», но не счётчик токенов конкретной реплики. Claude Code: команда /cost показывает потокенный расход сессии, /stats — паттерны во времени; плюс локальные JSONL-логи, которые читают сторонние мониторы. API: точное число входных/выходных токенов в каждом ответе + отдельный эндпоинт для предварительного подсчёта. en<able> - о дизайне в A11y | Наши статьи на VC

Не очень хитро маскируют согласие на получение рекламы, выставляя его как обязательный чекбокс на обработку ПД При этом сама обработка ПД сделана просто текстом без активного действия (а это риск штрафа) Ну и кнопка «подробнее» тоже потеряна в тексте

#уроки