Как создать сайт сети школ английского языка, который совместит узнаваемые символы в дизайне с серьезным подходом и удобным пользовательским юзабилити? С таким кейсом столкнулась наша студия при разработке портала школы TellMeMore. Расскажем об основных этапах проекта от составления макета до SEO-оптимизации.

На что ориентироваться при создании дизайна? На ассоциации! Биг-Бен, королева, 5 o'clock и британский флаг. Но такие образы используют все. Как можно выделиться? В ходе мозгового штурма было последовательно составлено и отвергнуто несколько макетов, пока мы не нашли идеальное сочетание цветов. Темно-оранжевый, черный и белый - неброские, но наиболее заметные сочетания. Такой фон хорошо оттеняет фотоподборку и сочетается с логотипом студии. Чтобы оживить главную, мы добавили несколько ярко-зеленых и голубых блоков в услуги. Чередование этих цветов посреди монотонного фона позволяет сакцентировать внимание посетителя на предлагаемых услугах.

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

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

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

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

Бизнес наших клиентов развивается и прямо во время работы над сайтом нам пришло известие, что TellMeMore масштабируются. Открылись еще два филиала в Санкт-Петербурге. Совместить работу всех на одной странице, напичкав каждый экран сайта максимальным объемом информации - это прошлое десятилетие. Пользователям не нужны сведения о филиалах в другом районе. Мы решили сделать три раздела с максимально подробной информацией по каждому филиалу.

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

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