![](/img/promchim/logo.png)
Дизайн корпоративного сайта химического производства
Сайт с широким ассортиментом химической продукции, реализован для увеличения продаж, привлечения новых клиентов, а также для представления компании на профильном рынке.
![](/img/promchim/pc.png)
О проектеПостановка задачиНам нужно обновить дизайн старого сайта, сделать его простым и стильным с возможностью редактирования: всех его статичных страниц, англоязычного контента, баннеров, карточек товаров для того, чтобы мы могли самосостоятельно поддерживать данный ресурс.- Александр, маркетолог “ПромХимПермь”
Сайт:http://promchim.com/
ПроектированиеРазработка интерфейса
Было спроектировано и отрисовано около 20 прототипов страниц под каждый раздел сайта, форм обратной связи и модальных окон.
![](/img/promchim/prot.png)
![](/img/promchim/contact.png)
ДизайнГлавная страницаОдна из основных задач проекта — разработка крутых фишек, таких как: таблица Менделеева, интерактивная фотография производственной лаборатории и карта поставок.Интерактивная таблица химических элементов позволяет быстро ориентироваться в продукции, представленной на сайте, с переходом на страницу каталога.![](/img/promchim/cart.png)
![](/img/promchim/cart.png)
![](/img/promchim/ingred.png)
![](/img/promchim/pages.png)
![](/img/promchim/tablet.png)
ДеталиИнтерактивная фотографияКартинка с производственной лаборатории на которой пользователи могут узнать об используемом оборудовании.
Кнопка в обычном состоянии
Технические весы
раскрывается данным образом с текстом пояснением внутри
ДеталиКарта поставокКарта Jvector, оптимизированная для работы на touch-устройствах, отображает указанные из личного кабинета реальные координаты мест.
50городов
10институтов
Россия, г. Тюмень
![](/img/promchim/map.png)
![](/img/promchim/map_two.png)
![](/img/promchim/contact.png)
Другие страницыКонтактная информацияКонтенту на странице контактов мы тоже уделили внимание. Информация всех разделов полностью редактируется из личного кабинета, где есть возможность загрузки необходимых документов - схем проезда, например.![](/img/promchim/contact_info.png)
![](/img/promchim/contact_info.png)
Другие страницыНавигация на сайте
Ещё одна из особенностей - меню сайта. Было предложено минималистичное решение навигации по основным разделам, которые спрятаны в гамбургер меню.
![](/img/promchim/macBook.png)
![](/img/promchim/animation_navigation.gif)
![](/img/promchim/iphone.png)
![](/img/promchim/imac.png)
КонтентИнформационные блокиБлагодаря широким возможностям редактирования контента на сайте, каждая страница выглядит презентабельно, информативно и стильно.Взгляните сами как работает функционал админ. панели на примере страницы новости.
Адаптивный дизайн
Стилизация текста
Вставка изображений
![](/img/promchim/info_block_one.png)
![](/img/promchim/info_block_two.png)
![](/img/promchim/info_block_tree.png)
Редактирование контентаКаждая страница сайта имеет свой подраздел в личном кабинете, где можно добавить / отредактировать / удалить контент, вставить картинки или таблицу. Мы постарались сделать интерфейс личного кабинета максимально интуитивно-простым, но между тем функциональным.![](/img/promchim/editing.png)
![](/img/promchim/editing.png)
![](/img/promchim/article.png)
Адаптивная версткаОтображение сайтаСайт адаптируется ко всем видам устройств: монитору компьютера, планшету и телефону, используя самую популярную библиотеку интерфейсных компонентов - bootstrap.
![](/img/promchim/tablet_nine_one.png)
![](/img/promchim/natrii.jpg)
![](/img/promchim/tablet_nine_two.png)
![](/img/promchim/pen.png)
![](/img/promchim/articles.jpg)
![](/img/promchim/tablet_nine_tree.png)
![](/img/promchim/catalog.png)
![](/img/promchim/tablet_nine_four.png)
![](/img/promchim/natri.png)
ГайдлайнФирменные цвета и шрифты
Мы разработали фирменный UI kit шрифтовых пар и цветов, чтобы всё выглядело лаконично и в единой стилистике компании “ПромХимПермь”.
![](/img/promchim/atom.png)
![](/img/promchim/aa_one.png)
Times New Roman
Bold
italic
30-24 px
![](/img/promchim/aa_two.png)
Times New Roman
Bold
italic
30-24 px