Макеты сайта ICP Centre

Петербургская компания ICP Centre занимается продвижением коучинга и личностного развития. Когда команда компании обратилась в нашу дизайн-студию, у них уже был сайт, но не было единого визуального языка. А это то, без чего не может обойтись ни один большой проект.

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

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

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

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

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

Описание курса

Для кого этот курс обучения

Что изменится после прохождения курса

Слайдер с программой курса

Архитектура программы

Видео рассказ о курсе

Расписание курса

Ведущие программы

Стоимость

Отзывы выпускников

Сертификат выпускника

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

Интересно, что это наш первый проект, который мы сделали, так и не познакомившись с клиентом лично. Все общение было удаленным, что, впрочем, никак не сказалось ни на общей вовлеченности в работу, ни на ее качестве.