Веб-дизайн *

Почему мы решили делать именно Конструктор форм?

Т.к. мы пилим продукты и нам важна Обратная связь от пользователей - мы ее собираем в Google Forms, они оч крутые, но есть пара нюансов:

1) Обработка персональных данных по закону должна быть в РФ. Штраф до 500к рублей! И т.к. мы хотим делать бизнес на РФ - нам нужно использовать оператора из РФ. 

2)  Мы сейчас собрали таблицу куда приходят все “Данные” от наших иностранных пользователей. 

У нас сейчас 6 таблиц, только с 3 расширений, дальше будет больше. 

Ходить по страницам не так удобно как у всех топовых сервисов по созданию форм. 

Мы хотим видеть одну таблицу с сортировкой по последним и фильтрами по всем ответам/заявкам.

3) Уведомления в телеграм.

4) Встроить оплату и другие виджеты.

5) Кастомные домены.

Почему все сообщества инди-хакеров в России платные?

Давайте создадим свое бесплатное комьюнити для всех 👇👇👇

🖼 🚀 Я почти всегда выбираю ISR в Next.js для контентных сайтов.

Вот почему:

SSR:
- Каждый запрос = генерация страницы

SSG:
- Обновить контент = пересобрать весь проект
- При 1000+ страниц билдится часами

ISR - лучший вариант:
- Не генерит страницы сразу. Только по запросу.
- Ключевой параметр: revalidate - определяет, как часто Next.js должен перегенерировать страницы.

Например revalidate: 60 - страница обновляется раз в 60 сек, а между этим - юзер видит кэш из памяти.
Для некоторых контентных сайтов норма обновления данных 8-24 часа. Данные будут в оперативной памяти все это время.

💡 Фишка для SEO:
После деплоя (CI/CD) - страницы прогреваются скриптом, чтобы не ждать первого захода.
Это нужно чтобы поисковые боты видели всегда лучшую версию сайта, а не ждали прогрузки кеша.

📌 Вывод:
Если тебе не нужен real-time обновления сайта - ISR закрывает почти все потребности.

А чем пользуешся ты? Пиши 👇

Мега Bolt или как неройнка заменяет кучу разрабов

Разработка или Vibe Coding продолжается 3 день. Я все ещё использую Bolt и смог сделать вполне рабочий сервис. Вручную программисту потребовалось бы около 1-2 недель на такой функционал.

• Авторизация

• Редактор форм

• Просмотр ответов форм с фильтрами

• Выгрузка ответов в csv

• Шаблоны форм

• Загрузка файлов в хранилище

• Публикация формы для клиента

Все уже работает и связано с БД

Остальные скрины и ДЕМО версию пришлось опубликовать в телеге т.к. тут лимит на 1 картинку.

Я попробовал Bolt. Мои первые шаги в Вайб-кодинге.

На связи Антон 👨‍💻

Мы выбрали идею нового продукта - Form builder. Простой и минималистичный конструктор форм на замену Google Forms.

Для разработки я пробую сервис Bolt.new. Я пишу в промтах ТЗ, нейросеть генерит код за меня.

За 5 запросов я получил функционал, который писал бы пару дней. Конечно с кучей багов и недоработок. Они и в ручной разработке тоже бывают.

Сейчас прошу Bolt поправить свои же баги и сделать правильную анимацию при перетаскивании элементов формы. Посмотрим, что из этого выйдет.

А у вас какой опыт с вайб-кодингом? Писать про наш опыт с нейросетями в разработке?

Несмотря на кадровый голод в IT занято огромное количество лишних людей деятельность которых в общем-то бесполезна. А все что бесполезно как известно приносит только вред. Возьмем к примеру новомодную отрасль UI/UX которая по задумке должна улучшать пользовательский опыт - так называемый "экспириенс". На планете существует целый зоопарк разных форматов дат: 1 ноября 2000, 01.11.2000 и т.д и т.п. Это мелочь, но и в мелочах можно тот самый "экспириенс" взять да и улучшить. И он был повсеместно "улучшен" до формата "3 года назад". Как правило без какой либо возможности вернуть нормальную дату.

Теперь просто хочется простереть руки к небу и крикнуть за что это мне?

