Быстрая консультация
Сайт для инфобизнесмена Сергея Загородникова
Дизайн сайта
Денис Климонтов
Руководитель проекта
Помогаю предпринимателям и маркетологам создавать сайты и визуальное оформление.

В этой статье я расскажу, как мы сделали дизайн сайта для инфобизнесмена.
Анализ сайта

Анализируем сайт sergeyzagorodnikov.ru и выделяем несколько проблем, которые стоит решить.
Первый экран

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

На этот лендинг идет реклама. Но тогда возникает вопрос: то почему на первом экране нет призыва к действию и формы захвата?

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

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

Информации много, она вся продающая, но из-за неправильного оформления читать ее очень тяжело.

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

Для наставника самым важным и главным продающим инструментов являются результаты его учеников. Можно вообще ничего не рассказывать о эксперте и показать что он добился своей работой — выстроится очередь желающих повторить результаты!

Но на сайте Сергея кейсам уделено катастрофически мало внимания и о учениках скромно упоминается чуть ли не на самом последнем экране.

Это очень грубая ошибка.

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

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

Суммировав все вышесказанное обозначим главные задачи дизайна:
Итого:
  1. Главный акцент — на эксперта, а не на услугу
  2. «Премиальное» визуальное оформление
  3. Многостраничный сайт
  4. Грамотно оформленные кейсы
  5. Информация подается легко и понятно
Следующий шаг —делаю прототип будущего сайта. Я сделал прототип с учетом этих трех пунктов.
На первом экране будет фото Сергея и имя и регалии. Очень важно — меню. Сайт нужно делать не одностраничным лендингом, а многостраничным. Каждый пункт меню ведет на соответствующую страницу. На главной странице — только самые привлекательные и важные моменты.

«Об авторе» —биография, жизненные принципы, личные фото. Я не стал писать этот текст, такие вещи лучше всего обсуждать отдельно.

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

«Бесплатные вебинары» и «Продукты» — по сути меньше всего претерпят изменения, могут быть сделаны так как сейчас на educm.ru.
Референсы

Пора переходить к дизайну.

Прежде чем начинать что-то рисовать, стоит подобрать референсы. Я перебрал множество примеров и в итоге остановился на темном фоне и «дорогой» цветовой гамме бежевого с черным.

Так же хочется сделать хорошее обработанное фото на главный экран.

Ниже — те примеры, которые легли в основу дизайна.
Дизайн

Для первого экрана взяли фото Сергея и совместили с изображением книжных полок.
Обрабатываем, добавляем необходимый текст. Так же сделали вариант логотипа. У Сергея есть коронная фраза про «высшую математику», почему бы это не обыграть! Никто мне не запретит;) Получается лого со знаком суммы, знак суммы хорошо сочетается с первой буквой фамилии.
Получилось очень серьезно, по деловому. Главное что не похоже на сайт стандартного «инфоцыгана», продолжаю в том же стиле.

Следующий экран — кейсы. Берем фотографии учеников из соц.сетей. Кейсы переплетаются с интересной статистической информацией.

Важно! Каждый кейс, это не просто фото и цифры. Ссылка должна вести на отдельную страницу с текстовым резюме и видео. Так кейсы будут работать эффективнее.
Оформляем курсы, делаем для них новые обложки. Проблема старых — они все в разнобой и в разных стилях. Стоит обновить.

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

Саму анкету лучше всего тоже сделать не средствами гугл-доков, а отдельную, красивую форму в стиле сайта. Так будет больше доверия и более серьезно.
Итоговый вариант дизайна
Вам нужен сайт?
Предлагаем обсудить ваш проект
Проведем стартовое интервью. Определим задачи и полученные данные.
Made on
Tilda