Webflow — это инструмент визуальной верстки и удобная система управления контентом. В агентстве мы используем его для верстки и быстрого запуска проектов.

Сайт Webflow
Перейти

Преимущества

Назад
Вперед

Быстрый запуск

Знание режима “Designer”и наличие паттернов кода для помогает нам запускать сайты на Webflow в короткие сроки. Это удобно, если есть жесткий дедлайн.
Быстрый запуск

Визуальный редактор контента

Режим “Editor” позволяет вносить изменения в большинство текстов и изображений сайта через визуальный редактор. Для этого не требуется привлекать разработчика, знать верстку или уметь работать с FTP.
Визуальный редактор контента

SEO-дружелюбность

В отличие от многих конструкторов сайтов, Webflow отдает чистый код и имеет опции для работы с SEO: мета-данные, canonical URL, sitemap, robots.txt. Список настроек безграничен: если нет нужной опции, ее всегда можно добавить через код.
SEO-дружелюбность

Анимации любой сложности

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 рабочих дней.
Интеграции и переносы на другие CMS

Визуализация данных

Готовим статистические дашборды в Redash, на которых в реальном времени показываются заявки с сайта и другая аналитика — возможности вывода данных обширны и обсуждаются индивидуально. Интегрируем дашборд с Webflow через связку Zapier + Google Sheets.
Визуализация данных

Системность в дизайне и верстке

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

База знаний для клиентов

Если работаем с проектом в долгую, создаем базу знаний и шерим инструкции и видео-уроки с клиентом.
База знаний для клиентов

Первичное SEO и аналитика

По умолчанию указываем для страниц сайта H1 и мета-заголовки, мета-описания, изображение для социальных сетей (og:image), alt-тексты для изображений. Используем семантические теги в верстке (section, article, header, footer, nav). Подключаем сервисы аналитики и технического мониторинга: Я.Метрику, Я.Вебмастер и/или их аналоги в Google для сайтов на английском языке.
Первичное SEO и аналитика

Техническое совершенство

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

Webflow & Redash — актуальная статистика под рукой

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

Примеры проектов

Назад
Вперед
covenant-legal.com
covenant-legal.com

covenant-legal.com

covenant-legal.com

Корпоративный сайт
agnielevators.ru
agnielevators.ru

agnielevators.ru

agnielevators.ru

Корпоративный сайт
Промышленность
mysalecar.com
mysalecar.com

mysalecar.com

mysalecar.com

Корпоративный сайт
IT-продукты
Imena Studios
Imena Studios

Imena Studios

Imena Studios

Веб-портал
Бьюти-услуги
vproknn.ru
vproknn.ru

vproknn.ru

vproknn.ru

Веб-сервис
Ритейл

Хотите свой проект?

Заполните бриф — мы ответим и обсудим детали. Или напишите и мы заполним бриф за вас: hi@atman.pro.

Тип проекта

Можно выбрать несколько вариантов.

Детали

Опишите вашу задачу текстом. Что еще можно приложить:

  • Ссылку на заполненный бриф (скачать);
  • Ссылки на визуальные референсы к проекту;
  • Ссылки на ваш логотип и брендбук.

Бюджет *

Сроки *

Процесс

Можно выбрать несколько вариантов.

Спасибо за интерес!

Как правило, мы отвечаем в течение 1–3 рабочих дней. Если не хотите ждать, пишите: hi@atman.pro.
Что-то пошло не так. Проверьте, все ли обязательные поля вы заполнили и попробуйте снова.