INVERSER
INVERSER
Powerful web-based technologies
Powerful web-based technologies
Email:
Mobile:
YouTube

1. Описание сайта.

Данный проект создан благодаря идее заказчика – обучение английскому онлайн по скайп. Функционал сайта, его внешний вид полностью созданы мною с ноля. Основная зада проекта – проинформировать пользователя о тех услугах, которые на нем предоставляются и дать возможность максимально удобно подать заявку, как на пробный курс, так и выбрать из имеющегося списка. Я вместе с заказчиком постарались придумать некоторые оригинальные идеи, чтобы привлечь внимание пользователя.

2. Функционал.

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

3. Видео представление.

Внимание, видео имеет HD формат и размер 297 MB.

4. Снимки и стиль.

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

Skyline-English.PRO

Вверху каждой страницы сайта Вы можете видеть самые важные элементы:

  • номера телефонов;
  • email для связи:
  • пробный урок (стоимость 0.00);
  • а также важную информацию для тех, кто еще никогда не интересовался изучением английского по Skype – специальная статья (Изучить английский по Skype – легко!).

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

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

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

Skyline-English.PRO

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

Skyline-English.PRO

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

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

Skyline-English.PRO

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

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

#free

Например:

http://skyline-english.pro/kontakty#free

при этом форма сразу отобразиться на странице с красивым анимационным эффектом.

Skyline-English.PRO

Раздел «Контакты» имеет максимально доступную информацию: номера телефонов, email, Skype и непосредственно форму обратной связи.

Skyline-English.PRO

Форма обратной связи выглядит следующим образом:

Skyline-English.PRO

Раздел «Курсы» содержит фоновое видео, размером всего 8 MB. Оно воспроизводится циклически, поэтому кажется безконечным. Видео было смонтировано мной из нескольких, выбранных заказчиком и оптимизировано для сайта.

Аккордеон – простой и удобный способ дать пользователю возможность ознакомиться с большим объемом информации в изначально сжатой форме.

Skyline-English.PRO

Раздел «Преподаватели» содержит в себе всю необходимую информацию о каждом участнике проекта. Руководитель проекта всегда остается вверху. Кроме того, каждый преподаватель может показать свое видео пользователям и добавить аудио преставление. Видео преподавателя Елена было монтировано и добавлено на YouTube мной.

Skyline-English.PRO

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

Skyline-English.PRO

Раздел «Стоимость» содержит не только информацию о стоимости курсов, но и возможность сделать заказ. Стоит отметить, что жители Украины, например, видят одни цены: в UAH и USD, а жители России – другие цены, в RUR и USD. Жители других стран видят цены только в USD, как пожелал заказчик. При этом, страна определяется по IP диапазонам посетителя сайта, список диапазонов и принадлежности IP к определенным странам постоянно обновляется, что дает возможность более точного определения данных.

Skyline-English.PRO

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

Skyline-English.PRO

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

Skyline-English.PRO

Раздел «Блог» позволяет владельцу сайта размещать полезный и нужный материал по своему усмотрению для своих посетителей. При этом, внизу каждой страницы (не только раздела «Блог»), есть кнопки, которыми может воспользоваться пользователя для того, чтобы перейти в социальную сеть владельца сайта (группы, канал на YouTube и т.п.), а также поделиться понравившейся страницей в социальной своей сети (в своем профиле – посетитель сайта).

Skyline-English.PRO

5. Мобильная версия сайта.

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

Во-первых, данная функция позволила сократить время загрузки сайта через телефон или планшет. Во-вторых – снизить нагрузку на центральный процессор мобильного или планшетного устройства, убрав некоторые анимационные эффекты сайта. Он не стал от этого менее красивым, но при этом увеличил скорость выполнения элементов на слабых устройствах.

Skyline-English.PRO

Skyline-English.PRO

Skyline-English.PRO

Верхнее навигационное меню «прячется», если ширина окна обозревателя становится меньше заданной. Его (меню) можно активировать по нажатию соответствующей кнопки.

Skyline-English.PRO

После нажатия на иконку «меню», пользователь с узким экраном увидит следующее:

Skyline-English.PRO

Все элементы сайта адаптированы для мобильных и планшетов. В том числе и слайдер. Главная страница на узком экране выглядит так:

Skyline-English.PRO

При этом, слайдер можно листать свайп действиями. Детальнее о том, как сайт может выглядеть на мобильном, Вы сможете узнать из полного видео обзора сайта (выше).

«От проекта до объекта»:

Skyline-English.PRO


Добавить отзыв

Отзывов пока нет