Насосные станции на AWWWARDS

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

Клиент: У меня есть компания, которая производит насосные станции, шкафы управления и электронику к ним. Хочу сайт-визитку, чтобы выглядеть представительно.

Мы: Хотим сделать сайт для awwwards, чтобы и вы выглядели представительно, и мы получили награду.

Клиент: По рукам

1. Специфическая тема. Насосы, шкафы управления, промышленность, aesthetic – найди лишнее слово.
2. Отсутствие контента. Как правило у таких промышленных компаний очень мало контента, только фото с айфона. Об эстетике конечно же никто не думает (и это нормально), главное сфотографировать изделие, написать характеристики и отправить следующему заказчику.
   
3. Сайт должен быть супер понятным, так как слишком разная аудитория – от продвинутых топ-менеджеров компаний, до владельцев небольшого предприятия, которые не особо заходят в интернет.
   
4. Анимация. Анимация! АНИМАЦИЯ!! ну, вы поняли, сайт должен был быть динамичным. Но не перегруженным эффектами, так как см. п.3 – сайт должен быть понятным.
   

Окей, со сложностями разобрались, что дальше?

Дальше пытаемся придерживаться обычного плана.

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

Здесь нас ждало фиаско, потому что среднестатистический сайт в этой тематике выглядел так:

Иногда попадались сайты сделанные все-таки лет на 5 попозже, особенно зарубежные, но в целом все выглядело одинаково плохо. Особенная боль этих сайтов даже не то, как они выглядят, а навигация, точнее ее отсутствие или плохая работа и обилие seo-текстов (как будто их кто-то читает кроме роботов 😄).

Отложив визуальные исследования до момента, пока восстановится вдохновение после просмотра конкурентов, мы начали проектирование.

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

Начали с базовой структуры сайта из ТЗ

Затем уточнили и расширили ее, кое-какие моменты поменялись в ходе работы после общения с заказчиком

Закончив структуру мы приступили к разработке кликабельного прототипа

Прототип был не особенно сложный, заказчику понравилось, утвердили с первого раза.

Перед тем как подбирать референсы мы подумали, в какой стилистике должен быть сайт. Ведь он должен быть не только эстетичным, но и выглядеть профессионально.

Нам понравились всякие технические схемы – в них есть какая-то эстетика и выглядят они серьезно.

Что ж, начали искать в этом направлении.

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

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

Мы его упростили, повернули анфас и придали чуть более современный вид, сохранив смысл и форму

Нащупали брутальную стилистику

Подобрали плотный шрифт Interstate.

И 2 шрифта – моноширинный Anonymous Pro для управляющих элементов и мелких подписей, и Montserrat для основного набора.

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

... и добавили щепотку мелочей, напоминающих контроллеры.

Страница главная, а рассказать про нее забыли 🤯.

Первый экран демонстрирует все 4 основные направления компании: насосные установки, насосные станции, шкафы управления, блок контейнеры. Каждое из направлений имеет свой цвет для идентификации на сайте. При скролле сайта, пользователь знакомиться со всеми сферами деятельности компании. Ну а далее экраны, "наши объекты", "отзывы", "фото работ" и footer.

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

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

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

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

Ну и конечно добавили анимации)))

Мы утверждаем, что 404 страница - самая творческая страница на всех сайтах во всем вебе. Клиентам всегда важна главная страница, а о 404 странице мало кто задумывается. Но мы ее любим и всегда делам из нее что нибудь особенное.

История закончилась хорошо: мы получили Honorable mention и mobile excellence на AWWWARDS, Special kudos на CSSDesignAwards и несколько наград на конкурсах помельче.

Клиент остался доволен сайтом и порадовался тому, что у него одно из лучших решений на рынке.

С сайтом вы можете ознакомиться по ссылке: https://globus-it.ru

Полный кейс на Behance: