Кейс по созданию нового, первого многостраничного сайта для компании Sip Prof. Проектирование сайта, веб-дизайн, адаптивная верстка, кросс-браузерность. Разберем основные моменты, поделимся с вами предысторией проекта, поставленными задачами, нашими решениями и результатом. Интересный опыт, приятного чтения!
Заказчик
Компания Sip Prof, реализующая дома из СИП панелей.
Предыстория
Компания обратилась к нам через форму обратной связи в наших контактах (тык) с вопросом, касающимся создания сайта. После нескольких дней общения и обсуждения нашего предложения, было принято решение о сотрудничестве в этом вопросе.
Основные задачи
- Современный дизайн. Сайт должен обладать своей идеей, иметь свою "фишку".
- Проработка интуитивно понятной структуры сайта для быстрой и удобной навигации по нему.
- Удобство в выборе проекта дома, ненавязчивое подталкивание к выполнению целевого действия - отправления заявки.
- Возможность добавления новых проектов в портфолио на сайте.
- Простота в управлении и ведении сайта. Возможность быстро редактировать основную информацию, расширять содержание сайта.
- Стабильность в работе сайта.
- Адаптивность под мобильные устройства, кросс-браузерность под популярные браузеры, включая IE (не будем его обижать).
Реализация. Блочная структура
После анализа сайтов подобной тематики были выделены сильные и слабые решения с позиции структуры построения страниц. На основе полученного анализа и нашего опыта мы выделили следующие общие блоки и элементы страниц.
Шапка сайта уместила в себе основную информацию: логотип и название компании, краткое вступление о её деятельности. Не обделили шапку и такими важными элементами продающего сайта, как телефон и email, разумеется все кликабельно, 2019 год как ни как. Решение по общей ширине сайта было понятным - занимать всю область экрана мы не стали (хотя, обычно стараемся использовать пространство и не мелочимся). Мы посчитали важным сохранить нужную концентрацию информации - сайт должен хорошо восприниматься, всё должно быть перед глазами. Именно по этому, чуть выше шапки разместилась кнопка вызова модального окна с формой обратной связи - возможность отправить заявку в 2 клика. Ниже последовало основное меню с выпадающим списком (в ПК версии).
Блок "Наши работы" мы разместили на каждой странице, он идет после основного контента. В него мы выводим три блока, описывающих определенный объект (рандомно).
Блок "Спецпредложение" пошёл далее, он несет простую, но очень важную задачу - получить заявку от клиента.
Блок "Заказать онлайн" - на него мы возложили задачу обрабатывать клиентов, которые либо не заметили кнопку вызова формы обратной связи, либо оставляют заявку только в явных формах. Рядышком уместились телефон и email компании.
Далее последовала стандартная Яндекс карта и, в завершении, блок с копирайтом компании и нашим автографом.
Теперь поподробнее разберем основные страницы. На главной, сразу под шапкой, следует блок "Наши услуги" - вывод четырех блоков с основными услугами компании. "О технологии СИП" - краткое введение в основную часть продукта компании, то, из чего строят. "Преимущества" - наглядная демонстрация основных плюсов технологии СИП.
Страница каталога - быстрая навигация по категориям предложений компании и вывод конкретных предложений из категории большими и наглядно информирующими блоками. Разумеется, вывод не полный: отображается по пять штук с возможностью ajax подгрузки новых блоков. Меню быстрой навигации сопроводит пользователя по всей странице, не оставив его желанию "посмотреть еще" ни единого шанса. Сразу после последовал блок информационный, предоставляющий возможность сразу ознакомиться с порядком заказа, оплаты и сроками изготовления дома из СИП панелей.
Конечная страница каталога - страница дома, которая уже содержит блок с изображениями, описывающими дом (можно увеличить и посмотреть, полистать), блок с параметрами (имеется возможность заполнения нескольких параметров, имеются обязательные), блок с возможностью быстро оставить заявку (аналогично такому же блоку в конце страницы). Далее следует блок, описывающий варианты "комплектации" дома - выбираешь нужный (со сборкой/под отделку/стандартный) и контент описания меняется, подстать выбранному варианту. Порядок заказа, оплаты и сроки изготовления здесь тоже уместились.
На страницу "Наши работы" мы вывели блоки с построенными домами (ajax, подгружаем по 4 штуки, по кнопке), каждая конечная страница содержит галерею с фотографиями, плюс описание к выполненной работе.
Страница с контактами содержит текст о специальном предложении, сами контактные данные (такие, как: телефоны, Whats'app, email, группу Вконтакте и реквизиты) и форму обратной связи - зашел на страницу "контакты" и сразу заполнил форму (идеальный клиент).
Реализация. Дизайн
Теперь о самом интересном: было принято решение использовать изображения домов из СИП панелей в дизайне всего сайта. Основные блоки и секции получили эти изображения в качестве фона, немного затемненного накладываемым градиентом.
Основные цвета в дизайне сайта:
- #2f3c64
- #eb8650
- #ffffff
- #f5f5f5
Основной эффект наведения на кликабельные элементы - выход блока за границу, всплывание, это придает сайту объемности, кнопки становятся более привлекательными, на них хочется нажать. Поля в формах обратной связи - аналогично, только двигается "тень", выходя за границы блока.
Подобную анимацию с движением в противоположную сторону имеют дополнительные изображения к дому, которые можно увидеть после наведения на интересующий нас дом в общей выдаче. Такой эффект наверняка увеличит кликабельность блока, вызовет интерес, а желание нажать и увеличить изображение приведет посетителя сайта прямо на страницу с домом, повышая вероятность обнаружения нужной, ключевой для совершения покупки информации.
Кнопка "Обратный звонок" в шапке имеет зацикленную анимацию выделения, привлекая внимание пользователя. Не нужно искать как оставить заявку, чтобы тебе перезвонили. Кнопка сама находит бегающий по странице взгляд, заявляя о своем присутствии.
Ненавязчивые вертикальные полосы, тонкие границы в 1px, полупрозрачные цвета, небольшое закругление у блоков (2 px) придают сайту свой шарм. Знаки препинания в конце каждого заголовка моргают с небольшой скоростью, заголовок легче поймать, зацепиться за содержимое блока.
Результат
Время отдохнуть от чтения, насладитесь всей красотой получившегося сайта.
Главная страница.
Страница Дома 100-150м2.
Контакты и страница О технологии СИП.
Итог
В результате у нас получился сайт, полностью передающий красоту нового дома. Интересные решения в дизайне предали сайту черты четкости, плавности. Понятная, четкая структура страниц и сайта в целом - залог удобства при его посещении. Найти нужную информацию проще простого. Возможность оставить заявку, находясь в любой части сайта, не оставит целевому клиенту шанса не поделиться своим телефоном. Интересное цветовое решение создает свою атмосферу, сайт запомнится, а значит запомнится и компания.
Удобная и надежная система управления сайтом позволит сотрудникам компании легко им управлять (если компания захочет делать это своими внутренними силами), обеспечит надежную и стабильную работу сайта.
Нужен качественный и продуманный продукт? Вам понравился результат нашей работы? - Не теряйте времени, обращайтесь к профессионалам. Нам важен только качественный результат. Мы работаем по всей России и готовы сотрудничать с компаниями за рубежом. Контакты нашей web студии.
Источник: веб студия WITECH
