Взрываем рынок новым сайтом без ТЗ

Это кейс о процессах, которые мы пережили за 7 месяцев. Сайт без ТЗ, позиционирование, которое надо было угадать, 2 прототипа и 2 дизайн-концепции, чтобы наконец обновить сайт спустя 3 года!

MIKHAILOV studio — это про сайты, брендинг и дизайн-поддержку для тех, кто играет в долгую. Мы не только про красивые кнопки и картинки, а про то, чтобы в дизайне был смысл, а в смысле — результат.

В 2020 Федор и Татьяна основали студию и превратили дуэт фрилансеров в полноценную студию. Спустя два года у Федора появилась идея сделать сайт с двумя версиями: для дизайнеров и для заказчиков, по-разному проработав UX и UI. Тогда проект попал в тренды, но за три года все изменилось.

UX устарел, лендинг перестал передавать масштаб, услуг стало больше, а ограничение «делаем на Тильде» нам уже мешало. Пришло время создать новый сайт — сложнее, амбициознее и про нас «сегодня».

За 2 года мы пытались разработать его несколько раз, но ни одна версия не вызвала отклика. Старый логотип честно отслужил три года: светился в презентациях, кейсах и подвалах сайтов.

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

В итоге мы решились на ещё одну попытку. Собрали критерии: лаконичность, понятность, реверсивность (чтобы одинаково читался и на темном, и на светлом) и отражение характера студии.

Экспериментировали с формами буквы «М» — искали простую, но характерную. Финальный вариант родился ночью перед дедлайном: 4 прямоугольника, два из которых искажаются и собираются в монолитную «М».

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

До 2025 года мы разрабатывали сайты только на Tilda, и старый сайт был адаптирован именно под нее. Студия выросла: появились новые услуги — брендинг, фирменный стиль, разработка на Bitrix, WordPress и других платформах. Значит, предыдущие смыслы и визуал устарели, все требовало кардинальных изменений. К тому, что было не так со старым сайтом.

Сайт был сверстан в формате Windows-контейнера

— это резиновая верстка на Tilda, где элементы при любом размере экрана располагаются строго в определенных пропорциях относительно других элементов. Раньше это считалось модным решением, потому что сайт выглядел «почти как на коде».

На практике же это оказалось неудобно. Такая верстка смотрится хорошо на больших экранах, но редактировать контент в ней сложно, особенно новому человеку в проекте. Элементы вылезают за рабочую область, некоторые блоки ведут себя непредсказуемо.

Все это отнимало время и мешало быстро обновлять контент на сайте. Проекты и новости устарели, кейсы — тоже. А разбираться в этом никто не хотел, потому что все понимали: «Все равно скоро будем переделывать».

Не по UI

Были и странные решения, которые мешали пользователю. В блоке «Этапы работ» названия располагались по диагонали, а подробности всплывали в другом углу экрана. Текст нельзя было скопировать, чтобы, например, отправить ЛПР для ясности процессов в нашей студии.

Одностраничный сайт стал тесным

Плюс ко всему — это был лендинг. А для нашей студии с десятками проектов, собственными событиями и статьями такого формата стало откровенно мало. Тем более, что многостраничные сайты эффективнее для SEO-продвижения.

Время идет, тренды меняются

Любой сайт в digital живет 2-3 года, затем либо морально устаревает, либо перестает отражать уровень компании. Наш собственный сайт — отражение того, что мы умеем.

Пора было запускать новый проект, который покажет все, чем мы живем сейчас: расширенные услуги, новый стек технологий, активность в медиа-пространстве и уровень текущих проектов.

Федор поставил задачу: сделать сайт, который будет интересным, возьмет дизайнерские награды и отразит обновленное позиционирование студии.

Начали с анализа рынка. Собрали таблицу: включили студии, за которыми следим, и проекты, которые получали крупные digital-награды.

Для нас это был первый опыт разработки сайта студии — важно было понять, на что ориентироваться. Критерии при анализе были такие:

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

Чтобы упростить работу, создали отдельный фрейм с черновыми текстами: там собрали УТП от Федора, идеи от чата GPT и выдержки из сайтов конкурентов. Это позволило быстро освежить память при написании текстов, чтобы отстроиться от коллег.

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

Мы собрали на одну страницу слишком много всего: УТП, проекты, награды, процессы, услуги. Прототип перегрузился, а структура выглядела тяжелой и негибкой.

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

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

