Дизайн-концепция — это визуальная концепция будущего дизайн-проекта, которая наглядно представляет стиль и общее настроение будущего сайта, какие ассоциации он будет вызывать у пользователей, какая палитра цветов будет использоваться, какие шрифты, иконки и прочие визуальные паттерны будут взяты в работу. Это важный этап перед стартом дизайна, потому как с его помощью можно задать общий стиль и настроение сайта, который будет устраивать заказчика.
Фундаментальная отсылка. Концепция – это объединение в систему всех идей (взглядов), выработанных для понимания направления развития. Она дает ответ на вопрос — как достичь намеченной цели. По сути, это единый определяющий замысел (стратегия) для решения любой задачи.
Термин дизайн-концепция произошел от объединения двух латинских слов «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, только три, ценности, которые точнее всего передают вкус от картинки. А затем изучите отличие по цвету, графическому нюансу.
На чем протестировать список:
Студии:
Новости:
Полезные материалы на тему исследования бизнес-ландшафта и культур:
- Придумай. Сделай. Сломай. Повтори →
- Исследование трендов. Практическое руководство →
- Обзор 20 методов UX-исследований от NNGroup: какой метод выбрать и когда →
Этап 3. Дебют стиля
Как только мы изучили ландшафт и увидели расстановку игроков, мы можем взяться за воплощение уникальной стилистики сайта.
В этой работе нам пригодится техника мудборда, а также техника графического сторителлинга.
Графический нюанс в этой технике будет играть роль героя, а рифмы — станут намеками, благодаря которым героя можно будет узнавать и в неявном виде.
Шаг 1. Мудборд. Мудборд — это не только картинки-настроение, но и графика и шоты сайтов, различные образы и знаки — все, в чем есть намеки на наш бренд. Все это помогает зафиксировать направления, в которые будет развиваться концепция.
Шаг 2. Графический нюанс и рифмы с проверкой на тиражируемость в различных точках контакта. Мудборд — это материал для работы по созданию графического нюанса и рифм. Нюанс — это отличительная визуальная черта дизайн-концепции (ключевая нота), а рифма (намеки) — это то, что помогает объединять всю дополнительную графику бренда в один образ. В результате получится конструктор вашего уникального образа бренда. Это значит, что у вас появится ответ на ключевые вопросы:
- Какой цвет выделит бренд в толпе
- Какой графический нюанс поможет узнать бренд среди других
- Какие графические рифмы будут намекать, что перед нами все тот же бренд
Полезное:
Этап 4: Детализация главной страницы: микс вербальной (история о ценности бренда) и визуальной коммуникации — все с учетом отстройки от конкурентов и стратегии развития бренда
Здесь мы берем «самое ценное, что важно рассказать компании для аудитории», наработки по графике и пробуем собрать шапку сайта, рекламные баннеры и мерч, затем, если требуется, возвращаемся на шаги 1 и 2, чтобы добиться целостности восприятия.
Этап 5. Презентация клиенту
Напомните клиенту о чем была прошлая встреча, проведите клиента через все этапы, чтобы освежить картину совместной работы над проектом. Обсудите с заказчиком результат, соберите обратную связь и обсудите список моментов, которые следует скорректировать.
Что важно учесть при создании дизайн-концепции сайта
1. Не пропускайте фазу погружения в бизнес и культуру
К примеру, если бренду близки достижения, спортивный дух и скорость, то эти моменты вы найдете в делах бренда, так и отразите в графике. Представьте, что вам доверили снимать фильм о компании и вы как сыщик собираете все факты.
2. Изучите существующую графику клиента, возможно в ней есть намеки на фирменный стиль
Загляните в посты соцсетей, сториз, рекламу, мерч, логотип — собирайте все, что есть. Затем проведите разбор с клиентом и узнайте все, что ему близко в этой графике и какую историю он вкладывает в каждый из материалов.
3. Рисуйте графику, так как буд-то пишите историю
Каждый графический объект не случаен — он часть истории о деле клиента. К примеру, извивающаяся линия в этой истории может стать проводником в новый мир, а значит обладать глубоким смыслом. Вся графика на сайте связана общим сюжетом, так же как герои сказки в иллюстрации на развороте книги.
4. Больше мудбордов — больше информации
Пространство из трех мудбордов поможет вам добыть дополнительные сведения о рынке, продукте, конкурентах, стратегии клиента — добыть его взгляд на общий ландшафт. Помните, что клиент обладает большим опытом, поэтому на старте мудборды помогают увидеть дело его глазами. Клиенты часто сомневаются, а в пространстве мудбордов проще делать выбор, особенно на старте проекта.
5. Базовый цвет и графический нюанс формируют основное пятно и вкус бренда
Проверьте свою концепцию на узнаваемость: за счет какого цвета, образа и нюанса она будет узнаваема не только на сайте, но и в рекламном баннере и в листовке? Поставьте свою концепцию среди сайтов конкурентов и проверьте, выделяется ли она среди них уникальным характером и подачей или просто сливается в общей гамме.
6. Не перебивайте графикой фокус продукта
Задача всей уникальной графики в том, чтобы выводить продукт на передний план и подчеркивать его достоинства.
7. Применяйте единый графический алфавит во всех точках контакта с клиентом
Используйте ограниченный ассортимент графических приемов на главной и внутренних страницах сайта, каталоге, социальных сетях — во всех линиях коммуникации.
8. Шрифтовая пара с характером: громкий голос и обычная речь
В дизайне одинаково важны и форма, и содержание, а значит одинаково важно уделить внимание не только тому что вы говорите(содержание), но и как говорите(форма), а точнее, с помощью каких инструментов. Шрифт – это по сути голос бренда, а сам бренд как персонаж. Голос может быть совершенно разным: мягким, шутливым, брутальным и дерзким, утонченным и элегантным — от шрифта зависит, каким голосом бренд говорит с клиентом.
9. Вкладывайте в инфографику общую рифму
Соберите референсы инфографики, подставьте их в мудборд и проверьте, есть ли схожая рифма с остальной графикой. Например, если в основе вашей графики конструктор из простых фигур, то и иконки могут продолжать эту рифму. Если у вас сайт с мягкими handmade иллюстрациями, то и иконки лучше впишутся нестрогие, как будто нарисованные от руки.
Пример инфографики с рифмой:
- https://mailchimp.com/andco/
- https://alto.com/
- https://land-book.com/websites/22768-homebase-the-platform-for-local-first-software
10. Держите заказчика в курсе проекта, не устраивайте сюрпризы в последний день сдачи
Вовлекайте заказчика в проект, на каждом созвоне напоминайте ему про этапы, так он будет в курсе развития проекта и будет ощущать сопричастность и контроль. В итоге такой работы финальная демонстрация будет приятным итогом совместной работы и а не внезапным сюрпризом.
Что еще почитать для экспериментов с развитием концепций и стиля
Книга с высокой плотностью дизайн-концепций и анализом. Здесь сотни концептуальных решений, которые реализовали на визуальном уровне.
Вывод и рекомендация
Дизайн-концепции помогают добиться выразительной айдентики. А еще они добавляют согласованности в работе команды и экономят время и деньги.
Дизайн-концепции направляют принятие решений в дизайне и подсвечивают недочеты еще до того, как начнется фаза детальной работы над визуальной проработкой. И самое главное — они побуждают искать выразительное решение сильнее, чем у конкурентов. Попробуйте их в вашим следующем проекте.
Напомню, что прокачать навыки в создании дизайн-концепций вы можете на платформе Breezzly. На Breezzly вы тренируетесь в контексте сайтов, мобильных и веб-приложений и даже на примере приложений для смарт-часов.