Веб-дизайн *

Рассказываем, почему главный инструмент дизайнера будущего — эмпатия 

Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Помните, пару лет назад мы всерьез обсуждали, что ИИ скоро оставит дизайнеров без работы? На дворе уже почти 2026-й — а мы все еще здесь. Алгоритмы научились рисовать и подбирать цвета, но считывать контекст, настроение, тревогу, усталость клиента — все еще наша зона ответственности. Поэтому тренды 2026 года — именно про ощущения. Проанализировал и собрал, что, на мой взгляд, будет максимально востребовано. 

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

В данной статье мы рассмотрим одну из таких библиотек — Chakra UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.

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

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

Чтобы разорвать этот круг и забустить проект, я провёл комплексное исследование. Не ради галочки, а ради того, чтобы каждое найденное решение было невозможно проигнорировать. В этой статье я покажу все 6 этапов моего исследования, от внедрения в среду «тайным покупателем» до презентации бизнесу всех уровней.

Всем привет! Я Саша, арт-директор KISLOROD. Мы занимаемся разработкой и развитием интернет-магазинов.

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

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

Посмотрите на первую кнопку на иллюстрации. Кажется, что текст на ней немного сдвинут вниз, правда? На самом деле он выровнен строго по центру — сверху и снизу от текста до края кнопки по 24px.

Интернет полон красивых фотографий, и у многих до сих пор есть уверенность, что если картинка нашлась в Google, значит, её можно брать. Но в реальности всё сложнее — даже случайно добавив чужое изображение на сайт или в рекламный баннер, можно получить претензию от правообладателя или оказаться оштрафованным.

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

Мой сын любит LEGO. Но он не собирает замки, драконов и машины — ему скучно. Он строит существ. Иногда я даже не понимаю, что это. Пока я смотрел на его очередную коллекцию «непонятных, но гениальных» существ, я понял — он не играет по правилам. Он собирает то, что ему нужно прямо сейчас — завтра будет уже другое. Так появился дизайн моего приложения.

Если вы хоть раз случайно нажимали в браузере F12, пугались, увидев открывшееся окно, и закрывали, самое время с ним разобраться!

В этом туториале мы рассмотрим полезные для дизайнеров функции DevTools и то, как они упрощают общение с командой разработки во время дизайн-ревью.

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

Привет!

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

На днях делился подборкой научных статей по open source — одна из них предлагает обращать внимание на определенные управленческие моменты при участии компаний в открытой разработке. Сегодня продолжим обсуждать тему, но в менее академическом ключе и сфокусируемся на примечательном практическом кейсе.

В центре внимания — открытая дизайн-система Т2. Как уточняет Сергей @OsipovSV лид данного направления в Т2, разговором с которым я делюсь далее, новую дизайн-систему пока сложно считать полноценным open source-продуктом. Однако для меня этот кейс интересен с точки зрения первых шагов компании в данном направлении.

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

Поведение альтруистичное (сделай что-то, чтобы кому-то было полезнее) используют довольно мало, и обычно душеспасительные сервисы вроде википедии или волонтерских проектов. 

Мне кажется просоциальные сообщения недооценены, и я нашла несколько исследований, которые это подтверждают.

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

Как постмодерн и метамодерн влияют на визуальные решения? Почему «ирония», «новая этика» и «необрутализм» становятся не просто стилями, а инструментами коммуникации?

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

Это не короткий лонгрид, а полноценная исследовательская статья — на чашку кофе (или даже две). Запасайтесь вкусными напитками — будет объёмно, живо и очень интересно.

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

Любой сайт или блог оживает не только за счёт текста, но и благодаря картинкам. И чем качественнее и уместнее медиаконтент, тем более увлекательным и запоминающимся получается проект. Но создавать изображения с нуля или заказывать фотосъёмку не всегда есть возможность, поэтому часто используют фотостоки.

Shutterstock, Adobe Stock, Unsplash — знакомые названия? В этом и кроется ловушка: сервисы, призванные помочь, незаметно превращают уникальные бренды в близнецов! Ведь их знают и ваши конкуренты. В итоге — одни и те же улыбающиеся люди в костюмах, типовые ноутбуки на столе или «абсолютно идеальные» неживые офисы кочуют с сайта на сайт — от банков и онлайн-школ до стартапов и НКО.

Так как же разорвать этот порочный круг? В этой статье мы покажем альтернативные площадки с характерным контентом и разберём, где искать нишевые платформы с живой, нешаблонной и по-настоящему редкой фотографией. Готовы выйти за рамки улыбчивых менеджеров и найти своё уникальное визуальное лицо? Тогда поехали.

Недавно я задумался, а чем отличается условный VC.ru от других крупных статейных ресурсов. Оттого и захотел проанализировать их как с точки зрения обычного пользователя, впервые зашедшего на сервис, так и с точки зрения автора, который публикует свои статьи. Сверху решил приправить все это нашей самой старой рубрикой — «UX-патруль» и получилось то, что вы читаете прямо сейчас. Надеюсь, получилось интересно. Приятного чтения!

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

В первой части я рассказывал об основах CSS-препроцессора LESS: переменных, миксинах, и некоторых полезных приёмах. Во второй — про автоматическую проверку файлов с картинками и генерацию CSS из них же прямо в процессе компиляции, про то, как сделать изображения адаптивными, про миксины в роли функций и про основы написания LESS-плагинов на Javascript'е (они сильно расширяют базовые возможности LESS).

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

В процессе же поговорим о разных тонкостях написания миксинов, которые могут быть полезны.

Добро пожаловать под кат!

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

Интернет снова взорвался новостью от Anthropic: вышла модель Claude Sonnet 4.5, которую уже окрестили лучшим кодирующим ИИ в мире. Сообщают о невероятных успехах в бенчмарках, снижении галлюцинаций и новой гибридной системе рассуждений.

Но за громкими заголовками всегда скрывается вопрос: а что на практике? Оправдывает ли модель ажиотаж и сможет ли она действительно стать тем самым «никогда не спящим аналитиком» в вашем проекте? В этой статье мы пропустим Claude Sonnet 4.5 через серию реальных задач — от генерации сложного кода до написания технических статей — и сравним его с главными конкурентами.