Разработка сайта «Выгодные печи»

С вами Павлуха (автор блога Pavluha.net), очередной коммерческий проект «Выгодные печи» мы разрабатывали с Надюшей вместе. Правда, поработать вместе у нас получилось лишь пару дней, потом наш любимый дизайнер отправилась в командировку, но за 2 дня совместной работы успела родиться концепция, цветовая гамма и общий шаблон дизайна. Остальное было делом техники.

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

Сайт представляет собой лендинг. Т.е. посетителю не предлагается долгое путешествие по сайту, изучение материалов и т.п. Единственная цель страницы — убедить посетителя в том, что он пришёл по адресу, побудить совершить звонок или заказать бесплатный звонок. Потому основную роль здесь играет дизайн и небольшие информационные блоки: их размещение и внешний вид. А разработку дизайна сайта следует начинать с выбора цветовой схемы.

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

Обычно на лендингах часто используют красный, зелёный и жёлтый цвета. В данном случае целью было, чтобы дизайн ассоциировался с теплом (печи же продаём — тепло людям несём). С теплом лучше всего ассоциируются оранжевый и жёлтый цвета, но избыток жёлтого в дизайне утомляет, так выбор был сделан на оранжевом в качестве основного цвета.

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

Вряд ли вы не заметили большую красную кнопку «заказать сейчас». Смешная с ней история вышла. Сначала она была сделана такой же, как и «Заказать бесплатный звонок» вверху страницы. Но потом заказчик попросил сделать побольше. Хотел было увеличить чуть-чуть процентов на 30, то настроение было весёлое, и кнопка была увеличена значительно. Заказчику очень понравилось.

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

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