Веб-дизайн *

Неделю назад я рассказывал про Klark + Klara: корпоративный мессенджер и таск‑менеджер, которые живут на нашем сервере. В той статье было про устройство: каналы, звонки, расшифровку голосовых, связку «задача из сообщения». Эта статья расскажет вам более подробно о том как продукт выглядит " сейчас " и что в дальнейшей перспективе мы планируем реализовать.

При разработке приложения ключевой фактор который мы преследовали - это удобная связка приложений для закрытия наших задач, но со временем мы начали апгрейдить его в самых разных частях, где-то стикеры кастомные добавили, где-то внедрили кастомную анимацию, и так далее. Я не знаю как простым языком описать то чувство, когда ты делаешь продукт и видишь то, что он на набросках визуально отличается от того что я рисовал на эскизах и представлял в голове, но это чувство не давало мне покоя, поэтому я собрался с мыслями и переделал интерфейс в то, как оно выглядит в моей голове. Новое оформление со стеклом и «жидкими» подсветками, панель эмодзи и стикеров, своя картинка фона и шапка профиля.Ну и традиционный раздел про то, что сломалось по дороге: самые глупые баги всё ещё живут дольше всех.

Долгое время мне казалось, что сильное дизайн‑решение должно говорить само за себя. Если сценарий логичный, интерфейс понятный, состояния продуманы, а решение опирается на исследования — зачем дополнительно его «продавать»? Но когда я оказалась в продуктовой команде, а не на проектах фриланса, оказалось, что качество самого макета — только часть задачи.

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

И для меня здесь есть несколько важных выводов.

Всем привет! Меня зовут Даниил Николаев и я frontend-разработчик в компании "Исходный Код"

На каждом kickoff нового проекта всплывает один и тот же сценарий: один разработчик топит за утилиты Tailwind, второй отстаивает чистоту и надежность CSS Modules, третий по привычке тянет проверенный CSS-in-JS, а кто-то просто молча открывает .scss и выходит из созвона.

В этой статье мы опустим споры о «красивом синтаксисе» и разберем инженерную сторону вопроса: кто на самом деле платит за динамику — сборка или браузер клиента.

Заглянем под капот ключевым подходам в мире React (для уровня middle и middle+): разберем классические CSS Modules, ушедший в maintenance mode styled-components, Emotion, современный Tailwind v4 на движке Oxide и перспективный zero-runtime (Linaria, Vanilla Extract). Посмотрим, что реально происходит с CSSOM, reflow и рендером в браузере, а в конце — соберем практическую матрицу выбора без фанатизма и хайпа месяца.

Не так давно меня приглашали тестировать Figma-like редактор от Ростелекома. Тогда он был всё-таки сильно сырой. Оказалось, что другие команды не дремлют и тоже готовят свои решения. Сегодня у нас на обзоре новый кандидат на импортозамещение Figma. Называется linia.pro. Сервис около года разрабатывается командой из Москвы.

Большинство экспертов, наставников, онлайн‑школ при запуске своего курса/обучения думают о том, как получить ту конверсию заявок и учеников, которые они поставили себе как цель. Думают также о своем продукте и его качестве, чтобы ученики получили и были довольны своими результатами. И совсем забывают обезопасить свой запуск с юридической стороны. Как итог: несут колоссальные убытки.

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

Я хотела разобраться, куда вообще движется профессия продуктового дизайнера и какое место в ней теперь занимают AI‑инструменты.

А в итоге разобрала файлы проектов Claude Design по кусочкам, потратила месяц на отладку и сделала плагин, который переносит готовый проект из Claude Design прямо в Figma — с редактируемыми слоями, auto‑layout, текстами и данными.

Почему логотип Coca-Cola — не шрифт, зачем одной гарнитуре сотни знаков, почему хороший веб-шрифт надо проверять на плохом мониторе и что именно нейросети уже могут забрать у шрифтового дизайнера?

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александрой Корольковой — арт-директором Paratype, автором книги «Живая типографика» и YouTube-канала «Шрифтовой видеоблог», соавтором PT Sans, PT Serif и других известных шрифтовых систем. Обсудили историю профессии от металлических литер до веб-шрифтов, устройство работы шрифтовой студии, лицензии и цены, роль кириллицы, инструменты, заказные проекты, ИИ и довольно практичный ответ на вопрос, сколько шрифтов действительно нужно одному сайту. 

Сделать одно изображение по референсу несложно. Гораздо сложнее сделать серию изображений, в которых меняются объекты и сюжеты, но сохраняется один визуальный стиль. В этой статье разбираемся, как сделать генерацию изображений более в предсказуемом стиле.

«Закину промпт в ИИ, а через секунду получу готовый интерфейс, свой сайт или дашборд» — такая идея наверняка приходила каждому, кто не связан с дизайном или разработкой. ИИ-инструменты для этих сфер активно распространяются и обещают такие фантастические результаты, что закрадывается мысль: а что, если скоро дизайнеры будут не нужны?

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

