{"id":13595,"url":"\/distributions\/13595\/click?bit=1&hash=0578f662a4e99e0a477083ff538dcc87ef422d22dc979e88ddacc35e13f6995c","title":"\u041b\u044e\u0431\u0438\u0442\u0435 \u0441\u0430\u043b\u0430\u0442\u0438\u043a? \u0415\u0433\u043e \u0434\u043b\u044f \u0432\u0430\u0441 \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u043e\u0442 \u044d\u0442\u043e\u0442 \u043c\u0438\u043b\u044b\u0439 \u0440\u043e\u0431\u043e\u0442","buttonText":"\u041f\u043e\u043a\u0430\u0436\u0438\u0442\u0435","imageUuid":"f0cac355-ac0f-5d0f-a8ce-eb75ae2b39ea","isPaidAndBannersEnabled":false}
Дизайн
SAGIROV.com

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

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

Задача

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

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

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

Какие сложности?

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

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

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

Исследуем

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

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

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

Проектируем

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

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

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

базовая структура сайта

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

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

Мы считаем, что делать кликабельны прототип нужно всегда. Это упростит работу над UI частью и ускорит приемку макета.

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

Прототип для сайта Globe IT

Подбираем референсы

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

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

Пример схемы для шкафа управления из поиска Google

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

мудбор проекта

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

Дизайн

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

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

освежили логотип

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

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

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

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

Линии, линии, линии.

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

Главная страница

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

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

Анимация главной страницы Globe-IT

Страница продукта

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

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

Анимация в карточке каталога оборудования

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

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

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

Дизайн таблиц в статике
Анимация таблицы

404

Сборка насосной станции на странице 404

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

Заключение

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

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

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

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

0
5 комментариев
Сергей Кошелев

Работа огромная, но сайт получился, имхо, только фестивальным. (Желаю себе ошибиться и вам конверсий.)
Преимущества электроники только в виде Гарантии и Безопасности - это мягко говоря "не очень". (если что - мой опыт работы в АСУТП 15+ лет)

Ответить
Развернуть ветку
SAGIROV.com
Автор

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

Ответить
Развернуть ветку
Себастиан Перейра

Не открывается

Ответить
Развернуть ветку
SAGIROV.com
Автор

Только что проверили, попробуйте пожалуйста еще раз. Ссылка корректная https://globus-it.ru

Ответить
Развернуть ветку
Евгений

Шрифт мелковат. Если уж это лендинг, то нужно отталкиваться минимум от 20 px. А тут дай бог 16, плюс много где слабый контраст и серый фон. В общем, больновато глазам воспринимать инфу. Может на большом мониторе ок, но у меня например ноутбук 13 дюймов - и это не круто для юзабилити. А если основная задача сайта - проинформировать, то это вообще мимо кассы решение.

Ответить
Развернуть ветку
Читать все 5 комментариев
null