Webflow — это инструмент визуальной верстки и удобная система управления контентом. В агентстве мы используем его для верстки и быстрого запуска проектов.
Преимущества
Быстрый запуск
Знание режима “Designer”и наличие паттернов кода для помогает нам запускать сайты на Webflow в короткие сроки. Это удобно, если есть жесткий дедлайн.
Визуальный редактор контента
Режим “Editor” позволяет вносить изменения в большинство текстов и изображений сайта через визуальный редактор. Для этого не требуется привлекать разработчика, знать верстку или уметь работать с FTP.
Анимации любой сложности
Interactions 2.0, поддержка технологии Lottie, разноформатных видео и возможность интеграции WebGL дают широкие возможности по анимированию верстки.
Безграничная верстка
Webflow не ограничивает дизайнера и верстальщика: можно реализовывать дизайн-макеты с нестандартными решениями. Встроенное деление на разные размеры экранов позволяет сделать верстку адаптивной. Оптимизация стилей средствами Webflow помогает сохранять верстку сайта удобной в разных браузерах.
Экспорт кода
Webflow позволяет экспортировать код сайта и использовать его в других CMS: WordPress, Bitrix, PHP-фреймворки. Отдельные страницы и блоки можно выгружать на другие конструкторы, в частности, на Tilda.
Как построен процесс?
01
Брифинг и документы
2–5 рабочих дней
- Вы оставляете заявку.
- Мы письменно или через созвон уточняем запрос.
- Готовим смету и коммерческое предложение, отправляем на согласование.
- Запрашиваем ваши реквизиты, высылаем договор и счет на предоплату.
- Этапность обсуждается перед стартом проекта.
Есть возможность по договоренности изменить стандартный процесс.
Результат этапа:
- Cсылка на смету (Google Sheets)
- Ссылка на коммерческое предложение (Google Docs)
- Заполненный договор (.docx)
- Счет на предоплату (.pdf)
02
Прототип, структура сайта, ТЗ, таблица для наполнения контентом
5–10 рабочих дней
- После получения предоплаты мы приступаем к разработке прототипа и технического задания — ТЗ. Запрашиваем у вас дополнительную информацию и контент.
- Готовим прототип и ТЗ, высылаем на согласование. Вы согласовываете прототип.
- Вносим правки в прототип и ТЗ, если требуется. На число правок ограничений нет, но есть лимит на число итераций, как правило, их две.
- Готовим Google-таблицу для сбора контента и мета-информации страниц. Утверждаем этап.
Результат этапа:
- ТЗ (Google Docs)
- Интерактивный прототип (версия для ПК; ссылка на просмотр Figma)
- Таблица для сбора контента (Google Sheets)
03
Дизайн-концепция
5–10 рабочих дней
- После согласования прототипа и ТЗ мы переходим к разработке дизайн-концепции.
- Собираем и согласуем с вами список визуальных референсов.
- Разрабатываем дизайн-концепт. Как правило, это главная страница сайта (версия для ПК). Высылаем макет вам на согласование.
- Вносим правки в дизайн-концепцию, если требуется. Утверждаем этап.
Результат этапа:
- Список референсов (ссылка для просмотра Figma)
- Дизайн-концепт сайта (ссылка для просмотра Figma)
04
Дизайн-макеты, подготовка к верстке
5–15 рабочих дней
- После согласования дизайн-концепции мы переходим к разработке дизайн-макетов внутренних страниц сайта.
- Разрабатываем дизайн-макеты (версия для ПК). Высылаем вам на согласование.
- Вносим правки в дизайн-макеты, если требуется. Утверждаем этап. Подписываем акт.
Результат этапа:
- Интерактивные дизайн-макеты сайта (ссылка для просмотра Figma)
05
Верстка и программирование
5–20 рабочих дней
- После согласования дизайн-макетов, подписания акта и получения оплаты мы переходим к верстке и программированию веб-сайта.
- Верстаем страницы, включая адаптивные версии. Высылаем на согласование на тестовом домене. Вносим правки в верстку, если требуется.
- Организуем Collections — базу данный Webflow. Настраиваем функционал сайта и внешние интеграции. Подключаем сервисы аналитики. Высылаем на согласование на тестовом домене. Вносим правки, если требуется. Утверждаем этап. Подписываем акт. Получаем оплату.
Результат этапа:
- Опубликованный на тестовом домене сайт с утвержденными версткой и функционалом, анимацией, который хорошо отображается на всех устройствах.
06
Релиз, инструкции, гарантийный период и сопровождение
- После подписания акта и получения оплаты мы публикуем сайт на боевом домене.
- Передаем документ с доступами к сайту и полезными ссылками. В него включаем ссылку на дизайн-макеты с возможностью копирования.
- По договоренности составляем и записываем инструкции по управлению сайтом.
- После релиза начинаем отсчет гарантийного периода, который как правило составляет 3 месяца.
- По договоренности обсуждаем и организуем техническую поддержку сайта.
Результат этапа:
- Файл с доступами и полезными ссылками (Google Docs)
- Инструкции по управлению сайтом (ссылки на видео в Loom, Google Docs)
- Запуск гарантийного периода
- Опционально: запуск технической поддержки
Экспертиза Atman
Интеграции и переносы на другие CMS
Имеем успешный опыт переноса верстки, функционала и базы данных с Webflow на WordPress, Bitrix, PHP-фреймоврки, Python, Tilda. В зависимости от обстоятельств, можем предложить быстрые опции переноса, занимающие от 3 рабочих дней.
Визуализация данных
Готовим статистические дашборды в Redash, на которых в реальном времени показываются заявки с сайта и другая аналитика — возможности вывода данных обширны и обсуждаются индивидуально. Интегрируем дашборд с Webflow через связку Zapier + Google Sheets.
Системность в дизайне и верстке
Дизайн-макеты разрабатываем системно через стайл-гайды и компоненты, попутно описывая правила для верстки и сохраняя целостность изначального концепта. В верстку переносим систему цветов, шрифтов и компонентов. Активно переиспользуем готовую систему в развитии проекта после запуска.
Первичное SEO и аналитика
По умолчанию указываем для страниц сайта H1 и мета-заголовки, мета-описания, изображение для социальных сетей (og:image), alt-тексты для изображений. Используем семантические теги в верстке (section, article, header, footer, nav). Подключаем сервисы аналитики и технического мониторинга: Я.Метрику, Я.Вебмастер и/или их аналоги в Google для сайтов на английском языке.
Webflow & Redash — актуальная статистика под рукой
Вместе с разработкой сайта готовы подключить статистический дашборд, на который можно вывести информацию о сайте, обновляемую в реальном времени и доступную для скачивания в Excel-таблицах.
Примеры проектов
Спасибо за интерес!
Как правило, мы отвечаем в течение 1–3 рабочих дней. Если не хотите ждать, пишите: hi@atman.pro.
Что-то пошло не так. Проверьте, все ли обязательные поля вы заполнили и попробуйте снова.