Здравствуйте, меня зовут Андрей, и ранее я уже писал кейс на сайт CMS Magazine про настройку контекстной рекламы. Теперь пришло время написать про то, как наша компания разработала промо-сайт для салона интерьерных решений “Квартира”.

Спецификация:

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

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

Этапы разработки:

1. Построение структуры сайта. В первую очередь нужно проработать структуру сайта. Для этого мы использовали ручку и листик. Никаких “скретчей” и прочего.

2. Дизайн Сайта. После того, как придумали структуру сайта, начали рисовать элементы в редакторе изображений Adobe Photoshop. Изначально планировали разбить сайт по экранам, как видно на скриншоте. На одной странице у нас бы разместились такие блоки: Баннер, о компании, выполненные проекты, новости, партнеры и контакты Нарисовали макеты под каждую страницу и принялись за верстку сайта. Вот, кстати, первый вариант:

    

   

    

    

3. Верстка сайта по макетам. Так как дизайн был нестандартным и не имел никакой сетки, мы его делали на обычном html + css (без использования бутстрапа). Сайт также адаптивен под мобильные телефоны(запросы media).

4. Установка сайта на CMS Wordpress.

5. Анимирование объектов. На анимацию ушло около 2х недель, так как каждая страница сайта имела большое количество параллаксов и плавающих элементов. Как я писал ранее, наша компания использовала библиотеку GreenSock.

6. Настройка сайта перед сдачей. Логотип, Favicon, Title и Description на всех страницах.

Меню. Ведущий дизайнер, работающий с этим проектом, предложил использовать полноэкранное меню, срабатывающее при нажатии на кнопку “гамбургера”. Скриншот вы можете видеть на экране:

Для развития сайта наша компания предусмотрела раздел новостей и блог. Заказчик остался довольным. В дальнейшем сотрудничестве мы от него получили еще несколько сайтов. Кейсы на каждый мы напишем со временем.

Кейс был написан для сайта http://cmsmagazine.ru/. На сайте нашей компании Leets (Одесса) можете посмотреть больше фотографий с проектом “Квартира”. Спасибо.

Перейти на сайт