Будущее плиточных веб-макетов уже настало! После того, как Mozilla заложила фундамент, потребовались годы работы команды Apple WebKit и множество этапов обсуждений в CSS Working Group с разработчиками всех браузеров, чтобы стало понятно, как всё это должно работать.
Представляем вашему вниманию CSS Grid Lanes.
Команда JavaScript for Devs подготовила перевод статьи о CSS Grid Lanes — новом подходе к masonry-раскладкам, который наконец-то становится нативной частью CSS. Grid Lanes используют всю мощь CSS Grid, работают без JavaScript, учитывают доступность и дают дизайнерам и разработчикам гибкость, о которой раньше можно было только мечтать. Разбираемся, как это работает и почему это важный шаг вперёд для веба.
Модульность, сетки, аккуратные блоки — всё это стало привычной частью интерфейсов. Многие из них визуально напоминают японские bento-боксы. Но ровные скругленные блоки сами по себе не делают дизайн bento. За визуально похожей компоновкой стоят разные принципы: где-то это удобная сетка, а где-то — осознанная композиция со своими акцентами.
В статье веб-дизайнер студии комплексной разработки цифровых решений CleverPumpkin Александр Попов вместе с лид-дизайнерами команд «Авито», «Альфа-Банк» и «Детский мир» разбирают, чем bento-стиль отличается от других модульных подходов к созданию дизайна; ситуации, где модульность помогает и в каких мешает. Внутри — примеры продуктовых интерфейсов, выводы и практические рекомендации по работе с bento.
Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.
В этой статье мы проанализировали 11 интернет-магазинов электроники и техники, которые выделяются продуманным пользовательским опытом. Разобрали, какие приемы дизайна, навигации и взаимодействия с пользователем делают их сайты особенно комфортными и понятными.
Эта подборка поможет увидеть актуальные UX-тренды и найти вдохновение для развития собственного e-commerce-проекта.
В бытность свою веб-разработчиком я часто сталкивалась с тем, что задачи ставятся непонятно. Вот вроде бы тебя попросили что-то сделать, а зачем это нужно — не ясно. И когда делаешь, выясняется, что надо было делать совсем другое.
Недавно я увидела адвент на сайте «Читай-города» и вспомнила один из самых криповых случаев: мы делали сайт на Drupal, и заказчик попросил добавить адвент-календарь к Новому году. Сказал, что нужно, чтобы по клику на окошко пользователь получал код. И достаточно 20 разных кодов, чтобы каждый день коды менялись.
Казалось сначала, что код будет работать как пароль, открывая доступ к определённому контенту. Но по ходу реализации мы выяснили, что коды должны быть разные для всех пользователей и привязаны к сложному расчёту скидок. Мы столько раз переделывали этот адвент, что в итоге так его и не запустили…
Корень провала был не в Drupal и не в сложности кода. А в том, что изначальная просьба «сделать календарь» скрывала за собой неочевидную бизнес-систему — персонализированную систему купонов. Мы как разработчики копали вглубь интерфейса, а надо было сначала понять механику.
Именно поэтому мне захотелось разобрать не просто «какие бывают адвенты», а что на самом деле имеет в виду бизнес, произнося эту фразу, и какую скрытую систему он хочет построить. Зимой это особенно актуально: перед праздниками поведение пользователя резко меняется, конкуренция за его внимание обостряется. Просто «не кануть в забвение» — непростая бизнес-задача. А адвент-календарь — один из самых популярных инструментов для её решения.
Вчера до вершины популярности Hacker News добрался этот пост Джоны Гловера:
Может ли Claude воссоздать веб-сайт Space Jam из 1996 года? Нет. Или, по крайней мере, не с моими навыками промптинга. Требуется помощь, потому что я хочу сохранить этот веб-сайт навечно, но это никак нельзя сделать, кроме как попросить Claude воссоздать его из скриншота. Поверьте мне, я менеджер по разработке со степенью по computer science. Пожалуйста, помогите 😞
Чтобы уточнить подробности своей просьбы, Джона передал Claude Code (Opus 4.1) скриншот лэндинга, папку с изображениями и следующий промпт:
Я даю тебе:
1. Полный скриншот страницы лэндинга Space Jam.
2. Папку с сырыми графическими ресурсами**, извлечёнными с исходного сайта
Твоя задача — максимально точно воссоздать страницу лэндинга в полном соответствии со скриншотом.
С подобными задачами кодинг-агенты справляются идеально. Как я часто говорю, все задачи — это задачи поиска, но этот принцип не всегда просто применить на практике. Однако в данном случае применить его очень просто! У нас есть скриншот, поэтому diff пикселей сильно упрощает работу!
Вообще, можно сказать, что сам по себе Claude Code не смог бы с этим справиться. Но Claude с конфигурациями nori1 просто обязан это сделать.
Так что вызов принят.
Привет! Я Вика, старший продуктовый дизайнер в Cloud.ru. Моя команда разрабатывает сервисы личного кабинета облачной платформы, и сегодня я расскажу, как мы превратили фронтенд-ревью из хаотичных правок на лету в четкий и прозрачный процесс в GitLab.
Эта статья не про правила проведения ревью дизайнером, а про инструмент, который вывел код-ревью, дизайн-ревью и тестирование на абсолютно новый уровень. Инструмент, который помог нашей команде сократить количество итераций на задачу с 7 до 2—3 — расскажу, как это повторить.
Статья может быть интересна разработчикам: если вы устали от бесконечных правок в личных сообщениях и разрозненных ревью — этот гайд для вас. Дизайнерам: если хотите, чтобы правки по дизайну учитывались с первого раза, а не терялись в чатах. И продактам: если нужно ускорить выпуск фич без потери качества.
Вы можете бесконечно улучшать визуал, выравнивать пиксели и менять цвета кнопок — но все это не имеет смысла, если интерфейс не говорит с пользователем на человеческом уровне. Настоящий UX начинается не с сетки, а с понимания, почему человек вообще что-то делает.
Маркетологи, которые когда-то штудировали Роберта Чалдини, знают: эмоции и поведенческие триггеры конвертят не хуже скидок. И если раньше принципы влияния применяли в рекламе и продажах, то сегодня они стали еще и фундаментом эффективного UX.
В статье разобрал, как крупные e-Com-бренды используют «невидимые» психологические триггеры в дизайне — и как вы можете применить их уже завтра.
Классические театры часто строились во времена, когда об инклюзивности не задумывались. Однако сегодня даже легендарные сцены адаптируют пространство под нужды всех зрителей. Яркий пример – Большой театр в Москве. При грандиозной реконструкции, завершенной в 2011 году, архитекторы и строители заложили специальные решения для зрителей с инвалидностью. В театре появились:
Коммуникация играет центральную роль как в пользовательском интерфейсе — UI, так и в проектировании пользовательского опыта — UX. Понять то, как пользователи воспринимают вашу работу, помогут принципы гештальта.
Гештальт-психологи утверждают, что наш разум склонен группировать и организовывать сложные элементы и сигналы. Способы, которыми наш разум делает это, — предсказуемы. Принципы гештальта — это правила, которые дизайнеры могут использовать, чтобы создавать более эффективный и эстетически приятный дизайн.
Существует ряд ошибок, которые подрывают доверие к продукту. Одна из таких — потеря пользовательских данных. Мне пришлось столкнуться с этим лично, когда мой отзыв пропал при попытке публикации. В этой заметке — разбор UX-проблем и то, как мой фидбек привёл к конкретным изменениям в алгоритмах 2GIS.
Раньше у меня был сайт на Тильде. Стандартные шаблоны Тильды скучные, поэтому его делал дизайнер на zero-блоках. И каждый раз, когда надо было что-то на этом сайте добавить, приходилось дергать дизайнера в духе «Привет, добавь этот отзыв на сайт, пожалуйста».
Статьи добавлять поудобнее, но тоже не идеально. На том же Вордпрессе можно просто скопировать статью из гуглдока — и все, она вместе улетит вместе со всеми скриншотами. На Тильде надо тыкать каждую картинку руками, это бесит.
И вот я решил, что сайт устарел, его надо полностью переделать, а раз уж этим занимаюсь, можно и с Тильды заодно переехать. Например, на Вордпресс, к которому я как-то больше привык.
Стало интересно, а может ли Claude Code сделать сайт на Вордпрессе. С этим вопросом я к нему и пришел.
Claude сказал, что конечно может, но Вордпресс это скучно, и лучше делать сайт на Next.js + headless CMS. Я на тот момент даже не знал, что это такое. Ну так, слышал что на Next.js сайты делают — и все. Решил, что будет интересно разобраться и попробовать.
Спойлер — у нас (у меня и Claude Code) все получилось, сайт работает, мне нравится, даже трафик из SEO не просел.
Каждый менеджер хотя бы раз ловил себя на мысли: «Если не я, то кто?» Это вроде бы простая фраза, но за ней скрывается куда больше, чем желание увидеть проект успешным. Она задаёт тон всей культуре управления: той, где руководитель становится «героем», который раз за разом вытаскивает команду из дедлайнов, конфликтов и хаоса.
Это состояние хорошо знакомо большинству менеджеров — особенно тем, кто пришёл из экспертизы. Кажется естественным заменить коллегу, подхватить чужую задачу, переписать решение за сотрудника, «чтобы точно всё было правильно». Но то, что ощущается как ответственность и участие, часто оказывается одной из самых разрушительных привычек для команды и для самого менеджера.
Привет, с вами снова Костя из Cloud.ru. Мы поговорили про паттерн as для типа безопасного полиморфизма и asChild для чистой композиции. Но сегодня поговорим о подходе, который даёт такую гибкость в вариативном дизайне, что дизайнеры будут гордиться вами - FACC (Function as Child Component).
Привет, Хабр! Мы продолжаем изучать влияние глобальных мегатрендов на дизайн интерфейсов. В прошлых статьях мы уже разобрали, что такое тренды, как они рождаются и по каким законам живут; и изучили влияние культурных и социальных мегатрендов на дизайн интерфейсов.
В этой статье мы посмотрим, как глобальное потепление и устойчивое развитие меняют подходы к дизайну. Не переживайте, мы не будем пугать вас ужасами климатических и природных катастроф — просто разберемся, как это все связано с интерфейсами и какие приёмы в дизайне помогают нам адаптироваться к этим вызовам.
Рассказываем, почему главный инструмент дизайнера будущего — эмпатия
Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.
Помните, пару лет назад мы всерьез обсуждали, что ИИ скоро оставит дизайнеров без работы? На дворе уже почти 2026-й — а мы все еще здесь. Алгоритмы научились рисовать и подбирать цвета, но считывать контекст, настроение, тревогу, усталость клиента — все еще наша зона ответственности. Поэтому тренды 2026 года — именно про ощущения. Проанализировал и собрал, что, на мой взгляд, будет максимально востребовано.
В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.
В данной статье мы рассмотрим одну из таких библиотек — Chakra UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.
На протяжении десятилетий в массовой культуре укоренилась идея о разделении мозга на два полушария — аналитическое «левое» и творческое «правое». Согласно этому упрощенному взгляду, люди и, соответственно, их профессиональный выбор делятся на два лагеря: логичные «технари» с доминирующим левым полушарием и образные «гуманитарии» с ведущим правым.
Привет, хабровчане! На связи Никита Краснокутский, мы с командой работаем над платформой по подбору подрядчика и проекта дома для строительства. Не так давно в процессе работы я столкнулся с фундаментальной проблемой: как забустить продукт, направив его на реальные боли пользователей? Очередной рескин или новые эмоционалки не решают полностью главных страхов клиента: финансовых рисков, некачественной работы подрядчика или стресса от сложности процесса.
Чтобы разорвать этот круг и забустить проект, я провёл комплексное исследование. Не ради галочки, а ради того, чтобы каждое найденное решение было невозможно проигнорировать. В этой статье я покажу все 6 этапов моего исследования, от внедрения в среду «тайным покупателем» до презентации бизнесу всех уровней.
Всем привет! Я Саша, арт-директор KISLOROD. Мы занимаемся разработкой и развитием интернет-магазинов.
Сегодня расскажу, как мы совместно с сервисом исследований AskUsers запустили специальный проект, чтобы досконально изучить поведение и потребности покупателей в онлайн-магазинах. Фокус был на ключевых факторах, которые напрямую влияют на два критически важных показателя: доверие и удовлетворенность аудитории.
