Задача

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

Итак, у нас есть пожелание: нужно сделать в меру консервативно и, вместе с тем, сайт должен стать средством дифференциации от конкурентов.

Решение

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

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

Загружаем готовый макет главной в наш спецсервис для демонстрации, показываем все состояния менюшек и ссылок. Одобрено!

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

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

Екатерина руководитель проекта

Мы использовали нестандартный подход к размещению контента как на главной странице, так и на внутренних. Каждая страница каталога представлена в виде плитки в стиле Windows 8: информация о бренде, сертификаты, ссылки на скачивание прайс-листов — то есть, самих цен и конкретных предложений на сайте нет. Это обусловлено слишком большим количеством данных — размещать их все было бы нецелесообразно.

Любовь Разработчик

Мы буквально по кирпичику выстроили все страницы проекта. Интересно было оживлять не только главную, но и внутренние страницы: там есть свои анимационные фишки. Например, на каждый блок с анонсом добавлено анимированное появление ссылки на страницу целиком.

Интересный факт: компания «С.Т. Технолоджи» занимается общественной деятельностью, спонсирует спортивные мероприятия. Этому посвящен отдельный раздел на сайте:

Особенности проекта

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

Результат

Мы выполнили пожелание заказчика получить традиционный, но яркий сайт. Каталоги продукции, которые было решено делать скачиваемыми PDF-файлами, выводятся по брендам и направлениям — что удобно целевому посетителю.