Интерфейсы
Сетки, формы, тёмная тема и моушн: практические решения для экранов, которыми пользуются каждый день.
Google Messages тестирует новый главный экран: крупные аватары закреплённых чатов и поиск внизу
В бете Google Messages закреплённые чаты стали рядом крупных аватаров, а поиск переехал вниз. Что Google выигрывает и чем за это платит…
Дизайн лендинга: структура посадочной страницы, блоки и UX
Хороший лендинг — последовательность ответов на вопросы посетителя, которая ведёт к одному действию. Разберём первый экран, блоки, форму и…
Дизайн таблиц данных в интерфейсе: паттерны и чек-лист
Удобная таблица строится от задачи пользователя: найти, сравнить, изменить или обработать пачкой. Разберём столбцы, выравнивание, фильтры и…
YouTube убрал вкладку «Подписки» из нижней навигации: что этот редизайн говорит дизайнерам
5 ноября YouTube начал выкатывать новую нижнюю панель: четыре кнопки вместо пяти, подписки ушли на главную. Разбираем решение и что из него…
UX личного кабинета: структура, статусы, формы
Личный кабинет — место, куда клиент возвращается чаще всего, и при этом его часто проектируют в последнюю очередь. Разберём, как построить кабинет от…
Дизайн под iOS и Android: различия гайдлайнов и как их совместить
Чем отличаются Human Interface Guidelines и Material Design 3, что обязательно адаптировать под каждую платформу, а что оставить общим…
Дизайн дашборда: правила, графики и чек-лист
Хороший дашборд отвечает на один главный вопрос своей аудитории за несколько секунд. Разберём метрики, иерархию, графики, цвет и…
Техническое задание на дизайн сайта: структура, пример и чек-лист
Хорошее ТЗ на дизайн — это не список пожеланий «стильно и современно», а набор проверяемых требований. Разберём разделы, пример и…
Адаптивный дизайн сайта: подходы, брейкпоинты, сетка и проверка
Адаптив — это не три макета под телефон, планшет и ноутбук, а правила, по которым интерфейс перестраивается на любой ширине. Разберём, как…
Отчёт BIT: в Windows нашли 10 тёмных паттернов, которые удерживают пользователей в Edge
Behavioural Insights Team описала десять приёмов Windows, которые мешают уйти с Edge и тихо откатывают выбор браузера. Разбираем каталог и что из…
Онбординг в мобильном приложении: как довести пользователя до первой ценности
Хороший онбординг — это не карусель из пяти экранов, а кратчайший путь от установки до первого полезного результата. Разберём, как…
Firefox 159 вышел: анимации по скроллу на чистом CSS теперь работают во всех основных браузерах
27 октября вышел Firefox 159: анимации по прокрутке на CSS теперь работают в Chrome, Safari и Firefox. Что это меняет для дизайнеров и как описать…
iPhone Duo поступил в продажу: что Apple требует от интерфейсов под складной экран
23 октября в продажу вышел iPhone Duo — первый складной iPhone с двумя экранами и шарниром посередине. Разбираем, что Apple записала в гайдлайны…
Прототипирование сайта: от вайрфрейма до кликабельного прототипа
Прототип — самый дешёвый способ найти дорогие ошибки сайта: лишний шаг в заказе, непонятное меню, форму, которую бросают на середине. Разберём, как…
Навигация в мобильном приложении: таб-бар, бургер-меню или жесты
Навигация — первое, что пользователь проверяет в новом приложении, даже не замечая этого: где я, куда могу попасть и как вернуться. Ошибка здесь…
Формы, которые заполняют: поля, ошибки, маски, автозаполнение
Форма — место, где интерес пользователя превращается в действие: регистрацию, заказ, заявку. И именно здесь чаще всего теряются люди. Разберём, как…
Тёмная тема без боли: поверхности, контраст, акценты
Тёмная тема кажется простой задачей: поменять фон на тёмный, текст — на светлый. На деле она требует пересобрать систему поверхностей, акцентов и…
Моушн в интерфейсе: длительность, кривые, prefers-reduced-motion
Анимация в интерфейсе нужна не для красоты, а чтобы объяснять, что произошло: откуда появился элемент, куда он ушёл, что изменилось после действия.…
Сетка и отступы: система 4/8 pt без догм
Система отступов на базе 8 pt давно стала стандартом в продуктовом дизайне, но вокруг неё накопилось много догм. Разберём, что она реально даёт, где…