Как создать дизайн-концепцию сайта за 5 шагов

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

Дизайн-концепция выполняет следующие задачи:

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

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

Фрагмент дизайн-концепции сервиса для оплаты по частям: главная страница будущего сайта. Источник: only.digital

Дизайн-концепция включает, описывает и визуализирует такие элементы:

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

Пример дизайн-концепции компании-разработчика цифровых решений: прослеживается фирменный градиент, стилистика пиктограмм и акцидентный шрифт. Источник: nimax

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

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

Рассмотрим процесс создания дизайн-концепции по этапам:

1. Заполнить бриф: собрать информацию от заказчика и провести аудит существующего цифрового продукта.

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

2. Изучить контекст: исследовать рынок, анализировать решения конкурентов и компаний из смежных ниш. Посмотреть, какие визуальные приемы актуальны и как их можно приложить к конкретной сфере деятельности. Быть в курсе новинок помогают тематические сайты, например Awwwards, образцы лучших сайтов, собранных на популярных no-code конструкторах Webflow и Readymag, телеграм-каналы, например «Интерфейсы», «Визуальные приёмы», «Дизайн-комьюнити», «Кириллица.дизайн».

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

● Мудборд (англ. mood board — доска настроения) — визуальная основа будущего дизайна, набор элементов, которые отражают главное настроение проекта. Мудборд помогает с одного взгляда понять, каким будет будущий сайт или приложение: деловым или игривым, молодёжным или рассчитанным на более серьёзную аудиторию.

Фрагмент мудборда для разработки логотипа бренда — производителя одежды позволяет представить цветовую гамму и стиль изображений. Источник: behance

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

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

Мокапы основных страниц — фрагмент дизайн-концепции интерфейса приложения по аренде велосипедов.
Источник: behance

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

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

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

Для создания дизайн-концепции используют:
● графические редакторы и программы для работы с изображениями — Figma, Photoshop, Illustrator;
● доски для командной работы — Miro, FigJam;
● онлайн-сервисы — Behance, Dribbble;
● платформы-визуализаторы — Pinterest.

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

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

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

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

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

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

Элемент дизайн-концепции сайта компании Simetra, которая занимается моделированием транспортных потоков. В основе визуального решения — метафора дороги. Источник: nimax