Этот подход оказался двойственным: с одной стороны, не ограничивал креатив, с другой — создавал хаос, потому что процессы шли параллельно: пока дизайн главной верстался, тексты на внутренние страницы еще писались.

К этапу дизайна мы пришли без ТЗ, но с подборкой референсов от Федора — все по стилистике разные. Нужно было показать рост студии, отразить новые услуги, попасть в актуальные тренды.

Первая версия получилась неплохой: Федор и Татьяна одобрили, главную страницу даже сверстали. Но спустя время приоритеты и взгляды на сайт изменились. Федор сказал: «Не хватает жизни», Татьяне все нравилось, а дизайнер уже сомневалась.

В чем именно боль, стало понятно только после второй версии. Чтобы не тянуть, сразу расскажем про концепцию первой итерации и что пошло не так.

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

Блок кейсов изначально задумывался с намерением показать как можно больше, и получилось 7 проектов на 1,5 экрана. Визуально тяжело, информации много, пользователь теряется. Позже перешли к сетке с 1–2 кейсами на экран — так считывать проще.

В блоке «Ниши, с которыми мы успели поработать» центральным элементом был анимированный шоурил, цель которого — привлекать внимание. Позже этот шоурил перешел на первый экран. Добавили крупный типографический заголовок и темный фон, чтобы добавить контрастности.

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

В услугах экспериментировали с графикой по первой букве: «П» для промо, «Б» для брендинга. Но потом от идеи отказались, перенесли услуги в меню.

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

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

Минусы первой версии:

И главный вопрос: а как сделать лучше в дизайне?

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

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

Над этим блоком работали с motion-дизайнером: вместе собирали ТЗ, прописывали сценарий, рассказывали про логику создания логотипа и про смыслы, которые заложили.

Когда концепция уперлась в тупик, случился брейншторм. Так родилась идея бокового меню. Протестировали его на старом макете — и сразу стало ясно, что делать дальше.

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

Первый экран стал самым сложным.

На первом экране — краткое спокойное УТП, контакты, буква «М», шоурил с нашими проектами и блок с основными услугами (дублирует меню на случай, если его пропустят).

Следующий сложный блок — кейсы. В первой версии все было сжато. Во второй расставили приоритеты: сделали акцент на трех проектах — два из них получили Workspace Digital Awards.

Добавили анимацию по горизонтальному скроллу. Теперь блок легко обновляется: можно быстро менять проекты на актуальные.

Дальше — привычный пользователю блок кейсов плиткой: по 2 кейса на экран, при наведении изображение увеличивается.

Если хочется больше — кнопка «150+ проектов» с анимированной стрелкой ведет к общей странице кейсов. Там — фильтрация по категориям, в будущем добавим фильтр по сферам. При клике проект ведет на сайт заказчика, позже — на полноценный кейс.

Блок «Ниши, с которыми мы работали» во второй версии изменился. Раньше текст был слишком мелким, а сферы — та часть опыта, на которую заказчики обращают внимание в первую очередь. Теперь сферы написаны крупнее, показываются с анимацией и акцентируются цветом при прокрутке.

Блок «Креативный digital, коммерческий веб» по смысловой части оставили прежним, но добавили анимацию. Теперь 2 части располагаются не вертикально, а горизонтально относительно друг друга.

Блок новостей модернизировали: появился крупный заголовок, который обращает на себя внимание. Увеличили отступы между новостями, чтобы контент успевал считываться. Линейные статьи остались как в первой версии.

Форму отправки сделали заметнее: добавили шоурил, контрастный фон, выделили название студии. Теперь пропустить ее сложно.

Сайт сделали зацикленным: футер повторяет первый экран.

На сайте есть направляющая линия, заданная с первого экрана. По ней выстроено много блоков. Это визуально собирает нестандартные решения в единую систему.

Весь текст на сайте написан Caps Lock — это добавляет единства стилю.

Для заголовков выбрали «Druk Text» в начертании «Medium» — массивный, акцентный шрифт. Он идеально сочетается с монументальным логотипом и подходит под нашу стилистику. Используем его там, где нужно привлечь внимание.

Для основного текста — «IBM Plex Sans»: современный, технологичный, между гротеском и моноширинным шрифтом. Легко читается, подходит под специфику IT.

Цветовая палитра монохромная: светло-серый и черный цвета. Проблему нехватки акцентов решили за счет мокапов, анимаций и шоурилов. Без цветовой пестроты, потому что главное внимание — на проекты.

