17.04.2012

Первый сайт Sweko

Задача: разработать сайт-гид по светотехнической продукции компании-производителя для ее распространителей.

Меню информационной части — сверху, раскрывающееся меню каталога продукции — слева. Большой баннер настраивается: можно менять картинку и давать ссылку с него на любую страницу сайта; можно менять подпись на баннере и цвет фона под текстом (посредством «админки»). Ниже — 4 самые интересные новости (отбираются администратором).

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

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

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

Задизайнить сайт

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

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

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

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

Еще штуки:


иконка лупы
Дизайн: Игнатий Филиппов
Верстка и программирование:
Роман Фесько

Еще