Веб-дизайн *

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

Хотелось бы свалить на конкретную модель и сказать - "надо просто выбрать вот эту и всё будет тип топ". Но на самом деле - это проблема подхода: по умолчанию ИИ пишет и оптимизирует код подходом "работает и не ломается", а не "выглядит как лучшие примеры с Awwwards". У него нет контекста вашего бренда, нет визуального фидбека на результат, нет источника вдохновения. Он берёт самый частотный паттерн из обучающей выборки, и вы получаете среднее арифметическое всех шаблонов интернета (стоит признать - иногда и так нормально). Давайте это починим в этой статье.

В 2013 году на Randomwire была опубликована интересная статья. В ней автор указал на интересные особенности японского дизайна. Японцы известны своим минимализмом, но в случае сайтов у них, почему-то, всё наоборот. Страницы пестрят всевозможными цветами, что уже нарушает 3 принципа дизайна, плюс на них используются мелкие иконки и мно-о-о-о-го текста.  Да вы и сами видите пример этого буйства фантазии на скриншоте выше, сделанном в ноябре 2022 года.

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

И вот мне стало интересно, как обстоят дела сейчас, и можно ли как-то количественно оценить дизайн японских сайтов? Собственно, этим я и занялся.

Доступность часто воспринимают как техническую тему. ARIA, WCAG, скринридеры — будто это зона разработчиков. Но правда в том, что большая часть проблем появляется ещё в макетах. И если дизайнер не заложил структуру, смысл и сценарий — разработчик это уже не исправит без редизайна.

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

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

В данной статье вы можете увидеть собранный топ плагинов дизайнеров «Северстали» для Figma.

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

Сегодня расскажу о реализации удобного функционала фильтрации и сортировки товаров.

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

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

Этот набор инструментов будет полезен дизайнерам, потому что превращает работу с цветом из «на глаз» в системный процесс. Также часть из этих инструментов могут работать с OKLCH и помогать в сборке палитры, пока Фигма нам даёт только расширенный гамут в виде переключателя на P-3, но не обзавелась переключателем на OKLCH внутри окна цветовой палитры.

Я совсем не опытный фронтендер, но вайбкодинг уважаю и люблю. Отдельная боль - это создание стабильных и хороших UI для своих проектов. И вот представь: используешь Claude Code в разработке своего очередного стартапа-единорога и пытаешься объяснить агенту что нужно поправить: "сделай кнопку темнее и ту фигуру закругленней". Какую? «Ну ту, в сайдбаре». Так их там три. «Вторую сверху, с иконкой». Агент правит первую и как итог - ты возмущаясь, пишешь подробное описание с координатами, классами, соседними элементами и всё равно 50 на 50, что он поймёт. Если знакома эта боль, то есть интересная штука под названием Agentation.

Реноме у него довольно рекламное: за пару месяцев проект набрал 120 000+ загрузок на npm и наделал много шума, став частью воркфлоу многих разработчиков, которые активно vibe-кодят с AI. В этой статье разберем: что это за штука, как устроена изнутри, зачем нужна версия 2.0 с MCP, как завести и пользоваться самому и стоит ли вообще тратить время. Спойлер - если ты React-разработчик и работаешь с AI-агентами, то да, попробовать стоит.

В блоге Beeline Cloud мы временами обращаемся к ретротематике: писали про необычные RFC конца 80-х и 90-х годов, про возрождение текстовых игр. Сегодня заметен новый виток интереса к сайтам «как в ранние 90-е». Рассказываем, почему такая популярность — не просто дань ностальгии, и предлагаем подборку англоязычных технических блогов в формате «ничего лишнего, только текст»: от шпаргалок DevOps-специалиста до инструментария для моддеров WarCraft.

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

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

Мы будем делать схематичную анимацию фейерверков и конфетти по нажатию на кнопку при помощи JS. Изученные принципы универсальны для любого ЯП. Нам понадобится немного знаний ООП, тригонометрии, физики и совсем чуть-чуть геометрии. Вот что получится в итоге:

Когда мы говорим про скринридеры, почти все сначала думают так: «Ну он просто читает HTML со страницы».

Это не так.

Скринридер не видит экран, не читает HTML напрямую, и не “ходит” по странице, как человек с мышкой.

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

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

Снова, снова и снова, речь пойдет о утерянной технологии древних Pan-N-Scan. 

Оставлю прелюдии на потом. Чё делать то? 

Добавляем всего одну иконку. Ставим ей два статуса вкл/выкл. Растягиваем контейнер с видео. И вуаля — наслаждаемся по настоящему Полноэкранным режимом, занимающим всю полезную площадь матрицы приобретенного устройства.

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

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

Фразу «давайте сделаем современнее» можно услышать и от бизнеса, и внутри продуктовой команды. Обычно за ней стоит не конкретная задача, а ощущение, что интерфейс устарел и требует изменений.

Пользователь при этом не думает категориями «современно» или «устарело». Он открывает продукт с вполне прикладным ожиданием: выполнить действие и не задумываться о том, как именно устроен пользовательский интерфейс.

Интерфейсы, конечно, меняются, но пользовательские привычки и ожидания формируются годами и обновляются гораздо медленнее. Это хорошо подтверждается практикой UX-паттернов: устойчивые решения сохраняются именно потому, что снижают когнитивную нагрузку и помогают пользователю действовать на автомате. Эту же мысль хорошо раскрывает разбор Якоба Нильсена про AI-агентов и пользовательские ожидания.

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

Контекст здесь тоже играет решающую роль:

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

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

Цель материала — показать работающие решения, которые уже используются в крупных интернет-магазинах, и помочь командам e-commerce ориентироваться в актуальных UX-подходах при развитии своих проектов.

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

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

Редизайн сайта Артемия Лебедева – каждый раз, когда я заходил на сайт tema.ru мне становилось интересно, а как можно его обновить. И вот однажды идея появилась, а потом проросла в моей голове. Сайты умираю, ИИ развивается и нам нужен принципиально новый формат. Шалость удалась — с радостью делюсь с вам получившимся результатом.

Задача. Сделать редизайн сайта.

Важно. Это не коммерческий заказ, a просто моё упражнение и развлечение для души и мозга.

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

Создание блоков с вырезами всегда было трудоёмким, даже для вырезов простейшей формы. Фронтендеры годами тренировались мысленно рассекать блоки на части: прямоугольничек для контента, прямоугольничек для выреза и ещё парочка рядом с ним. И вдруг парадигма поменялась...

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

В статье мы сверстаем карточку с круглым вырезом двумя способами: традиционно‑дедовским и современным. Затем сравним объём кода, простоту и гибкость получившихся реализаций. И порадуемся, что будущее уже наступило!

Привет, Хабр! Как вы думаете, с чего начинается путь самурая пользователя? Правильно, с онбординга. Онбординг — это не просто анкета «для галочки», а первый диалог продукта с пользователем. От того, насколько он понятен и предсказуем, зависят и конверсия в заявки, и нагрузка на службу поддержки.

Меня зовут Лена, я работаю дизайнером интерфейсов в ЮMoney. В этой статье делюсь опытом проведения A/B-тестирования изменений процесса онбординга на сайте для B2B-клиентов. Вдруг те же «слепые зоны» и сложные формы есть и в ваших продуктах? Наши решения окажутся вам полезны и помогут улучшить клиентский путь.

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

Всем здравствуйте, дорогие читатели!

Меня зовут Рамазан, я Frontend-разработчик, энтузиаст и я люблю исследовать грани возможностей современных Web-технологий.

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