Ещё проект
Заснята отработка всех элементов сайта - лендинга по изготовление электронных подписей в Санкт-Петербурге.
Дата загрузки: 2020-08-06 00:00:00 +0500
О клиенте:
Компания ООО «Герон» — занимается разными бизнес-направлениями, в том числе изготовлением и продажей электронно-цифровых подписей.
Задача:
Сделать лендинг под ключ — отрисовать дизайн и сверстать сайт по изготовлению и доставке электронно-цифровых подписей.
В последующем планировалась интеграция в CMS MODX.
Что сделано:
Прототипирование: структура и расположение элементов, текст.
Дизайн.
Вёрстка.
Примечание:
Клиент предупреждён о том, что для данной тематики больше подходит многостраничный сайт-визитка, с отдельными страницами, описывающими каждый вид ЭЦП.
Так как, если всю эту тематику поместить на одной странице, контент сайта будет плохо сео-оптимизирован и трафик станет реально получать только с прямой рекламы.
Инструменты:
- ХТМЛ
- ЦСС
- Бутстрап
- Джаваскрипт
- Джейкуери
- Гулп
- Сасс
Процесс
Прототип сайта
Проведён анализ топа конкурентов этой тематики.
Прорисована структура будущего сайта (расположение всех элементов). Написаны и расположены тексты. Дано пояснение по будущим анимациям.
Все важные и необходимые для целевой аудитории элементы (физ. лица и юр. лица с нуждой в эцп) грамотно структурированы и расположены поэтапно.
В хедере главный оффер и основные преимущества плюс тематическая картинка.
Далее начальная сегментация по группам клиентов — физические лица, ИП и юр. лица.
В следующем блоке продолжаем сегментировать указываю все доступные виды ЭЦП.
В следующем блоке подробнее про преимущества покупки у компании. Затем продолжаем и показываем надёжность изготовленных ЭЦП с галереей подтверждающих сертификатов.
Далее каталог с ценами.
Затем рассказываем как заказать ЭЦП и используем ещё одну возможность захвата данных возможного клиента — показываем блок с формой для отправки вопросов.
Внизу страницы показываем офис с фотографией директора для повышения доверия. Далее показываем карту и футер с основными данными о компании.
Дизайн
Для дизайна использован единый фон с выделением главных блоков сплошной заливкой.
В качестве акцентного цвета выбран оранжевый с уходом в тёмно-оранжевый.
Вёрстка лендинга
Верстал лендинг с применением сетки bootstrap, из фреймворка подключалась только сетка, чтобы избежать избыточности кода.
Вёрстка кросс-браузерная - правильно работает во всех браузерах. Полностью адаптивная и валидная, с применением семантических тегов.
Интерактив
В процессе работы реализованы простые интерактивные элементы: формы заказа; постраничная навигация; кнопка возврата к верху страницы; кнопки; табы (вкладки) с информацией.
Также реализована небольшая галерея изображений и Яндекс.Карта.
Анимация
На сайте сделаны лёгкие, простые анимации — в основном срабатывающие по наведению на элементы — ссылки и кнопки.
Также присутствует fade-анимация в табах и анимация переключений в галерее.
Результат
- Посмотреть работу сайта: перейти
Затрачено времени:
10 дней
Бюджет проекта:
Конфиденциально
