Проекты студии 77

Сайт «Запорожского завода цветных металлов»

Запуск проекта: январь 2015

zzcm.com.ua

Сайт «Запорожского завода цветных металлов» favicon

ООО «Запорожский завод цветных металлов» – это современный холдинг, который состоит из группы компаний включающий в себя производственные процессы по изготовлению медных катодов и катанки, жилы, проволоки, медного и алюминиевого кабеля и этикеточной продукции. Продукция предприятия поставляется в страны СНГ, Европу и Азию.

Чтобы достойно представить «Запорожский завод цветных металлов» в интернете мы разработали стильный, подробный и удобный сайт о предприятии и выпускаемой им продукции.

Запорожский завод цветных металлов
http://zzcm.com.ua
Главная страница сайта ЗЗЦМ

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

Ширина сайта подстраивается под наиболее распространенные размеры экрана. Листается комфортно как на Айпаде, так и на FullHD-мониторе.

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

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

Продукция запорожского завода цветных металлов
http://zzcm.com.ua/ru/products/kvbbshv
Страница продукции сайта ЗЗЦМ

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

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

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

Медиатека запорожского завода цветных металлов
http://zzcm.com.ua/ru/media
Медиатека запорожского завода цветных металлов

Слайдеры с фотографиями также помогают в навигации.



Мы провели фотосъемку заводских объектов, которые пополнили медиатеку предприятия.

Для проекта мы разработали множество графики: иллюстрации, фото, иконки. Иллюстрация производственного цикла:

Иллюстрация для ЗЗЦМ

Разработчики

  • Фото Денис
    Денис

    менеджер проекта, дизайнер, иллюстратор

  • Фото Евгений
    Евгений

    технолог

  • Сергей

    программист

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

Каталог продукции старого сайта ЗЗЦМ
Каталог продукции старого сайта ЗЗЦМ

Как выяснилось, задача нового сайта не просто «причесать» имеющиеся данные, а значительно их пополнить и вообще всё поменять: от категорий и подкатегорий продукции до маркетинговых акцентов.

Каталог

Самая интересная часть структуры – каталог кабельно-проводниковой продукции. Клиент ее видит примерно так:

Предварительная структура каталога продукции ЗЗЦМ

Т.е. чтобы попасть непосредственно на страницу товара нужно пройти 6 страниц. Если необходимы нюансы, типа конструкции конкретного кабеля – 7.

Разумеется, нам такая подача показалась непозволительно сложной. Поэтому еще до этапа составления окончательного технического задания мы подробно вникли в суть вопроса, продумали и защитили варианты структуры информации и принципов работы меню. В результате загрузку 6–7 страниц мы смогли сократить до 2–3!

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

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

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

Слайдер

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

Варианты слайдеров

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

Варианты слайдеров

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

Варианты слайдеров

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

Клиент нам поставил задачу сделать слайдер с элементами навигации. Чтобы ключевые разделы продукции всегда была доступна прямая ссылка.

Мы предложили элегантный вариант:

Меню слайдера перелистывает картинки. Пункт меню текущей картинки – ссылка на соответствующий раздел. Разумеется, в тексте самого слайда можно написать что угодно и сослаться куда угодно.

Минус данного слайдера – необходимость сделать два клика для перехода со слайдера в интересующий подраздел. С другой стороны – имиджевый слайдер – это всё таки слайдер, а не основное навигационное меню. В ходе долгих переговоров и обсуждений мы таки поддались под напором маркетингового отдела и «выпилили» листание из слайдера, оставив только ссылки на разделы. Очень жаль.

Иллюстрации кабелей

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

Фото кабелей

Полученные фотографии тщательно обрабатываем, дорисовываем не пришедшие на фотосессию модели.

Фото кабелей

Иконки и иллюстрации

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

Фото кабелей


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





Иконки для сайта ЗЗЦМ

Другие проекты

Корпоративный сайт illy Украина

http://agg.in.ua

Сайт «Запорожтрансформатора»

http://ztr.com.ua

Сайт Запорожского кабельного завода

http://zkz.ua

Сайт отеля «Интурист»

http://intourist.com.ua