Минутка веб:

Дизайнер Zsolt Kacso экспериментирует с эффектами интерфейса разрабатывая интерактивную версию прототипа с помощью html-in-canvas и Three.js.

Обычный автокомплит показывает список под полем. Typeahead работает иначе: продолжение появляется прямо внутри строки, и за счет этого пользователь не прыгает взглядом между инпутом и выпадающим списком. На словах просто. На деле это почти полностью кастомное поведение, которое не совпадает с нативной логикой HTML-инпутов. Флориан Шульц очень хорошо разбирает, почему такая штука сложнее, чем кажется. Сначала он попробовал идти через реальное выделение текста, но на iOS это сразу развалилось из-за ручек выделения и странного поведения браузера. Потом пришел к overlay-подходу, где completion рисуется поверх инпута отдельным слоем, а дальше началась настоящая инженерия: beforeinput, кастомная обработка backspace, скрытие каретки, переполнение текста и даже проблема кернинга, из-за которой буквы начинали прыгать при вводе. Внутри: – Чем typeahead отличается от обычного автокомплита со списком подсказок; – Почему решение через реальное выделение текста ломается на мобильных; – Как работает overlay-подход с отдельным слоем поверх инпута; – Какие события приходится перехватывать, чтобы поведение было естественным; – Почему стандартный Highlight не дает одинаковый результат в разных браузерах; – Как обрабатывать состояния фокуса, очистки и переполнения текста; – Откуда берется проблема с кернингом при разбиении строки на span; – Как можно компенсировать этот сдвиг, не отключая кернинг полностью. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Посмотреть расширение

А пока я загружаю дизайн-систему туда, напишу про заявленную доступность Claude: • Аудит компонентов на соответствие WCAG 2.1 / 2.2 (A, AA, AAA) — контрастность, фокус, таб-порядок, размеры тач-таргетов • Проверка и генерация корректной ARIA-разметки (roles, states, properties, live regions) • Проверка работы с клавиатурой и фокуса • Анализ семантики HTML, heading hierarchy, landmark-регионов • Проверка alt-текстов • Генерация A11y-документации для компонентов дизайн-системы (do's/don'ts, примеры использования) Есть набор Accessibility Agents — специализированных агентов для Claude Code, GitHub Copilot и Claude Desktop, которые проверяют код на соответствие WCAG 2.2 AA, покрывают i18n/RTL, дата-визуализации, email, медиа, web components Пока сама не тестировала, попробую попозже )

Вот как позиционируют, дальше цитата: "⚡️ Claude пришёл убить Figma: Anthropic выпустили Claude Design — платформу для создания дизайнов, прототипов, слайдов, презентаций и других визуалов. Под капотом мощнейшая Opus 4.7 — одновременно с этим самая креативная модель компании, которая создаёт оригинальные дизайны. Работает с обычного текстового промта, результат можно вытащить в форматах PDF, PPTX, HTML или экспортировать в Canva."

