Веб-дизайн *

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

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

Мы собрали более 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 через серию реальных задач — от генерации сложного кода до написания технических статей — и сравним его с главными конкурентами.

Когда-то я даже нарисовал в Photoshop первое приложение Nebo — буквально нарисовал, по слоям, как открытку. А потом показал это программистам и увидел в их глазах то самое выражение: “он что, серьёзно?”

Современные интерфейсы не готовы к эпохе LLM.

Мы общаемся с самыми мощными AI-моделями через интерфейсы, спроектированные для переписки с людьми. Линейный чат, где невозможно работать с отдельными элементами ответа. Бесконечные итерации с потерянным контекстом. Копипаст вместо манипуляции объектами.

APPARAT — это концепция AI-first интерфейса, где:

Данные пользователя и ответы LLM становятся интерактивными объектами с собственными свойствами

Гранулярная работа с элементами запроса и ответа вместо монолитных текстовых блоков

Геймификация не ограничивается бейджами — весь интерфейс проектируется как «гаджет внутри гаджета»

Антропоморфизм AI объясняет различия между человеком и моделью, а не имитирует человеческое поведение

Это манифест нового подхода к проектированию интерфейсов для работы с искусственным интеллектом. От принципов эргономики до объектно-ориентированного UI. От идеи до первой концепции дизайна.

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

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


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

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


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

Как за год перезапустить онлайн-банк для бизнеса, влюбить в него клиентов и повысить продажи. Опыт продакт-лида 

Привет! Меня зовут Альберт Геворкян, я Product Lead в МТС Финтех. Здесь поделюсь опытом, как за время моей работы радикально обновился онлайн‑банк для бизнеса, доля продаж через платформу выросла на 25 п.п., а удовлетворённость клиентов — на 50%.

Привет, Хабр! Меня зовут Алина Сидоренко, я лид-дизайнер в компании Friflex. В этой статье я расскажу, как быстро генерировать и редактировать изображения без фотошопа (и даже не выходя из Figma) с помощью нейросети Nano Banana. Это модель редактирования и генерации изображений внутри ИИ-помощника Gemini от Google, которая позволяет точечно менять отдельные элементы на фото и при этом не разрушать всю сцену.

Браузеры — это очень странный мир. Хотя WebAssembly добился успеха, в том числе и на серверах, клиент по-прежнему ощущается примерно таким же, как и десять лет назад.

Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS.

Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать.

Не буду притворяться, что знаю о браузерах всё. Сегодня уже никто не знает всего, в этом-то и проблема.

В предыдущей главе мы столкнулись с вселенским западлом, но умело преодолели его и вышли в Всемирную Сеть. Dialing...

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

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

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

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

За год изучения вопроса и погружения в тематику посмотрел большое количество текстов и видео. Если все эти материалы сжать в одну эмоцию, то это однозначно будет «страдание». Дизайнеры страдают… Недавно попалось видео в котором молодая дизайнерка рассказывала трагическую и поучительную историю своего трудоустройства, сравнимую по накалу страстей ни много ни мало с самим Гамлетом. Фабула: заказчики дураки, а я в белом пальто стою красивая. Ну, и конечно, не обошлось без советов космического масштаба и космической же глупости…

Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т.е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.

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

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

Привет, Хабр! Меня зовут Роман Горшков, и я арт-директор в Битрикс24. Я работаю с комплексным B2B-продуктом, у которого множество пользовательских сценариев. И это та среда, где любое лишнее движение стоит времени и денег бизнеса, а внимание аудитории и так рассеивается между звонками, чатами и отчётами.

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

Привет! Меня зовут Антон Романов, я старший Angular-разработчик в Т-Банке, занимаюсь платежными формами T-Pay QR.

Поведаю о цветовых пространствах спецификации CSS Color 4, объясню их уникальность и специфику, расскажу о сценариях применения и плюсах, которые можно от этого получить.

Пропустим классическое вступление про устройство глаза, светочувствительные палочки и колбочки (там ничего нового, свежих релизов не было). Перейдем сразу к CSS, добро пожаловать под кат!

Почему западные интерфейсы стремятся к минимализму и упрощению, а азиатские, напротив, демонстрируют переизбыток информации?

Почему в азиатских культурах, особенно в Восточной Азии, пользователи привыкли к большому объему визуального контента и считают важным иметь доступ ко всей необходимой информации сразу, а небольшое количества информации или выбора может вызвать недоверие?

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

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

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

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

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