Забыла представиться: меня зовут Камила, я проектировщик интерфейсов в Selectel. Вместе с бумом ИИ коллеги чаще начали ко мне приходить с вопросами такого рода: «Мне ИИшка макет сделала, сделай ревью, пожалуйста». Так что я решила разобраться со своей дизайн-колокольни — где ИИ может помочь, а где создает привлекательную, но не самую работающую концепцию. 

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

Тогда почему с ней не могут справиться ни Apple, ни Microsoft, ни Google, ни другие техногиганты? 

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

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

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

Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?

В конце марта 2026 года Figma открыла канвас для AI-агентов. Claude Code, Codex и подобные инструменты получили возможность создавать и редактировать макеты через MCP-сервер Figma.

Я решил проверить, насколько хорошо Claude Code сможет перенести дизайн сайтов в макет и сколько это будет стоить. Для этого я выбрал несколько лендингов и попросил агента перенести их на канвас - пробовал давать ему либо скриншот, либо ссылку на сайт. Каждый раз я смотрел, какие шаги выполняет агент, сколько раз обращается к инструментам и сколько токенов (то есть денег) тратит.

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

Казалось бы, что может пойти не так с легковесными векторными анимациями? Вектор в Lottie, JSON весит копейки. Но тестирование на реальном телефоне закончилось фиаско: через пару минут скролла чип раскалился до 42 °C, а интерфейс ушёл в троттлинг.

Оказалось, что покадровый пересчёт кривых Безье в JS на мобильных экранах быстро превращает телефон в печку.

В кейсе разбор того, как мы перешли на аппаратно декодируемые видео‑спрайты, почему IntersectionObserver втихую крутил видео под непрозрачными модалками и как в итоге удалось сбить температуру обратно до стабильных 30 °C.

Прошел уже год, как начали действовать новые штрафы в области защиты персональных данных. Однако до сих пор я встречаю в своей практике нарушения у предпринимателей, которые могут повлечь за собой миллионные штрафы, если эти нарушения первым обнаружит Роскомнадзор. Поэтому в этой статье расскажу о часто встречаемых мной нарушениях и дам рекомендации, как их устранить и сохранить свою прибыль в 2026 г.

У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтобы у неё не было решения? Когда кажется, что уже всё пропало и мы столкнулись с фундаментальным ограничением реальности, но отказ принять это продолжает вести вас в дебри спецификаций, беседы на Github 10 летней давности и изучение статей гигантов уже прошедших этот путь и поделившихся с нами своими результатами? И вот спустя многие часы напряжённого скрипа извилин вы дописали очередную строчку, обновили страницу и вот оно, то, что вы хотели получить смотрит на вас с экрана? Это ощущение успеха, наверное, в той или иной степени знакомо каждому инженеру. В такие моменты мне, обычно, очень хочется поделиться результатом с коллегами и, по возможности, написать статью если это может быть полезно кому-то ещё. В этой записи я собрал 3 подобных ситуации, где в рамках нашей работы возникли решения, которые, насколько мне известно, довольно уникальны и в полной мере не были описаны раньше. Приглашаю вас разделить со мной радость обнаружения решения, которое казалось невозможным!

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

В этом есть своя прелесть и свои ограничения. С которыми я прямо столкнулся во время решения задачи.

Агент несколько раз писал «готово» или «да, теперь идеально!», но на экране оставались углы в воздухе, узкая колонка по центру и сетка вместо одной формы. По итогу у меня получился стресс-тест для моделей, с которыми они так и не справились.

Знакомая ситуация: продукт написан за выходные, гипотеза подтвердилась, кто‑то уже платит. Приходит дизайнер и просит файл.

Файла нет. 

Есть интерфейс, который существует только в виде кода. Кнопка там называется.btn‑primary,.btn‑add и.button‑save — три класса, одна кнопка, паддинги отличаются на пиксель. Серый цвет записан тремя способами, и один из них, судя по всему, опечатка. Отдать это дизайнеру нельзя. Нарисовать заново — значит выбросить полгода работы и начать спорить про радиусы. 

Мне стало интересно, что тут реально может AI. Не «сделай красиво», а честный замер: я собрал маленькое демо, намеренно заложил в него шестнадцать несогласованностей, записал их в отдельный файл и спрятал. Потом запустил на этом коде свежую сессию Claude Code, которая файла с ответами не видела.

В статье — что из этого вышло, с цифрами и с местами, где всё сломалось.

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

Август для меня традиционно пора проведения аудитов сайтов и кабинетов контекстной рекламы Яндекс.Директ. Поток писем и звонков с вопросами идет волнами.

Что интересно, до сих пор довольно большая часть корпоративных сайтов все еще не соответствуют требованиям Федерального закона от 27.07.2006 № 152-ФЗ «О персональных данных». А подавляющая доля тех, кто работает с контекстной рекламой, не знает о том, что Яндекс включает новые опции и инструменты автоматически, и сильно удивляются, почему проседает поток лидов.

Давайте обсудим, на что нужно обратить внимание.

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

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