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

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

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

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

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

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

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

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

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

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

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

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

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

Попробуйте BrainApps бесплатно

Начать занятия

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

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

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

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

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

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

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

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

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

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

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