Дима Бороухин @dmboro — в прошлом дизайнер и веб-разработчик. После потери зрения объединил свои технические знания с личным опытом и стал консультантом по цифровой доступности. — Ты пробовал использовать Claude или ChatGPT со скринридером или с клавиатуры — как это работает на практике? Я пробовал ChatGPT, однако по удобству взаимодействия мне больше понравился Gemini. Его интерфейс вполне доступен: элементы управления имеют корректные роли, имена и состояния, что позволяет скринридеру считывать структуру страницы. В своей работе я активно применяю AI для подготовки HTML-страниц для презентаций — чтобы показывать командам типичные проблемы доступности. Грамотный промпт позволяет сгенерировать страницу, где один элемент оформлен эталонным кодом, а остальные имеют аналогичный дизайн, но содержат критические ошибки — например, невозможность установить фокус. Визуально всё выглядит одинаково, но при взаимодействии через клавиатуру или скринридер различия становятся очевидными. Также я использую AI для подбора цветовых схем и помощи в написании CSS-кода. — Ты знаешь кейсы, где AI улучшил доступность продукта? или хотя бы часть? Комплексных кейсов, где AI улучшил доступность продукта, в моей практике не встречалось. Вижу нейросети лишь в точечных задачах — как в примере с описанием изображений, о котором расскажу дальше. — Есть ли риск, что AI-инструменты для доступности обучены на данных, которые не отражают реальный опыт людей с ограниченными по здоровью? Риск, безусловно, есть. AI может отлично знать теорию и стандарты, но их всегда нужно проверять на практике. Реальные сценарии взаимодействия со вспомогательными технологиями часто сложнее, чем их описывают в документации. Пример из жизни: недавно я просил AI создать примеры недоступных кнопок. Модель предположила, что «поломанная» кнопка будет полностью неработоспособна для скринридера. Однако на практике скринридер NVDA умеет эмулировать нажатие даже там, где код реагирует только на клик мыши. В итоге для пользователя скринридера кнопка может сработать, а для человека, использующего только клавиатуру, она останется недоступной. Я не разработчик нейросетей, но как консультант по цифровой доступности могу сказать: чтобы ситуация изменилась, в данные для обучения моделей нужно включать больше примеров реального поведения ассистивных технологий. Важно, чтобы AI видел не только идеальный код, но и понимал нюансы взаимодействия разных групп пользователей с интерфейсом. — 70% новых приложений создаётся на low-code и no-code платформах. Люди без технической базы делают продукты для миллионов. AI научит их паттернам доступности? Теоретически — может, но на практике всё зависит от того, как сформулирован запрос. Если создатель продукта не осведомлен о принципах доступности, он просто не включит эти требования в задачу для AI. А без явного запроса модель проигнорирует эти нюансы ради скорости разработки. Важно помнить: доступность — это не только формальное соответствие ГОСТу или WCAG. Прежде всего это про пользовательский опыт. Можно создать приложение, которое формально пройдет все автоматизированные тесты, но при реальном использовании окажется неудобным. — В России активно пользуются технологиями с Ai — зарубежные скринридеры, программы по типу Open your eyes, есть ли надежда, что подобные сервисы будут разрабатываться российскими разработчиками? Это уже реальность. Я постоянно пользуюсь отечественными решениями. Например, «Умная камера» Яндекса — незаменимая вещь в быту: она помогает отличить бутылку молока от кефира в холодильнике, когда упаковки идентичны. Недавно я показывал зарубежным коллегам функцию описания изображений в Яндекс Браузере. В одном онлайн-магазине одежды вместо внятных alt-текстов были маркетинговые названия коллекций. Нейросеть Яндекса точно описала суть: состав комплекта, цвета, фасон. Это тот случай, когда AI исправляет ошибки контента «на лету». Так что — большой респект и спасибо команде инклюзии Яндекса за их работу!

В последнем обновлении появилась возможность экспортировать проект в один HTML-файл для прямой отправки клиентам. ✅ Плюсы • Плавное воспроизведение, максимально возможное качество • Просмотр всех анимации и скинов с элементами управления плеера • Один файл, удобно делиться • Настройка скорости и отладка анимации ❌ Минусы • Нет превью при отправке, нужно открывать файл или ссылку • Большой вес при работе со сложными проектами • Не подходит для платформ без поддержки HTML • Нет встроенной системы отзывов или комментариев • Длительная загрузка (все ресурсы грузятся сразу) Пример: https://warmanw.com/spine/wildlife/horse.html