Стилистика главной страницы была готова, и во внутренних страницах мы отталкивались от нее. Отрисовали пример страницы «Промо-сайты» — с блоками проектов, отличий, принципов работы, этапов разработки и т. д.

Согласовали ее и создали Google-файл, в котором уже физически не хватает места. Татьяна по аналогии с этой страницей написала тексты для остальных, отталкиваясь от структуры.

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

Работа шла перекрестно: пока один дизайнер отрисовывал недостающие блоки, другой занимался адаптивами. Одновременно мы могли обсуждать по 3–4 внутренних страницы.

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

Если у вас возникает вопрос «почему так сумбурно?», сразу отвечаем: в кейсе мы еще хоть как-то все упорядочили, но по факту разработка сайта велась вместе с коммерческими проектами, и приоритеты смещались.

Добавьте сюда государственные праздники, простуды, подготовку мероприятий — и из «сделаем сайт в январе, пока коммерции мало» проект растянулся на 7 месяцев.

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

Почему сразу не делали все прототипы внутренних страниц:

— без понимания дизайна сложно прописать тексты: сайт полуимиджевый, стандартной разметки нет, все зависит от визуала;

— готовить полноценные прототипы на все 12 страниц сильно бы растянуло сроки.

И на самом деле нам не нужны были красивые прототипы с подложками и квадратиками — важен был сам контент. Поэтому для внутренних страниц сработал старый добрый Google-документ.

* На коммерческих проектах мы, конечно, так не работаем.

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

В 1 блоке пользователя встречает крупный заголовок, описание, ориентировочная стоимость и кнопка для просчета. Где-то — обычные формы, где-то — квизы.

Дальше идут блоки-описания:

Позже, по клику на этап, планируем добавить видео на 1–2 минуты с объяснением процесса и примерами. Это нужно, чтобы показать наш подход и опыт.

Следом — блок «Какой сайт вам необходим?»: под каждую категорию — примеры работ с яркими картинками и описанием.

Блок «Ответы на вопросы» обычно делается стандартными блоками Тильды, но из-за бокового меню возникла проблема со смещением. Стандартный блок его не выдерживал, поэтому все реализовали на zero-блоках. Это добавило работы, но меню того стоит — мы в него влюбились.

На странице «Разработка сложных сервисов» расширили блок «Процесс разработки» — этапов здесь больше. Появился блок с технологиями, чтобы показать наш стек.

Страница «Логотип и фирменный стиль» сильно отличается от типовых страниц услуг. Здесь появились:

На странице новостей столкнулись с такой же проблемой смещения. Вручную писали код, чтобы страница корректно отображалась с боковым меню и перекрывала его там, где надо, с помощью z-index.

Так как мы делали сайт на Тильде (а она не всегда дает верстать как планировали), приходилось изобретать обходные пути, чтобы воплотить задуманное и при этом сохранить работу стандартного функционала.

Страница «404» получилась креативной: мы добавили туда шоурил с проектами, который был на главной, но сделали шоурил сломанным. Верим, что пользователь туда не попадет, но если попадет — то не разочаруется.

Некоторые страницы пока в разработке. Вместо готового контента там стоят заглушки с юмором: «Ещё чуть-чуть, и она оживёт. Работаем не покладая мышек».

Мы очень хотели запуститься — все-таки сайт делали 7 (!!) месяцев — и понимали: если будем ждать, пока доделаем все задуманное, запуск так и не случится.

Мы не просто сделали новый сайт — мы росли прямо в процессе разработки сайта MIKHAILOV studio. Если помните, в начале разработки поменялись ценности, а новое позиционирование только начинало собираться. Мы приложили руку к тому, что вы видите сейчас: сайт, который отстраивает по подаче от конкурентов и транслирует ценности студии.

Мы отказались от устаревшего лендинга, ушли от Windows-контейнера на более комфортный формат верстки и создали многостраничный сайт с динамичным контентом и понятной структурой.

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

Мы переработали айдентику и усилили имиджевую сторону. Добавили гибкую сетку для разных типов контента, исправили неудобные моменты старого сайта и оптимизировали структуру под SEO и масштабирование.

В итоге получили сайт, который:

И да — сделали это без ТЗ. По ходу процесса собирали новые ориентиры и правки, тестировали решения и запустились не тогда, когда «все полностью доделано», а когда уже пора. Все-таки сайт вместо 2 месяцев разрабатывался целых 7.