Самое печальное в этой ситуации, что исправить ничего нельзя. Этот самый "экспириенс" внедряется крупными корпорациями у которых достаточно ресурса чтобы содержать огромное количество людей не занятых ни какой полезной деятельностью и было бы лучше если бы они вообще ничего не делали. Как в нейросетях лишние веса приносят только вред, так и в индустрии, лишние отрасли приносят пользователям только вред.

ИИ-агенты могут убить привычный нам Интернет, e-commerce и заодно порушить весь рекламный рынок

Традиционный WWW построен вокруг людей: сайты оформлены для человеческого восприятия, а рекламные бюджеты тратятся на то, чтобы привлечь внимание и убедить пользователя сделать покупку.

Но с приходом в нашу жизнь ИИ-агентов эта модель устаревает:

• ИИ-агенты не реагируют на рекламу так, как люди. Они не подвержены эмоциям, не кликают на баннеры и не нуждаются в вдохновляющих слоганах.

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

• Сайты становятся интерфейсом для ботов, а не для людей: ИИ-агенты требуют структурированных данных, а не красивых витрин и описаний.

И по мере того, как ИИ-агенты будут все чаще совершать покупки в интернете вместо нас, встает вопрос изменений не только привычной инфраструктуры E-commerce, но и в ценности диджитал рекламы в сети.

Руководители e-commerce-компаний уже называют массовое появление ИИ-агентов «экзистенциальной угрозой» для всей отрасли. Стартап New Gen предлагает решение, позволяющее адаптироваться к этой новой реальности, предоставляя разные интерфейсы для людей и агентов, что помогает брендам хоть на первых порах не потерять позиции на рынке электронной коммерции.

И поскольку первый уровень коммуникации, будь то контент или продукты, все больше будет обрабатываться ИИ-агентами, для бизнеса теряется самое главное, вовлеченность и прямая связь с клиентом. А живые люди так давно все в замкнутых экосистемах и комьюнити живут (соцсети, мессенджеры).

И тогда, возможно (это гипотеза), последней точкой коммуникации с клиентом станут голосовые интерфейсы, о важности которых, говорю не только я в Новых парадигмах создания продуктов, но и уважаемый Эндрю Ын, профессор Стэнфордского университета, исследователь робототехники, машинного обучения и искусственного интеллекта.

А еще в этом же видео профессор Эндрю Ын говорит о подходе "кубиков Лего", как о современном принципе построения сложных систем из множества готовых инструментов и модулей, о чем я буквально на днях писал на Хабре, правда в другом контексте, как о способе создавать и монетизировать свои микро-продукты.

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

Контент сайтов будет генерироваться ИИ в реальном времени под конкретного пользователя или агента. А интерфейсы станут «невидимыми», взаимодействие будет происходить через голос, а там глядишь и через нейроинтерфейсы.

Google выпустила свой бесплатный генератор сайтов и приложений Stitch:

• генерит простые, но стильные дизайны; 

• под капотом мощнейшая модель Gemini; 

• экспорт в Figma буквально парой кликой 

• есть специальная фича Copy to Figma; 

• любой элемент можно отредактировать.

Хотим еще больше работ на конкурс маскота для RUNIT

Полным ходом идет конкурс на создание маскота для фестиваля IT и спорта RUNIT, и нам уже прислали около 20 супермилых персонажей, которых мы с удовольствием разглядываем всей командой. Но нам этого мало. Уверены, тема раскрыта еще не полностью и впереди много классных идей и героев. Подать работу можно до 26 мая включительно — так что присоединяйтесь.

Технической задание предельно простое: сделать обаятельного маскота, который будет олицетворять движение, силу духа, спорт, но в то же время — еще и разработку и современные технологии. Мы рады любым вариантам, даже самым смелым. Это может быть гепард со смартфоном, ноутбук в кроссовках, супергерой в зеленом костюме — кто угодно.

В конкурсе будет три призера: за третье место дарим 20 тысяч рублей, за второе — 30 тысяч, за первое — 50 тысяч. Но самое важное — что вашего перса увидят тысячи участников RUNIT.