Мы — Nimax, создаём опыт бренда, который работает на рост бизнеса. Задачи: — собирать требования, продумывать структуру, пользовательские сценарии и логику — проектировать интерфейсы и собирать проекты на Tilda — разрабатывать UI-концепции и масштабировать их на весь проект — прорабатывать адаптивы и микроанимации Ожидания: — опыт в веб/продуктовом дизайне от 4–5 лет — умеете продумать логику и быстро собрать визуально точное решение без долгих итераций — работали с разными веб-проектами: сайты, лендинги, сервисы — Figma, сборка на Tilda и базовый HTML/CSS Условия: — полная удалёнка или гибрид с офисом в Петербурге или в других городах — начало в промежуток с 09-11 по МСК, окончание с 18-20 по МСК — заработная плата по результатам собеседования — оплачиваемое обучение на курсах и интенсивах → Подробнее Контакт для отклика: rabota@nimax.ru #дизайн

Я знаю, что в канале много ребят, кто хочет зайти в дизайн, но пока не понимает, с чего начать. Хочется в креативную профессию, желательно без кода, с понятным входом и нормальной практикой, а не просто посмотреть лекции и потом самому пытаться собрать это в систему. У Нетологии как раз стартанула программа «Веб-дизайнер» 20 марта. Она рассчитана на новичков, так что можно зайти вообще без опыта в дизайне и без знания кода. Учат Figma, Tilda, композиции, UX, адаптивам, а на расширенных программах еще дают 3D, анимацию, HTML/CSS и нейросети. 👍 Почему полезно Есть интерактивный Figma тренажер с обратной связью, проекты в портфолио на основе кейсов от МТС, Lamoda и ВсеИнструменты.ру, плюс можно собрать до 11 работ. То есть на выходе будет не только теория, но и что реально показать работодателю или клиенту. Еще нормальный плюс, что после учебы не оставляют один на один с рынком. Помогают с резюме, карьерным планом, откликами и собеседованиями, проводят эфиры с HR и поддерживают еще 12 месяцев после окончания курса. 💎 Преподаватели Тут тоже не случайные люди, а ребята из сильных продуктовых и агентских команд. Например, Олег Зильберг, дизайн-директор AGIMA. Андрей Верёвкин, Lead Designer в Газпромбанке. Сева Шапошников, Digital Growth Designer в Miro. Ярослав Трегубов, продуктовый дизайнер hh.ru. Плюс есть эксперты из Ubisoft, Mish.design, AFFINAGE, MateÇa и других компаний. В общем, учить будут те, кто сам каждый день работает с реальными продуктами и клиентскими задачами. 🎤 По формату тоже ок: все онлайн, можно совмещать с работой, занятия проходят до 2 раз в неделю после 19:00 мск. По длительности есть 3 варианта, на 6, 12 или 14 месяцев, в зависимости от того, насколько глубоко хотите зайти. И да, по промокоду NETONEW10 в марте действует дополнительная скидка 10% на эту или другую программу Если давно хотели в веб-дизайн, но все откладывали, вот вполне понятная точка входа. 🔠 Влиться в веб-дизайн 🔠 Влиться в веб-дизайн 🔠 Влиться в веб-дизайн

