Как создаются корпоративные сайты с высокой конверсией?
1 ЭТАП - ПОДГОТОВКА
Что делаем?
- Анализ рынка и конкурентов
- Анализ целевой аудитории
- Составляем портреты ЦА
- Выписываем ключевые преимущества компании
- Собираем отзывы, рекомендации, благодарственные письма
- Упаковываем подробные кейсы (если есть)
Для чего?
- Чтобы понять свою ЦА
- Проверить спрос и предложения на рынке
- Понять где находится ЦА
- Что для нее важно, какие боли, страхи, хотелки
- Найти и показать ключевые преимущества работы с вами
- Повысить доверие и лояльность за счет собранных отзывов
- Найти слабые и сильные места компании
Какой результат?
Понимаем актуален ли наш продукт или услуга на рынке. Знаем кто наш клиент и чего он хочет. Готовы материалы для старта разработки сайта
2 ЭТАП - ТЕКСТОВЫЙ ПРОТОТИП
Что делаем?
- Создаем структуру от основных заголовков до кнопок
- Придумываем оффер (ключевое предложение)
- Пишем тексты по болям, хотелкам ЦА
- Продаем через тексты с помощью кейсов, цифр, вроде результатов, масштабов
- По сути и без воды показываем свои компетенции, амбиции, но ГЛАВНОЕ — покажите, что можете решить боль клиента
Для чего?
- Чтобы видеть картину целиком
- Не отвлекаться на визуал, а уделить все внимание смыслам
- Определить, докрутить и донести свой оффер
- Чтобы попасть текстами в свою ЦА и удержать внимание для последующей продажи
Вот так, примерно, выглядит текстовый прототип
Готовый текстовый прототип лендинга +
сильный оффер + утвержденная логика
блоков.
Смыслы упакованы через текст, можно
двигаться дальше
3 ЭТАП - ПОДБОР СТИЛИСТИКИ
Что делаем?
- Ищем референсы у конкурентов
- Ищем референсы на заграничных сайтах в похожей нише
- Собираем moodboard (ниже покажу как выглядит)
- Определяем ключевое направление по стилистике
Для чего?
- Чтобы упаковаться, как минимум, не хуже конкурентов
- Вызвать нужные эмоции через сайт и продать
- Найти свою фишку в дизайне и зацепить ею ЦА
- Чтобы сайт смотрелся целостно, как единая система
Это Moodboard. Он помогает выбрать идеальную стилистику для сайта.
Выбрана стилистика проекта, которая нравится всем. Получаем атмосферу, мотивирующую клиента к покупке или целевому действию
4 ЭТАП - ПРОТОТИП
Что делаем?
- Создаем черновой вариант сайта без дизайна
- Переносим тексты в последовательные блоки
- Выстраиваем итоговую структуру страницы
- Проектируем и продумываем всплывающие окна, попапы, доп.страницы
Для чего?
- Прототип помогает собрать воедино тексты + задать ритм, структуру сайта
- Прототип ускоряет работы и дает возможность еще раз посмотреть на страницу целиком
- Проще делать дизайн, имея структуру
- Чтобы на этапе дизайна не думать о логике, а просто делать сочную картинку
Вот так выглядит прототип c текстами и логикой
Получаем готовый прототип с текстами. Понятно как будет выглядеть сайт, прописаны все тексты и готова логика. Экономим время на создание дизайн-макета, остается только собрать все воедино
4 ЭТАП - ДИЗАЙН
Что делаем?
- Собираем полностью страницу по готовому прототипу и подобранной стилистике
- Выстраиваем композицию так, чтобы блоки были разными и легко считываемыми
- Прорисовываем каждое окно, каждую кнопку и попап
- Адаптируем дизайн-макеты минимум под 3 разрешения (1920, 768, 320px.)
Для чего?
- По готовому дизайн-макету можно верстать и переносить сайт в интернет
- Чтобы каждое состояние, наведение и каждая кнопка были отрисованы / анимированы
Готовый дизайн, соблюдена выбранная стилистика, прорисованы все состояния элементов
Полностью готовы макеты сайта + адаптивные разрешения + попапы и всплывающие окна. Можно переносить дизайн на верстку и программирование
