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

Отправная точка

Что предоставил Заказчик: логотип, упаковка продукции, изображения товаров, краткое «техническое задание» в виде файла Excel с указанием списка желаемых разделов и страниц. Пожелания: современный и стильный дизайн.

Поехали!

Согласно договорённости с заказчиком на первом этапе мы должны были предоставить 2 варианта дизайна. Нам хотелось сделать их максимально различными, однако расположение элементов должно было быть одинаковым, поэтому мы приняли решение сделать абсолютно разные цветовые сочетания, которые получили рабочие название "темный" и "светлый" вариант. Вот что у нас получилось:

 

Заказчик остановился на "темном" варианте, так как основа цветового решения выражается фирменным стилем, который представляет собой ярко-оранжевый цвет. Сайт в данном варианте получается насыщенным и ярким. Однако классическое сочетание контрастных цветов приводит к непредвиденному результату, а именно резкость, которая бьет по глазам. Принимаем решение «увести» синий в более темный оттенок, тем самым усложнив его.

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

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

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

В шапке сайта уже содержится исчерпывающая контактная информация, подвал решено делать «легким», не перегружая его.

Итого, финальная главная страница выглядит следующим образом:

После утверждения главной страницы переходим к разработке внутренних страниц сайта, а именно каталог товаров списком и страница товара:

Также в рамках веб-дизайна были проработаны несколько баннеров для главной страницы, чтобы сохранить единый стиль и представление сайта:

По итогу работы заказчику предоставляются исходные файлы дизайна и баннеры.

PS В процессе разработки дизайна выяснилось, что фотографии продукта все же будут на белом фоне, поэтому решили добавить рамку вокруг товара. Для сохранения эффекта минимализма, мы сделала ее еле заметную: светло-серого цвета.

Перейти на сайт