Дизайн

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

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

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

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

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

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

Разработка дизайн-концепции проекта — это соединение креатива и требований к конкретной странице проекта (обычно это главная страница разрабатываемого сайта). На этом этапе идеи, референсы и материалы аналитики воплощаются в UI. По ходу проработки макета может возникнуть потребность внести изменения в ранее согласованные тезисы, тогда мы обсуждаем это с клиентом. Такие случаи не редкость, ведь здравый смысл важнее слепого следования техническому заданию. Обычно для проекта достаточно одной дизайн-концепции, однако мы всегда готовы обсудить подготовку и большего количества концепций.

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

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

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