Cайт для школы Webflow Tutor

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

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

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

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

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

• Утонченный дизайн. Результаты предварительного опроса наших учеников подтвердили, что наши клиенты уделяют значительное внимание внешнему виду ресурса школы, в которой они планируют учиться. Поэтому мы поставили перед собой задачу создать дизайн, который бы вызывал сдержанное доверие, демонстрировал бы наш опыт и лидерство на рынке образовательных услуг Webflow. Каждая деталь должна была подчеркнуть премиальность нашего продукта и оставить приятное впечатление
• Адаптация для планшетов и мобильных устройств. В современном мире большинство пользователей заходят на сайты с мобильных устройств. Поэтому мы уделили особое внимание полной оптимизации сайта для всех типов гаджетов. Будь то смартфон, планшет или ноутбук, наш сайт должен был выглядеть идеально и работать безупречно
• Поддержка и масштабирование. Поскольку наша школа постоянно развивается, мы часто меняем контент, добавляем новые курсы и создаем страницы продуктов. Поэтому сайт должен был быть гибким и легко масштабируемым. Мы предоставили возможность быстрого редактирования и добавления новых элементов без необходимости привлечения разработчиков
• CMS и фильтрация контента. Наша образовательная деятельность включает регулярное написание статей, которые являются важной частью нашего контента. Нам нужно было создать удобный интерфейс для фильтрации статей по категориям, темам или другим параметрам. Кроме того, архитектуру динамической страницы отдельной статьи нужно было продумать до мелочей, включая возможность делиться материалом в социальных сетях
• Изысканная анимация. Мы стремились создать идеальные сценарии анимации, которые подчеркивали бы изысканность нашего сайта. Интерактив должен был быть ненавязчивым, но в то же время запоминающимся. Анимация должна была гармонично дополнять пользовательский опыт, не перегружая его, а добавляя в моменты взаимодействия элемент «вау-эффекта»
• Автоматизация. Школа регулярно получает запросы на обратную связь, вопросы от потенциальных учеников или предложения о сотрудничестве. Поэтому мы предусмотрели автоматизацию процесса обработки этих запросов. В частности, мы внедрили функцию автоматических уведомлений в мессенджерах, что значительно упрощает общение и экономит время нашей команды

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

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

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

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

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

Кроме того, была создана специальная графика из логотипа Webflow. Это был долгий, но интересный процесс

• Генерация изображений. С помощью Adobe Firefly мы создали уникальные изображения на основе логотипа Webflow.
• Генерация видео. С помощью Runway мы превратили эти изображения в видеоролики. После этого созданные видеоролики были увеличены (увеличены) в соответствии с требованиями размера сайта
• Lottie из PNG-сиквенций. После этого мы преобразовали каждое видео в PNG-секвенции, чтобы создать из них lottie (json) файлы. Благодаря этому формату в будущем мы могли управлять файлом с помощью любого триггера. В нашем случае триггером стала прокрутка страницы

Ниже вы можете увидеть примеры этапов работы над созданием этой графики

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

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

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

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

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

Мы уделили особое внимание отзывчивости сайта. Были определены ключевые брейкпоинты для разных разрешений десктопа (1366, 1440, 1920, 2560 пикселей) и выбрана резиновая верстка с адаптацией на ключевых брейкпоинтах и фиксацией контейнера от 1460 пикселей. Такой подход обеспечил гибкость дизайна и удобство использования на любом устройстве.

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

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

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

Структура и контентная составляющая

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

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

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

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

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

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

Однако, как и любое визуальное искусство, анимацию лучше увидеть. А еще лучше - взаимодействовать с ними, чем просто читать о них.

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

Мы добились увеличения конверсии, а самое главное — получили еще одного довольного клиента нашей студии. И этим клиентом стали мы сами.