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

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

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

Двигаемся дальше.

Белый фон — уже лучше.

Попробуем увеличить шестиугольник с основным разделом, а при наведени отобразим иконки этого раздела.

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

Поправляем мелочи, вставляем текст и… Готово! Вариант принят заказчиком и отправляется в вёрстку.

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

 Дизайнер попросил добавить эффектное появление иконок — это не проблема, добавляем:

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

Начинаем с вывода по производителю.

К сожалению, не все компании заботятся о возможности найти их логотип в достойном качестве, поэтому большую часть логотипов потребовалось отрисовать заново. Такими мелочами, конечно, наших дизайнеров не испугать:)

Было:

Стало: http://smarthof.ru/catalog/producers/

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

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

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