Незрячий разработчик разобрал доступность web3-проекта Moni. Доступность в финтех и web3 редко рассматривается как обязательная часть архитектуры. Внимание уделяется визуальной составляющей, а сценарии использования без мыши или без экрана остаются вне фокуса. Выяснил: примерно 40-60% интерфейса требует доработки с точки зрения accessibility. Большинство проблем не архитектурно сложные, это вопросы корректного использования aria-атрибутов, логичной структуры заголовков и поддержки клавиатурной навигации. Внутри: – Кнопки без описания: под полем «Check account» должна быть кнопка поиска, но есть элемент "По щелчку" без описания; – Заголовки на каждой строке: неудобно слушать текст, когда каждая строка это заголовок уровня 1 или 2; – Таблицы представлены кнопками: столбцы это кнопки, нет нормальной HTML-таблицы с table, tr, th, td; – Слияние строк без пробелов: «Ethereum$395.790.1 ETH100%+0%», «L117.62%-1.93%», «Smarts244+1»; – Курсор не попадает в модальные окна: после клика по «Manage filters» курсор не переходит к настройкам; – Поиск недоступен с клавиатуры: ввел HYPE, что-то появилось на экране, но с клавиатуры не смог поймать и перейти; – Кнопки навигации без названий: первая и последняя в постраничной навигации неподписанные, лучше «First» и «Last»; – Решения простые: использовать aria-label=«Name» у элементов, tabindex=-1 и .focus в JS для фиксации курсора, разделять блоки h2 и h3 заголовками. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Ищут специалиста с продуктовым мышлением, вкусом и амбициями задавать уровень в iGaming и за его пределами. 📢 Что ожидают: - Более 3 лет опыта на аналогичной позиции и портфолио с продуктовыми кейсами; - Практический опыт с User Story, CJM, JTBD, качественными и количественными исследованиями; - Понимание HTML/CSS и JS; - Использование AI-инструментов для ускорения работы; - Плюсом будет умение в анимацию; - Плюсом будет интерес к крипте. 😍 Что предлагают: - Удаленку из любой точки мира; - Конкурентную заработную плату; - Английский, профильное обучение, компенсацию спорта и психолога; - Нескучную корпоративную культуру: киберспорт и воркшопы; - Реальное влияние на UX-стратегию продуктов холдинга; - Свободу принимать решения и тестировать гипотезы; - Среду, где можно расти быстрее через ответственность и сильную команду рядом. 🔠 Откликнуться в боте 🔠 Откликнуться в боте 🔠 Откликнуться в боте

WIM.Agency — агентство CRM-маркетинга. Наши клиенты: Яндекс.Плюс, Додо Пицца, Перекресток и другие классные проекты. Задачи: — настраивать сценарии и цепочки коммуникаций в Bloomreach: уточнять требования, проводить тесты и валидацию — формировать ТЗ для разработки — вести коммуникацию с клиентом — тестировать результаты, следить за качеством, готовить отчётность Ожидания: — проживание вне РФ — опыт работы Project Manager в IT от 1 года — опыт с Bloomreach или другими CDP/ESP — умение ставить задачи разработчикам, понимание ролей в IT‑команде — понимание CJM, веб‑аналитики и логики интерфейсов — базовое знание HTML/CSS — приветствуется опыт с AI‑инструментами — английский B2 Условия: — опыт работы с международным рынком и крупными брендами — официальный контракт с первого дня, зарплата в USD — удалёнка 5/2, график 9:00–18:00 по мск — 4 дополнительных дня отдыха в год Контакт для отклика: e.likhotina@wim.agency

Плагин генерирует HTML шаблон электронного письма из выбранного фрейма. Install

Каждый лид скажет своё: один требует исследования, другой сильный UI, третий «аналитический склад ума». А что на самом деле пишут в вакансиях? Я вот честно не особо вникал, пока не увидел эту статью. Илья Чирков из 2ГИС проанализировал 100 вакансий от 68 компаний: Яндекс, ВК, Сбер, Т-Банк и другие. Вытащил все требования, посчитал частотность и составил рейтинг. Топ хардов: проектирование, исследования, контроль разработки, аналитика, Figma. Но есть нюанс: сильный UI упоминается только в 20% вакансий, при этом слабый визуал часто становится причиной отказа. Внутри: – Пять главных хард-скиллов с разбором, как их качать; – Три ключевых софта: коммуникация, аргументация, проактивность; – Должен ли дизайнер проводить исследования; – Почему знание основ HTML и CSS всё ещё актуально. Вы когда последний раз смотрели детально, что там пишут в ваках в целом?)) ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Задачи: — сегментация клиентских баз, внедрение персонализированных коммуникаций — настройка цепочек и массовых рассылок — сбор аналитики отправок, построение дашбордов и выводы для оптимизации — проведение А/Б тестов для повышения эффективности рассылок — взаимодействие с поддержкой ESP/CDP по вопросам реализации и проблемам Ожидания: — опыт работы с базами данных, базовый SQL — опыт запуска маркетинговых кампаний — работа с ESP/CDP-платформами — основы HTML/CSS, понимание работы HTML-препроцессоров — понимание настроек DKIM/DMARC/SPF — английский на уровне Intermediate Условия: — работа с известными брендами и возможность создать сильное портфолио — официальное трудоустройство с первого дня и своевременные выплаты — поддержка команды и наставничество от Team Lead — удаленная работу из любой точки мира — график 5/2, с 10:00 до 19:00 по мск Контакт для отклика: @likhotinakatya #маркетинг

