Шаблон проекта

Marketing Evangelist

#исследования #cоздание структуры #дизайн #верстка на тильде #персональные модификации #оптимизация

Редизайн сайта маркетингового агентства в стиле "Брутализм"

Посмотреть проект →

О проекте

Marketing Evangelist — первое в России агентство прикладного нейромаркетинга. Звучит очень ярко и громко, не правда ли? Если вы читали книгу Нейрофитнес или Живой мозг {Рахул Джандиал и Дэвид Иглмен}, то знаете, что наш мозг просто невероятно устроен.

В привычном маркетинге маркетологи привыкли полагаться на результаты старых исследований или на тест группы, которые добровольно становятся испытуемыми. Учитывают ли они то, как мы реально принимаем решения? Учитывают ли они психологию и психотипы людей? В подавляющем большинстве — нет. В Marketing Evangelist учитывают все эти факторы и занимаются действительно глубинными исследованиями. А еще учат этому других маркетологов, превращая их в евангелистов бренда.

Задача

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

Объем работ:

главная страница
страница интенсива
лаборатория
страница блога {база знаний}
шаблон страницы новости
технические страницы

Исследования

Я начала с исследования конкурентов и обнаружила одну проблемy: на Российском рынке их нет. Поэтому переключились на иностранные агентства, предоставляющие подобные услуги и обучающие людей. Изучила также сайты знаменитых спикеров, рассказывающих про нейромаркетинг и нейропсихологию.

В результате выделила минусы конкурентов:

устаревшие сайты непонятной структуры
плохие и непонятные тексты
старый и не цепляющий дизайн
нет внятных кейсов

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

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

Структура

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

Дизайн

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

уверенность и безопасность
вызов
сила
развитие и трансформация
экспертность

А также собрала мудборд: визуальные решения, примеры сайтов, идеи, шрифтовые пары. Дизайн должен быть очень ярким, вызывающим и при этом простым для восприятия.

Дизайн-концепции

В рамках выбранного тарифа мне предстояло разработать две разные дизайн-концепции на выбор. Я начала со сбора идей композиции, чтобы процесс оказался более легким, но в процессе ни разу к ним не обратилась потому что случился мэтч (звезды сошлись и мы с проектом полюбили друг друга).

Я сделала пару набросков, пару раз посидела у окна с блокнотом и нащупала направление, которое почти без изменений стало началом финальной концепции.

В итоге вариантов получилось три (я не люблю отказывать себе в своих идеях), из которых была выбрана первая.

Основная идея строится вокруг квадрата, что является отсылкой к черному квадрату Малевича, который стал фирменным символом агентства.

Крупная надпись с названием фирмы выглядит очень громкой и при этом очень собранной. Крупность заявляет о том, что фирма уверена в том, что делает. Собранность отсылает к исследованиям и научному подходу.

Меню собрано в углу специально, чтобы красиво фиксироваться при скролле :D На самом деле очень хотелось сделать закрытую композицию для меню и создать четкие границы, отсылающие к квадрату/логотипу.

Я чередую выравнивание крупного текста слева и справа, чтобы сделать композицию динамичнее.

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

Логотип выглядит более собранным, а меню легким. данный вариант выглядит компактнее.

Долой стандартные эффекты для наведения. Решили бросить вызов — добавляем зачеркивание при наведении.

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

Мне очень хотелось выделить цитаты и сделать их более типографскими (кракозябристое слово вышло, но ладно). Словно они напечатаны на крупом постере.

После первого концепта хотелось сделать более легкий вариант текста, но я добавила смещение первой строки (paragraph indent) и сместила небольшой заголовок.

Детали

Я не стала мудрить со сложной сеткой и выбрала шесть колонок, чтобы одинаково хорошо расположить два крупных элемента в ряду или же разбить эту брутальность элементами, расположенными в первых двух и двух последних колонках.

В качестве основного шрифта был выбран Druk в начертании Bold. Основной шрифт — Raleway был выбран для создания контраста между собранным и вытянутым Druk и основным текстом {ну и порешало то, что оно бесплатен}. Для дополнительного акцента мне хотелось подобрать моноширинную гарнитуру, чтобы сделать отсылку к научности подходов агентства.

Научность → исследования → искусственный интеллект → программирование → Jet Brains Mono.

Итоги

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

[главная страница]

[лаборатория]

[интенсив]

Модифицированный стандартный блок, чтобы не заставлять пользователей листать длинную ленту.

Фиксированные секции с наложением и фотографии, выбранные из ассоциаций.

Переделанный стандартный блок, как отсылка к предыдущему сайту.

Верстка

Сайт преимущественно сверстан в Zero Block и был доработан кодом. Не буду много говорить о том, сколько строчек кода я написала и как меня морально унизил Safari в процессе — просто покажу до/после для стандартных блоков.