Все условия конкурса подробно изложены на платформе Illustrators. Там же можно подать работу. Так что ничего не бойтесь, живите здесь и сейчас и присылайте свои варианты. Это будет классное приключение!

🗓 4.04 - World Webmasters Dаy [вехи_истории]

4 апреля отмечается День веб-мастера (World Webmasters Day) – праздник всех, кто разрабатывает, поддерживает и совершенствует сайты. Веб-мастера — это программисты, дизайнеры, SEO-специалисты, администраторы и многие другие профессионалы.

Выбор даты не случаен: 4.04 ассоциируется с известной ошибкой 404 «Страница не найдена». Это своеобразный символ работы веб-мастеров, ведь их задача — следить, чтобы сайты всегда работали гладко и без сбоев, но не всегда получается)

С момента появления первых веб-страниц интернет сильно изменился. Если раньше веб-разработчик отвечал за всё — от написания кода до оформления, то сегодня сфера веб-разработки включает UX/UI-дизайн, поисковую оптимизацию, маркетинг и кибербезопасность.

🩵 Поздравляю всех веб-разработчиков. Пусть ваши сайты падают реже)

YouTube | RuTube | Telegram | Pikabu

Представлена история дизайна машин «Формулы-1» и гоночных технологий с 1950 года по 2025 год. Это познавательный и информационный портал с исторической статистикой по пилотам. командам и данным по болидам.

После выхода Firefox 136 оказалось, что разработчики значительно испортили переработали стартовую страницу (about:newtab). В комментарии к новости о релизе я уже поделился своим решением, но по мере того, как подмечал новые детали, решил завести под это дело отдельный пост и время от времени допиливать его. Коротко о том, что мы исправляем: сетку с шорткатами сделали слишком узкой, слишком высокой, а при наведении курсора подпись «прыгает».

Прежде всего, для этой задачи не помогут аддоны типа Stylus, потому что по соображениям безопасности им запрещён доступ к стилизации внутренних страниц. Нам понадобится папка chrome в профиле FF. Под Windows это \AppData\Roaming\Mozilla\Firefox\Profiles\profile\chrome. Если вы хотите подправить что-то в интерфейсе (стилизовать тулбар, например), создайте там файл с именем userChrome.css. Например, так можно удалить недавно появившуюся кнопку для показа всех вкладок:

#alltabs-button
{
display: none !important;
}

Но нам нужно поменять содержимое стартовой страницы, поэтому создадим в той же папке файл userContent.css.

Сетка стала узкой и высокой, потому что кто-то из дизайнеров поменял местами промежуток по горизонтали (20px → 0) и вертикали (0 → 20px). Будем надеяться, что хоть сознательно.

Вернём всё как было (ну, или можете установить свои значения):

ul.top-sites-list
{
column-gap: 20px !important;
row-gap: 0 !important;
}

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

Исправляем:

.top-sites-list .top-site-outer .title .title-label
{
white-space: nowrap !important;
-webkit-line-clamp: none !important;
}

Ну и, наконец, шорткат можно сделать чуть побольше. Размеры его элементов рассчитываются на основе переменной, которая имеет значение 32px. Если добавить 4 пикселя, шорткат будет выглядеть, КМК, поприятнее:

:root
{
--size-item-large: 36px !important;
}

P.S. Пользуясь случаем, хочу попросить рекомендаций: чем вы пользуетесь в качестве главной страницы? Чтобы там были шорткаты (с полноценными preview, которые зачем-то убрала Мозилла), погода, калькулятор и что-нибудь ещё? Думаю, не запилить ли свой аддон со всем этим блэкджеком.

Представлен проект Scroll Buddy — анимация на полосе прокрутки.

«Вместо скучной полосы прокрутки я подумал, что было бы забавно иметь анимированную фигурку, которая ходит вверх и вниз по краю страницы, когда вы прокручиваете. Это первый прототип, который я сделал. Собираюсь сделать скейтбордиста, скалолаза или белку следующим», — пояснил авто проекта.

Иконки-кнопки и кнопки-иконки: как дизайнеру не совершить ошибку и не запутать окружающих

