Рената Зарипьзянова, продуктовый дизайнер B2C-направления в Авто.ру, регулярно проводит UI-практики для студентов и дизайнеров и поделилась с нами инструкцией, как самостоятельно прокачать свой UI.
Что такое UI и почему важно его постоянно улучшать
UI — это буквально всё, из чего состоит пользовательский интерфейс: шрифты, цвета, система отступов, композиция и анимации. То, с чем пользователь сталкивается с первой секунды использования продукта и на основе чего у него формируется первое впечатление о сервисе и бренде.
Точно так же, как пользователь оценивает продукт по первым экранам, нанимающие менеджеры оценивают дизайнера по UI в его портфолио.
UI — это входной билет. Неважно, какой у вас грейд и где вы хотите работать: если картинка не зацепила лида в первые 10 секунд, до описания ваших UX-исследований он просто не дойдет.
Тут важно учитывать, что на просмотр портфолио у нанимающих менеджеров есть всего пара минут. И за это время их нужно убедить в том, что вы умеете подбирать стиль для работы, выстраивать иерархию элементов на экране, делать чистый и аккуратный UI.
При этом требования к UI могут отличаться в зависимости от контекста. В агентствах сильный UI чаще всего нужен для быстрого концептинга на ранних этапах проекта — чтобы показать визуально разные направления, пощупать стиль и помочь заказчику сформировать ожидания от будущего продукта.
Но и в продукте запрос на хороший UI за последние годы заметно вырос, и сегодня концептинг — один из ключевых навыков дизайнера.
Здесь UI работает как инструмент формирования долгосрочного видения. Концепты позволяют «рисовать космолет»: дизайнеры не думают о технических ограничениях, но показывают, куда сервис может прийти в перспективе.
Такие концепты не идут в разработку напрямую: со временем они декомпозируются, адаптируются под существующие ограничения и постепенно внедряются. Именно поэтому продуктовым лидам важен дизайнер с сильным UI не только для работы в системе, но и для формирования будущего продукта.
Из чего складывается хороший UI
UI опирается на несколько базовых составляющих, каждую из которых можно развивать отдельно и сделать своей сильной стороной.
- Типографика с учетом характера бренда
— Для того, чтобы научиться чувствовать шрифт, можно использовать вот этот ресурс.
— Для того, чтобы тренировать насмотренность в шрифтах, можно использовать ресурс, который показывает шрифты в реальной жизни. - Цвет
- Композиция, отступы и сетки
— Для отступов достаточно задать единую систему и по мере необходимости (а не желания) добавлять в нее новые размеры. Это будет поддерживать единство интерфейса и делать его удобнее для пользователя.
— Под каждый свой проект я подбираю сетку вручную. Именно это мне помогает передать характер бренда и сделать сайт или приложение еще уникальнее.
Как развивать свой UI
За годы практики в дизайне я убедилась, что улучшить UI можно в несколько этапов — от простого к сложному.
1. Тренировка насмотренности
К этому процессу нужно подходить осознанно. Недостаточно просто собирать референсы, которые вам нравятся, важно:
- декомпозировать их на маленькие части;
- разбирать какие дизайн-приемы используются в конкретном референсе и почему;
- анализировать иерархию элементов на экране. Это в дальнейшем поможет избежать частую ошибку с большим количеством различных текстовых стилей на одном экране.
Ключевое правило на этом этапе — пробовать называть каждый дизайн-прием 2–3 словами, чтобы он закрепился в памяти. При этом важно фиксировать не только сам прием, но и контекст, в котором он используется.
Например, крупная типографика может работать как основной акцент и сразу задавать иерархию на экране, особенно в интерфейсах с минимальным количеством элементов. Сочетание моноширинных шрифтов с массивными гротесками часто используется, чтобы подчеркнуть технологичность или экспериментальный характер продукта. А хаотично расположенные фотографии создают ощущение динамики и «живого» контента, это передает настроение бренда.
Такой подход помогает видеть за визуалом конкретную задачу и понимать, почему один и тот же прием может работать в одном контексте и быть неуместным в другом.
2. Повторение сильных референсов руками
На этом этапе насмотренность начинает переходить в навык. Можно приступать к повторению референса один в один. Это закрепляет дизайн-приемы: их «запоминают» уже не только глаза, но и руки.
Повторение референсов особенно помогает работать с отступами. На этом этапе важно не пытаться угадывать расстояния «на глаз», а искать в референсе логику: какие отступы повторяются чаще всего, какие используются для разделения смысловых блоков, а какие — внутри этих блоков.
Хорошая практика — начать с одного базового шага (чаще всего это 4px) и проверять, насколько отступы кратны ему. В процессе становится видно, что в сильных интерфейсах расстояния почти всегда подчиняются системе, а не выбираются случайно.
Такой подход помогает почувствовать ритм экрана и понять, как отступы влияют на читаемость, иерархию и общее ощущение аккуратного UI.
3. Наложение стиля с референса на реальный интерфейс
Этот прием довольно редко используют студенты, но именно он сильно ускоряет рост в UI.
Как это работает:
- вы берете экран реального приложения (например, с Mobbin, https://scrn.gallery/, или сервиса, которым пользуетесь каждый день);
- затем выбираете референс, никак не связанный с этим продуктом. Это может быть интерфейс другого продукта или визуал из другой области: лендинг, айдентика, постер, журнал или даже офлайн-объект;
- пробуете перенести визуальный стиль и дизайн-приемы с референса в контекст реального интерфейса, не повторяя его буквально.
В процессе довольно быстро становится понятно:
- как только ты начинаешь подставлять в интерфейс реальный контент — длинные названия, настоящие числа, разные состояния экранов — аккуратный концепт начинает ломаться;
- становится заметно, что дизайн существует внутри ограничений: по типу и объему данных, платформе и дизайн-системе;
- добавляются технические и временные ограничения со стороны разработки, которые влияют на возможные визуальные решения.
Именно в этих условиях и приходится искать визуально сильные, но реалистичные решения.
4. Самостоятельная отрисовка концепта с нуля
Последний уровень сложности. Здесь важно постепенно отучаться копировать референсы напрямую и переходить к осознанному выбору дизайн-приемов. Осознанность в этом случае строится не на большом опыте, а на умении задавать себе вопросы в процессе работы.
Например:
— Какую задачу решает экран? (показать выбор, объяснить, вовлечь, направить)
— Какие приемы лучше всего помогут эту задачу поддержать? (типографика, цветовые акценты, плотность контента, ритм)
— Почему именно эти приемы уместны в данном контексте?
Даже начинающим дизайнерам такой подход помогает перестать копировать визуал целиком и начать собирать интерфейс из осмысленных решений. Именно этот этап формирует наибольшую уверенность: в процессе работы вы опираетесь на накопленные приемы и можете четко аргументировать свои решения в обсуждениях с командой.
Как избавиться от страха белого листа
UI — это навык, который развивается только через регулярную практику. Если задача отрисовки экрана с нуля кажется неприступной — это нормально.
Страх белого листа один из самых популярных у начинающих дизайнеров. Хороший способ с ним справиться — уменьшить масштаб задачи:
- начать не с целого экрана, а с какой-то его части, это может быть как кнопка, так и целый виджет главного экрана;
- работать в условиях ограничений платформы, под которую рисуешь.
Меня челленджи по отрисовке виджетов в свое время научили на бояться белого листа и спокойно подходить к задачам любого размера и сложности.
