Сайт «Запорожского завода цветных металлов»
Запуск проекта: 1-2015
zzcm.com.ua
ООО «Запорожский завод цветных металлов» – это современный холдинг, который состоит из группы компаний включающий в себя производственные процессы по изготовлению медных катодов и катанки, жилы, проволоки, медного и алюминиевого кабеля и этикеточной продукции. Продукция предприятия поставляется в страны СНГ, Европу и Азию.
Чтобы достойно представить «Запорожский завод цветных металлов» в интернете мы разработали стильный, подробный и удобный сайт о предприятии и выпускаемой им продукции.
Отдельного внимания заслуживает раздел кабельно-проводниковой продукции. Мы нарисовали красивые иллюстрации более 30 типов кабелей.
Продукция сгруппирована. В случае необходимости можно воспользоваться поиском по названию товара или названию его зарубежного аналога.
По каждому типу кабеля на сайте изложены подробные справочно-технические материалы. В специальном «калькуляторе» можно выбрать диаметры сечений и количество жил необходимого кабеля, указать желаемую длину и рассчитать оптимальное количество барабанов.
Слайдеры с фотографиями выполняют не только рекламную роль, но и помогают в навигации.
Мы провели фотосъемку заводских объектов, которые пополнили медиатеку предприятия.
Для проекта мы разработали множество графики: иллюстрации, фото, иконки. Иллюстрация производственного цикла:
Разработчики
- Арт-директор: Денис Юрьевич
- Дизайн, иллюстрации: Денис Юрьевич
- Технолог: Евгений Сергеевич
- Программист: Сергей Анатольевич
- Менеджер: Денис Юрьевич
Перед началом работы мы внимательно изучили существующий сайт компании. Систематизировали имеющуюся на нем информацию, постарались вникнуть в нее и предложить оптимальную концепцию подачи и структуру.
Как выяснилось, задача нового сайта не просто «причесать» имеющиеся данные, а значительно их пополнить и вообще всё поменять: от категорий и подкатегорий продукции до маркетинговых акцентов.
Каталог
Самая интересная часть структуры – каталог кабельно-проводниковой продукции. Клиент ее видит примерно так:
Т.е. чтобы попасть непосредственно на страницу товара нужно пройти 6 страниц. Если необходимы нюансы, типа конструкции конкретного кабеля – 7.
Разумеется, нам такая подача показалась непозволительно сложной. Поэтому еще до этапа составления окончательного технического задания мы подробно вникли в суть вопроса, продумали и защитили варианты структуры информации и принципов работы меню. В результате загрузку 6–7 страниц мы смогли сократить до 2–3!
Второй нюанс – структура каталога кабельно-проводниковой продукции и сама продукция отличается в русской и английской версии. Это также необходимо учитывать при проектировании.
Третье. Каждый тип продукции имеет разную структуру вложенности и разный тип материалов. Если каталог кабельно-проводниковой продукции это сгруппированный перечень товаров и текстовые страницы, то этикеточная продукция – это исключительно текстовые страницы.
Четвертое. Помимо внятной подачи на самом сайте, необходимо продумать удобный и гибкий способ управления всем этим разнообразием через систему администрирования. Предусмотреть возможность появления дополнительной группировки и перечней товаров в тех типах продукции, где изначально их нет.
Слайдер
В «шапке» сайта часто принято выделять область под имиджевые изображения. В наиболее простых и популярных вариантах – это статическая фотография или иллюстрация. В худшем случае – из фотостока. В лучшем – снятая или нарисованная непосредственно для клиента. Если таковых фотографий несколько – используют слайдеры.
Помимо эффекта смены кадров слайдеры отличаются функционалом. Самый популярный и незатейливый – листание слайдов переключением кружочков. Это самый неинформативный вариант подачи. Используется от нежелания заморачиваться. Пока не пролистаешь все – не понятно, что там. А посетители сайта не особо мотивированы листать не понятно что и не понятно зачем. В подобных случаях разработчики применяют «костыль» – автоматическое перелистывание слайдов.
Чуть более продвинутый вариант – вместо безликих буллитов использовать превьюшки, либо текстовые ссылки, по которым уже значительно проще ориентироваться.
Еще лучше, если слайд будет не просто картинкой, а содержать текст и возможно ссылку.
Клиент нам поставил задачу сделать слайдер с элементами навигации. Чтобы ключевые разделы продукции всегда была доступна прямая ссылка.
Мы предложили элегантный вариант:
Меню слайдера перелистывает картинки. Пункт меню текущей картинки – ссылка на соответствующий раздел. Разумеется, в тексте самого слайда можно написать что угодно и сослаться куда угодно.
Минус данного слайдера – необходимость сделать два клика для перехода со слайдера в интересующий подраздел. С другой стороны – имиджевый слайдер – это всё таки слайдер, а не основное навигационное меню. В ходе долгих переговоров и обсуждений мы таки поддались под напором маркетингового отдела и «выпилили» листание из слайдера, оставив только ссылки на разделы. Очень жаль.
Иллюстрации кабелей
Устанавливаем конструкцию для подвешивания кабелей. Выставляем свет. Снимаем.
Полученные фотографии тщательно обрабатываем, дорисовываем не пришедшие на фотосессию модели.
Иконки и иллюстрации
На главной странице сайта мы оформили подборку фактов о предприятии и её деятельности. Чтобы визуально показать этапы производства решили нарисовать большую сочную картинку со схемой производственного цикла.
В литейном цеху выплавляются чушки из которых получаются катоды и аноды. Далее катанка, из которой получается проволока и жила. На последнем этапе добавляется оплетка, полученные провода и кабеля упаковываются и отправляются своим покупателям.
Сайт поддерживает множество языковых версий. На первом этапе доступны русская, украинская и английская. Каждая из языковых версий может отличаться как структурой, так и содержанием.
Ширина сайта подстраивается под наиболее распространенные размеры экрана. Листается комфортно как на Айпаде, так и на FullHD-мониторе.
Для многочисленных разделов и страниц мы разработали фотографии, иконки и иллюстрации.
Все необходимые инструменты для поиска материалов, запроса прайсов, оформления заказов либо уточнения нюансов у спецалистов компании находятся под рукой.