Хочу поделиться одним из хороших тонов в работе с нашими любимыми кнопками. Для кого‑то это может быть открытием, а для кого‑то устоявшейся базой. Общее здесь только одно — это успех данного подхода.

Иконки-кнопки

Это любые иконки, на которые можно нажать для совершения действия. Их особенность в том, что они имеют контейнер, который ограничен размером самой иконки.

Почему иконки-кнопки — это не очень хорошо?

1. Мы искажаем формулировку

   Когда мы говорим «кнопка», мы подразумеваем объект с чёткими паттернами и функциональными требованиями. Иконка же изначально — это графический элемент, а не кликабельный объект. С таким подходом один и тот же элемент может быть как кнопкой, так и просто графикой.

2. Коммуникация

   В данном случае мы не разделяем сущности. Разделение же на «иконку» и «кнопку-иконку» упрощает общение с разработчиками. Иконка — это графика, а кнопка-иконка — кнопка с графическим элементом. Это помогает избежать путаницы, когда рядом находятся кликабельные иконки и просто графические элементы.

3. Размер контейнера

   Тач-зона иконки-кнопки обычно ограничена размером самой иконки. Это делает её неудобной для использования, особенно если иконка маленькая. Можно увеличить тач-зону, но тогда есть риск наложения контейнеров, если иконки расположены близко друг к другу.

4. Дисбаланс

   Иконки-кнопки плохо сочетаются с кнопками-иконками из-за разницы в размерах и визуальной иерархии. А также система может не поддерживать иконки одинаковых размеров в разных сущностях.

5. Исключения

   Иконки Info — по ховеру или клику на которые появляется тултип с подсказкой. Для таких случаев можно заложить отдельную логику, согласованную с разработчиками. Обычно так поступают с логикой по ховеру, т.к. она отличается от логики ховера с кнопкой.

Кнопки-иконки

Это всем нам привычные кнопки, которые поддерживают внутри себя атрибут в виде иконок. Кнопки только с иконками (без текста и прочего) могут быть вынесены в отдельные компоненты для удобства.

Почему кнопки-иконки — это мастхэв?

1. Чёткость формулировок

   Нет путаницы: это кнопка с функцией действия, а не просто графический элемент (иконка)

2. Упрощают коммуникацию

   На созвонах с разработчиками мы чётко понимаем, о чём идёт речь: о кнопке или о графическом элементе

3. Системные размеры контейнеров

   Кнопки-иконки имеют отрегулированные размеры и тач-зоны, соответствующие рекомендациям платформы. Это исключает проблемы с наложением контейнеров.

4. Баланс

   Хорошо выстроенная система кнопок-иконок сбалансирована и не требует лишних усилий для выравнивания элементов

5. Ghost кнопки

   Если нужно отобразить графический элемент без подложки, используйте ghost-кнопки. Они сохраняют функциональность кнопки, но выглядят как «голая» иконка.

Итого

Использование кнопок-иконок вместо иконок-кнопок предполагает:

— Упрощение коммуникации
— Соответствие логике сущностей
— Соответствие названий элементов интерфейса логике сущностей
— Понятные и простые тачзоны
— Нативная поддержка системно сбалансированных сущностей
— Есть исключение в виде icon info

А вы выносите в отдельные компоненты кнопки с иконками? Или поддерживаете кнопки с полным набором атрибутов: иконки, текст, каунтеры и другим?

Вышла седьмая версия UIKit — ключевой библиотеки дизайн‑системы Gravity UI

Добавили больше возможностей, которые упрощают создание доступных интерфейсов.

• Все всплывающие элементы реализованы на основе Floating UI вместо устаревшего popper.js. Эта библиотека позволяет делать такие элементы более доступными и предоставляет более богатый инструментарий для настройки их поведения.

• Компоненты Button и Link расширяют интерфейс базовой кнопки или ссылки. Теперь их легче использовать как нативные элементы.

• Обновили дизайн у компонента RadioButton, заодно сменили его имя. Новое название SegmentedRadioGroup точнее отражает суть.

• Переработали Popover, удалили из него всё лишнее, упростили API — теперь компонент стал проще, понятнее и ближе к лучшим практикам разработки. Старую версию отметили как устаревшую.

• Компонент NumberInput перенесли из тестирования в основные компоненты.

