Дизайн сайта Sweko

Главная страница: меню информационной части сверху, раскрывающееся меню каталога продукции — слева. Большой баннер настраивается: можно менять картинку и давать ссылку с него на любую страницу сайта; можно менять название и цвет фона под текстом (на один из трех заложенных). 2 маленьких баннера отсылают на 2 последние из выбранных администратором новости. Лампочка справа — интерактивная игрушка — это надо потрогать самому.

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

Характеристики разбили на 2 части — параметры и размеры, — и пользователь может посмотреть то или иное, воспользовавшись переключателем в шапке таблицы. Переносы в названиях параметров расставляются автоматически при масштабировании окна браузера.

Шапка остается на виду, пока мы прокручиваем страницу вниз, до достижения конца таблицы. Так мы не теряемся в значениях параметров:

Страница подраздела каталога:

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

В разделе «Информация» — все, что может пригодиться рядовому продавцу светотехнической продукции Sweko: расшифровки, презентации, размеры, фотографии, каталоги и т. д. При узком окне браузера подписи под иконками исчезают (и трансформируются в виде заголовков в окошке под кионками), позволяя избежать горизонтальной прокрутки.

На новостной странице с помощью инструмента справа можно перемещаться от новости к новости без возврата к ленте:

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

Еще немного подробностей:

 

Верстка и программирование — Роман Фесько.