Редизайн без потери трафика

Ко мне обратилась владелица нескольких школ в Москве с вопросом редизайна старого сайта. Заказчиков было три: разные ИП, у каждого из которых по несколько школ в Москве и Красногорске. Сайт же – один на все московские школы. Проект предполагал редизайн существующего многостраничного сайта с большим объёмом накопленного контента, сложной структурой и несколькими участниками со стороны заказчика.

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

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

Новый сайт должен был:

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

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

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

Из-за этого со временем накопился ряд типичных проблем:

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

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

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

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

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

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

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

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

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

3. Юридическая сложность
Отдельным пластом шла юридическая часть. Три ИП внутри одного проекта означали сложности не только на этапе договорённостей со мной как с исполнителем, но и на уровне самого сайта.

Нужно было продумать:

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

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

Несмотря на все ограничения, требования к итоговому продукту были высокими и вполне обоснованными.

Заказчику нужен был сайт, который:

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

Сроки тоже были жёсткими: проект нужно было реализовать за два месяца (до Нового года). Это накладывало ограничения на глубину итераций и требовало очень чёткого процесса на всех этапах.

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

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

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

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

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

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

Новый сайт должен был позволять:

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

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

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

• доверия;
• порядка;
• дружелюбия;
• актуальности;
• профессионализма.

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

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

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

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

• предусмотреть отдельные формы и согласия там, где это необходимо;
• развести обязательные документы;
• проработать сценарии обработки персональных данных отдельно для каждого ИП.

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

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

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

На первом этапе я проанализировала старый сайт и весь массив входных данных. В фокусе были:

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

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

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

Анализ конкурентов
Для начала – обязательно нужно было поработать с конкурентами: посмотреть, что они предлагают, выявить их сильные и слабые стороны, подглядеть идеи и подумать, как отстроиться, изучить их сайты. В этом помогает Chat GPT, где я после объяснения ролей и вводных данных по проекту и компании пишу такой промпт:

Ты аналитик рынка и UX-аналитик (но все твои роли также включены для более глубокого подхода к работе). Ты будешь работать над аналитикой для создания сайта языковой школы Еврошкола. Твоя задача — найти прямых конкурентов в нише языковых школ в Москве. Используй функцию поиска, чтобы собрать актуальные ссылки на сайты конкурентов (достаточно 5), которые предлагают схожие услуги. Укажи для каждого конкурента:
–Название компании или бренда.
–Основной сайт или платформу.
–Краткое описание их продукта/услуги.
— Преимущества конкурентов: В чем их сильные стороны? Чем их товар выделяется на рынке? Какие преимущества есть у товара и у компании?
— Слабые стороны конкурентов: В чем заключаются слабые стороны конкурентов? Какие недостатки есть у продукта?
— Собери цены и акции
— Какие идеи могут пригодиться нам?
– Как можно отстроиться от конкурентов?
Выдай данные в таблице
эксель для скачивания

Мы получаем табличку с данными, которую обязательно нужно внимательно изучить и скорректировать. Нельзя полагаться на сервисы ИИ на 100%, они лишь ускоряют нашу работу.

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

Ты эксперт по маркетингу, который создает четкие и эффективные стратегии. Напиши 10 сегментов целевой аудитории для нашей ниши. (наш случай: языковые школы (английский и китайский) в Москве)
Учитывай такие параметры, как возраст, интересы, уровень дохода, поведение, болевые точки и ценности. Сделай это в формате Таблицы, где каждый сегмент будет четко описан. Будь максимально экспертен, профессионален, избегай тавтологий и смысловых повторов.
В школе есть курсы для детей и корпоративных клиентов. Сайт https://euroschool.moscow/
Основное направление – офлайн обучение, онлайн курсы есть, но занимают очень маленькую долю. Приоритета по языкам нет: спроси как на англйиский, так и на китайский высок. Уровень цены средний, не дороже и не дешевле других.
Опиши полный портрет каждого сегмента, включая:
— Демографию
— Поведенческие характеристики
— Ценности и убеждения
— Стиль жизни
— Привычки потребления
– А также Определи 10 болей и проблем, с которыми сталкивается этот сегмент. Опиши возможные причины и последствия каждой проблемы.
Ответ дай в виде таблицы эксель для скачивания. Если требуется, спрашивай уточнения.

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

Теперь составь на основе аналитики боли аудитории:
для дошколят и их родителей,
для детей 7-11 и их родителей ,
для детей 11-15 и их родителей ,
для детей 16-18 и их родителей.
Болей должно быть не менее 10 для каждой аудитории. Также в таблице укажи, в каких случаях ищут языковые курсы. Также напиши, как закрыть эти боли на сайте.
Результат выдай в таблице эксель для скачивания

В рамках каждого отдельного проекта объем аналитики отличается: кому-то нужная полная картина, кому-то достаточно базового среза, а кому-то вообще аналитика не требуется (хотя я не считаю это правильным).

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

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

UX/UI анализ
Проработав маркетинговую сторону, я перешла к анализу UX/UI. Здесь я провожу большой аудит сайтов конкурентов по следующим параметрам:
– Название сайта
– Основные преимущества продукта/услуги (УТП)
– Дополнительные преимущества
– Формы захвата
– Позиционирование (слоган)
– Компания выглядит надежной, заслуживающей доверия?
– За счет какой информации компания выглядит надежной?
– Достаточно сильная аргументация на сайте?
– Возникает желание совершить заказ?
– Какие тезисы и аргументы сподвигают совершить заказ?
– Пользовательский опыт Структура сайта (или состав блоков главной страницы, если это лендинг)
– Интуитивно понятная навигация сайта?
– Легко и быстро найти посетителю нужную информацию?
– Приятный ли дизайн?
– Дизайн современный?
– Есть анимация?
– Какие цвета используются?
– Какие ассоциации вызывает дизайн?
– Контент Был ли контент эффективным и убедительным?
– Текст легко читается?
– Информация интересна пользователю. Она конкретна и без лишней воды?
– Сайт не содержит опечаток, грамматических ошибок и плохо написанного контента?
– Техническая реализация Сайт быстро загружается?
– Сайт адаптивен, имеет мобильную версию сайта?
– Были ошибки или глюки?
– Есть битые ссылки?
– Маркетинг Наличие акций, скидок, программ лояльности?
– Какая ценовая политика (дорого, дешево, средне)?
– Наличие гарантий?
– Высокое качество продукции, услуги?

В результате у меня получилась большая, объемная таблица. На нее я буду опираться во всей дальнейшей работе.

Анализ ниши
Но UX/UI анализ не ограничивается лишь сайтами конкурентов. Важно знать, что сейчас происходит в нише, какие тренды есть, какие шрифты используются и т.д. Анализ ниши делаю по следующим параметрам:
- наиболее часто применяемый дизайн (по типу)
- трендовые шрифты
- тренды дизайна
- какие эмоции должен вызывать сайт
- что общего у всех этих сайтов
- как можно отстроиться

Анализ эмоции и ассоциаций
В рамках аналитики также важно выделить эмоции и ассоциации, которые должен транслировать сайт. Отдельно 10 эмоций и 10 ассоциаций.
Эмоции для сайта Еврошколы получились такие:

1. Доверие — ребёнок в надёжных руках, педагоги внимательны, всё организовано.
2. Уверенность — родитель чувствует, что ребёнок развивается и получает качественное образование.
3. Тепло — школа вызывает ощущение заботы, поддержки и домашнего уюта.
4. Радость — обучение ассоциируется с позитивом, улыбками, яркими впечатлениями.
5. Спокойствие — безопасная среда, всё продумано, ребёнок под присмотром.
6. Гордость — родители и дети чувствуют, что растут, преодолевают языковой барьер, добиваются успехов.
7. Мотивация — появляется желание учиться, узнавать новое, говорить на иностранном языке.
8. Вдохновение — атмосфера школы заряжает энергией, показывает, что обучение может быть удовольствием.
9. Удовлетворение — результат виден: ребёнок говорит, понимает, интересуется языком.
10. Привязанность — дети не хотят уходить, родители возвращаются, возникает эмоциональная лояльность.

А ассоциации:

1. Надёжность — 20+ лет опыта, лицензия, проверенная репутация.
2. Профессионализм — квалифицированные педагоги, методики Cambridge и HSK.
3. Развитие — язык как инструмент роста и уверенности в себе.
4. Современность — актуальные материалы, международные стандарты, комфортные классы.
5. Атмосфера — уют, улыбки, поддержка, внимание к каждому ребёнку.
6. Эффективность — системные результаты, реальные успехи учеников.
7. Честность — прозрачные условия, понятные цены, открытая коммуникация.
8. Культура — уважение к языку, традициям, воспитание вкуса и интереса к миру.
9. Дружелюбие — ощущение общности и участия, школа как вторая семья.
10. Позитивное будущее — уверенность, что обучение здесь даст ребёнку реальную опору и перспективу.

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

Для ключевых страниц я прорабатывала:

• структуру блоков;
• иерархию информации;
• смысловые акценты;
• тексты для основных экранов;
• логику переходов;
• подачу направлений и преимуществ;
• аргументацию для родителей и других сегментов аудитории.

Работа через текстовые прототипы позволила:

• заранее увидеть перегруженные зоны;
• отделить важное от второстепенного;
• унифицировать подачу разных направлений;
• подготовить качественную основу для дизайна.

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

Также я старалась учесть ключевые запросы и органично вписать их в тексты на сайте.

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

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

• фирменную узнаваемость;
• современность;
• удобство восприятия;
• лёгкость для пользователя;
• визуальную дисциплину на большом количестве страниц.

Визуальная система строилась на:

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

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

Подбор референсов

Работа над визуальной частью всегда начинается с подбора референсов. Референсы – это не просто красивые картинки из интернета. Это инструмент анализа и коммуникации, который помогает сформировать визуальное направление будущего проекта и согласовать его с заказчиком ещё до начала полноценной разработки дизайна.

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

Подбор референсов помогает решить сразу несколько задач.

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

Во-вторых, референсы позволяют зафиксировать стиль ещё до этапа непосредственного дизайна. Это существенно снижает риск ситуации, когда готовый дизайн оказывается «не тем, что ожидал заказчик».

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

Что именно анализируется в референсах

При подборе референсов важно смотреть не только на внешний вид страниц, но и на то, какие решения лежат в основе дизайна.

Я анализировала:

• структуру главных экранов;
• способы подачи образовательных программ;
• визуальную иерархию информации;
• типографику;
• цветовые акценты;
• композицию карточек и блоков;
• баланс между текстом и визуалом;
• общее ощущение от интерфейса.

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

Визуальные приемы

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

Так мы выбирали цвета и определялись с палитрой

А это эмоции и ассоциации и то, как передать их через сайт. Также тут видна часть мудборда.

Собирала референсы как отдельных сайтов

Так и для отдельных блоков

Что это дало проекту

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

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

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

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

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

Если прототип отвечает на вопрос «как работает сайт», то визуальная концепция отвечает на вопрос «как он воспринимается».

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

Задача визуальной концепции
В рамках проекта визуальная концепция должна была решить несколько задач:

• обновить устаревший внешний вид сайта;
• сохранить узнаваемость бренда;
• сделать интерфейс лёгким и современным;
• создать визуальную систему, которая будет актуальна несколько лет;
• упростить восприятие большого объёма информации.

Отдельно важно было не уйти в типовой дизайн языковых школ. Многие сайты в этой нише выглядят одинаково: определенные цвета (синий, голубой, фиолетовый и ряд других), перегруженные страницы, большое количество декоративных элементов. Нам же нужно было отстроиться от стандартных приемов, но при этом сохранить ассоциацию с языковыми школами. Поэтому я оставила закругленные углы, которые привычки в нише детских школ, потому что создают атмосферу доброты, мягкости и дружелюбия. А вот отстроиться нам помог фирменный красный: только мы выбрали немного другие оттенки, которые хорошо смотрелись в вебе. Единцы школ использую на своих сайтах красный.

Формирование визуального языка
Основой визуальной концепции стали несколько принципов.

1. Во-первых, светлая и чистая композиция страниц. Белый фон и свободное пространство помогают пользователю легче воспринимать информацию и не перегружают интерфейс.
2. Во-вторых, аккуратная типографика. Чёткая иерархия заголовков, подзаголовков и текста позволила структурировать большой объём контента.
3. В-третьих, использование фирменных цветов. Красный цвет бренда был сохранён, но его оттенки были немного скорректированы, чтобы интерфейс выглядел более современно и спокойнее воспринимался на больших страницах.
4. В-четвёртых, работа с карточками, списками и другими приёмами, которые помогают распределять контент на сайте структурно и понятно для читателя. Такой формат помогает разбивать информацию на логические фрагменты и облегчает навигацию по страницам.

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

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

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

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

Такой подход позволил:

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

Адаптация под мобильные устройства
Ещё одним отличием от стандартного процесса стало то, что мобильные версии страниц не отрисовывались отдельными макетами. После согласования десктопной версии заказчики доверили мне адаптацию сайта. Я сразу реализовывала мобильные версии непосредственно в Тильде, где можно было видеть, как элементы ведут себя в реальной среде.

Это решение оказалось особенно эффективным, потому что позволяло сразу проверять:

• как перестраиваются блоки;
• как ведёт себя текст;
• насколько удобно взаимодействовать с интерфейсом на мобильном устройстве.

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

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

После утверждения дизайна проект перешёл в этап сборки и настройки. На этом этапе были реализованы:

• адаптивная верстка;
• формы обратной связи (для кадой школы – своя форма);
• сложные контактные разделы;
• блоки с раскрывающимися списками;
• анимация;
• дополнительные скрипты;
• карта и переключение между филиалами;
• юридические страницы и обязательные документы.

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

Посмотреть сайт можно по ссылке https://euroschool.moscow/

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

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

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

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