• Новый компонент Breadcrumbs с улучшенной логикой схлопывания элементов и доступностью также перенесли в основные компоненты, старый отметили как устаревший.

• Переработали Tabs, теперь это набор компонент TabList, Tab и TabPanel с улучшенной доступностью. Компонент Tabs отметили как устаревший.

• Добавили новые размеры в компоненты Avatar, User и UserLabel.

• Убрали стилизацию скроллбаров страницы по умолчанию.

Полный список изменений можно посмотреть здесь. Если вы уже используете Gravity UI, будем рады обратной связи: обязательно заглядывайте в наш комьюнити‑чат. А также ставьте звёздочки на GitHub и следите за обновлениями!

Привет, Хабр! 👋 Сегодня говорим про

WCAG и подбор цветов: когда можно сделать исключения и как это влияет на доступность проекта

При проектировании интерфейсов важно учитывать доступность (a11y) и следовать Web Content Accessibility Guidelines (WCAG). Однако иногда возникают ситуации, когда строгие требования контрастности могут мешать эстетике или логике интерфейса. Сегодня разберём, когда можно делать исключения и как это влияет на UX.

Как WCAG регулирует цвет и контраст

WCAG (Web Content Accessibility Guidelines) — набор рекомендаций, который делает цифровые продукты доступными для людей с ограничениями зрения. Основные требования:

✅ Минимальный контраст текста к фону: 4.5:1 для обычного текста и 3:1 для крупного (AAA — 7:1 и 4.5:1 соответственно).

✅ Элементы интерфейса должны иметь контраст 3:1 относительно фона.

✅ Информация не должна передаваться только через цвет (например, ошибки должны сопровождаться иконкой или текстом).

Но есть ситуации, когда эти правила можно гибко адаптировать.

Когда можно отступить от строгих требований?

1. Дизайн под слабовидящих пользователей Если аудитория вашего продукта — пользователи с нарушениями зрения, они часто используют персонализированные настройки контраста и цвета. В таком случае важно дать им возможность адаптировать интерфейс (например, смена темы, поддержка high contrast mode в OS).

2. Декоративные элементы Если текст является неинтерактивным и несёт лишь декоративную нагрузку, требования к контрасту могут быть мягче. Например, логотипы брендов или фоновые иллюстрации не обязаны соответствовать 4.5:1.

3. Темные интерфейсы (Dark Mode) В тёмных темах контрастность воспринимается иначе. Чрезмерный контраст (белый текст на чёрном фоне) может быть утомительным. В таких случаях допускается снижение контраста для улучшения читабельности.

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

5. Игровые и мультимедийные продукты Если цвет является частью художественного замысла (например, в видеоиграх или анимации), строгий контраст может испортить атмосферу. Но в таких случаях лучше давать альтернативные режимы или настраиваемую палитру.

Как сделать интерфейс доступным даже при отклонениях от WCAG

💡 Добавьте альтернативные способы восприятия информации — используйте иконки, текстовые метки, контуры для важных элементов.

🎨 Тестируйте цвета на симуляторах дальтонизма — инструменты вроде Stark или встроенные в Figma помогают оценить восприятие цветов разными группами пользователей.

🔄 Позвольте пользователю выбрать контрастную тему — динамические настройки темы решают множество проблем.

📊 Проводите тестирование с реальными пользователями — иногда теоретически допустимый цвет в реальности оказывается плохо читаемым.

Итоги

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

Где почитать:
Самый полный гайд по контрастности интерфейсов от DSGNERS
Про инклюзивность и доступность от AGIMA на Хабре
Руководство по доступности контента от WCAG

До связи 🤝

Привет, Хабр! 👋

Сегодня обсудим:

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

Разберём, как заложить логику классов уже на этапе дизайна в Figma, чтобы работа была структурированной и удобной для всех участников.

Почему правильные названия классов важны?

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

Правильное именование классов:

Быстро передаёт логику интерфейса от дизайна к коду.
Упрощает поиск и правки элементов.
Ускоряет работу всей команды.

Как закладывать названия классов в Figma?

1. Осмысленно именуйте слои

