Услуги Портфолио Работа у нас

«Сделайте кнопку больше и ярче» — не лучшая стратегия. Рубрика «Дизайнер говорит»

img_article_alt
21 мая

«Сделайте кнопку больше и ярче» — не лучшая стратегия. Рубрика «Дизайнер говорит»

Рубрика: Дизайнер говорит

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

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

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

Как избежать подобного сценария? Универсальной таблетки нет. Выстроенный процесс — есть.

Анисимов Максим. Руководитель отдела UI/UX digital-агентства «Сайт-Креатив». Более пяти лет в дизайне. Специализация — веб-дизайн.

Увидимся, когда увидимся

Первый и один из важнейших этапов проекта — встреча клиента с дизайнером.

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

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

Личное знакомство также показывает клиенту, что над проектом работает команда. За макетами стоят конкретные специалисты, которые изучают бизнес и несут ответственность за свои решения.

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

Цель встречи — соединить две области компетенций и определить направление, которое поможет решить задачи бизнеса.

Добро пожаловать в мир вопросов без готовых ответов

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

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

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

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

Если коротко объяснять, как создать дизайн сайта, работа начинается не с прорисовки главной страницы. Сначала команда собирает и проверяет данные, изучает рынок, определяет аудиторию и формирует визуальное направление.

Аналитическая подготовка

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

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

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

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

Структурированная информация становится рабочей основой проекта. Команде не приходится возвращаться к одним и тем же вопросам на каждом новом этапе.

Конкурентный анализ и работа с аудиторией

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

Бенчмаркинг помогает понять:

  • как конкуренты формулируют предложение;

  • какие элементы размещают на главной странице;

  • как организуют каталог или перечень услуг;

  • какие сценарии ведут к заявке;

  • какие визуальные приёмы повторяются;

  • какие решения можно улучшить.

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

На основании исследования формируются гипотезы. Какие аргументы важнее показать в начале страницы? Нужен ли пользователю подробный каталог? Какой формат заявки будет удобнее? Требуется ли сравнение вариантов? Какие материалы помогут принять решение?

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

Создание мудборда

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

В мудборд могут входить:

  • основная и дополнительная цветовые палитры;

  • шрифтовые сочетания;

  • примеры композиции;

  • формы и графические элементы;

  • фотографии и иллюстрации;

  • особенности иконок;

  • характер анимации;

  • визуальные ассоциации с брендом.

Мудборд помогает обсуждать стилистику на конкретных примерах. Вместо абстрактного «хочется чего-то премиального» клиент видит цвета, типографику, изображения и графические приёмы.

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

Исследование референсов

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

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

Совместный просмотр примеров помогает конкретизировать вкусы клиента. Заказчик может сказать, что ему нравится минимализм Apple, затем выбрать выразительную типографику, яркие иллюстрации и плотную композицию.

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

Задача дизайнера — выяснить, что именно привлекает клиента в каждом примере. Крупные заголовки? Цветовая палитра? Количество свободного пространства? Анимация? Расположение блоков? Ответ «мне нравится весь сайт» почти не помогает в работе.

Детализация требований

После аналитики, интервью, исследования конкурентов, аудитории и референсов команда формирует конкретные требования к проекту.

На этом этапе определяются:

  • структура будущего сайта;

  • содержание ключевых страниц;

  • функциональные элементы;

  • пользовательские сценарии;

  • визуальная стилистика;

  • требования к адаптивной версии;

  • особенности фирменного стиля;

  • ограничения по контенту и технологиям.

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

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

Когда процесс под контролем, сюрпризов становится меньше

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

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

Регулярная обратная связь показывает, правильно ли движется команда. Если направление требует корректировки, изменения вносятся до того, как ошибка распространится на весь проект.

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

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

Команда отвечает за исследование, структуру, пользовательский опыт и визуальные решения. Такое распределение ролей делает обсуждение предметным.

Почему «я плачу, значит, должно нравиться мне» не работает

Сайт создаётся не только для владельца компании. Им будут пользоваться клиенты, партнёры, соискатели и другие представители целевой аудитории.

Личные предпочтения заказчика важны, особенно когда речь идёт о характере бренда. При этом они не должны заменять данные о пользователях и требования бизнеса.

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

Дизайнер принимает решения на основании нескольких факторов:

  • целей страницы;

  • поведения пользователей;

  • визуальной иерархии;

  • особенностей контента;

  • требований доступности;

  • технических ограничений;

  • общих принципов интерфейса;

  • результатов исследований и тестирования.

Задача специалиста — не выиграть спор с клиентом. Нужно объяснить логику решения и предложить способ проверки спорной гипотезы.

Дизайнер говорит

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

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

На финальной встрече команда показывает проект в связном сценарии. Желательно использовать интерактивный прототип, который позволяет пройти основные пользовательские пути: открыть меню, перейти в каталог, изучить карточку и отправить заявку.

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

Даже спор о цвете кнопки не превращается в конфликт, если стороны могут вернуться к целям страницы, данным исследования и утверждённой визуальной системе.

Передача макетов в разработку завершает только дизайн-этап. Реальную эффективность сайта невозможно оценить внутри Figma. Для этого требуется запустить продукт и собрать данные.

Спорные решения можно проверять через A/B-тестирование, пользовательские интервью и юзабилити-тесты. Метод выбирается под задачу, объём трафика и доступный бюджет.

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

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

Вернуться назад