https://evkarn.ru
Сайт-визитка под ключ

Сайт-визитка для ООО «Герон»

Посмотреть сайт
На изображении стол приборы и инструменты для инженерных изысканий, часы, линейка.

Заснята отработка всех элементов сайта-визитки для ООО «Герон».

Дата загрузки: 2021-03-23 00:00:00 +0500

Постер для видео - изображены стол приборы и инструменты для инженерных изысканий, часы, линейка.

О клиенте:

Семён Кощеев — владелец ООО «Герон».

Задача:

Сделать продающий сайт-визитку для представления услуг компании.

Было оплачено и разработано 3 основных страницы для тестирования проекта с последующей доработкой всех структурных страниц сайта по семантическому ядру в данных сферах.

Что сделано:

Разработка прототипа (структуры страницы): расположение элементов, тексты.

Разработка дизайна страниц.

Вёрстка сайта-визитки.

интеграция в CMS «MODX».

Примечание:

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

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

Компанией были предоставлены наработки дизайна — концепция в которой нужно было реализовать сайт. Дизайн разрабатывался опираясь на эту концепцию.

Инструменты:

  • Адобэ Иксди
  • Редактор Крита
  • Редактор Инкскейп
  • ХТМЛ
  • ЦСС
  • Бутстрап
  • Джейкуери
  • Гулп
  • Сасс
  • Модэкс

Процесс

Прототип сайта-визитки — создание структуры сайта (расположение блоков, элементов, текстов).

Прототипирование

Разработал прототип страниц сайта-визитки. Показал расположение всех элементов: тексты; изображения и т.д.

Пояснил какие будут анимации на страницах.

Согласовал с заказчиком.

Первая секция главной страницы сайта-визитки - инженерные изыскания и проектирование

Дизайн главной страницы

Дизайна наследован со старой версии сайта: цветовые оттенки; общий стиль; оформление и т.д.

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

Сразу во второй секции идёт сегментация клиентов по видам оказываемых услуг, чтобы человек не терялся в поисках чего-то конкретного, а сразу нашёл именно то, что нужно ему.

В следующих секциях описываются преимущества компании, важные для целевой аудитории.

Для потенциальных клиентов важно, что не будет необходимости разбираться в технических нюансах и лично ездить по инстанциям для оформления документов, именно это показано в секции «Услуги под ключ».

Для посетителя важно, что за услуги с него возьмут приемлемые деньги, именно об этом рассказано в секции — «Лояльная ценовая политика».

Для целевой аудитории важно, что над их проектом будут работать профессионалы своего дела, об это рассказывается в секции — «Опыт и профессионализм». Слова можно написать какие угодно и просто словам на данный момент уже никто не верит, поэтому для усиления слов и в качестве подтверждения профессионализма работников используются два триггера — человек может посмотреть аттестат или диплом специалиста, а также проверить его карточку в Росреестре. Также немаловажным элементом является фотография специалиста.

Секция «Профессиональное оборудование» показывает, что в работе используется современное оборудование последних моделей, что несомненно влияет на качество и скорость выполняемых работ.

Далее в секции «Гарантии и страхование услуг» рассказывается об гарантиях на все работы, что также важно для целевой аудитории компании.

Следующая секция — «Более 1000 выполненных проектов» служит доказательством богатого опыта компании, тут же можно посмотреть отзывы по выполненным проектам, что усиливает влияние блока с кейсами, так как подтверждает его подлинность.

На следующей секции идёт призыв к отправлению заявки и ответы на частые вопросы от клиентов компании, закрывающие некоторые из их возражений и сомнений.

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

Секция — «Обычная схема работы», снова подкрепляет убеждение в том, что клиенту практически ничего не нужно будет делать самостоятельно, все работы выполнят сотрудники компании, а клиент просто получить результат на руки в удобном для него месте.

На секции «Ждём вас в наших офисах» представлены живые фотографии офисов компании, доказывающие, что компания, работающая с коллективом сотрудников.

Далее идёт карта, с адресами офисов и контактами, всплывающими по нажатию на соответствующую иконку.

В футере также находятся несколько элементов, помогающих усилить доверие к компании. Указаны ОГРН и ИНН компании, но при этом есть ссылки на сайт налоговой и на сайт СРО, в которой состоит компания ООО «Герон». Посетитель может перейти по ссылкам, вбить номера ОГРН или ИНН и проверить, что компания действительна и оформлена в соответствии с законодательством.

Первая секция страницы кадастровые работы

Дизайн страницы «Кадастровые работы»

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

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

Чуть ниже указаны четыре вида основных работ в этом виде услуг. Каждый блок с иконкой кликабельные и при клике ведут на отдельную страницу конкретного вида работ.

Сразу во второй секции идёт сегментация клиентов по видам оказываемых услуг, чтобы человек не терялся в поисках чего-то конкретного, а сразу нашёл именно то, что нужно ему. Каждый блок также является кликабельным и при клике открывается страница конкретного вида работ.

Чуть ниже в аккордеоне кадастровые работы описываются более развёрнуто — этот блок в основном сделан для СЕО-оптимизации, но так же и для тех посетителей, кто попал на страницу случайно и не уверен в том, что эти услуги ему подойдут.

Секция «Обычная схема работ» адаптирована под конкретный вид работ, описываемый на странице.

Первая секция страницы Аэросъёмка

Дизайн страницы «Аэросъёмка»

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

Чуть ниже указаны четыре вида основных работ в этом виде услуг. Каждый блок с иконкой кликабельные и при клике ведут на отдельную страницу конкретного вида работ.

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

Сразу во второй секции идёт сегментация клиентов по видам оказываемых услуг, чтобы человек не терялся в поисках чего-то конкретного, а сразу нашёл именно то, что нужно ему. Каждый блок также является кликабельным и при клике открывается страница конкретного вида работ.

Секция «Какое оборудование мы используем» показывает потенциальному клиенту, что в работе используются профессиональные техника и программное обеспечение, что гарантирует качество выполняемых работ.

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

Каждый блок кликабелен и при клике открывает страницу конкретного вида работ со своей спецификой и проработкой целевой аудитории.

Секция «Обычная схема работ» адаптирована под конкретный вид работ, описываемый на странице.

Мониторы на столе с кодом программы, символ программного кода, таблички с надписями хтмл и цсс, сидит верстальщик и верстает сайт.

Вёрстка сайта-визитки

Сайт верстался с применением сетки bootstrap. Из фреймворка подключалась только сетка, чтобы избежать избыточности кода.

Вёрстка адекватно работает во всех браузерах, полностью адаптивная и валидная, с применением семантических тегов.

Внедрена разметка Open Graph и частично Schema.org

Секция с галереей изображений.

Интерактив

На сайте множество интерактивных элементов: формы заказа; постраничная навигация; кнопка возврата к верху страницы; ссылки и кнопки; иконки социальных сетей; галереи; карты; спойлеры (аккордеоны) и др.

Секция с галереей изображений

Анимация

На сайте применены мягкие, приятные для глаз анимации — в основном срабатывающие по наведению на элементы.

Изображения логотипа MODX и текст, описывающий его

Интеграция в CMS MODX

Для интеграции использовалась система управления сайтом MODX, так как сайт уже работал на этой CMS.

Хорошая, удобная система управления, не слишком требовательная к хостингу и надёжная.

Изображения дата-центра - много серверов

Выгрузка на хостинг

После того как всё было настроено и протестировано на локальном сервере — произвёл выгрузку проекта на хостинг клиента.

Результат

Затрачено времени:

25 дней

Бюджет проекта:

Конфиденциально