Анализируем материалы заказчика перед началом дизайна

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

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

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

В уроке готовимся к новому проекту: изучаем ТЗ, текстовый прототип, пожелания заказчика, референсы и логотип. Определяем характер компании и формируем первые визуальные ориентиры, на которые будем опираться при разработке дизайна.

В новом проекте можно отказаться от отдельного мудборда и визуального прототипа и сразу перейти к дизайну. Но это не отменяет подготовительную работу.

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

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

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

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

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

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

Компания работает с косметикой, парфюмерией и фармацевтикой, но в текущем текстовом прототипе акцент сделан на первых двух направлениях.

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

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

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

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

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

В логотипе используются тёмно-синий и зелёный цвета. Это не означает, что весь сайт должен состоять только из этих оттенков.

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

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

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

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

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

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

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

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

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

В данном случае можно выделить несколько ориентиров:

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

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

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

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

Это делает предложение понятнее и одновременно даёт материал для выразительного визуала.

Отсутствие финальной фотосъёмки не всегда должно останавливать дизайн.

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

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

В данном проекте формы упаковки достаточно типовые, поэтому работу можно начинать без готовой фотосъёмки.

В исходных материалах предоставлено несколько версий логотипа: полноцветные и монохромные.

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

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

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

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

Перейти к следующему уроку