Новая главная страница BrainApps.ru

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

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

Пользователи, заходящие на сайт, как правило , ищут ответы на следующие вопросы:

  1. Что делает эта страница?
  2. Что мне предлагают?
  3. Что я должен буду заплатить ( время или деньги )?
  4. Почему я могу им доверять?

Кроме того,  для разных аудиторий и тематик проекта могут появляться дополнительные вопросы, например:

  • Есть ли доставка по Москве?
  • Как связаться и т.д.

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

Нашим дизайнерам была поставлена задача переделать главную так, чтобы сразу было понятно, зачем пользователю нужен BrainApps и почему так важно заниматься своим мозгом. Кроме того, главная должна была смотреться идеально на планшетах в масштабе 100%.

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

  1. Краткое описание, что такое сервис.
  2. Форма регистрации пользователя на первом скроле страницы (область, которая влезает в экран пользователя сразу после загрузки сайта).
  3. Аргументы, почему надо заниматься своим мозгом.
  4. Описание того, как работает сервис ( стартовый тест, формирование индивидуальной программы занятий, статистика , крутые развивающие игры для мозга ).
  5. После того как пользователь максимально заинтересован и готов начать пользоваться сервисом, мы снова показываем ему форму регистрации или быстрого входа через социальные сети.
  6. Для уже зарегистрированных пользователей должна быть возможность быстро войти на сайт.
  7. Где-то внизу страницы требуется разместить ссылки на основные разделы сервиса, например, вход в профессиональную версию для Докторов и Специалистов.

Указанный функционал был схематично нарисован на бумаге, а затем перенесён  в специальную программу для прототипирования (мы используем бесплатный Pencil).

IMG_8694

Готовый вариант в jpg

sketch

 

Т.к. сайт должен идеально смотреться на ipad, а мобильную версию делать не хочется, решаем использовать концепт сменяющихся слайдов. Дизайнер приступил к работе и сразу же выдал первый макет:

first

Концепт нравится, но решаем ещё поработать над иконками в стиле флет и сделать верх страницы зелёным.

Макет уходит на следующую доработку.

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

index_games_fixes

После изменений страница выглядит вот так:

index_games_fixes2

Начинаем искать вид футера.

index_footer1

Арт директор говорит, что пустовато. Работаем дальше. Ура, вариант найден 😉

index_footer2

Ещё несколько правок, чтобы все слайды влезали в экран 650 px по высоте и приступаем к верстке.

Задача интересна тем, что слайды должны прокручиваться и на планшетах пальцем, и клавиатурой на компьютере. Должна отрабатывать кнопка back(Назад) в браузере. У каждого слайда должен быть свой hash тег в адресной строке.

После нескольких рабочих дней получаем готовую верстку.

Далее в работу включается наша креативная команда. Необходимо составить красивые мотивирующие тексты для всех слайдов.  Работаем, как всегда, на бумаге =)

IMG_8695

 

Вставляем тексты в верстку и приступаем к внедрению. Параллельно консультируемся с нашими SEO оптимизаторами по поводу ключевых запросов.

Ловим пару багов, правим их и выкладываем версию на сервер.

Ура! Далее будет ещё серия А\Б тестов для оптимизации процента отказов и регистраций.

В следующей статье мы расскажем, как у нас организована работа по разработке игр и сервера. Будет интересно!

Достигайте большего вместе с BrainApps.ru

Начните заниматься прямо сейчас
Brainapps

Похожие публикации