Кейс по созданию многостраничного сайта для транспортной компании GOODWIN. Поделимся своим видением решения некоторых задач, покажем логику построения структуры и дизайна. Приятного чтения!
Заказчик
Транспортная компания ООО «ГУДВИН» - поставка транспортных средства и оборудования для сжиженных углеводородных газов, стационарное емкостное оборудование.
Предыстория
Компания обратилась к нам с вопросом о создании сайта-каталога, после длительных переговоров и обсуждения проекта мы приступили к работе.
Основные задачи
- Современный дизайн, наличие незамысловатой, понятной идеи.
- Структура страниц и сайта в целом должна быть понятна интуитивно и построена логично. Есть мысли раскрыть тему "логичности" построения сайта и отдельных страниц, но это кттс :)
- Возможность быстро оставить заявку - реализовано посредством модальной формы, всплывающей по нажатию на кнопку "Оставить заявку". На сайте вообще много форм обратной связи, это действительно удобно для посетителя.
- Удобство в управлении сайтом и информацией на нем. Мы очень серьезно относимся к тому факту, что наш клиент, как правило, не обладает полным объёмом знаний в области работы с сайтами. Именно поэтому мы используем как стандарт проработку административной панели сайта до уровня интуитивно понятной системы, с которой сможет справиться штатный сотрудник компании без багажа профильных знаний.
- Быстрая скорость загрузки сайта.
- Стабильность в работе сайта.
- Система поиска по сайту.
- Система блога.
- Адаптивность под мобильные устройства, кросс-браузерность под популярные браузеры, включая IE (пишите свое мнение о IE в комментарии!).
Реализация. Блочная структура
В процессе проработки структуры будущего сайта мы обратились к своему опыту и работам других специалистов, разумеется, приняв к сведению пожелания нашего клиента. Так же, мы определили для себя некоторые элементы сайта, которые в том или ином виде, но все таки должны присутствовать на сайте.
Общие элементы
Header сайта уместил в себя уже привычный для нас перечень основных элементов навигации и функционала: логотип, email и телефон компании, WhatsApp Business, поиск по сайту, меню и кнопку обратной связи "Оставить заявку".
Footer же обошелся только самым главным: логотип, копирайт, email и телефон компании, поиск. И, разумеется, наш автограф.
Главная страница
Первичный блок включает в себя слайдер с предложением компании по автоцистернам. Далее следует блок "Продукция компании".
После идут блоки с кратким описанием деятельности компании и её истории, следом идёт блок "Получить бесплатную консультацию", предназначенный для обработки посетителей, поинтересовавшихся компанией, но не заметивших кнопку "Оставить заявку" в шапке сайта.
Следом последовал блок "Преимущества", отвечающий на вопрос "Почему именно «ЗЕЛЕНЫЙ ГУДВИН»?", завершает эту композицию блок "Наши партнеры".
Страница продукции
На страницах продукции, как и на других страницах, сверху мы расположили цепочку меню. Пользователь сможет быстро сориентироваться, где он находиться - не составит труда понять, как перейти на нужную страницу.
Мы разделили основной контент страниц продукции на две части. Левая часть включила в себя навигацию по разделам продукции и форму обратной связи, что очень удобно для посетителя сайта - можно отправить заявку сразу на странице с описанием продукции.
Правая же часть вмещает в себя основной контент: либо блоки категорий и подкатегорий продукции, либо описание конкретного предложения.
Реализация. Дизайн
В работе над дизайном было принято решение использовать ненавязчивые тонкие линии и много тематического цвета. Получился настоящий изумруд.
Основные цвета в дизайне сайта:
- #01502c
- #09bf6b
- #ffffff
Эффекты наведения на ссылки (кнопки) - плавное изменение цвета шрифта, заливки, границ.
Эффект наведения на блоки: (см. оригинал)
Эффект активности полей форм: (см. оригинал)
Результат
Изумрудно-зеленый Гудвин, насладимся же результатом.
Главная страница
Поставка транспортных средств (продукция)
Новость
Контакты
Итог
В результате мы получили яркий сайт с удобной системой навигации по страницам с продукцией компании. С наличием форм обратной связи и кнопкой вызова формы в модальном окне у посетителя не возникнет затруднений с отправкой своих контактных данных для обратного звонка. Реализованная система блога позволит держать свою аудиторию в курсе событий и продвигать сайт в поисковой выдаче.
Удобная и интуитивно понятная административная панель сайта сэкономит рабочие ресурсы компании - работа с сайтом не требует специальных знаний, с ней сможет справиться рядовой сотрудник.
Отзыв: "Компания «Гудвин» в лице Генерального директора Кетова Мурата Юрьевича выражает благодарность команде WITECH за разработку веб-сайта и за оригинальность и творческий подход".
Мы открыты для новых и интересных проектов. Вам нужно развитие бизнеса в сети? - Не теряйте времени, обращайтесь к профессионалам. Отлаженная система взаимодействия с заказчиком. Мы работаем по всей России и готовы сотрудничать с компаниями за рубежом. Контакты нашей web студии.
Источник: веб студия WITECH
