Процесс создания сайта оздоровительного спа-комплекса «Белогорье»

Начинаем с того, что ищем идею, концепцию.
Сначала набрасываем то, как сайт не будет выглядеть:

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

Отрисовали первые наброски, точно убедились, что это не то, что нам нужно, но зато извлекли некоторые идеи, которые реализовались позже.

Решили,что на главной странице можно изобразить комплекс во всей его красе, для чего cначала начинаем набрасывать его в 3д:

Идея нравится, добавляем текстур, объектов, дорисовываем поверхность:

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

Продолжаем работу в этом же направлении, дорисовываем различные мелочи и смотрим что получается:

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

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

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

Для этого выдвигаемся на объект и проводим фотосессию всех возможных видов и ракурсов, которые понадобятся для построения 3д модели и последующей обработки дизайнером:

Закрываем старые макеты под замок, забываем их и с учётом реальной картины рисуем новый макет главной страницы:

Теперь всё стало на свои места: до комплекса можно доехать по дороге, все три парковки обозначены точь-в-точь как они есть в жизни, каждая деталь самого комплекса отрисована в точности с натуры, а ещё появилась вода, которая просто обязана быть :)

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

Макет нравиться всем, проходит утверждение, но теперь появляются новые задачи и их решения: всё изображение никак не вместить на стандартное минимальное разрешение 1024 на 768 пикселей.

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

Одна из основных задач - чтобы не было флеша, всё делаем, используя html+css+javaScript и другие радости. Задача не простая, но наши программисты с ней справляются.

Размещаем навигационные элементы, а так же решаем вопрос с меню, подписывая основные элементы ссылками и три информационные ссылки выносим в плашку наверху:

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

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

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

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

Обращаемся к нашему волшебнику-иллюстратору за очередными иконками и получаем прелоадер, указывающий, что пользователь попал на сайт гостиничного комплекса Белогорье, даём ему возможность перейти на интересующий раздел, нажав на прекрасную иконку или надпись под ней:

Попутно нам требуются ещё иконки для сайта:

Так, главную страницу отрисовали, заверстали, запрограммировали, всё просто летает.

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

Например фотографии спа, которые использовались для отрисовки макета:

Используя эти фотографии, дизайнер получает такой фон для раздела Спа:

Отрисовывает для раздела гостиница:

Второй дизайнер паралельно занимается отрисовкой ресторана, с ним получилось интересно, сначала полностью отрисовали и довели до блеска такой вариант:

А затем, в процессе, с нуля отрисовали новый вариант, который в последствии и был принят на сайт:

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

Один из вариантов для гостиницы:

В итоге утверждённый вариант расположения меню в гостинице:

Спа тоже не осталось без изменений:

Далее отрисовываем все возможные макеты внутренних страниц.

Для примера, гостиница:

Спа:

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

На последок поступает карта проезда.

Большая:

И превью:

Из которых мы делаем такие две конфетки.

Большая:

и превью:

Вот и сайт готов: всем спасибо :)