Разработка сайта для компании, проектирующей спортивные комплексы и бизнес-центры

ЗаказчикАрхитектурное бюро «Крафт» (Санкт-Петербург).ЗадачаРазработать сайт с нестандартной структурой и дизайном, который поможет компании выделиться на фоне конкурентов и передать имидж бренда (из офлайна в онлайн).

В начале 2021-го года наши партнеры, Advertising Group Goldmark, доверяющие агентству «Акцепт» задачи, связанные с digital, обратились к нам с предложением реализовать проект для их заказчика — архитектурного бюро «Крафт». Можно сказать, что это был наш совместный проект, где мы взяли на себя разработку сайта, а партнеры — полиграфию.

Компания существует на рынке уже 9 лет, но за все это время у нее не было сайта, который полностью устраивал бы руководство и соответствовал бы поставленным бизнес-целям.

Небольшое предисловие: архитектурное бюро оказывает услуги разработки архитектурной концепции, проектно-сметной документации, выполняет инженерные изыскания и обследования, а также осуществляет надзор за процессом строительства — все то, что необходимо для постройки здания/сооружения (за исключение непосредственного этапа возведения объекта и работы со строительными материалами — за это отвечают другие подрядчики). «Крафт» работает со следующими типами объектов:

  • Жилые дома.
  • Спортивные сооружения (крытые ледовые арены, тренировочные стадионы, футбольные манежи).
  • Больницы, SPA-комплексы.
  • Коммерческая недвижимость — бизнес-центры, объекты бытового обслуживания (например, дом траурных церемоний).
  • Коммуникации — газораспределительные пункты, тепловые сети.

Заказчик изначально не был согласен на сайт с «посредственным» дизайном, поэтому планка была задана высокая. Но в то же время представители компании были готовы обсуждать варианты технической реализации задач и не имели жестких фиксированных требований к CMS. Рассматривалась возможность сборки сайта на конструкторе Tilda с помощью Zero Block, но из-за визуальных ограничений выбор все-таки пал на полноценную систему управления сайтом с более гибкими возможностями для верстки — WordPress.

Состав команды

Владислав Ирина Аскар

Владислав

Дизайнер-проектировщик

Ирина

Менеджер

Аскар

Разработчик

 Что было сделано

  • Мы провели глубокий брифинг для дальнейшей подготовки ТЗ. Были собраны все имеющиеся наработки — фирменный стиль, сертификаты, фотографии и описание объектов для портфолио. Последнее играло ключевую роль в данном проекте — потому что по сути мы делали сайт-портфолио (в архитектурном бизнесе примеры работ являются одним из базовых факторов для выбора исполнителей).

 71a1b9758e6bb627670da362d7bc66e6.png

 fbe94b4d2da739006e2e2107bb2ce718.png

 0ca394c4b9508777625a28d3f4df75a1.png

  • Приступили к разработке концепции (исходя из наших стандартов, мы никогда не начинаем сразу прорабатывать UI или даже UX; концепция всегда первична):
  • Определили эмоции, которые должны быть отражены в дизайне (с акцентом на первых трех): надежность, простота, доверие, серьезность, понятность, корпоративность.
  • Чтобы фирменный цвет прослеживался везде, было предложено использовать реалистичные фотографии с наложением фильтра на основе одного из базовых цветов, использовавшихся в айдентике.В качестве основного семейства шрифтов был выбран геометрический гротеск, ассоциирующийся со стабильностью и устойчивостью (важные качества для специалистов, работающих в данной отрасли).

 56b0a2c6762ad3e7e765ca04d80e62a0.png

  • Геометрию решено было сделать легкой и разряженной — так, чтобы она передавала ощущение простоты и легкости.
  • Согласовав с клиентом концепцию, мы приступили к формированию самого дизайна интерфейса.
  • Изначально было принято решение, что это будет не лендинг, а полноценный многостраничный сайт, при этом структура его страниц и расположение элементов не должны напоминать типовые бесплатные шаблоны и >90% сайтов с якобы «индивидуальным» дизайном. Мы предложили сделать весь сайт без вертикальной прокрутки — так, чтобы любая его страница просматривалась в один экран.
  • Главная страница спроектирована из 4 блоков:

 2a8c6417014cea0c4f7defbdeec9cc32.png

  • Слайдер с объектами, выполняющий роль фона для верхнего меню, описания преимуществ, call-to-action на запрос консультации и кнопки для перехода в портфолио.

 672c090ec7497b51c90e04a9182a3547.png

  • Фотографии и краткое описание объекта, которые сменялись в зависимости от текущего слайда в «карусели».

 8224ac8ef6685a0710eaa6e9c5192e44.png

  • Плашка с указанием года основания компании и двух документов.

 0b6d8ac65b645112bef0b1de8920c563.png

  • Боковой слайдер, содержащий два полноценных меню:

 d14c907d6f5c1fcbbed6c72c6b7f553c.png

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

 676d00ca57aaf1828ee807acebf7e7cf.png

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

 35bd7c7271f91413365e94057d50c326.png

Код:

  • Если упустить стандартные этапы подобные «прикручиванию» дизайна к CMS, то с точки зрения работы с кодом можно выделить два основных момента. Во-первых, необходимость оптимизации скорости загрузки. Клиент обозначил, что не готов мириться с долгой загрузкой страниц, даже несмотря на необходимость размещения фото-контента. Необходимо было использовать средства в рамках front-end и back-end, чтобы сделать страницы «легкими», а также не размещать файлов с большим размером. И, во-вторых, так как концепция не допускала прокрутки страницы вне зависимости от типа устройства и разрешения экрана, нам пришлось существенно сократить содержание некоторых страниц, где-то сведя его до минимума.

df34b7ea383658a0269a31665c420bd7.png

Что получилось на выходе

Было:

372004cd2cc5da49314a03412b18bb44.png

Стало:

bea393d38636ab03c15514e564ca4978.png

Было:

d0ee3be818e37ac8d3a1a15aa9fdec94.png

Стало:

7d96f7f62645c4e3b7f3ef8fbb01b9bf.png

Было:

0013116ab175a823026ab0837c0e6c30.png

Стало:

b3cca0b165710043b87e2940f114fb1a.png

Клиент, даже несмотря на сложности в согласованиях и затянувшееся обсуждение технической стороны проекта с долгими встречами по Zoom, остался доволен результатом:

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

Теперь мы представлены в сети в более статусном и интересном варианте.

Спасибо за работу! Будем рекомендовать коллегам!»

Врачев А.А. — Генеральный директор ГК «Крафт»

Полный текст отзыва в рекомендательном письме:

 0897efc94bc7bc78caf9c553321efaf2.png

Примечательный факт: работая над данным проектом, мы имели жесткие ограничения по бюджету со стороны заказчика. Фактически мы выполнили весь объем работ по стоимости, которая была ниже стандартной в 2 раза. Соглашаясь на подобные уступки, было четкое понимание того, что мы отказываемся от прибыли, но при этом получаем для портфолио-копилки новую качественную работу. И если судить по данному кейсу, то это решение было правильным (вот он — инсайт!).

Чтобы изучить проект более подробно, переходите на сайт https://gkkraft.ru/. Будем рады ответить на ваши вопросы и поделиться другими кейсами!

Перейти на сайт

Полный текст статьи читайте на CMS Magazine