Обновленный дизайн сайта и его верстка для "Мегаплан"

Главное о кейсе

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

Бизнес-задача и ее решение

Мегаплан – комплексное решение для автоматизации бизнеса, включающий в себя множество инструментов: CRM-систему, управление проектами, интеграцию с почтой и телефонией и многое другое.
Идея создания Мегаплана возникла в 2006 году. А в 2007 году была запущена его первая версия. И с тех пор продукт постоянно обновляется: учитываются пожелания клиентов, улучшаются существующие возможности и добавляются новые.
Перед руководителем и идейным основателем данного продукта Михаилом Уколовым стояла задача в дальнейшем продвижении и продаже продукта.
Для этого необходимо было сделать сайт компании современным, быстрым и продающим. За этим собственно Михаил и обратился в Центр разработки «Создаватель».
Уникальной особенностью данного проекта было то, что работы велись без Технического Задания: были лишь заданы общие ориентиры и даны рекомендации. Поэтому схема взаимодействия была следующей: дизайнер разрабатывал макеты, руководитель проекта их утверждал и отправлял верстальщикам и разработчикам.
После чего сверстанные макеты утверждались у заказчика, при необходимости отправлялись на доработку.

Прочая информация о кейсе

Вначале были отрисованы и предложены несколько вариантов макетов для главной страницы. Они были не приняты: не понравилось расположение миниатюр иконок, сами миниатюры, где-то не понравились заголовки. Но в целом концепция привлекала. Необходимо было лишь сделать более гармоничное сочетание элементов.
Немного поработав над главной страницей получился привлекательный вариант: заказчику понравился и слоган, и расположение меню вверху страницы, и краткое описание внизу слева.
После утверждения идейной концепции работы шли достаточно быстро. Сразу было создано и утверждено еще несколько макетов: страница для клиентов, контактов, партнеров, безопасности и пр.
Были отрисованы логотипы компаний, использующие CRM-систему Мегаплан. В рабочий дизайн были приняты лишь самые известные.
Поработали над страницей выбора хранения информации: в облаке или на сервере.
Далее шла работа над страницей, рассказывающей о надежности и защищенности информации, хранящейся в CRM-системе. Изображение в целом устраивало, но на его фоне не удавалось добиться хорошей читаемости ключевых смыслов. А вводить дополнительный цвет в шрифты уже не было возможности, так как уже были утверждены основные шрифты и их цвета.
Тогда было принято решение сменить картинку на данной странице и вынести ключевые смыслы ниже. А на фотографии «безопасности» – разместить заголовок и оставить CTA-кнопку.
Итоговый вариант получился более стильным, чего и хотел заказчик.
Изначально заказчик предоставил разработчикам плохо обработанные фотографии, которые были использованы на сайте.Требовалось вытравить остатки белого фона. Для этого фотографии отправляли дизайнеру.
Доработали главное меню и при помощи java-script сделали его выдвигающимся при нажатии на значок меню в левом верхнем углу. Точно таким же образом оно и закрывается при нажатии на крестик все в том же углу.
Также были предложены 9 вариантов CTA-кнопок.
После всех выполненных работ, приступили к верстке адаптивного дизайна для мобильных устройств.

Текущая доступность работы

Верстка обновленного дизайна в процессе

Скриншоты