Design Conception

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

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

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

Термин дизайн-концепция произошел от объединения двух латинских слов «designare» и «conceptio». «Designare» значит «определять» и «conceptio» – «понимание, система».

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

Что такое дизайн-концепция сайта и для чего она нужна

Дизайн-концепция — это тщательно подобранная система изображений, текстур, типографики и цветов для передачи определенного внешнего вида веб-сайта. Дизайн-концепция также известны как Stylescapes / Moodboards 2.0.

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

Дизайн-концепцию сайта можно представить в формате Stylescapes — ландшафты стиля. Вот пример такой подачи в трех вариациях для сайта. Первая (спокойный) — открытый, жизнерадостный, находчивый; вторая (средний) — разборчивый, успешный; третий (активный) — уверенный в себе, неповторимый, смелый.

Говоря простыми словами, дизайн-концепция — это метафора или образ, который упрощает восприятие продукта, компании и делает фирстиль узнаваемым не только на сайте, но и во всех digital-каналах.

Использовать дизайн-концепцию следует по следующим причинам:

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

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

Инструкция по разработке дизайн-концепции сайта

В самом простом варианте построение дизайн-концепции происходит следующим образом:

Этап 1. Сбор данных о деле клиента

Для погружения в дело клиента вам пригодится бриф

Шаг 1. Маркетинг-кит. Есть такая практика, как Маркетинг-кит — это комплект маркетинговых материалов, которые продают не просто товар или услугу, а историю компании/бренда. Что включает маркетинг-кит →

Шаг 2. Маркетинг-кит в кратком формате. Еще бывает полезно сжать всю эту обширную информацию в 1 убедительный лист A4 с ответами на вопросы:

Что это и как называется? А именно?
Чем это полезно?
А чем докажете?
А что если..?
А заверните!

Шаг 3. Точка обзора (Point-of-View или POV). В результате изучения маркетинг-кита и ответов на все вопросы у вас уже в сознании будет играть чувственная история о том, как бренд полезен потребителям. Подать ее можно в формате POV. Точка обзора – это инструмент из арсенала техник дизайн-мышления.

__Пример POV-1__ / Личный маркетолог с креативной жилкой, для SaaS автоматизации маркетинга для риелтеров
«Мы встретили опытных риелторов.»
«Мы были поражены, что они знают, что мир изменился и появились новые возможности для развития бизнеса с помощью digital. Но все равно боятся растратить время на эксперименты с современными технологиями и поэтому упускают возможность кратно увеличить клиентскую базу, известность личного бренда и доход.»
«Мы можем изменить мир, если создадим личного робота-помощника, который 24/7 будет находить потенциальных клиентов и расширять вселенную контактов до бесконечности»
Близкая аудитории культура: карьера, семья, хобби

Этап 2. Дизайн-исследование диджитал-ландшафта и пространство для концепции

Минимальное дизайн-исследование охватывает анализ того, как конкуренты выглядят, что они говорят и делают. Такой подход еще называют анализом коммуникации. Главная задача на этом этапе — найти точки отличий от конкурентов.

Отличаться от конкурентов лучше сразу по двум параметрам: обещания (анализ слов и дел) и образ (анализ цвет и графического нюанса).

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

Также важно нащупать точки отличий в поле дел. Если конкуренты что-то не делают, а ваш клиент делает — это уже может лечь в основу сюжета, графики и текстов.

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

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

Здесь я предлагаю поиграть в игру. Каждый бренд – это сгусток ценностей, c особым вкусом. Визуально эти сгустки, кстати, тоже отличаются. Если макнуть в этот самый сгусток кисточку и измазать места, где обитают потенциальные клиенты, то откликнутся те, кому именно этот вкус ближе всего.

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

На чем протестировать список:

Студии:

Новости:

Полезные материалы на тему исследования бизнес-ландшафта и культур:

Этап 3. Дебют стиля

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

В этой работе нам пригодится техника мудборда, а также техника графического сторителлинга.

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

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

Шаг 2. Графический нюанс и рифмы с проверкой на тиражируемость в различных точках контакта. Мудборд — это материал для работы по созданию графического нюанса и рифм. Нюанс — это отличительная визуальная черта дизайн-концепции (ключевая нота), а рифма (намеки) — это то, что помогает объединять всю дополнительную графику бренда в один образ. В результате получится конструктор вашего уникального образа бренда. Это значит, что у вас появится ответ на ключевые вопросы:

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

Полезное:

Этап 4: Детализация главной страницы: микс вербальной (история о ценности бренда) и визуальной коммуникации — все с учетом отстройки от конкурентов и стратегии развития бренда

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

Этап 5. Презентация клиенту

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

Что важно учесть при создании дизайн-концепции сайта

1. Не пропускайте фазу погружения в бизнес и культуру

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

2. Изучите существующую графику клиента, возможно в ней есть намеки на фирменный стиль

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

3. Рисуйте графику, так как буд-то пишите историю

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

4. Больше мудбордов — больше информации

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

5. Базовый цвет и графический нюанс формируют основное пятно и вкус бренда

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

6. Не перебивайте графикой фокус продукта

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

7. Применяйте единый графический алфавит во всех точках контакта с клиентом

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

8. Шрифтовая пара с характером: громкий голос и обычная речь

В дизайне одинаково важны и форма, и содержание, а значит одинаково важно уделить внимание не только тому что вы говорите(содержание), но и как говорите(форма), а точнее, с помощью каких инструментов. Шрифт – это по сути голос бренда, а сам бренд как персонаж. Голос может быть совершенно разным: мягким, шутливым, брутальным и дерзким, утонченным и элегантным — от шрифта зависит, каким голосом бренд говорит с клиентом.

9. Вкладывайте в инфографику общую рифму

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

Пример инфографики с рифмой:

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

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

Что еще почитать для экспериментов с развитием концепций и стиля

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

Вывод и рекомендация

Дизайн-концепции помогают добиться выразительной айдентики. А еще они добавляют согласованности в работе команды и экономят время и деньги.

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

Источник:

Как разработать дизайн-концепцию сайта за 5 шагов + ПримерПродуктовый дизайн (UX/UI), брендинг и аналитика

PreviousUI Design NextIcon Usability

Last updated 2 years ago

Was this helpful?