Задача

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

Исследование

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

Основное назначение главных страниц сайтов - это информирование, а не продажа продукции.
Сайт omk.ru - красивый современный сайт, минимализм, много белого пространства, большой новостной блок. Информационный блок имеет карточную организацию. Минусом является бесконечная подгрузка новых карточек - целесообразнее предложить посетителю выбор - смотреть еще или доскроллить до футера сайта и уйти в другой раздел. На каталог продукции здесь не делают большого упора, просто предлагают скачать pdf.
gusarm.ru - главная лаконична, есть большой фотослайдер и новостной блок с описанием завода, сбоку баннеры со ссылками на внутренние разделы. Также упор на информационную составляющую, не на продуктовую.
варк.рф - основные категории продукции вынесены на главную, все остальное пространство занимает информационный контент, логотипы партнеров и ссылки на внутренние страницы. Минус - верстка в 3 колонки. Всю эту информацию можно разместить в 1 колонку поочередно, что также упростит адаптацию сайта под мобильные устройства. Текст о компании тяжело просканировать - на главной можно не размещать информацию о компании, достаточно небольшого приветственного текста.

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

Что еще можно улучшить?

  • Переверстать текст на главной

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

  • Переделать шапку сайта

    Добавить поиск по каталогу товаров и контактные данные о заводе. Убрать flash анимацию.

  • Переделать внутренние страницы

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

Анализ аудитории

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

Мы выявили основные типы посетителей на сайте:

  1. Проектные организации

  2. Потребители трубопроводной арматуры

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

После отрисовки всех страниц, в офисе клиента мы обсудили еще раз все страницы и внесли необходимые изменения.

Результат

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

Старый дизайн VS Новый дизайн

В подборе цветовой схемы мы опирались на логотип

Мы использовали эффект «плитки» в качестве как стилистического момента, так и функционального - легко можно поменять фото и текст без нарушения верстки страницы. Простота, лаконичность и минимализм. Этим мы хотим показать серьезность компании.

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

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

Страницы каталога

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

Внутренние страницы

Далее, мы перенесли контент со старого сайта и планируем заниматься поисковым продвижением нового сайта.