Дизайн, который говорит аккуратно: кейс сайта по изготовлению памятников и не только
- Заказчик
- «Техногаббро» занимается добычей, обработкой и оптовой торговлей камня габбро-диабаза. Из него делают разные вещи: плитку, бордюр, вазы, статуэтки, мемориальные ступеньки, поручни.
- Задача
- Автоматизировать процесс продажи, сократить коммуникацию с заказчиками за счет сайта. Там должен быть каталог по всей продукции, условия доставки и контакты отдела продаж.
В 2024 году мы разработали сайт для компании «Евромодуль», которая привела нам еще одного заказчика — ООО «Техногаббро»
«Техногаббро» занимается добычей, обработкой и оптовой торговлей камня габбро-диабаза. Из него делают разные вещи: плитку, бордюр, вазы, статуэтки, мемориальные ступеньки, поручни, а также надгробные плиты.
Тимур, основатель и владелец компании, пришел к нам с запросом сократить коммуникацию с клиентами за счет сайта.
На брифинге выяснили, что целевая аудитория сайта — оптовые закупщики камня в России и СНГ. Они закупают камень у таких производителей, как «Техногаббро», и затем могут его перепродавать или дорабатывать на более маломощном оборудовании.
Обсудили ожидания от сайта, его целевое действие, бизнес изнутри и пошли в сторону разработки.
Предыдущего сайта не было, поэтому мы начали с разработки фирменного стиля
Логотип разрабатывали параллельно с этапом прототипирования, и пока дизайнеры анализировали конкурентов, тогда еще арт-директор и основатель студии Фёдор начал заниматься логотипом.
Задача была такой: нужно было разработать простой текстовый логотип. Выбирая из нескольких вариантов: куб, квадрат или пила, решили, что логотип должен ассоциироваться с камнем, и выбрали распиленный валун (обломок камня горной породы). Монументально и ассоциируется с продукцией.
Логотип должен включать название «Техногаббро», потому что это основной продукт и нам хотелось показать и его, и добычу, и разработку.
Было несколько вариантов форм. Треугольник — интересно, куб — интересно, но как будто отсылает к детской тематике. В итоге оставили разрезанный камень, шестигранник, как у нас есть на фотографиях с производства. Хотелось в логотипе показать и структуру камня — габбро-диабаза, она немного шершавая.
Затем мы определились с фирменными цветами.
Проанализировали цвета в нише добычи и производства чего угодно: чаще такие сайты и их логотипы или в светло-синих цветах (но тут больше ассоциация с гос. организациями и банками), или в сине-оранжевых. Фёдор выбрал тёмно-синий и оранжевый. Покрасили лого в фирменные цвета, которые частично появляются и на сайте.
Продумали и инверсию логотипа: фавикон (лого в строке браузера) расположен на белом фоне. Если часть логотипа будет белой, она просто сольётся с фоном браузера, и логотип будет выглядеть поломанным. Поэтому для фавикона — сине-оранжевый цвет.
У нас есть и бело-оранжевая версия логотипа для самого сайта. Это обычная практика для коммерческих сайтов, мы внимательно относимся к деталям и соблюдаем читабельность всех знаков логотипа, будь они расположены на тёмном фоне или на светлом.
Получился простой текстовый логотип, мы утвердили его с заказчиком и продолжили разрабатывать прототип. (Помните же, что мы параллельно 2 процесса делали?)
Анализ, сайты конкурентов, тексты и готовый прототип
Проект разрабатывала Алина — дизайнер, и её курировала Катя — старший дизайнер (сейчас арт-директор): помогала следить за чистотой макета и корректировала степень креативности в подаче информации: коммерческие проекты в этом особенно требовательны. Запомните эти имена, они будут появляться дальше.
Как мы и говорили: сайта до этого у Тимура не было, а значит, ему нужно было помочь собрать всю эту информацию о бизнесе.
Текст писали мы, и чтобы его написать, конечно же, нужно было проанализировать конкурентов, посмотреть, что происходит на рынке у подобных компаний.
Когда анализировали, увидели частую историю во многих сферах: у конкурентов довольно устаревшие сайты. У кого-то посвежее, но в среднем по больнице обновлялись давно: сайты простые, нет четкой структуры, много визуально устаревших и неудобных решений.
Здесь, например, в разделе «О нас» есть только фотографии, и непонятно, о чем они должны сказать. На некоторых сайтах были старые паттерны по тексту. Раньше писали крупные полотна текста, и считалось, что это помогает в SEO.
После изучения конкурентов разбили их на 2 категории: просто сайты конкурентов, которые нам не пригодятся, и сайты с неплохой структурой и текстами, чтобы нам было на что ориентироваться, когда мы будем создавать прототип.
Чтобы написать текст, смотрели и ключевые слова, как люди формулируют запросы, смотрели частотность, чтобы в дальнейшем на сайте мог появиться органический трафик.
Tone of voice выбирали по подходу к бизнесу Тимура, по тому, как должна позиционироваться компания, и по ожиданиям целевой аудитории. Конечно же, смотрели на конкурентов, чтобы понимать привычные паттерны в тексте.
В итоге Tone of voice получился такой: рубаха-парень, говорит кратко и по существу, без прикрас, но и без мнительной скромности. Транслирует надёжность «Техногаббро» как производителя и партнёра, не транслирует напускную важность.
В структуре постарались разбросать информацию так, чтобы немного рассказать о компании и вызвать доверие, иначе сайт будет считываться как просто какая-то онлайн-витрина. При этом чтобы было понятно: это действительно большое существующее производство, большие цифры и опыт в сфере.
Идеи, референсы и итерации дизайн-концепций
Всегда на этапе брифа мы спрашиваем про пожелания к дизайну, Тимур нам доверился и сказал: «Вы специалисты, сделайте, как считаете нужным. Мне важно, чтобы моим клиентам было удобно и понятно посещать сайт».
Конкурентов мы уже анализировали для прототипа, для дизайна посмотрели на них по-новому. Ориентировались на стилистику, которая позволит нам аккуратно и интересно рассказать про услугу. В референсах отбирали конкретные блоки и анализировали, как можем показать на сайте некоторые из них.
Начали разрабатывать концепцию — первые 5 блоков сайта в дизайне. В начале пошли в монументальную историю, крупность, немного даже журнальность. Подгрузили гигантские интересные фотографии, но поняли, что это не совсем укладывается в остальной контент на нашем сайте.
Такой стиль больше про добычу и производство, он похож на металлургию, поэтому мы пошли разрабатывать концепцию дальше. Хотя есть и интересные приемы, что-то из National Geographic: интересный ход, но от него отказались.
Это стандартный процесс, когда внутри команды перебираем идеи, реализовываем и смотрим: оно или не оно.
Во второй раз пришли к бело-оранжевым цветам. Белый фон выбрали, потому что «Техногаббро» — коммерческий сайт и нужно, чтобы пользователь мог легко считывать информацию, с темного фона это делать сложнее.
Оранжевый выбрали как акцентный цвет, чаще всего он бывает на сайтах, связанных с производством, а узнаваемые паттерны на коммерческих сайтах — это хорошо, привычно и безопасно.
Как синий и зеленый — это банки, медицина, государственные организации, так и оранжевый — это производство.
Заголовки должны быть большими и крупными, чтобы передать ощущение монолитности, монументальности. Поэтому шрифт для заголовка выбрали Druk text Wide. Мы тут про камни и это отражаем.
Текст рядом с такими крупными заголовками должен быть максимально читабельный, поэтому выбрали Inter в комфортном для чтения размере.
Дизайн, который оправдал доверие
Когда Тимур шел в разработку сайта, он знал, что фото и видео потребуются 100%, поэтому подготовился. Сделал фотографии прямо со своего производства, снял видео, где были красивые пролеты с квадрокоптера, то есть с контентом всё было хорошо.
На первом экране закрыли 3 основные вопроса: что продаем, где добываем, где нужна такая продукция. Использовали видео с производства, которое подошло нам по цветам и динамике.
Оно захватывает внимание: если у потенциального клиента будет выбор из 10 сайтов, то наш даже за пару секунд запомнится и привлечет внимание на фоне однообразных конкурентов.
На втором экране блок «преимущества», который часто не хочется читать. Обычно пишут, почему надо выбрать именно эту компанию, но по форме это не всегда интересная подача. Мы добавили динамики и остановились на плавной анимации в заголовке, чтобы обратить внимание на преимущества.
Затем идет блок с цифрами, который показывает, что «Техногаббро» — крупная компания. Такой блок тоже часто могут пролистать, поэтому мы максимально привлекли к нему внимание. Сделали это за счет крупных цифр и фотографии на фоне, где распиливают габбро-диабаз (камень) огромной промышленной пилой. Здесь тоже добавили плавную органичную анимацию для легкого погружения.
Блок с каталогом (любимый блок Алины) выполнен достаточно интересно: не просто 6 фотографий в 2 ряда, да по 3 колоночки. Здесь мы использовали немного непривычную сетку, которую не скучно смотреть, несмотря на то, что у нас довольно много товаров.
При наведении на карточку товара у нас немного уменьшается фотография и поворачивается стрелка — аккуратное микровзаимодействие на сайте, которое делает пользовательский опыт приятным и интересным.
Позаботились о том, чтобы для каждой продукции была своя форма заявки. Нажимая на форму, человек видит в заголовке, что он правильно кликнул и оставит заявку на нужный товар. Человеку не нужно ничего писать и объяснять, на что он хочет оставить заявку.
В блоке с коммерческим предложением сделали открытую форму целевого действия на темном фоне. В предыдущем блоке был светлый фон, поэтому темный фон точно привлечет внимание и его не пропустят при быстром скролле.
Затем снова рассказываем про производство, где делаем акцент на цифрах оранжевым цветом. Даже если человеку хочется читать только заголовки с описанием, то он точно не пропустит цифры из-за цвета, автоматически выхватит фото и информация запомнится.
В блоке с преимуществами по характеристикам камня общая информация, он нужен для того, чтобы убедить пользователя: у нас точно такой же камень — габбро-диабаз, как и у других.
Часто задаваемые вопросы — стандартный блок, который обязательно добавляют на сайт.
— Во-первых, для людей, которые не любят говорить по телефону, они могут найти ответы на вопросы в этом блоке.
— Во-вторых, цель сайта — немного автоматизировать процесс продажи, с таким блоком будет минус одно касание.
— В-третьих, этот блок хорошо индексируется поисковыми роботами, поэтому здесь частично собраны запросы пользователей в конкретной нише.
В конце снова есть форма для заявки на темном фоне, привлекающая внимание из-за перехода с белого фона на черный. Оранжевые акценты — точки привлечения внимания. Если человек не хочет ждать обратного звонка и готов позвонить сам, то номер телефона он не пропустит.
Карта на сайте — деталь, которая позволяет вызвать доверие у посетителя сайта, даже если он на нём впервые: интерактивная карта с отметкой доказывает, что производство действительно существует по такому-то адресу.
И подвал, где собрана основная информация. Сделали большой логотип для того, чтобы зацепиться в памяти потенциального заказчика.
За 4 недели мы разработали лендинг для ООО «Техногаббро»
Задача была такой: разработать сайт, чтобы в одном месте была собрана вся информация о компании, доставке, товарах и чтобы можно было оставить заявку. Разрабатывался сайт с целью немного автоматизировать продажи.
Немного резюмируя, расскажем тезисно о разработке:
— разработали фирменный стиль с ассоциацией продукции и сформировали фирменные цвета;
— проанализировали конкурентов и нишу, запросы целевой аудитории и бизнес изнутри;
— написали тексты и подобрали Tone of voice бизнеса;
— продумали UI/UX так, чтобы пользователь обратил внимание на все блоки, разработали удобную и понятную структуру сайта;
— благодаря контенту от заказчика, добавили некий сторителлинг на сайт. Фотографии на сайте показывают реальные этапы работ: есть месторождения камней, вид в распиленном состоянии, когда этот камень увозят на производство, есть фотографии, где плиты уже распилены в разные форматы, отполированы и готовы к продаже;
— показали ассортимент, рассказали про компанию, передали позиционирование большого серьёзного производства;
— собрали функциональный дизайн с акцентом на доверие и продукцию. Выделили «Техногаббро» за счет динамики на 1 экране и современного дизайна.