Здравствуйте!
В предыдущем модуле мы заложили прочный фундамент визуального дизайна: освоили сетки, иерархию, типографику и композицию. Вы научились управлять элементами на экране. Теперь мы переходим на следующий уровень и задаемся вопросом: откуда брать идеи для стиля, цвета и структуры? Как не просто повторять чужие решения, а учиться на лучших примерах, чтобы формировать собственный уникальный подход?
Этот урок открывает второй модуль, посвященный стилю и цвету, и он целиком посвящен одному из ключевых навыков продуктового дизайнера — умению собирать и систематизировать интерфейсные референсы для развития насмотренности. Ваш опыт в графическом дизайне и художественное образование уже дали вам прекрасную интуицию. Сегодня мы добавим к ней системный, стратегический подход, который позволит вам принимать обоснованные дизайн-решения и эффективно доносить их до команды.
Что такое насмотренность и зачем она дизайнеру?
Начнем с ключевого понятия — «насмотренность». Это не просто пассивный просмотр красивых картинок, а активный процесс накопления, анализа и усвоения визуального опыта. Развитая насмотренность помогает быстрее находить удачные решения, избегать ошибок новичков и говорить с коллегами и заказчиками на одном языке — языке примеров.
Давайте посмотрим видео, которое подробно раскрывает эту тему.
Как развивать насмотренность и зачем нужны референсы для дизайна?
Это видео от Софьи Филипповой "Как развивать насмотренность и зачем нужны референсы для дизайна?". Оно даст четкое определение референсам и объяснит, какую практическую пользу они приносят в работе дизайнера.
Сначала посмотрите, что такое референсы и какими они бывают. Обратите внимание, что вдохновение можно черпать не только из скриншотов других сайтов, но и из реального мира. Затем изучите, зачем их собирать. Сосредоточьтесь на таких преимуществах, как борьба со страхом чистого листа и упрощение коммуникации с заказчиком.
Как вы услышали, сбор референсов — это не تقلب, а профессиональный инструмент, который:
- Развивает насмотренность: вы тренируете свой «дизайнерский глаз», учась отличать хорошие решения от плохих.
- Помогает начать: готовые примеры служат отличной отправной точкой, избавляя от ступора перед пустым макетом.
- Обогащает ваш арсенал: вы собираете библиотеку приемов и паттернов, которые сможете применять в будущем.
- Упрощает коммуникацию: показать пример гораздо эффективнее, чем описывать визуальную идею словами.
Стилистика против Функциональности: два типа референсов
Для продуктового дизайнера крайне важно понимать, что референсы бывают двух типов. Одни отвечают за внешний вид (UI), другие — за логику и удобство (UX).
Продолжим смотреть то же видео, чтобы разобраться в этом различии.
Как развивать насмотренность и зачем нужны референсы для дизайна?
В этом фрагменте автор делит референсы на стилевые и функциональные. Это ключевая концепция для продуктового дизайна.
Посмотрите отрезок о двух видах референсов. Постарайтесь четко уловить разницу: стилевые (визуал, атмосфера, цвета, шрифты) мы собираем по принципу «красиво», а функциональные (анимации, паттерны взаимодействия) — по принципу «удобно».
Это разделение напрямую связано с двумя сторонами вашей будущей профессии: UI и UX. При поиске вдохновения всегда держите в голове, какую именно задачу вы решаете: ищете ли вы интересное цветовое сочетание или элегантный способ реализовать переключение между вкладками.
Что именно искать: от эстетики к стратегии
Традиционные мудборды, которые вы могли использовать в брендинге, часто фокусируются на абстрактных образах и общей атмосфере. В продуктовом дизайне этого недостаточно. Здесь мудборд — это стратегический инструмент, каждый элемент которого должен отвечать на конкретный вопрос о будущем интерфейсе.
Давайте прочтем статью, которая отлично объясняет этот переход от «красивых картинок» к функциональным примерам.
UX/UI Moodboards: Strategic Design Decisions Over Opinions | Miro
Эта статья от Miro смещает фокус с чисто эстетических мудбордов на стратегические доски с референсами, которые помогают принимать конкретные продуктовые решения.
Прочтите раздел "What makes a UX/UI moodboard different". Обратите внимание на список того, что действительно должно быть на доске продуктового дизайнера: реальные UI-паттерны, типографика в действии, состояния кнопок и компонентов.
Итак, при сборе референсов для цифрового продукта мы ищем не просто красивые образы, а конкретные решения:
- UI-паттерны из реальных продуктов: как устроена навигация в популярных приложениях, как выглядят карточки товаров, как реализованы формы.
- Типографика в действии: работающие примеры иерархии заголовков, оформления основного текста и подписей.
- Состояния компонентов: как выглядят кнопки, поля ввода и другие элементы в состояниях
default,hover,disabled. - Применение цвета в контексте: как цвет используется для фона, акцентов (CTA), информационных сообщений.
Где и как собирать качественные референсы
Теперь, когда мы знаем, что искать, разберемся, где и как это делать.
Источники вдохновения
Профессионалы редко ищут вдохновение в Google Картинках. Вот основные источники качественных референсов:
- Специализированные библиотеки: Mobbin, Screenlane, UI Sources. Это огромные коллекции скриншотов реальных приложений, отсортированные по паттернам и экранам.
- Прямые и косвенные конкуренты: анализ продуктов в вашей и смежных нишах.
- Гайдлайны платформ: Apple Human Interface Guidelines (HIG) и Google Material Design.
- Сайты дизайн-систем крупных компаний: Shopify Polaris, Atlassian Design, IBM Carbon.
- Портфолио-платформы: Behance, Dribbble (с осторожностью, там много «фестивального» дизайна, не всегда применимого в жизни).
Ключевой инструмент: Mobbin
Давайте познакомимся с одним из самых популярных инструментов — Mobbin. Он позволяет не просто смотреть на красивые экраны, а изучать целые пользовательские сценарии из тысяч реальных приложений.
UI/UX Web Design with Figma and Mobbin
В этом видео от канала DesignCode демонстрируются основы работы с Mobbin и его ключевые преимущества.
Посмотрите начало ролика, где автор объясняет, почему Mobbin эффективнее, чем ручной сбор скриншотов. Обратите внимание на возможность фильтрации по платформам (iOS, Android, Web) и UI-паттернам.
Общие правила сбора
Сам по себе инструмент — ничто без правильного подхода. Вернемся к русскоязычному видео и закрепим несколько важных советов по работе с референсами.
Как развивать насмотренность и зачем нужны референсы для дизайна?
Этот фрагмент обобщает ключевые принципы эффективной работы с референсами.
Прослушайте советы по работе с референсами. Особенно важны следующие идеи: Собирайте много референсов (5-10) на одну задачу, чтобы создавать гибрид, а не копию. Не ограничивайтесь своей тематикой, ищите решения в смежных и даже далеких областях. Стремитесь к референсам высокого уровня («на пятерку»), чтобы тянуться за лучшими. Обязательно подписывайте, что именно вам понравилось в каждом примере (композиция, цвет, анимация).
Систематизация: от хаоса к порядку
Собрать сотню скриншотов — это только половина дела. Без системы это мертвый груз. Ваша задача — организовать их так, чтобы они помогали принимать решения. Рассмотрим два основных метода.
Метод 1: Классический мудборд
Вы уже знакомы с мудбордами из графического дизайна. В UX-дизайне они используются для определения визуального стиля и настроения продукта. Статья от Nielsen Norman Group предлагает четкий пошаговый процесс.
Mood Boards in UX: How and Why to Use Them - NN/G
Эта статья от NN/g — авторитетного источника в мире UX — объясняет, как создавать мудборды для цифровых продуктов, чтобы зафиксировать визуальное направление проекта.
Сначала прочтите введение, чтобы понять роль мудбордов в UX. Затем изучите пошаговое руководство в разделе "How to Create and Use Mood Boards". Сосредоточьтесь на шагах: Выбор настроения: подбор ключевых слов (keywords), описывающих характер продукта. Сбор визуальных материалов: поиск образов, соответствующих выбранным словам. Организация: создание визуальной иерархии на доске.
Метод 2: Стратегический фреймворк «Goldilocks»
Для представления дизайн-концепций команде или клиенту отлично подходит более структурированный подход. Вместо одного мудборда вы готовите три, демонстрируя разные стратегические направления.
UX/UI Moodboards: Strategic Design Decisions Over Opinions | Miro
Эта статья предлагает мощный фреймворк для систематизации референсов и их презентации стейкхолдерам.
Сначала изучите метод "The Goldilocks method". Он предлагает создавать три направления: Safe (безопасное/привычное), Modern (современное/сбалансированное) и Edgy (смелое/концептуальное). Подумайте, в каких ситуациях каждое из них будет уместно. Затем прочтите раздел "Strategic categorization", который учит организовывать референсы внутри каждой доски по функциональным категориям: навигация, цвет, типографика, компоненты и т.д.
Этот подход переводит разговор из плоскости «нравится / не нравится» в конструктивное русло «какое направление лучше решает задачи нашего бизнеса и пользователей?». Вы больше не защищаете один-единственный вариант, а выступаете в роли стратега, предлагая на выбор несколько продуманных путей развития продукта.
Заключение
Подведем итоги. Сегодня мы научились подходить к поиску вдохновения как настоящие продуктовые дизайнеры:
- Насмотренность — это активный навык, который нужно целенаправленно развивать через сбор и анализ референсов.
- Референсы делятся на стилевые (визуал) и функциональные (UX-паттерны), и важно собирать оба типа.
- При поиске вдохновения для интерфейсов мы фокусируемся на конкретных решениях: паттернах, компонентах, состояниях, а не на абстрактных образах.
- Для эффективной работы мы используем специализированные инструменты (например, Mobbin) и придерживаемся правил сбора (аннотирование, разнообразие, высокий уровень).
- Собранные референсы необходимо систематизировать — с помощью мудбордов для фиксации стиля или стратегических фреймворков («Safe, Modern, Edgy») для презентации концепций.
Начните уже сегодня создавать свою личную библиотеку референсов. Сохраняйте в Figma или Miro интересные примеры навигации, удачные цветовые палитры, необычные анимации. Эта коллекция станет вашим бесценным активом.
Что дальше?
Мы научились собирать и организовывать примеры. Но как извлечь из них максимум пользы? В следующем уроке мы займемся анализом композиционных и стилевых решений в референсных интерфейсах. Мы будем учиться «разбирать на запчасти» чужие дизайны, чтобы понять, почему они работают, и применять эти принципы в своих проектах.