Сайт строительной корпорации «Альтстрой»

Задача: Cделать красивый и лаконичный имиджевый сайт строительной корпорации

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

 
Схема 1. Принцип покадрового расположеня контента

Мы принимаем решение разместить в качестве таких элементов вертикальное меню и логотип компании.

Первый вариант. Дизайнер еще не до конца проникся идеей нашей необычной компоновки и по инерции рисует шапку, как на обычном сайте, а в ней — меню. Напоминаем, что при начале прокрутки шапка уедет вверх, и толку от нее не будет. А вот вертикальное меню справа — верный ход. Балуны с названиями «страниц» (а по сути — кадров) мы сделаем всплывающими при наведении курсора, чтобы сэкономить место для контента.

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

Второй вариант. Меню — хорошо. Слоганы — неплохо. Но вот шапка и футер снова чужие на этом празднике жизни.

 

Исправленный вариант. 

Уже совсем хорошо, вот только один вопрос не дает покоя — логотип с названием компании в левом углу съедают слишком много места, ведь контент не может наезжать на них при прокрутке. А в данном макете именно так и произойдет, как только содержимое первого кадра поедет вверх. Поэтому принимаем решение — название компании разместить под логотипом, а зону контента сместить вправо. В принципе, мы пришли к схеме, предложенной на «Схеме 1». 

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

Предложение по кадру с информацией об объектах. 

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

Более удачное решение.

Готовим недостающие фоновые кадры.

 

Готовим фотографии процесса строительства для фотогалереи в разделе «услуги»...

...и фотографии для раздела «объекты».

Собираем, компануем систему управления, тестируем, публикуем. 

×

Вы используете устаревший браузер Internet Explorer

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