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

В августе 2020 года в нашу веб-студию поступила заявка на создание сайта для нового детского сада, который уже осенью должен был открыться в городе Кудрово Ленинградской области. В письме, пришедшем нам на почту, заказчики объясняли, что увидели сайт, сделанный нами для Кудровского центра образования №1. Наша работа очень понравилась, поэтому они обратились именно в “3840”, чтобы поручить веб-студии создание сайта примерно такого же плана.

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

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

В наличии у заказчика было лишь несколько фотографий и логотип. От нас требовалось создать структуру ресурса и его главной страницы, немного доработать имеющийся логотип, нарисовать дизайн-макеты для всех страниц, обработать и подготовить имеющиеся материалы для размещения (лицензии, сертификаты, фотографии), сверстать сайт, используя адаптивную верстку, наполнить его первичным контентом, настроить необходимый функционал, и перенести на основной домен dskudrovo3.vsevobr.ru.

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

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

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

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

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

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

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

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

После внимательного изучения полученных материалов, мы дали разъяснения по поводу возникших у заказчика вопросов и запросили недостающие данные. Получив всю нужную информацию, подготовили договор о разработке сайта, подписали его, и в середине октября приступили к работе над новым ресурсом для Кудровского детского сада №3.

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

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

Начал он с доработки имеющегося у детского сада логотипа: немного упростил его для лучшего восприятия и «осовременил». Затем, взяв за основу цвета и стиль, используемые в логотипе, постарался воплотить их в макете главной страницы. Общий стиль у сайта получился детским, легким и “мультяшным”, но, в то же время, спокойным, без ярких и резких цветов.

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

Готовый дизайн-макет выслали заказчику на ознакомление и утверждение. На следующий день куратор проекта связался с нами по телефону, попросив сделать маленькие правки, связанные с контентом. Их оперативно внесли в макет, после чего заказчик принял предложенный дизайн.

Далее дизайнер в том же стиле оформил внутренние страницы сайта (по большей части все они были информационными и идентичными друг другу). Исключение составляли страницы «Руководство и педагогический состав» (содержащий страницы-карточки руководителя и педагогического состава), раздел «Новости» (и сами страницы новостей), и «Контакты». Готовые дизайн-макеты этих страниц были отправлены заказчику в течение двух дней и так же оперативно им приняты.

Затем дизайнер передал все макеты страниц веб-мастеру, который к тому времени заранее подготовил площадку для нового сайта, развернул на ней CMS Joomla последней версии и поэтому сразу же приступил к верстке.

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

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

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

Когда все работы были завершены, мы подготовили для заказчика инструкцию по наполнению сайта и передали ему доступы к административной панели. Затем наш системный администратор запросил у заказчика доступы к хостингу детского сада (а все сайты государственных учреждений находятся на едином специальном хостинге) и после их предоставления перенес новый ресурс на домен dskudrovo3.vsevobr.ru.