- Заказчик
- Архитектурное бюро «Крафт» (Санкт-Петербург).
- Задача
- Разработать сайт с нестандартной структурой и дизайном, который поможет компании выделиться на фоне конкурентов и передать имидж бренда (из офлайна в онлайн).
В начале 2021-го года наши партнеры, Advertising Group Goldmark, доверяющие агентству «Акцепт» задачи, связанные с digital, обратились к нам с предложением реализовать проект для их заказчика — архитектурного бюро «Крафт». Можно сказать, что это был наш совместный проект, где мы взяли на себя разработку сайта, а партнеры — полиграфию.
Компания существует на рынке уже 9 лет, но за все это время у нее не было сайта, который полностью устраивал бы руководство и соответствовал бы поставленным бизнес-целям.
Небольшое предисловие: архитектурное бюро оказывает услуги разработки архитектурной концепции, проектно-сметной документации, выполняет инженерные изыскания и обследования, а также осуществляет надзор за процессом строительства — все то, что необходимо для постройки здания/сооружения (за исключение непосредственного этапа возведения объекта и работы со строительными материалами — за это отвечают другие подрядчики). «Крафт» работает со следующими типами объектов:
- Жилые дома.
- Спортивные сооружения (крытые ледовые арены, тренировочные стадионы, футбольные манежи).
- Больницы, SPA-комплексы.
- Коммерческая недвижимость — бизнес-центры, объекты бытового обслуживания (например, дом траурных церемоний).
- Коммуникации — газораспределительные пункты, тепловые сети.
Заказчик изначально не был согласен на сайт с «посредственным» дизайном, поэтому планка была задана высокая. Но в то же время представители компании были готовы обсуждать варианты технической реализации задач и не имели жестких фиксированных требований к CMS. Рассматривалась возможность сборки сайта на конструкторе Tilda с помощью Zero Block, но из-за визуальных ограничений выбор все-таки пал на полноценную систему управления сайтом с более гибкими возможностями для верстки — WordPress.
Состав команды
![Владислав](https://cases.cmsmagazine.ru/upload/15a27a2f4d07c684ba8ca3a08df3e9e1.jpg)
Владислав
Дизайнер-проектировщик
![Ирина](https://cases.cmsmagazine.ru/upload/0999986d1efd183cb51f646c8d85d843.png)
Ирина
Менеджер
![Аскар](https://cases.cmsmagazine.ru/upload/099224bca5a680f4408a21a60675cadc.jpg)
Аскар
Разработчик
Что было сделано
- Мы провели глубокий брифинг для дальнейшей подготовки ТЗ. Были собраны все имеющиеся наработки — фирменный стиль, сертификаты, фотографии и описание объектов для портфолио. Последнее играло ключевую роль в данном проекте — потому что по сути мы делали сайт-портфолио (в архитектурном бизнесе примеры работ являются одним из базовых факторов для выбора исполнителей).
![](https://cases.cmsmagazine.ru/upload/71a1b9758e6bb627670da362d7bc66e6.png)
![](https://cases.cmsmagazine.ru/upload/fbe94b4d2da739006e2e2107bb2ce718.png)
![](https://cases.cmsmagazine.ru/upload/0ca394c4b9508777625a28d3f4df75a1.png)
- Приступили к разработке концепции (исходя из наших стандартов, мы никогда не начинаем сразу прорабатывать UI или даже UX; концепция всегда первична):
- Определили эмоции, которые должны быть отражены в дизайне (с акцентом на первых трех): надежность, простота, доверие, серьезность, понятность, корпоративность.
- Чтобы фирменный цвет прослеживался везде, было предложено использовать реалистичные фотографии с наложением фильтра на основе одного из базовых цветов, использовавшихся в айдентике.В качестве основного семейства шрифтов был выбран геометрический гротеск, ассоциирующийся со стабильностью и устойчивостью (важные качества для специалистов, работающих в данной отрасли).
![](https://cases.cmsmagazine.ru/upload/56b0a2c6762ad3e7e765ca04d80e62a0.png)
- Геометрию решено было сделать легкой и разряженной — так, чтобы она передавала ощущение простоты и легкости.
- Согласовав с клиентом концепцию, мы приступили к формированию самого дизайна интерфейса.
- Изначально было принято решение, что это будет не лендинг, а полноценный многостраничный сайт, при этом структура его страниц и расположение элементов не должны напоминать типовые бесплатные шаблоны и >90% сайтов с якобы «индивидуальным» дизайном. Мы предложили сделать весь сайт без вертикальной прокрутки — так, чтобы любая его страница просматривалась в один экран.
- Главная страница спроектирована из 4 блоков:
![](https://cases.cmsmagazine.ru/upload/2a8c6417014cea0c4f7defbdeec9cc32.png)
- Слайдер с объектами, выполняющий роль фона для верхнего меню, описания преимуществ, call-to-action на запрос консультации и кнопки для перехода в портфолио.
![](https://cases.cmsmagazine.ru/upload/672c090ec7497b51c90e04a9182a3547.png)
- Фотографии и краткое описание объекта, которые сменялись в зависимости от текущего слайда в «карусели».
![](https://cases.cmsmagazine.ru/upload/8224ac8ef6685a0710eaa6e9c5192e44.png)
- Плашка с указанием года основания компании и двух документов.
![](https://cases.cmsmagazine.ru/upload/0b6d8ac65b645112bef0b1de8920c563.png)
- Боковой слайдер, содержащий два полноценных меню:
![](https://cases.cmsmagazine.ru/upload/d14c907d6f5c1fcbbed6c72c6b7f553c.png)
- Так как все проекты бюро не умещаются в одном экране, то перед нами стоял непростой выбор: отказаться от запрета на вертикальную прокрутку, не публиковать часть работ либо использовать горизонтальную прокрутку, пойдя против современных веб-стандартов. В итоге мы остановились на варианте с горизонтальной прокруткой, которая затрагивала не всю страницу, а лишь отдельный блок.
![](https://cases.cmsmagazine.ru/upload/676d00ca57aaf1828ee807acebf7e7cf.png)
- При переходе на карточку объекта перед пользователем открывается небольшой скроллбар, позволяющий уместить в одном окне неограниченное количество фотографий (разумеется, мы пользовались этой возможностью в разумных пределах).
![](https://cases.cmsmagazine.ru/upload/35bd7c7271f91413365e94057d50c326.png)
Код:
- Если упустить стандартные этапы подобные «прикручиванию» дизайна к CMS, то с точки зрения работы с кодом можно выделить два основных момента. Во-первых, необходимость оптимизации скорости загрузки. Клиент обозначил, что не готов мириться с долгой загрузкой страниц, даже несмотря на необходимость размещения фото-контента. Необходимо было использовать средства в рамках front-end и back-end, чтобы сделать страницы «легкими», а также не размещать файлов с большим размером. И, во-вторых, так как концепция не допускала прокрутки страницы вне зависимости от типа устройства и разрешения экрана, нам пришлось существенно сократить содержание некоторых страниц, где-то сведя его до минимума.
![](https://cases.cmsmagazine.ru/upload/df34b7ea383658a0269a31665c420bd7.png)
Что получилось на выходе
Было:
![](https://cases.cmsmagazine.ru/upload/372004cd2cc5da49314a03412b18bb44.png)
Стало:
![](https://cases.cmsmagazine.ru/upload/bea393d38636ab03c15514e564ca4978.png)
Было:
![](https://cases.cmsmagazine.ru/upload/d0ee3be818e37ac8d3a1a15aa9fdec94.png)
Стало:
![](https://cases.cmsmagazine.ru/upload/7d96f7f62645c4e3b7f3ef8fbb01b9bf.png)
Было:
![](https://cases.cmsmagazine.ru/upload/0013116ab175a823026ab0837c0e6c30.png)
Стало:
![](https://cases.cmsmagazine.ru/upload/b3cca0b165710043b87e2940f114fb1a.png)
Клиент, даже несмотря на сложности в согласованиях и затянувшееся обсуждение технической стороны проекта с долгими встречами по Zoom, остался доволен результатом:
«Мы хотели нестандартное решение сайта, стандартный вариант шаблонов Тильда нам не очень подходил. Необходим был дизайн, который максимально бы рассказывал о наших проектах в строгом и лаконичном стиле. Ребята справились с задачей максимально в подходящем для нас стиле. Компания уложилась в оговоренный ранее бюджет.
Теперь мы представлены в сети в более статусном и интересном варианте.
Спасибо за работу! Будем рекомендовать коллегам!»
Врачев А.А. - Генеральный директор ГК «Крафт»
Полный текст отзыва в рекомендательном письме:
![](https://cases.cmsmagazine.ru/upload/0897efc94bc7bc78caf9c553321efaf2.png)
Примечательный факт: работая над данным проектом, мы имели жесткие ограничения по бюджету со стороны заказчика. Фактически мы выполнили весь объем работ по стоимости, которая была ниже стандартной в 2 раза. Соглашаясь на подобные уступки, было четкое понимание того, что мы отказываемся от прибыли, но при этом получаем для портфолио-копилки новую качественную работу. И если судить по данному кейсу, то это решение было правильным (вот он — инсайт!).
Чтобы изучить проект более подробно, переходите на сайт https://gkkraft.ru/. Будем рады ответить на ваши вопросы и поделиться другими кейсами!
Перейти на сайт