«Слон в шляпе»: доработали фирстиль и собрали сайт к открытию лофта

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

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

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

Что мы сделали

Разработали брендбук

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

Палитра и принципы ее применения

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

Система шрифтов

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

Правила использования логотипа

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

Графические элементы

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

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

Разработали сайт

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

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

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

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

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