Веб-дизайн *

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

Смотреть на это спокойно я не мог — и не из брезгливости. Я видел, сколько это стоит. Нарисовал флоу KYC один раз — иди рисуй его ещё семь, и каждый раз почти с нуля, потому что переиспользовать нечего. Вот где горело время.

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

Не совсем пятничное чтиво, но…

Как-то так случилось, что решил разобраться для себя лично – какие подвижки появились в вопросе внедрения искусственного интеллекта в сфере сайтостроительства. ИИ действительно показал себя неплохо в отдельных задачах, но есть у него и минусы. Всё это тема для отдельного обсуждения, но здесь – только обзор реальной картинки. Делюсь бесплатно и без SMS ))

Кажется, что в ИИ чатах интерфейс довольно вторичен: ты пишешь, модель тебе отвечает, особо больше ничего и не надо (если модель отвечает хорошо). Но интерфейс очень влияет на то, насколько правильное решение вы примете, и насколько легко будет найти ошибку модели. Я собрала несколько научных исследований, которые могут пригодится тем, кто делает ИИ фичи в своих продуктах.

Разработали promo-проект ALIKOR PREMIUM, который объединит премиальные коллекции бренда в одном цифровом пространстве.

Как начать получать удовольствие и сократить количество правок

Что я испытывал раньше при получении правок:

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

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

Проведём небольшой тест. Откройте свой сайт и посмотрите на него глазами не живого пользователя, а ИИ-агента.

Не на красивую кнопку «Записаться». А на то, что получает ChatGPT или браузерный агент, когда ваш клиент просит его: «запиши меня на стрижку вот в эту студию». Чаще всего там каша из HTML. Смысл спрятан в вёрстке, кнопка нарисована картинкой, а цену подгружает скрипт через пару секунд после открытия.

Человек в этой каше разберётся. Он видит страницу целиком, догадывается по контексту, тыкает наугад и попадает. Агент не догадывается. Агент исполняет буквально. И если смысл живёт только в том, как страница выглядит, для агента его просто нет.

Вот это и есть Agent Experience — опыт, который ваш продукт даёт ИИ-агенту.

Я написал статью на Хабре и опубликовал в открытый доступ свою дизайн-систему. Многие сказали, что было бы круто получить ещё и инструкцию к ней. Вот я и решил написать статью о том, как вообще пользоваться дизайн-системами или UI-китами.

Также, в статье есть небольшой запрос на обратную связь от читателей

Несколько лет, я экспериментирую с генераторами картинок. Меня интересует один вопрос: можно ли из нейронок получить приемлемые концепт-дизайны сайтов,приложений, интерфейсов? Не с точки зрения кода, а хотя бы лэйаутов, цветовых схем и баланса текста/графики.

Как сделать интернет-магазин мебели удобным для покупателя? В этой статье собрал 10 мебельных eCommerce-проектов с сильным UX и удачными решениями по юзабилити. Разобрал, как бренды выстраивают навигацию, оформляют каталог, помогают выбирать товары и упрощают путь до покупки.

Покажу, какие UX-подходы действительно работают в мебельном eCommerce: от структуры каталога и фильтров до карточек товара, визуальной подачи и сценариев оформления заказа. Статья поможет посмотреть на собственный интернет-магазин со стороны пользователя, найти точки роста и подсмотреть практические решения для улучшения пользовательского опыта.

Практически в каждой свой статье, в которой прямо или косвенно идёт речь о важности соблюдения Закона о персональных данных, я упоминаю риск получения административного штрафа по ст. 13.11 КоАП РФ. Теперь давайте поговорим не про «очередные страшилки для бизнеса», а про реальную судебную практику.

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

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

Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять.

1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт»

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

Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

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

Изначально в своей студии веб-дизайна я сам отрисовывал сайты. Поскольку я не считаю себя альтернативно одарённым человеком, быстро пришёл к выводу: нет смысла каждый раз рисовать одни и те же элементы. Кнопки, поля ввода, табы, аккордеоны – это из раза в раз повторяется, не особо нуждается в уникальности, но жрёт уйму времени.

Заготовил не только UI-kit, но и библиотеку с UX-логикой, анимациями и шаблон интернет-магазина.

Если вы из тех владельцев сайтов / интернет-сервисов, которые:
• взяли образец пользовательского соглашения из интернета 
• разработали пользовательское соглашение самостоятельно без привлечения юриста
• считаете, что публикация пользовательского соглашения на сайте – это формальность
то этот материал точно для вас!

Благодаря ему вы сможете:
01 понять, в каких случаях нужно использовать пользовательское соглашение, а в каких иной документ
02 понять реальную цель и ценность данного документа
03 проверить, насколько хорош ваш документ с юридической точки зрения и требуется ли его замена / доработка.

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

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

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

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

Точка — самый простой элемент дизайна. И один из самых недооценённых. Рассказываем, как точки работают в интерфейсном, графическом и веб-дизайне на примере цифровых продуктов «Северстали».

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

В статье разобрал, где и когда задавать вопросы, какие метрики (NPS, CES, CSAT) использовать, как избежать типичных ошибок и превратить фидбек в реальные действия по повышению конверсии, чтобы убрать барьеры на пути клиента.

Прототип сайта на Тильде нельзя рассматривать только как черновик будущего дизайна.

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

Если вы хоть раз просили Claude Code, Cursor или Codex сделать интерфейс — то знаете эту проблему. Код модель пишет неплохо, но визуально результат выглядит как “сайт, сгенерированный AI”. Одинаковые карточки, одинаковые градиенты, одинаковый набор паттернов из топа поиска. Несколько недель назад вышел LazyWeb — MCP-сервер, который даёт агенту 257k экранов реальных приложений как визуальный контекст. Установил, прогнал на pricing-странице для своего пет-проекта, разбираю, что получилось.