All Master Group

Лэндосы бывают разные: черные, белые, красные. Все как у Отпетых Мошенников, только вместо девушек — лэндосы. Это второй проект от группы компаний AMG, в первый раз я рисовал закрытый интерфейс для дизайнеров интерьера, в этом проекте мне предстояло рассказать об одном из направлений компании — оптовых продажах электротехники Siemens.

Задача

Красиво подать и продать информацию о компании для пользователей с помощью лэндинга. Целевой аудиторией являются владельцы розничных и интернет-магазинов.

Решение

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

Контент

Для посадочных страниц указывать всю продукцию бессмысленно, важнее рассказать о преимуществах, показать живые отзывы и мотивировать пользователя. Поэтому я отправил аккаунт-менеджера за уточнениями, так как контент — это наше все.
Это проект, где весь текст был написан мною. Меня бесят лэндосы от БМ, так как они очень страшные и занудливые — тонны текста, переизбыток информации, отсутствии логики, где везде мелькает одна надоедливая фраза «Купи сейчас».

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

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

Варфреймы

На этапе варфреймов все зависит от сроков. В моем случае я тщательно проработал не только общее положение блоков, но и типографику. Да чего мелочиться, я заполнил весь лэндос текстом и даже на этом черновом этапе меня уже радовал результат.

Первый «hero» блок я сделал вступительным, чтобы пользователь понимал, куда он вообще попал. Сама презентация находится ниже, поэтому если информация не интересна — можно закрыть вкладку брауезра, или все же ознакомиться с предложением. Далее следует фиксированное меню сайта для быстрых переходов от одного блока к другому.

Клиент принимает варфреймы и я приступил к «натягиванию дизайна». До того как сесть рисовать варфреймы я уже видел готовый дизайн и интерактивную часть проекта, осталось только воплотить это материально.

Сначала были нарисованы небольшие стилистичные иконки к каждому из преимуществ и пары текстовых блоков

Теперь предстояло повозиться с фотографиями. Качество контента продукции меня порадовало, но все картинки мне пришлось собирать по частям

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

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

Финал

Клиент остался доволен результатом, а меня ждет передача исходников фронт-эндеру. Собираю «Cuts of the projeсt»

После чего сел расписывать примеры интерактива, которые необходимо реализовать в проекте. В данном лэндосе я также как и в Иктотам решил использовать on-load анимацию, но только более глобальную и во всех блоках. Фронт-эндер был «удаленщик», и с ним я работал впервые, поэтому вместе с описанием нарисовал картинку с порядком появления блоков и их координатами.

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

Спасибо за внимание!
Landing AMG