Имиджевый сайт для дизайн команды UXIS
Предпосылки
Мы познакомились с основателем компании в сфере Webflow образования, где сразу почувствовали общность профессиональных ценностей и подходов. Когда пришло время им обновлять сайт, выбор исполнителя был очевиден — наша студия получила полное доверие. Ведь предыдущий сайт уже не соответствовал масштабам компании.
Обладая мощной экспертизой в области дизайна, клиент самостоятельно создал визуальную концепцию сайта. В Figma мы получили тщательно проработанный макет, дополненный исчерпывающей документацией по техническим требованиям и интерактивным элементам с особым вниманием к сценариям анимации.
ЗОЛОТОЕ ПРАВИЛО УСПЕХА: Залог безупречной реализации проекта — самый подробный бриф. Когда заказчик четко формулирует свои ожидания и предоставляет конкретные рекомендации, это создает прочную основу для реализации самых смелых идей точно в намеченные сроки. На разработку проекта были поставлены четкие сроки — 3 месяца, и мы с энтузиазмом взялись за работу.
Ключевые задачи
webflow
анімація
Услуги:
Webflow Development
Инструменты и технологии:
Figma, Photosop, Webflow, Javascript, GSAP, Splide, Lenis, jQuery
Задание
Клиент поставил перед нами следующие задачи:
- Многостраничный имиджевый проект. Основная задача состояла в том, чтобы создать масштабный имиджевый веб-сайт, где каждый переход между страницами должен воспроизводить плавность и интерактивность одностраничного приложения, создавая безшоывный пользовательский интерфейс.
- Анимация. Ключевое требование проекта — изысканная анимационная составляющая, где каждый элемент интерфейса должен оживать благодаря тщательно продуманным сценариям взаимодействия.
- Прелоадер. Согласно техническому заданию, необходимо разработать элегантный многоступенчатый прелоадер, который превратит ожидание загрузки в увлекательное визуальное путешествие
- Переходы между страницами. Переходы между страницами должны быть дополнены элегантной анимацией заголовков разделов, что придаст сайту особый шарм и улучшит навигацию.
- Звуковые эффекты. Атмосферу сайта должны подкреплять звуковые эффекты с возможностью их активации/деактивации, чтобы пользовательские настройки сохранялись на протяжении всего сеанса.
- Внедрение lottie и svg. Особое внимание заказчик уделил файлам lottie и svg с последующей возможностью их анимации. Это должно гармонично дополнить общую концепцию и добавить сайту динамичности и современности.
Пример подхода клиента к оформлению ТЗ
Решение
Архитектура проекта
Мы начали разработку с проектирования архитектуры. Определили стек технологий для реализации функциональных модулей и выбрали методологию наименования классов. Создали подробный style guide, содержащий все сервисные классы для заголовков, текстовых блоков, кнопок и изображений. Базовые и дополнительные цвета были реализованы с помощью CSS переменных, а тип макета был определен как резиновый, с мобильной адаптацией
Style guide этого проекта
Интересные задания
Внедрение svg сеток
Первым вызовом было интегрировать svg сетки в лейаут страниц. Для каждой страницы требовалась уникальная сетка, которая должна была идеально вписываться в структуру и сохранять целостность при любых расширениях экрана. Нам удалось добиться абсолютной точности визуализации границ между блоками и реализовать плавную анимацию сетки при прокрутке.
Анимация сетки по всему сайту
Интересные задания
Имитация SPA
При разработке элементов навигации мы руководствовались принципами Single Page Application, где каждый элемент интерфейса, включая состояния наведения, соответствовал логике и эстетике одностраничного приложения
Анимированные сценарии
Каждый интерактивный элемент получил собственный сценарий анимации, согласованный совместно с командой клиента. Особое внимание уделялось мельчайшим деталям: продолжительности анимации, размерам, триггерам и чувствительности. Некоторые сценарии потребовали значительных доработок и сложностей в верстке, но ради идеального результата мы были готовы к любым техническим сложностям
Комплексный многоступенчатый прелоадер
Особенностью прелоадера стала имитация уменьшенного окна основного экрана с последующим масштабированием. Вместо масштабирования всей страницы, которое могло негативно повлиять на производительность и качество воспроизведения, мы создали оптимизированную копию с активными (кликабельными) элементами, которую позже плавно обновили до полной версии
Интересные задания
Реализация перехода между страницами
Переходы между страницами реализованы с учетом эстетики и функциональности. Каждый переход сопровождается четким отображением названия целевой страницы с сохранением логики навигации при любых сценариях перемещения по сайту.
Звуковые эффекты
Тщательно подобранные звуковые эффекты нажатий, наведения и переходов между страницами создают приятную звуковую атмосферу, не отвлекаясь от контента. Реализовано сохранение пользовательских настроек звука на протяжении всего сеанса просмотра
Lottie и svg анимация
Особое внимание уделялось созданию пользовательских анимаций. Каждый лотти-файл был разработан специально под проект, включая уникальный звуковой переключатель. Мы достигли безупречного сочетания svg-сеток и лотти-анимации, где каждая линия и движение работают в полной гармонии
428,940
Пикселей контента всех страниц сайта
65,230
Пикселей самая длинная страница
Еще из интересного
Заслуживает особого внимания
Отдельное внимание следует уделить интеграции анимаций svg-grids и lottie на страницах проекта. Достижение такой визуальной гармонии потребовало значительных навыков и многочасового кропотливого труда. Каждая линия, каждый элемент были тщательно выровнены и синхронизированы друг с другом, создав единую визуальную симфонию.
Особенно поражает точность совпадения графических элементов и сценариев их анимации, где малейшее отклонение может нарушить общую эстетику. Результатом этой филигранной работы стал изысканный визуальный ансамбль, где каждый компонент органично дополняет общую композицию.
Рабочее пространство проекта
Завершение работы
Проект стал примером идеальной синергии между командами клиента и студии.
Разработка заняла 4 месяца вместо запланированных трех из-за повышенных требований к качеству и значительного объема работ. Проект стал примером идеальной синергии между командами клиента и студии, где постоянный диалог и взаимная вовлеченность привели к созданию поистине классного продукта.
Результатом нашего сотрудничества стал не просто современный веб-сайт, а целостный цифровой продукт, отражающий все ценности клиента. Приятным подтверждением нашего успеха стало продолжение сотрудничества на постоянной основе. А воспоминания о процессе работы вызывают только самые теплые чувства!
Если вас интересует тема сроков и их влияние на результат, предлагаем вам прочитать нашу статью: «Сроки веб-проектов: как заказчик и подрядчик могут повлиять на сроки»
Отзыв клиента
Невероятная работа! Наш сайт просто потрясающий!
Хочу поделиться впечатлениями от сотрудничества с Ambi после разработки нашего сайта на Webflow. Честно говоря, мы просто в восторге от результата и получили то, о чем мечтали
Наш проект оказался для разработчиков «со звездочкой», потому что у нас было нестандартное ТЗ и ряд требований: звуки интерфейса на сайте, уникальная анимация переходов между страницами и проектами, анимация линий, воспроизводящих разные схемы наших UX-подходов. Мы боялись, что на Webflow все это будет невозможно, но команда Ambi реализовала все эти моменты даже лучше, чем мы ожидали
Особая благодарность Артему за позитивное и профессиональное общение
Наш сайт не просто выглядит стильно — в нем есть тот «потрясающий фактор», о котором мы мечтали
Поэтому, если вы ищете команду, которая сделает ваш сайт особенным, я рекомендую их. Мы впечатлены, довольны и готовы рекомендовать их всем, кто хочет, чтобы их сайт был качественным и крутым!
