Всегда приятно работать с клиентом, который «созрел» до понимания: сайт — это мощное средство визуальной коммуникации, его возможности нужно использовать по полной. Итак, по порядку.
Интересно о бизнесе
Команда 220ok занимается монтажом электрики в новостройках, используя производительную и бесшумную технику, высокоточные лазерные инструменты разметки и профессиональные промышленные пылесосы (Protool). В общем, следует девизу «без шума и пыли».
На заметку: для монтажа и штробления стен команда 220ok применяет бесшумный и производительный инструмент Hilti, а не классические перфораторы (от которых соседи ритмично подпрыгивают на стульях во время файв-о-клок).
Особый пункт из миссии компании: быть полностью открытой в проектировании, технологиях и ценообразовании. Так, например, клиент 220ok может по желанию следить за работой через веб-камеру, а по завершении — он получит DVD с хроникой работ.
Задачи сайта
Сайт должен стать еще одним высокотехнологичным инструментом в арсенале 220ok. Его задачи:
- Стать средством получения заказов.
- Дать клиенту визуальную информацию об этапах работ.
- Продемонстрировать преимущества 220ok.
Аналитика
Сайт ориентирован именно на визуальную коммуникацию с пользователем. Проводим подробный анализ задач, структуры будущего сайта, аудитории, разбираем примеры конкурирующих сайтов.
Результаты такой работы удобно хранить (и демонстрировать) в виде «карты интеллекта» — она визуальная, компактная и в то же время подробная.
Следующий этап!
Прототип
Нам нужно нестандартное решение, которое бы «не отпускало» пользователя. Фактически — эффектная лендинг-страница с удобной навигацией к внутренним страницам сайта. Крайне актуально в условиях современного бешеного потока информации.
Для начала нас не интересуют детали, нам нужна общая концепция. Формулируем ключевые преимущества, находим метафору, придумываем способ подачи:
Вносим необходимые правки после артдирекшна, но идея всем участникам нравится.
Дизайн
Оригинальной идеи недостаточно, нужно ее воплощение в веб-технологиях. Дизайнер делает макет главной страницы, отрисовывает все интерактивные элементы, придумывает их анимацию.
ДизайнерЯ был очень рад, когда мне дали макет на отрисовку, потому что люблю технический дизайн. Каждый этап работы тщательно согласовывали с заказчиком — он профессиональным взглядом указывал на логические огрехи (мы же не разбираемся в проводке :)). Когда дизайн был готов, стали думать, какие элементы можно сделать анимированными и интерактивными: счётчик, щиток, карточки с отзывами, фотографии. Процесс вёрстки я постоянно мониторил, и результат полностью совпал с задумками.
И — главная!
Дальше — больше.
Верстка и код
Самый трудоемкий этап этого проекта — верстка. Начинаем оккультный сеанс. После него шестерни начинают крутиться, стрелки нерешительно колебаться — а самые любознательные могут пощелкать тумблерами, дабы узнать о технологиях электромонтажа.
РазработчикБезусловно, самой интересной была главная страница, постарались максимально ее оживить, вдохнуть жизнь в каждый слайд, сделать их непохожими. У Антона постоянно появлялись новые идеи анимации, а мы старательно их воплощали.
Готовим также и внутренние страницы (где собран весь основной контент). Те разработчики в команде, которые отвечают за «оборотную» сторону сайта, делают интеграцию с CMS от Битрикса и программируют всю логику.
Результат
Готовый сайт: 220ok.ru
Особое внимание, как всегда, на наш логотип в подвале. Угадайте не глядя, что там ;)