Создание сайта для детского сада “Интеград”

В сентябре 2020 года на почту нашей веб-студии пришло письмо от МДОБУ «Кудровский детский сад комбинированного вида № 2» с заявкой на создание официального сайта для их учреждения. Письмо содержало также просьбу о необходимости скорейшей подготовки коммерческого предложения со сроками и стоимостью, и контактный телефон ответственного сотрудника.

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

Задачи проекта

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

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

На вопрос о CMS (система управления сайта) нам ответили, что предыдущий ресурс был сделан на Joomla, которая им знакома и достаточно понятна. Обсудив по телефону с ответственным сотрудником оставшиеся вопросы, мы узнали, что никаких других материалов для сайта, кроме логотипа, не имеется. Не было не только текстов или других материалов для разделов и страниц, но даже фото самого учреждения и его сотрудников.

Мы настойчиво попросили сделать и прислать хотя бы несколько фотографий, которые планировали использовать при создании дизайна, и спустя несколько дней получили архив с фотографиями, которые самостоятельно сделал заказчик. Также он прислал нам ссылку на сайт murinodskv2.ru, сделанный нами несколько лет назад для «Муринского центра образования №2» - как пример того, что они рассчитывают в итоге получить. Видимо, именно этот наш проект понравился заказчикам стилем и структурой, в связи с чем они решили обратиться к нам.

Еще заказчик попросил при разработке дизайна учесть название «Интеград» и имеющийся логотип с домиками, деревьями и дорогой.

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

Реализация цели

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

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

Когда структура и главная страница сайта были утверждены, дизайнер приступил к созданию дизайн-макетов страниц сайта, в первую очередь - его главной страницы. Он оформил шапку сайта, интегрировал в нее имеющийся логотип, разместил поле поиска по сайту и кнопку «Версия для слабовидящих». Затем он выбрал и обработал несколько самых подходящих фотографий, поместив их в слайдер, а справа от него расположил вертикально 4 баннера, о которых просил заказчик. При верстке под эти баннеры нужно было «подложить» соответствующие ссылки на сторонние ресурсы (госуслуги, электронное правительство и т.д.).

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

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

Дело в том, что у каждой группы было свое уникальное название, например, «Аллея облаков» или «Цветной бульвар». Нам хотелось их акцентировать, оформить тематически в соответствии с названием группы. Для каждой группы дизайнер нарисовал подходящую иконку, при наведении курсора на которую весь блок становился цветным, детализированным, вокруг каждого квадрата появлялась обводка со своим цветом. Без наведения же все эти восемь блоков были монохромными.

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

Готовый дизайн-макет главной страницы мы отправили на ознакомление заказчику. После его утверждения дизайнер оформил все внутренние страницы сайта в этом же стиле.

Затем к работе подключился веб-мастер, который за пять последующих дней сверстал сайт по макетам дизайнера и наполнил его первичным контентом. В качестве CMS мы выбрали Joomla последней (на момент создания сайта) версии, как того и хотел заказчик. Установили почту заказчика на все формы обратной связи и проверили ее работу.

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