Избавьтесь от названий вроде Rectangle 57. Используйте понятные иерархические названия, отражающие суть элемента:

button/primary вместо Rectangle 3.

card/header вместо Frame 7.

Используйте иерархию через /:

form/input — поле формы.

menu/item, menu/icon — структура меню.

2. Смысл важнее внешнего вида

Названия должны описывать функциональность элемента, а не его внешний вид:

❌ red-button, big-header.

✅ button/primary, header/main.

3. Группируйте элементы в компоненты

Например, карточка:

card/container — внешний фрейм.
card/header — заголовок.
card/description — текст.

4. Добавляйте комментарии

Если элемент сложный, подпишите его в Figma:

У слоя button/primary напишите: «Класс button--primary».

Как формировать названия классов в HTML?

1. Используйте методологию BEM

Методология BEM (Block Element Modifier) позволяет структурировать классы:

Блок — независимый элемент (button, card).
Элемент — часть блока (card__title, button__icon).
Модификатор — состояние или вариация (button--primary, button--disabled).

Пример:

<div class="card">
  <h3 class="card__title">Заголовок</h3>
  <p class="card__description">Описание</p>
  <button class="button button--primary">Подробнее</button>
</div>

2. Не перегружайте классы визуальными характеристиками

❌ card-blue-border.

✅ card--highlighted (если это акцентная карточка).

3. Сократите вложенность

Чем проще структура, тем легче её поддерживать.
Плохой пример:

<div class="container">
  <div class="card">
    <div class="card__header">
      <h3 class="card__title">Заголовок</h3>
    </div>
  </div>
</div>

Лучше так:

<div class="card">
  <h3 class="card__title">Заголовок</h3>
</div>

Практический пример: кнопки

В макете есть три вида кнопок: основная, второстепенная и отключённая.

В Figma:

button/primary.

button/secondary.

button/disabled.

В HTML:

<button class="button button--primary">Купить</button>
<button class="button button--secondary">Подробнее</button>
<button class="button button--disabled" disabled>Недоступно</button>

Если названия в Figma понятные, разработчик легко перенесёт их в HTML.

Частые ошибки

1. Слои без имён
   Rectangle 47 или Frame 8 только замедляют работу.

2. Визуальные характеристики в названиях
   Названия вроде red-button или big-header усложняют масштабирование проекта.

3. Сложные иерархии
   Чрезмерная вложенность в макете или коде создаёт путаницу.

Мини-чеклист для дизайнера

1. Осмысленно и структурировано именуйте слои в Figma.

2. Избегайте визуальных характеристик в названиях.

3. Используйте иерархию через / для группировки элементов.

4. Добавляйте подсказки для разработчиков.

5. Согласуйте с командой принципы именования до старта.

Итоги

Грамотно продуманные названия классов и слоёв:

Упрощают связь между дизайном и кодом.
Экономят время команды.
Делают проект удобным для доработок и масштабирования.

Закладывайте структуру на этапе дизайна, и работа станет проще для всех. 🚀

Где почитать:
BEM для дизайнеров от DSGNERS
Подробно на Хабре про взаимодействие дизайнеров и разработчиков от PIXONIC
Про нейминг слоев от Павла Пономаренко

До связи 🤝

Привет, Хабр! 👋 Сегодня говорим про

Дизайн-токены: как настроить зависимости между базовыми и сложными токенами, и не потеряться

Что такое дизайн-токены?

Дизайн-токены — это стандарт для передачи визуальных свойств (цвета, отступы, размеры, радиусы и т.д.) от дизайнера к разработчику. Они служат фундаментом для построения масштабируемых и согласованных интерфейсов.

Разделяются на:

Базовые — это минимальные элементы (цвета, отступы, шрифты). Например:

color-primary: #FF5722;   
spacing-base: 8px;   
font-size-base: 14px;  

Сложные — они зависят от базовых и описывают конкретные элементы интерфейса (кнопки, карточки, модальные окна). Например:

button-primary-bg: color-primary;
button-primary-padding: spacing-base * 2;  

Почему важно настраивать зависимости?

Представьте, что вы меняете один базовый токен, например, брендовый цвет. Если сложные токены связаны с базовым, изменения автоматически распространятся на все связанные элементы интерфейса. Это:

