Многостраничный сайт на Тильде для международного архитектурного бюро МЛА+
Архитекторы строят города, а мы — их сайты. В этом кейсе разберём, как мы шаг за шагом создавали современный, адаптивный и удобный инструмент, который легко обновляется, продвигается в поиске и помогает бизнесу развиваться.
Архитектура
Проектирование
B2B & B2G
2024
Екатерина Комарова Арт-директор,
co-founder студии
co-founder студии
У нас прозрачный процесс разработки сайтов — показываем промежуточные результаты, предлагаем решения в рамках вашего бюджета, контролируем дедлайны и закрываем проекты раньше сроков.
MLA+ — международное архитектурное бюро, создающее города будущего. Старый сайт безнадёжно устарел и не соответствовал статусу компании. В цифровом пространстве отставал от конкурентов и терял свою эффективность. Менять контент было сложнее, чем согласовывать план реконструкции центра Москвы
О проекте
30 рабочих дней
#madeontilda
Ссылка на проект
Проблемы старого сайта
Любые обновления требовали участия разработчиков, так как сайт был на кастомной CMS. Добавить новый проект? Боль. Обновить информацию? Нужно писать разрабу ТЗ.
Сложное меню, нет адаптации под мобильные устройства, нереально найти кейсы, потеря информации и пользователей. Старый формат — несистемный и бесструктурный, а дизайн стихийный, сделанный на скорую руку.
Старый сайт не имел SEO-настроек и просто "не существовал" для поисковых систем. Заказчики не могли его найти даже по своим брендовым запросам.
Заказчику требовался удобный стильный сайт, который можно редактировать силами компании без затрат на сторонних специалистов.
Сложное меню, нет адаптации под мобильные устройства, нереально найти кейсы, потеря информации и пользователей. Старый формат — несистемный и бесструктурный, а дизайн стихийный, сделанный на скорую руку.
Старый сайт не имел SEO-настроек и просто "не существовал" для поисковых систем. Заказчики не могли его найти даже по своим брендовым запросам.
Заказчику требовался удобный стильный сайт, который можно редактировать силами компании без затрат на сторонних специалистов.
Старая версия сайта МЛА+
Срок разработки
Награды
Перед разработкой мы провели серию встреч с командой МЛА+, где детально обсудили проект и выделили основные задачи и цели будущего сайта
Задачи и цели
Сайт, которым можно управлять самостоятельно — вся работа с контентом должна выполняться силами команды МЛА+, без привлечения разработчиков.
Стильный, минималистичный и удобный интерфейс, акцент на швейцарскую школу дизайна, типографику, "воздух" в дизайне и крупные визуальные акценты.
Оптимизировать сайт под поисковые системы. Настроить базовое SEO, прописать мета-теги, создать понятную структуру страниц, чтобы сайт наконец появился в поисковой выдаче, проставить хлебные крошки.
Обучить команду работе с платформой. Провести обучение, чтобы сотрудники могли легко вносить изменения и наполнять сайт без дополнительных затрат на поддержку.
Стильный, минималистичный и удобный интерфейс, акцент на швейцарскую школу дизайна, типографику, "воздух" в дизайне и крупные визуальные акценты.
Оптимизировать сайт под поисковые системы. Настроить базовое SEO, прописать мета-теги, создать понятную структуру страниц, чтобы сайт наконец появился в поисковой выдаче, проставить хлебные крошки.
Обучить команду работе с платформой. Провести обучение, чтобы сотрудники могли легко вносить изменения и наполнять сайт без дополнительных затрат на поддержку.
Карта будущего сайта
Вместе с командой заказчика распределили информацию по уровням, выделив удобный доступ к основным разделам: направлениям работы, проектам, информации о компании и новостям
Важно было чётко разделить направления работы, сделать удобную систему фильтрации, чтобы B2B и B2G заказчики могли быстро находить нужные решения.
Архитектурные проекты требуют не просто галереи изображений, а детального описания с цифрами, схемами и фильтрацией по категориям.
Визуальный стиль — строгий, минималистичный дизайн в швейцарском стиле с акцентом на архитектурные проекты и типографику без лишнего визуального шума.
Дополнительно мы провели анализ сайтов ведущих архитектурных бюро, чтобы выявить работающие и неудачные решения: во многих проектах навигация была запутанной, а проекты сводились к галереям изображений без текстового описания, деталей и цифр. В результате пользователи не могли получить полное представление о компании и её экспертизе.
Некоторые сайты перегружены текстом, где важные данные теряются среди рендеров, другие, наоборот, показывают проекты минимально — одно изображение и пара строк без деталей. Мы искали баланс между визуальной эстетикой и удобством взаимодействия. Наш приоритет — понятная навигация, где всё нужное находится за 1−2 действия.
После этого у нас сложилась чёткая картина будущего сайта — можно было переходить к проектированию и созданию интерактивного прототипа.
Архитектурные проекты требуют не просто галереи изображений, а детального описания с цифрами, схемами и фильтрацией по категориям.
Визуальный стиль — строгий, минималистичный дизайн в швейцарском стиле с акцентом на архитектурные проекты и типографику без лишнего визуального шума.
Дополнительно мы провели анализ сайтов ведущих архитектурных бюро, чтобы выявить работающие и неудачные решения: во многих проектах навигация была запутанной, а проекты сводились к галереям изображений без текстового описания, деталей и цифр. В результате пользователи не могли получить полное представление о компании и её экспертизе.
Некоторые сайты перегружены текстом, где важные данные теряются среди рендеров, другие, наоборот, показывают проекты минимально — одно изображение и пара строк без деталей. Мы искали баланс между визуальной эстетикой и удобством взаимодействия. Наш приоритет — понятная навигация, где всё нужное находится за 1−2 действия.
После этого у нас сложилась чёткая картина будущего сайта — можно было переходить к проектированию и созданию интерактивного прототипа.
Прототип — чёрно-белая схема сайта без графики и финального дизайна, но с чёткой логикой. Его задача — проверить удобство навигации, отработать сценарии взаимодействия и выстроить понятную структуру всех страниц
Этап прототипирования
Фрагмент главной страницы
Страница «Проекты»
В прототипе мы схематично показываем иерархию смысловых блоков и их наполнение: тексты и кнопки CTA разнесены, изображения и видео обозначены серыми блоками.
Такой подход делает структуру понятной и помогает минимизировать правки на следующих этапах. Мы заранее зафиксировали всю логику, тексты, видео и ключевые элементы взаимодействия.
Прототип был полностью кликабельным — команда МЛА+ могла пройтись по нему, проверить, на сколько логично выстроены разделы, и протестировать механику взаимодействия. После обратной связи мы внесли корректировки и приступили к финальному дизайну.
Такой подход делает структуру понятной и помогает минимизировать правки на следующих этапах. Мы заранее зафиксировали всю логику, тексты, видео и ключевые элементы взаимодействия.
Прототип был полностью кликабельным — команда МЛА+ могла пройтись по нему, проверить, на сколько логично выстроены разделы, и протестировать механику взаимодействия. После обратной связи мы внесли корректировки и приступили к финальному дизайну.
Этап подбора референсов
Собрали визуальные референсы, разобрали все решения, что помогает минимизировать правки на этапе дизайна и позволяет попасть в ожидания заказчика.
Далее записали видеопрезентацию и отправили клиенту для обратной связи.
При сборе референсов ориентировались на крупные изображения, чистую верстку и типографику. Искали баланс между визуальной подачей и удобочитаемостью. Подумали над затемнением фото для контраста, минималистичное размещение логотипа, ритм в макете. Обсуждали, нужны ли фирменные цвета в кнопках и акцентах или будем работать с монохромом.
Позаботились о футере — современные сайты делают подвал содержательным, мы проработали варианты с картой, контактами и цветовыми акцентами. Также предложили затемнение фото или минималистичную плашку с текстом и градиентные акценты, крупные карточки, наложение экранов, динамичную подачу, черно-белые логотипы, чтобы избежать цветовой перегруженности.
Позаботились о футере — современные сайты делают подвал содержательным, мы проработали варианты с картой, контактами и цветовыми акцентами. Также предложили затемнение фото или минималистичную плашку с текстом и градиентные акценты, крупные карточки, наложение экранов, динамичную подачу, черно-белые логотипы, чтобы избежать цветовой перегруженности.
Работали с чистым, минималистичным стилем, где каждый элемент усиливает восприятие контента. Крупные изображения, динамика разрывов линий и аккуратное наложение блоков создают ритм, но не перегружают экран. Получилось цифровое пространство, которое подчёркивает профессионализм и экспертизу MLA+
Этап дизайна
Работа с сеткой
Страница-шаблон «Проект»
Команда
Визуальный язык строится на типографике и ритме. Мы чередуем контрастные размеры шрифтов, создавая игру визуальных акцентов и удерживая внимание на ключевых сообщениях.
Добавили акцентный розовый в ссылки и фактоиды — оживляет макет, но не выбивается из общей строгости. Интегрировали фирменные элементы MLA+, встроив плюсик из логотипа в макет как часть композиции.
Фотографии команды в чёрно-белом — стильное визуальное решение, которое добавляет статусности. Лаконичные, но плавные анимации и переходы — чтобы взаимодействие с сайтом было интуитивным и приятным.
Продуманные CTA — выделены так, чтобы пользователи сразу понимали, куда кликнуть и как связаться с компанией. Дизайн получился динамичным, строгим, аккуратным, живым. Всё, чтобы пользователю было удобно смотреть, читать, изучать и делать выбор в пользу MLA+.
Добавили акцентный розовый в ссылки и фактоиды — оживляет макет, но не выбивается из общей строгости. Интегрировали фирменные элементы MLA+, встроив плюсик из логотипа в макет как часть композиции.
Фотографии команды в чёрно-белом — стильное визуальное решение, которое добавляет статусности. Лаконичные, но плавные анимации и переходы — чтобы взаимодействие с сайтом было интуитивным и приятным.
Продуманные CTA — выделены так, чтобы пользователи сразу понимали, куда кликнуть и как связаться с компанией. Дизайн получился динамичным, строгим, аккуратным, живым. Всё, чтобы пользователю было удобно смотреть, читать, изучать и делать выбор в пользу MLA+.
Перед запуском мы провели полное тестирование: проверили работу сайта на всех разрешениях и устройствах и отправку заявок на корректность их обработки. Перепроверили скорость загрузки страниц, анимацию и работу всех интерактивных элементов.
После финального согласования дизайна и отрисовки адаптивных версий мы перешли к верстке на Tilda
Верстка на Tilda, SEO-оптимизация и финальные тесты
Адаптация дизайна
Оптимизировали изображения, чтобы страницы загружались моментально. Сверстали адаптивы — сайт визуально отлично смотрится на всех устройствах.
Кастомизировали стандартные блоки Tilda кодом, чтобы они соответствовали дизайн-концепции. Настроили анимацию и ховер-эффекты, чтобы сайт был отзывчивым для удобного взаимодействия.
Провели базовую SEO-оптимизацию: настроили заголовки H1, H2, прописали мета-теги title и description, добавили alt-теги к изображениям. Подключили формы заявок — теперь все обращения моментально попадают в Telegram bot, СRМ и на почту.
Сверстали шаблоны для новых кейсов и новостей, чтобы команда MLA+ могла самостоятельно добавлять проекты и новые статьи без привлечения сторонних специалистов.
Кастомизировали стандартные блоки Tilda кодом, чтобы они соответствовали дизайн-концепции. Настроили анимацию и ховер-эффекты, чтобы сайт был отзывчивым для удобного взаимодействия.
Провели базовую SEO-оптимизацию: настроили заголовки H1, H2, прописали мета-теги title и description, добавили alt-теги к изображениям. Подключили формы заявок — теперь все обращения моментально попадают в Telegram bot, СRМ и на почту.
Сверстали шаблоны для новых кейсов и новостей, чтобы команда MLA+ могла самостоятельно добавлять проекты и новые статьи без привлечения сторонних специалистов.
Нажимая на кнопку «Отправить», вы соглашаетесь с положениями Политики конфиденциальности
Руководитель проектов «МЛА+»
Валерия Юдина
Сотрудничество — партнерство, где обе стороны заинтересованы в результате. Свяжитесь с нами для обсуждения проекта — оставьте заявку на сайте или напишите в удобный для вас мессенджер.
Теперь команда MLA+ полностью контролирует контент: самостоятельно добавляет новые проекты, обновляет состав команды, публикует новости и статьи — без необходимости обращаться к разработчикам
Достигнутые результаты и отзыв
У нас к Екатерине была задача сделать стильный, минималистичный сайт для архбюро с хорошей структурой и лаконичным визуалом — и результат вышел отличным! Еще нам очень понравился процесс, все было четко, организованно и понятно, без каких-либо проволочек. Кроме того, мы как архитекторы-перфекционисты, не можем не оценить со стороны Екатерины степень внимания и реагирования на все наши запросы, корректировки и мелкую детализацию, спасибо большое за это:) и еще действительно очень ценно, что после окончания работы есть возможность консультаций, вопросов и помощи по ведению и наполнению сайта.
После проведённой SEO-оптимизации сайт MLA+ занял позиции в топе поисковых систем по брендовым запросам, что привело к притоку новых заказчиков и партнёров. Скорость загрузки страниц увеличилась в 2 раза, время пребывания пользователей на сайте + 35%, а количество отказов снизилось на 50% — теперь контент удобнее, понятнее и вовлекает аудиторию.
Это больше не просто цифровая визитка, а рабочий инструмент: удобный, адаптивный, с понятной навигацией и информативными кейсами. Сайт помогает выделяться среди конкурентов, выстраивать доверие с клиентами и упрощает внутренние процессы работы с контентом.
Это больше не просто цифровая визитка, а рабочий инструмент: удобный, адаптивный, с понятной навигацией и информативными кейсами. Сайт помогает выделяться среди конкурентов, выстраивать доверие с клиентами и упрощает внутренние процессы работы с контентом.
“
Екатерина Комарова
Арт-дир, co-founder
Задаю творческий вектор, отвечаю за общий визуальный стиль проектов, контролирую дедлайны и веду переговоры
Задаю творческий вектор, отвечаю за общий визуальный стиль проектов, контролирую дедлайны и веду переговоры
Сергей Комаров
CVO&UX, co-founder
Проектирую интерфейсы, отвечаю за логику и структуру, контролирую техническую реализацию проектов
Проектирую интерфейсы, отвечаю за логику и структуру, контролирую техническую реализацию проектов
5+
специалистов в команде
Сайт для МЛА+ был реализован за 30 рабочих дней. Над проектом работала часть команды: UX-дизайнер, веб-дизайнер, арт-директор, верстальщик, разработчик
Команда
Больше кейсов и экспертных статей от нашей команды читайте на популярных медиаплатформах для дизайнеров и бизнеса:
Полезные материалы и кейсы студии komarovaeee
Рекомендуем
Узнать о нас больше, следить за развитием студии можно в нашем уютном telegram-канале: