• Кейсы

Сайт студии: каково быть в роли заказчика, у которого нет даже ТЗ

Мы, MIKHAILOV studio, уже 5 лет создаем сайты, брендинг и дизайн-поддержку для тех, кто играет вдолгую. Занимаем 13 место из 152-х по России, как лучшие разработчики сайтов для малого и среднего бизнеса по мнению Рейтинга Рунета.

С начала 2025 года мы сильно изменились: раньше занимались разработкой только на Tilda Publishing, сейчас на 1С-Bitrix, WordPress и других CMS. До расширения было много простых проектов, теперь большинство заказчиков из среднего бизнеса. Изменилась подача, качество контента, дизайнеры выросли, а сайт остался прежним.

Все началось с разработки логотипа

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

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

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

Катя, тогда еще старший дизайнер студии, а сейчас арт-директор, в ночь перед дедлайном села за разработку лого! С утра лого был согласован! Два года поиска закончились.

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

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

Проблемы старого сайта

Сайт, как и предыдущий логотип, жил 3 года. Его разрабатывал Федор, основатель студии, который хотел выделиться на рынке. Идея была нова — сделать 2 версии сайта: одну для заказчиков (которой пользовалось 1,5 землекопа из-за незаметного переключателя), другую для дизайнеров.

Сайт получился интересным, решения по UX того времени, модный формат верстки, но за 3 года изменилось многое, и старый сайт выглядел просто неактуально.

Разработку мы начали с проблем старого сайта:

Он был создан по Windows-контейнеру — это когда масштаб экрана изменяется, а элементы остаются такого же размера и фиксируются на любом расширении в строго заданном положении. Для сравнения, в grid-контейнере на больших разрешениях появляются поля.

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

Отсюда вытекает еще 1 проблема: сайт «не живет». На нем расположены очень старые проекты и кейсы, потому что не хватает времени копаться в Windows-контейнере, «все равно будем переделывать сайт».

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

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

Тренды и рынок меняются, сайт живет 2–3 года. Наш их уже прожил и совсем перестал отражать деятельность студии.

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

Конкуренты, ориентиры и поиск смыслов

Для удобства команда составила сводную таблицу конкурентов: добавили тех, за кем следим, а также сайты студий, которые взяли ключевые дизайнерские награды.

На что обращали внимание при анализе:

• какое количество контента размещают на главной и внутренних страницах;

• как распределяют смысловые блоки по всему сайту;

• чем отличается подача.

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

На внутреннем созвоне сравнивали варианты, обсуждали командой и находили смыслы, отличающие нас.

Тексты, структура, 2 прототипа

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

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

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

Откатились назад и начали по-новой: анализ конкурентов, перераспределение информации, прототип 2.0.

Стоит сказать, что сайт студии Катя делала впервые, поэтому для нее эта задача была не из легких. Со 2-ой попытки стала получаться структура многостраничника. Мы начали с 5-ти первых страниц: главная, о нас, кейсы, новости, типовая страница «Промо-сайты», которую мы будем адаптировать под остальные услуги.

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

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

Дизайн, который понравился, а через месяц разонравился

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

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

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

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

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

Минусы первой концепции, если смотреть большими мазками:

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

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

Довольно много оттенков серого, и возникали вопросы: «Нужно ли нам такое количество оттенков? Хотим ли мы вообще, чтобы сайт был серым? Может быть, нужно добавить больше цветовых перебивок?».

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

Были вопросы по улучшению с точки зрения визуала: «А как можно еще?».

В стиле логотипа: финальная дизайн-концепция

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

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

Расскажем про дизайн:

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

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

Идея с боковым меню, которое дает сразу несколько преимуществ:

• всегда на виду все важные ссылки;

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

• на сайте чередуются 2 фоновых цвета: светло-серый и черный. Меню заливается постепенно и создает дополнительную анимацию.

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

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

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

Сделали акцент на 3-х ключевых проектах, которые показываются с помощью анимации по горизонтальному скроллу. 2 из них забрали награды Workspace Digital Awards.Блок динамичный: его можно редактировать и в будущем менять проекты на более актуальные, а значит, сайт будет отражать студию в реальном времени.

Ниже добавили кейсы, которые расположены плиткой. Выбрали оптимальное количество для восприятия: 2 кейса на 1 экран. При наведении на кейс картинка увеличивается, чтобы с сайтом можно было повзаимодействовать.

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

По блоку «Ниши, с которыми мы успели поработать за 5 лет» в первой версии дизайна Федор сказал, что сферы написаны мелко. Во 2 варианте Катя подошла к блоку с размахом!

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

Была идея отразить 2 сущности разработки: креативный digital и коммерческий веб. Мы решили, что обе части должны стоять рядом, потому что не бывает на 100% коммерческих или имиджевых сайтов. 2 ипостаси дизайна расположили относительно друг друга горизонтально и добавили анимацию для плавного погружения в смыслы.

Блок с новостями открывается крупным заголовком. Главные новости расположили плиткой, а оставшиеся показали линейно, как и задумывалось в 1 версии.

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

Напоследок мы решили сделать зацикленный сайт, поэтому подвал повторяет шапку.

Хочется отметить, что на сайте есть направляющая линия, которая задается на 1 экране и по которой выровнено довольно много контента. Плюс в том, что пользователь цепляется взглядом и видит, что на сайте все ровно и чисто, хоть и много нестандартных решений.

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

Почему именно он? «Druk Text» вытянутый, крупный и сам по себе достаточно выразительный. Поскольку у нас монументальный, излучающий уверенность логотип, заголовочный шрифт должен быть под стать.

Для основного текста взяли «IBM Plex Sans» — шрифт на стыке гротеска и моноширинного начертания. Он смотрится современно, технологично и отлично читается.

А чтобы весь сайт смотрелся цельно, весь текст оформлен в Caps Lock. Это добавляет структуру, визуальную чистоту и поддерживает единый стиль.

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

Процесс разработки внутренних страниц

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

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

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

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

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

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

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

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

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

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

И на самом деле, нам не нужны были какие-то красивые прототипы с подложками и квадратиками, нам важен был сам контент, поэтому нам идеально подошел Google-документ.

Дизайн внутренних страниц

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

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

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

Дальше идет основное описание, которое встречается на всех страницах:

• принципы: как мы подходим к разработке проектов;

• этапы работ: нейминг и описание, чтобы план разработки сразу был понятен.

Понимаем, что может возникнуть вопрос: «Описание же снова ускользает, как на старом сайте?», но оно фиксируется на месте, пока вы держите курсор по высоте названия этапа. Информации много, и, расположи мы её на сайте сразу, случился бы перегруз пользователя.

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

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

На странице «Разработка сложных проектов» отрисовали дополнительные блоки:

• этапов разработки в этой услуге больше, поэтому просто расширили блок;

• добавили блок с технологиями, которые мы можем применить, чтобы подсветить наши возможности.

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

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

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

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

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

Результат

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

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

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

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

Подписывайтесь на тг-канал студии

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

Нравится: Клиентская база

MIKHAILOV studio
еще 4 публикации

Лучшее в блогах

27.11.2025

Новости НРФ’9: официальный журнал доступен в цифровом формате

Вчера

Итоги конференции Group4Media «Этот год — следующий год. Искусство эффективности»

Вчера

Кейс UM, Points Lab, АДВ+Эндемика и «Самолет»: как с математической точностью измерить эффективность маркетинга в недвижимости

Вчера

«Сбер, где всё возможно»: банк создал музыкальный HR-манифест

Вам понравится

Convergent

Вчера

Из хаоса данных в понятную стратегию: гайд по изучению аудитории для маркетологов

Кейсы

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

Клиентская база

13.11.2025

От советского БК — до CRM-конструктора Кб: история основателя «Клиентской базы»

Кейсы

Как программирование на советской клавиатуре весом в 5 кг стало основой будущего CRM-конструктора с ИИ? Основатель компании «Клиентская база» Марат Гарифуллин рассказал, как вырастил без рубля инвестиций успешную IT-компанию из комнаты с парой столов. Он поделился своим способом не утонуть в море конкуренции и быть впереди рынка.

АДВ

06.11.2025

ICE-ICE Movie: как Арнест ЮниРусь запустила на рынок мороженое, перевернувшее представление о категории

Кейсы

Команда Арнест ЮниРусь и Initiative (группа АДВ) рассказала, как сформировать новые потребительские привычки в устоявшейся категории, достигнуть роста продаж в 28%, охватить 25 млн пользователей среди целевой аудитории и вырастить поисковые запросы в 4 раза.

Клиентская база

05.11.2025

Они создали CRM под себя и обогнали конкурентов. Ваш ход?

Кейсы

«Клиентская база» — no-code платформа для создания CRM — сделала «Вита-Стандарту» идеальный склад, мгновенные счета и прозрачность вместо Excel-адá.