🚀 Ускоряет внесение правок.

⚖️ Гарантирует консистентность.

📈 Облегчает масштабирование.

Но если связи настроены плохо, изменения в одном месте повлекут ручную доработку множества компонентов, что быстро превращается в хаос.

Как настроить зависимости между токенами?

1. Начните с базы

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

Пример:

color-primary: #FF5722; 
color-secondary: #2196F3; 
spacing-base: 8px; 
font-size-base: 14px; 
radius-base: 4px;

2. Используйте базовые токены в сложных

При работе с компонентами используйте базовые токены как основу для сложных. Это создаёт гибкую систему, где каждый компонент "наследует" свойства от базовых переменных.

Пример:

button-primary-bg: color-primary;
button-primary-text-color: #FFFFFF;
button-primary-padding: spacing-base * 2;
card-border-radius: radius-base;

3. Структурируйте токены по уровням

Для больших проектов важно организовать токены в логичные группы:

Базовые токены: цвета, размеры, отступы.
Токены компонентов: кнопки, карточки, поля ввода.
Токены состояний: ховер, фокус, отключённые элементы.

Пример структуры:

// Базовые токены 
color-primary: #FF5722; 
color-primary-hover: darken(color-primary, 10%); 
spacing-base: 8px;
// Кнопки 
button-primary-bg: color-primary; 
button-primary-hover-bg: color-primary-hover; 
button-primary-padding: spacing-base * 2;

4. Автоматизируйте процесс

Для упрощения работы с токенами и синхронизации между дизайном и разработкой используйте инструменты:

Figma Tokens — плагин для создания токенов в Figma.
Style Dictionary — инструмент для генерации токенов в разных форматах (CSS, SCSS, JSON).

5. Тестируйте на реальных кейсах

Перед внедрением проверьте вашу систему токенов на нескольких компонентах. Например, как изменение базового цвета повлияет на дизайн кнопок или карточек.

Частые ошибки при работе с токенами

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

Отсутствие связи между токенами
Избегайте "хардкода". Например, вместо #000000 используйте базовый токен color-primary.

Игнорирование инструментов
Попытки вручную управлять токенами в большом проекте только усложняют процесс.

Что мы получим, если сделаем всё правильно?

Масштабируемость: легко вносить изменения без переработки всех компонентов.
Консистентность: все элементы интерфейса выглядят согласованно.
Ускорение работы: дизайнеры и разработчики быстрее находят общий язык.
Дизайн-токены — это фундамент интерфейса. Настроив правильные зависимости между базовыми и сложными токенами, вы создадите систему, которая будет служить долгое время.

Где почитать:
Простыми словами про токены на Хабре
Ультимативный гайд по дизайн-токенам на Хабре от Usetech
Про взаимодействие дизайнеров и инженеров при работе с токенами на DevMaster

До встречи, Хабр!

Собрала топ горячих клавиш в Figma для ускорения ежедневных задач, которыми пользуюсь постоянно и считаю must have для каждого.

Слэш (/) используется для разделения клавиш, которые выполняют одну и ту же функцию на разных платформах (Mac OS / Windows)

Навигация по слоям
Когда макет разрастается до десятков фреймов и сотен слоёв, ручное копание в слоях превращается в мучение, но процесс можно ускорить:

Cmd/Ctrl — Выделение конкретных объектов внутри группы

Enter — Провалиться на слой ниже

Shift + Enter — Подняться на слой выше

Cmd/Ctrl + Y — Переход в режим скелета (помогает найти потеряшек)

…

Перемещение объектов
Часто объект просто не хочет встать на место, потому что автолайаут тянет его туда, куда не надо. Добавьте гибкости в перенос с помощью клавиш:

Shift + Cmd/Ctrl + R — Вставка с заменой выбранного элемента

Перемещение с зажатым Space — Игнорирование структуры макета

Перемещение с зажатым Сontrol/Ctrl — Игнорирование автолайаута

…

Масштабирование
Хватить мучать колесико мыши и «зумить» вручную, просто зажимай:

Shift + 1 — Показ всех макетов

Shift + 2 — Фокусировка на выделенном объекте

