Разработка каталога туристического агентства
В эпоху глобализации слова известного американского предпринимателя Билла Гейтса о том, что в скором времени останутся лишь 2 вида компаний: те, которые в Интернете, и те, которые закрываются, становятся все более актуальными. Туризм – одно из самых популярных направлений в бизнесе, ведь отдыхать люди любят всегда, независимо от финансово-экономического состояния ячейки общества и страны в целом. Наши нынешние клиенты тоже пришли к выводу, что между попой и диваном доллар не пролетит, и в поиске новых каналов продвижения пришли к выводу, что им нужен собственный веб-ресурс.
Первоочередная задача, которая была поставлена руководителем веб-студии – сделать оригинальный удобный продукт в кратчайшие сроки. Среди основных задач также имели место:
- Креативная главная страница с дизайном по принципу лендинга.
- Предоставление клиенту возможности общения с менеджером посредством электронной почты, максимальный отклик через формы обратной связи.
- Добавление модулей витрины и поиска туров по индивидуальным критериям.
- Акцентирование внимания пользователя на акциях и горящих турах.
Бюджет сайта помещался в стандартные рамки для разработки корпоративного каталога с простым пользовательским интерфейсом. Но коллектив веб-студии не ищет легких путей. Туристический сайт относится к ряду развлекательных, а потому было принято решение создать то, что на постсоветском пространстве редко встречается – интерактивная карта. В целом сайт состоит из 8 разделов, каждый из которых динамичен, имеет свои изюминки.
Увидев перед собой лишь визитку старого образца и заполненный заказчиком бриф, команда приступила к проектированию и созданию технического задания.
Для прототипирования было использовано простое программное обеспечение Pencil (рисунок 1).
Рис.1
Несмотря на сложность концепции, дизайнеру удалось передать основную задумку проект-менеджера, и макет главной страницы с первого раза был утвержден руководителем и заказчиком (рисунок 2). Элементы сбалансированы и доступны для восприятия.
Рис. 2 – Главная страница
Весь макет получился слишком длинным по причине того, что большую часть элементов верстальщик анимировал и на деле они работают на одном экране.
В брифе заказчик указал, что предпочитает строгие геометрические формы. На этой основе дизайнер разрабатывал логотип, навигационные и графические элементы. Созданию динамичного современного эффекта способствует применение визуального приема разницы форм. Прямоугольники отличаются по высоте, ширине и расположению, но соединены единой цветовой гаммой. Палитру цветов выбирали, отталкиваясь от ассоциаций, возникающих с отдыхом: море, пляж. Поэтому основными оттенками стали морская волна и галька. На этапе разработки дизайна команда утроила брейншторм, чтобы выявить возможные трудности и в дальнейшем не задерживаться на поиске решений. Так, удалось избавиться от вопросов касательно верстки и адаптивности, ведь геометрические формы легко складываются на мобильных устройствах.
Потенциальные клиенты агентства – бизнесмены, предприниматели, работающие люди, современная молодежь, у которых, как правило, не хватает времени на сидение за компьютером. Большую часть времени они посещают Интернет через телефоны и планшеты. Мобильная версия сайта получилась в итоге похожей на приложение. Для ускорения работы было принято решение сжать некоторые графические файлы так, как одним из критериев ранжирования сайтов поисковыми системами, в частности Google (именно она интересует нас больше из-за всем известной ситуации), является именно скорость загрузки мобильной версии.
Первоначально были разработаны основные страницы: Главная, Контакты, Поиск тура.
Остальные страницы разрабатывались на протяжении 2 недель, поэтапно отдавались на верстку и интеграцию, затем – заполнение.
Для реализации проекта единогласно была выбрана система управления MODX. Это одна из самых быстрых и удобных CMS с элементами framework. Кроме того MODX удобна как для разработчиков, так и для клиентов, которые не разбираются (да и не должны) в системах управления. Программистом был настроен поиск по словам на сайте, регистрация и авторизация пользователей, модули заказа туров, предоставленные партнером «IТ-tour».
На втором брейншторме команду посетило вдохновение, родилась идея создания интерактивной карты страны. Идея заключалась в том. Чтобы провести посетителя по интересным уголкам стран, показать достопримечательности, донести основную информацию, правила поведения. На основании полученного опыта турист сможет сделать правильный выбор о том, подходит ли ему тур, к примеру, в Таиланд.
Интерактивная карта страны состоит из пяти остановок. Одной из главных трудностей, с которыми столкнулась команда в процесс разработки стал динамический скролл эффект на фиксированном блоке. При прокручивании мышки черно-белое фоновое изображение приобретало цвет в центральной части, при этом появлялись краткие карточки отелей, находящихся в данной стране. Каким бы современным не было цифровое пространство, верстальщик справился с задачей посредством листа бумаги и простого карандаша. Эта задача была скорее на логику, чем на инновации. Вывод: не обязательно использовать космические технологии, чтобы достичь превосходного результата. Ловкость рук и разума, немножко JS, JQuery и все готово (рисунок 3).
Рис.3 – Макет интерактивной карты страны
Команда не остановилась на этом. Третий брейншторм принес идею анимированной карты преимуществ агентства прикрепленной к странице «О нас». На этой странице, как правило, содержится краткая информация о компании, направлениях деятельности, а также форма обратной связи. Дабы не делать посредственные скучные вещи, было принято решение отобразить преимущества отметками на объемной мировой карте, при нажатии на которые самолет перелетает от страны к стране, принося с собой всплывающее окно с текстом и иконкой. Благодаря вовлеченности всех сотрудников веб-студии в работу, самолет не просто полетел так, как нужно, но и сделал мертвую петлю между Бразилией и США (рисунок 4).
Рис. 4 – Страница «О нас»
В результате у нас получился отличный продукт, который способен составить конкуренцию зарубежным разработкам. В сети мало представителей веб-ресурсов с подобным дизайном и идеей. И веб-студия стремится к тому, чтобы приучить пользователя к приятному времяпровождению в сети.