Сайт-визитка для детского развивающего клуба

Задача

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

Процесс работы:

1. Обсудили задачу

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

2. Выполнили прототип

Заказчица прислала тексты для страниц с занятиями. Доработали их с учетом ключевых слов для поисковых систем. Написали преимущества и составили прототип сайта.

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

Учли то, что телефонные номера у направлений «Счастливое детство» и «Teambot» отличаются.

Комментарий клиентки на этапе обсуждения прототипов:

3. Собрали доски настроения

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

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

Было решено взять за основу вторую доску настроения.

4. Выполнили дизайн страниц

Далее обсудили шрифтовые решения и приступили к дизайну.

Нарисовали векторные иконки для преимуществ.

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

Потом мы немного похулиганили и у нас получились принцесса с пиратом.

Задизайнили главную и внутренние страницы:

Комментарий клиентки на этапе обсуждения дизайна:

5. Перенесли на платформу Tilda

Сверстали сайт на Tilda, выполнили адаптацию под все необходимые устройства: ПК, ноутбук, планшет, телефон. Добавили легкие ненавязчивые анимации.

На этапе вёрстки выполнили несколько модификаций с помощью кода, чтобы некоторые блоки на сайте приобрели нужный внешний вид.

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

Написали код для корректной работы меню второго уровня. Добавили стрелочки пунктам меню. При наведении на пункт меню стрелочка меняет свое направление.

6. Выполнили базовую SEO оптимизацию

7. Выполнили технические настройки

Подключили доменное имя, добавили политику конфиденциальности, страницу 404, подключили SSL-сертификат.

8. Записали видео-инструкции

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

Итоги:

1. Разработали многостраничный сайт «под ключ»: составили структуру, поработали с текстами, выполнили прототип, нарисовали иконки и иллюстрации, сделали дизайн и перенесли на Tilda.
2. Клиентка обзавелась сайтом-визиткой с современным дизайном, где будет удобно ознакомиться с занятиями и направлениями клуба, просмотреть фото с занятий, почитать отзывы довольных родителей и подобрать подходящее занятие своему ребенку.