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

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

Проблема старого сайта нашего клиента, официального дилера: низкая конверсия. Неожиданно, правда?

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

Решение:

Вот что имеем в исходнике:

В целом, сайт повторяет своего «прародителя», оригинальный www.fein.de — такой же баннер на половину экрана и минимализм в шапке.

Так как наша цель — сделать сайт продающим, тренируемся на скетче:

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

В итоге, мы решаем сдвинуть всю справочную информацию вниз. Таким образом, теперь мы имеем следующую структуру. v

Наверху размещается небольшие промо-блоки для каждого вида инстумента: MultiMaster для любителя поремонтировать и SuperCut для профессионального применения. На каждом есть ссылка, кликнув на которую, можно быстро укомплектовать свой агрегат всеми мыслимыми насадками.

Сразу за спецпредложениями размещается «применение инструментов» — для тех, кто пока не знает, как с помощью МультиМастера стричь газон.

А теперь отходим на четыре метра от нашего детища, оцениваем общую картинку и... основательно всё переделываем. Плавно скругленные углы становятся жесткими, а светлое пространство чернеет. Очень брутально и очень круто:

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

Чтобы решить одну из главных задач (оперативная консультация), добавляем ярлычок обратной связи, который по клику разворачивается в компактную форму и спешит на помощь покупателю:

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

Традиционное сочетание белого фона и темного текста, в стильной темной обертке — в результате все счастливы. (Еще один скриншот, не могу остановиться :) ):

Результат: По решению заказчика, верстка будет производиться за пределами студии. Что ж, будем надеяться, что все жизненно важные этапы реализации пройдут для проекта безболезненно ;). Искренне желаем удачи!