подробный кЕЙС по созданию сайта
Сайт для интенсива по английскому
с использованием НЛП-метода
с использованием НЛП-метода
Александр Бакалов
Сайтостроитель и веб-дизайнер
Здравствуйте, меня зовут Александр Бакалов. Я занимаюсь разработкой продающий сайтов и интернет-магазинов. В этом кейсе я хочу подробно рассказать вам о том, как я создал сайт для школы английского языка в СПб, которая использует НЛП-методику при изучении английского.
Вкратце о проекте
Школа английского языка "Do Your Best" работает уже более 5 лет и помогает людям за довольно короткий период овладеть английским языком. Это достигается при помощи использования НЛП-метода во время изучения грамматики и запоминания слов. Данные методики позволяют не просто научиться разговаривать заученными шаблонами, но и четко усвоить грамматические правила и научиться по-настоящему думать на английском языке.
Руководство школы решило создать продукт не для начинающих учить английский язык, а для тех, чей уровень уже минимум B1 (Intermediate). Это решение продиктовано тем, чтобы открыть для себя новый рынок и аудиторию. Потому что большая часть школ английского (да и других ин. языков) делают упор на аудиторию, которая еще только собирается начать изучать иностранный языка. В то время как продуктов для уже имеющих знания людей на так много.
Именно так и пришла идея создания интенсивного курса по фразовым глаголам. Фразовые глаголы – одни из самых часто используемых элементов речи в разговорном английском. Их вы можете встретить как при просмотре любимого сериала в оригинале, там и гуляя по улицам Лондона или Нью-Йорка. Этих глаголов великое множество, но есть преподаватели школы выделили 200 самых часто используемых в большинстве бытовых и деловых ситуациях. За время интенсива ученикам не просто дается список глаголов, который нужно выучить, но и доводится употребление этих слов до максимального автоматизма. Поэтому после окончания курса человек может смело употреблять их, легко узнает их в устной речи при общении или просмотре любимого фильма.
Одним словом, продукт очень классный и имеющий свое уникальное торговое предложение. О том, как я создавал сайт для этого курса читайте ниже.
Руководство школы решило создать продукт не для начинающих учить английский язык, а для тех, чей уровень уже минимум B1 (Intermediate). Это решение продиктовано тем, чтобы открыть для себя новый рынок и аудиторию. Потому что большая часть школ английского (да и других ин. языков) делают упор на аудиторию, которая еще только собирается начать изучать иностранный языка. В то время как продуктов для уже имеющих знания людей на так много.
Именно так и пришла идея создания интенсивного курса по фразовым глаголам. Фразовые глаголы – одни из самых часто используемых элементов речи в разговорном английском. Их вы можете встретить как при просмотре любимого сериала в оригинале, там и гуляя по улицам Лондона или Нью-Йорка. Этих глаголов великое множество, но есть преподаватели школы выделили 200 самых часто используемых в большинстве бытовых и деловых ситуациях. За время интенсива ученикам не просто дается список глаголов, который нужно выучить, но и доводится употребление этих слов до максимального автоматизма. Поэтому после окончания курса человек может смело употреблять их, легко узнает их в устной речи при общении или просмотре любимого фильма.
Одним словом, продукт очень классный и имеющий свое уникальное торговое предложение. О том, как я создавал сайт для этого курса читайте ниже.
Задачи сайта
Предполагается, что трафик на сайт будет вестись с социальных сетей и контекстной рекламы.
Основная задача сайта – конвертировать зашедших на него людей в заявки. Помимо этого, сайт должен помочь отстроиться от конкурентов и создать доверие у посетителей. Кроме того, нужно донести необходимость знания и употребления фразовых глаголов и увеличить ценность данного курса в глазах потенциального клиента. Показать человеку, какие конкретные навыки он получит после прохождения курса.
Основная задача сайта – конвертировать зашедших на него людей в заявки. Помимо этого, сайт должен помочь отстроиться от конкурентов и создать доверие у посетителей. Кроме того, нужно донести необходимость знания и употребления фразовых глаголов и увеличить ценность данного курса в глазах потенциального клиента. Показать человеку, какие конкретные навыки он получит после прохождения курса.
Ключевые действия на сайте
Главное ключевое действие на сайте – оставить предварительную заявку в конце страницы. Задача остального контента сайта – создать ценность продукта в глазах клиента и отработать самые частые его возражения.
Портрет целевой аудитории
Этот курс является узким продуктом, заточенным под конкретную аудиторию. Поэтому и портрет пользователя в этом разделе будет представлен только один
Человек, владеющий английским на уровне B1-B2
Хочет повысить уровень английского, узнать частые разговорные фразы и выражения
Боль – есть хороший словарный запас, но есть проблемы с пониманием разговорной речи на слух. Много путаницы из-за того, что в речи носителей используется много фразовых глаголов.
Потребность – улучшить разговорные навыки и навыки понимания речи на слух за счет расширения своего словарного запаса при помощи фразовых глаголов. Во время курса максимально довести употребление этих слов до автоматизма, чтобы на выходе он мог легко употреблять их в подходящих ситуациях и столь же легко распознать фразовый глагол в речи собеседника.
Глубинная потребность – то, для чего человек учит язык. Учеба за границей, работа с иностранцами или в международной компании, миграция в англоговорящие страны.
Как мы решаем эту потребность: сами фразовые глаголы специально подобраны по частоте использования, что делает их знание и понимание максимально полезным в реальной жизни. На интенсиве мы доводим до автоматизма употребление и распознавание фразовых глаголов, что после окончания курса дает человеку не просто знания, а уже готовый навык употребления и распознавания слов. На курсе нет теоретической воды, все максимально подчинено практическому применению слов.
Потребность – улучшить разговорные навыки и навыки понимания речи на слух за счет расширения своего словарного запаса при помощи фразовых глаголов. Во время курса максимально довести употребление этих слов до автоматизма, чтобы на выходе он мог легко употреблять их в подходящих ситуациях и столь же легко распознать фразовый глагол в речи собеседника.
Глубинная потребность – то, для чего человек учит язык. Учеба за границей, работа с иностранцами или в международной компании, миграция в англоговорящие страны.
Как мы решаем эту потребность: сами фразовые глаголы специально подобраны по частоте использования, что делает их знание и понимание максимально полезным в реальной жизни. На интенсиве мы доводим до автоматизма употребление и распознавание фразовых глаголов, что после окончания курса дает человеку не просто знания, а уже готовый навык употребления и распознавания слов. На курсе нет теоретической воды, все максимально подчинено практическому применению слов.
Шрифты и цвета
Когда мы уже более-менее разобрались с целевой аудиторией и маркетинговыми задачи, то самое время перейти к разбору самого сайта.
Кстати, мои последние сайты вы можете посмотреть по ссылке: http://bakalov.su/portfolio
Когда мы уже более-менее разобрались с целевой аудиторией и маркетинговыми задачи, то самое время перейти к разбору самого сайта.
Кстати, мои последние сайты вы можете посмотреть по ссылке: http://bakalov.su/portfolio
Сетка и стиль углов
Сетка – это силовые линии, на которые опирается дизайнер, когда расставляет элементы на сайте.
Я решил избрать сетку с двумя силовыми линиями: по одной линии идут заголовки, а по второй линии, находящейся в правой половине экрана – основная часть контента
Сетка – это силовые линии, на которые опирается дизайнер, когда расставляет элементы на сайте.
Я решил избрать сетку с двумя силовыми линиями: по одной линии идут заголовки, а по второй линии, находящейся в правой половине экрана – основная часть контента
Иногда слева тоже появляется контент, благодаря этому он привлекает к себе необходимое дополнительное внимание.
Чтобы левая часть сайта не казалась слишком пустой, я решил расставить там небольшие фоновые элементы.
Было принято решение сделать дизайн без прямых углов, а сгладить их при помощи закругления. Размер закругления был выбран равный 15. Данный радиус скругления сохраняется во всех элементах сайта, что придает ему единый стиль:
Также прошу заметить, что за каждой карточкой есть красная тень. Это тоже единый стилистический элемент, который создает эффект единообразия. Он есть во всех карточках, а также в форме обратной связи
Красная тень хорошо смотрится на белом и синем блоке фона
Система отступов
Система отступов – это заранее разработанные расстояния, которые мы отступаем от каждого элемента. Система отступов должна быть единой и заранее определенной.
Это поможет сделать ваш сайт более стильным единообразным. Чтобы расстояния от заголовка в первом и последнем блоках были одинаковыми и ваш сайт производил впечатление одинаковости на посетителей.
Основные виды отступов и их размер:
1. Расстояние от контента до конца/начала блока – 150px
Система отступов – это заранее разработанные расстояния, которые мы отступаем от каждого элемента. Система отступов должна быть единой и заранее определенной.
Это поможет сделать ваш сайт более стильным единообразным. Чтобы расстояния от заголовка в первом и последнем блоках были одинаковыми и ваш сайт производил впечатление одинаковости на посетителей.
Основные виды отступов и их размер:
1. Расстояние от контента до конца/начала блока – 150px
2. Расстояние от заголовка до подзаголовка – 50px.
3. Межстрочный интервал (интерлиньяж) – 1,4
Заметьте, что расстояние внутри блоков всегда меньше, чем расстоянием между ними и от начала блока до начала контента!
4. Горизонтальные отступы между элементами – 75 px
Повторюсь, что данные отступы позволяют создать единую систему симметрии сайта, что производит отличное первое впечатление на посетителя сайта.
Разбор каждого из блоков сайта
1. Первый блок – презентуем продукт на 3 секунды
1. Первый блок – презентуем продукт на 3 секунды
Задача 1 экрана – за 3-4 секунды дать человеку понять:
На мой взгляд, наш первый экран с этой задачей довольно хорошо справляется:
- Что за продукт находится перед ним
- Чем этот продукт закрывает боли человека
- Что отличает этот продукт от конкурентов
- Показать, какое ключевое действие нужно совершить дальше
На мой взгляд, наш первый экран с этой задачей довольно хорошо справляется:
- Человек понимает, что сайт посвящен интенсиву по английскому
- Этот продукт на выходе дает человеку не просто знание, а навык употребления глаголов
- Продукт отличает от остальных использованием НЛП-методики
- Кнопка ключевого действия четко выделена и человек понимает, как оставить заявку
2. Второй блок – рассказываем о необходимости фразовых глаголов
Здесь мы доносим до человека ценность знания фразовых глаголов. В самом начале мы вкратце поясняем, что из себя представляет фразовый глагол и приводим несколько понятных примеров.
Далее приводим аргументы, говорящие о необходимости четко понимать и различать фразовые глаголы: эти глаголы есть в международных экзаменах, также часто используются в общении на бытовые и бизнес-темы.
Далее приводим аргументы, говорящие о необходимости четко понимать и различать фразовые глаголы: эти глаголы есть в международных экзаменах, также часто используются в общении на бытовые и бизнес-темы.
3. Третий блок – показываем человеку навыки, которые он получит после курса
Мы не даем человеку абстрактных обещаний, а показываем конкретные навыки, которые он будет иметь после курса. Этот блок позволяет еще больше повысить ценность курса в глазах клиента и показать нашу практическую ориентированность на результат.
4. Четвертый блок – раскрываем суть НЛП-методики
Далеко не все знакомы с методами НЛП-преподавания, да и с самим НЛП тоже. Поэтому этот блок призван привести конкретные примеры того, как нейролингвистическое программирование поможет освоить английский язык быстрее.
Мы показываем, как эти приемы улучшают запоминание глаголов и переход из пассивного словарного запаса в активный.
Мы показываем, как эти приемы улучшают запоминание глаголов и переход из пассивного словарного запаса в активный.
5. Пятый блок – показываем, в каких ситуациях этот курс точно будет полезен
Причем мы не просто перечисляем ситуации, но еще и в самой карточке рассказываем, как именно фразовые глаголы могут пригодиться. Таким образом, человек еще раз получает понимание того, что фразовые глаголы очень часто используются и получает примеры их применения в конкретных ситуациях.
6. Шестой блок – вкратце рассказываем о преподавателе
Изучение языка очень тонкая вещь, успех здесь зависит не только от самого ученика, но еще и от заинтересованности преподавателя. Поэтому очень важно показать лицо преподавателя и рассказать о его навыках. Демонстрация человека позволяет еще больше повысить доверие к этому продукту.
7. Седьмой блок – демонстрируем отзывы
Демонстрация социальных доказательств всегда помогает показать потенциальному клиенту, что ваш продукт успешен и приносит те результаты, которые заявлены на сайте и в рекламе.
8. Восьмой блок – показываем фото и видео с занятий
В подзаголовке специально написано, что на видео вы можете увидеть один из методов изучения глаголов при помощи жестов. Это помогает направить внимание человека на видео, которое на практике показывает один из методов интенсива.
(!) Видео в этом блоке находится слева, хотя весь контент на сайте шел по правой стороне. Такой прием позволяет еще раз дополнительно привлечь внимание к блоку с видео и сфокусировать взгляд пользователя на нем.
(!) Видео в этом блоке находится слева, хотя весь контент на сайте шел по правой стороне. Такой прием позволяет еще раз дополнительно привлечь внимание к блоку с видео и сфокусировать взгляд пользователя на нем.
9. Девятый блок – предвосхищаем вопросы и возражения людей
Блок с ответами на вопросы позволяет ответить на самые частые вопросы и предвосхитит самые частые возражения. Этот блок позволяет дополнительно убедить человека в необходимости курса, а также помогает менеджеру заказчика не отвечать на одинаковые рутинные вопросы.
10. Десятый блок – форма предварительной заявки
Человек очень редко готов купить что-то "сходу", в большинстве случае ему нужно подумать. Именно по этой причине мы не написали в подзаголовке "купить курс" или "оплатить курс" – так как эти действия слишком тяжелые для человека.
Лучше написать подзаголовок "оставить предварительную заявку" – это более легкое действие, из которого необязательно следует оплата курса и трата денег. Этот прием также позволяет увеличить конверсию этой формы.
Лучше написать подзаголовок "оставить предварительную заявку" – это более легкое действие, из которого необязательно следует оплата курса и трата денег. Этот прием также позволяет увеличить конверсию этой формы.
Настройка якорей
Якорь – это специальная ссылка перемещающая, человек с одной части страницы в другую часть экрана. Причем, все перемещения происходят на одной странице.
В Тильде есть стандартный блок "якоря", позволяющий перемещаться между разными блоками. Но что делать, если весь сайт создан в одной зеро-блоке без разделения на отдельные блоки по экранам?
Якорь – это специальная ссылка перемещающая, человек с одной части страницы в другую часть экрана. Причем, все перемещения происходят на одной странице.
В Тильде есть стандартный блок "якоря", позволяющий перемещаться между разными блоками. Но что делать, если весь сайт создан в одной зеро-блоке без разделения на отдельные блоки по экранам?
В этом случае я советую действовать следующим образом:
1. Перейти в зеро-блок и создаем HTML-документ. Документ нужно расположить в том месте, куда вы хотите перенаправлять пользователя (то есть на месте, где должен быть сам якорь)
2. Прописать в HTML-документе следующий код:
<div id="001"></div>
001 – индивидуальный номер этого блока, на который мы будем направлять экран после нажатия на какой-либо элемент. Вместо "001" вы можете ставить любое число, главное чтобы значения якорей не повторялись
<div id="001"></div>
001 – индивидуальный номер этого блока, на который мы будем направлять экран после нажатия на какой-либо элемент. Вместо "001" вы можете ставить любое число, главное чтобы значения якорей не повторялись
3. После этого создаем кнопку и затем вставляем в раздел "URL" следующее значение:
4. Если вы хотите поместить якорь в меню, то также ставьте там это значение:
Теперь при нажатии на кнопку или элемент меню, вас автоматически перекидывает в нужную часть экрана, где находится этот HTML-код
Создание кнопки "Наверх"
Кнопка "Наверх" позволяет человеку вернуться наверх страницы без использования скролла. Данный элемент упрощает перемещение человека по странице.
1. Это стандартный элемент в Тильде:
Кнопка "Наверх" позволяет человеку вернуться наверх страницы без использования скролла. Данный элемент упрощает перемещение человека по странице.
1. Это стандартный элемент в Тильде:
2. Чтобы поменять внешний вид этой кнопки, нажмите на раздел "Настройки". Кнопка автоматически поднимает человека до 1 экрана.
Отзыв заказчика о работе
Другие отзывы о работе со мной вы можете прочитать по ссылке:
https://vk.com/topic-135294483_41850487
https://vk.com/topic-135294483_41850487
Ответьте на все вопросы, чтобы рассчитать стоимость создания сайта
Вы ответили на все вопросы. Осталось только указать телефон!