Shift + 0 — Зум до 100%

Двойной клик по иконке слоя — Фокусировка рабоче области на объекте

…

Общее

/ — Включить курсорный чат

Shift + С — Скрыть комменты

Cmd/Ctrl+ L — Скопировать ссылку на конкретный фрейм/объект

Shift + Cmd/Ctrl + С— Скопировать выделенный объект в буфер обмена как PNG

…

Персональные горячие клавиши
Если действие повторяется часто, а стандартной горячей клавиши для него нет, можно создать свою. В macOS доступна установка пользовательских комбинаций для любых действий через настройки клавиатуры. Важно: название меню переписываем точно как в Figma.

Совет: Добавляйте горячие клавиши для плагинов и действий, если используете их хотя бы раз в неделю. Это заметно ускорит работу и избавит вас от лишних кликов.

Привет, Хабр! 👋 Сегодня говорим про

UX‑аудит, как найти и устранить проблемы интерфейса с помощью UX‑законов

Создание удобного интерфейса — сложная задача, где даже мелкие недочёты могут вызвать недовольство пользователей. Если метрики падают, а отзывы оставляют желать лучшего, вам нужен UX‑аудит. Сегодня расскажу как провести аудит, какие методы использовать и как помочь себе с помощью UX‑законов.

Что такое UX‑аудит и зачем он нужен?

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

Когда проводить UX‑аудит?

📉 Низкая конверсия или высокий показатель отказов.

👿 Пользователи жалуются на сложности.

👨‍🎨 Вы готовитесь к редизайну.

Методы UX-аудита

1. Использование UX-законов

UX-законы — принципы, объясняющие поведение пользователей. Примеры:

Закон Миллера: Человек удерживает в памяти 5–9 элементов. Убедитесь, что ваш интерфейс не перегружен информацией.

Закон Фиттса: Чем дальше и меньше элемент, тем сложнее на него нажать. Проверьте размеры кнопок.

Эффект Зейгарник: Незавершенные действия запоминаются лучше. Например, используйте прогресс-бары или напоминания.

2. Анализ данных

Инструменты аналитики помогут найти проблемные места:

Карта кликов: показывает, какие элементы привлекают внимание, а какие игнорируются.

Сессии пользователей: дают понять, где пользователи застревают.

Конверсия и отказы: указывают на слабые места в пути пользователя.

3. Пользовательские исследования

Юзабилити‑тесты: наблюдайте, как пользователи выполняют ключевые задачи.

Опросы: выясните, что нравится или раздражает.

Интервью: погружайтесь в опыт реальных людей, чтобы понять их мотивацию.

4. Хейтерская сессия

Попробуйте сами быть самым критичным пользователем: что мешает вам дойти до цели? Этот метод помогает выявить очевидные проблемы. Не переусердствуйте!

Как провести UX‑аудит?

1. Сбор данных

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

2. Проверка по UX‑законам

Проанализируйте интерфейс: Не перегружен ли он информацией? Удобно ли пользоваться навигацией? Интуитивно ли расположены кнопки?

3. Тестирование с пользователями

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

4. Составление рекомендаций

После сбора данных подготовьте список аргументированных доработок.

Например: Оптимизировать структуру страниц. Улучшить тексты, чтобы они стали понятнее. Изменить дизайн кнопок или форм.

Зачем учитывать UX‑законы?

Применение UX‑законов помогает избежать распространенных ошибок. Например:

Проблема: высокая отказоустойчивость в онлайн‑магазине.

Решение: сократили количество фильтров (закон Миллера), упростили поиск. Конверсия выросла на 20%.

Итоги UX‑аудита

После UX‑аудита ваш продукт станет:

Понятным: пользователи быстрее осваивают интерфейс.

Интуитивным: меньше ошибок и сложностей.

Эффективным: выше конверсии, меньше отказов.

Где почитать:
Подробно про аудит и как его делать от Fuse8
Руководство по улучшению интерфейса от Pixcap
Чек-лист по юзабилити в e-commerce от TexTerra

Помните: UX‑аудит — это не разовая акция, а постоянный процесс. Всегда найдётся, что улучшить! До связи 🤝