#вдохновение@zhurnalus_lite #сайт@zhurnalus_lite

Агент работает на базе Nano Banana Pro 🍌 и умеет превращать получившиеся редизайны в рабочий HTML-код. Помимо этого, в Stitch появилась возможность мгновенно оценивать распределение внимания на экранах с помощью тепловых карт.

email2go.io/features/email-template-testing-tool

Как и обещал, проведем для вас интенсив по HTML-верстке. Дизайнеру важно понимать, как технически реализуются макеты — это помогает заранее продумывать дизайн так, чтобы он корректно собирался в разработке. Интенсив пройдет 26 и 27 ноября, на нем мы вместе с командой Taptop разберем: • основы HTML-верстки • основные термины • как правильно передавать макет в разработку 📌 Плюс будет практика, где вы сможете самостоятельно сверстать проект на визуальном редакторе кода Taptop. Он позволяет работать по принципам реальной верстки, при этом не требует знания кода. Подробная программа на 2 дня интенсива: 🗓 26 ноября: ⬥ Расскажем, почему дизайнер, который понимает верстку, становится сильнее, дороже и востребованнее, и зачем вообще дизайнеру разбираться в логике кода. ⬥ Разберем частые ошибки дизайнеров в макетах. ⬥ Объясним, как думает разработчик: что для него важно, почему он “ломает” макет, как он считывает структуру, что такое чистый код. ⬥ На примере Taptop разберем, что такое логика визуальной верстки и почему дизайнеру важно понимать структуру. ⬥ Рассмотрим, что такое HTML простым языком: структура страницы, теги, div, DOM. ⬥ CSS в понимании дизайнера: позиционирование, построение структуры, работа flex и grid, поведение блоков, связь дизайна и кода. ⬥ Принципы адаптации дизайна: mobile-first и desktop-first, брейкпоинты, базовые правила адаптива. ⬥ Посмотрим и разберем реальные кейсы студентов и партнеров, а также вы получите практическое задание 🗓 27 ноября: ⬥ Разберем ваши работы: рассмотрим типичные ошибки, расскажем, как сделал бы разработчик, а также подарим вам чек-лист передачи макета. ⬥ Практика: сборка макета в Таптоп, создание адаптива и мобильной версии. ⬥ Подведем итоги и подарим бонусы участникам: чек-лист передачи макета, методичка по терминологии, а также запись практики. ⚡️ Зарегистрироваться на интенсив P.S. В видео к посту — реализованные сайты студентов Uprock на Taptop, посмотреть их подробнее можно по ссылкам 👇 ➤ Тигран Шагоян — Shagoyan ➤ Наталия Кузнецова — Laguna Al-Sha'ab ➤ Наталья Лебедева — Бризант

Думаю, будет очень полезно провести интенсив по HTML для дизайнеров. Достаточно знать базовые принципы: как строятся блоки, что может быть в интерфейсе, а что — нет. И когда вы поймете эти основы, ваши макеты станут чище, логичнее и проще в сборке. А значит — будет меньше правок и меньше стресса после передачи проекта в разработку. Что думаете, интересна вам такая тема? Поставьте 🔥 к этому посту, кто хотел бы поучаствовать в таком интенсиве с практикой и разбором ваших домашних заданий.