Летом 2015 года мы закончили разработку нового сайта для столичной компании «Адмирал», которая занимается арендой теплоходов для праздников, а также организацией самих мероприятий.

Цели

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

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

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

Подрядчик по дизайну

Проектированием и дизайном занялся наш друг Денис Фостер, для нас это уже не первое сотрудничество: мы вместе делали спортивный проект «Fitbooster».

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

Результат

Главная страница

Главная страница встречает привлекательным встроенным видео.

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

На главной мы предлагаем пользователю 2 сценария:

  1. сразу перейти к подбору теплохода, нажав на кнопку в центре экрана;
  2. а тот, кто хочет сначала узнать больше о компании, может продолжить изучение главной страницы.

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

Подбор теплохода

При подборе пользователю тоже предлагаются 2 сценария:

  1. Простой — получить одним кликом список теплоходов указанного типа;
  2. Продвинутый — самому настроить 5 параметров выборки: особенности теплохода, вместимость, форма мероприятия, стоимость аренды и день недели.

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

Страница теплохода

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

Дальше идут разные необязательные информационные блоки:

  • Описание особенностей теплохода
  • Акции
  • Доступные меню
  • Связанные кейсы портфолио
  • 3D-панорама

Портфолио

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

Второстепенные страницы

Другие страницы сайта, это:

  • Мероприятия и услуги
  • Причалы и стоянки
  • Акции
  • Ведущие
  • Контакты

Про внимание к деталям

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

Вот некоторые примечательные детали сайта «Адмирал»:

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

  • И в других местах, где используются подписи к фото, мы позаботились, чтобы они хорошо читались

  • Кнопка «Заказать теплоход» в меню заметно выделяется, но не бросается в глаза
  • На странице подбора показывается число соответствующих условиям фильтра теплоходов и это число сразу обновляется при изменении параметров

  • Любые перелистываемые на сайте элементы, в частности фотографии на странице теплохода и отзывы на главной странице, можно листать как по нажатию на стрелки с боков, так и перетаскиванием — это удобно при большом количестве объектов и при просмотре сайта с мобильных устройств.
  • На всех страницах доступен быстрый поиск по названию теплохода, который работает без задержки

  • Обновление списка найденных теплоходов происходит быстро и плавно
  • В форме Заказа теплохода (которая доступна из любого места сайта) название теплохода подставляется само, если пользователь открыл форму со страницы теплохода или кейса

  • На всех изображениях сайта используется водяной знак для защиты, при этом он сделан небольшим, одиночным и полупрозрачным — это оптимальный баланс между надежностью и удобством для пользователя

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

Факторы успеха

Можно выделить следующие факторы, которые помогли нам сделать хороший проект:

  • Работа с настоящим действующим бизнесом, приносящим людям пользу
  • Четкое представление у заказчика о желаемой цели
  • Искренняя заинтересованность заказчика и активное его участие в процессе, при полном доверии к нам
  • Наработанное партнерство с компетентными подрядчиками (дизайнером и верстальщиком)
  • Каждый из членов команды привносил и воплощал на проекте свои собственные идеи
  • Обдумывание многих мелочей и реализация только устраивающего всех варианта
  • Много интересного фото-контента, большая работа с ним со стороны заказчика

Что можно было сделать лучше

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

Как шел процесс

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

На тот момент мы использовали «Basecamp» для учета договоренностей и задач по дизайну и верстке. А все, что связано с программированием, велось в сервисе «Youtrack». Это было не во всем удобно, поэтому про организацию нашей работы в то время нет смысла рассказывать подробно — позже мы полностью перешли на «Trello» и «Google Docs», сохранив те же принципы и даже их улучшив. О том, как именно мы ведем проекты сейчас, мы скоро напишем отдельно.

Технические особенности

Проект написан на Symfony 2.6 и использует ряд популярных бандлов, например:

  • liip/imagine-bundle
  • vich/uploader-bundle
  • knplabs/knp-paginator-bundle
  • knplabs/knp-menu-bundle

Административная часть сделана с помощью sonata-project/admin-bundle, который мы существенно изменили для большего удобства. Например, написали инструмент для управления галереями фотографий.

Команда

Над проектом работали:

Заказчик:

  • Наталья Грушина — директор ООО «Адмирал»

Менеджмент:

  • Неустроев Николай

Программирование (Evercode Lab)

  • Голодяев Михаил
  • Цициновский Михаил

Другие участники (не сотрудники Evercode Lab)

  • Фостер Денис (дизайн)
  • Ожерельева Ирина (верстка)

Заключение

Сайт «Адмирал» оказался приятным проектом, с удобным современным дизайном и интересными задачами по программированию как клиентской, так и серверной части.

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