Как мы сделали сайт за 2 дня для MAX и Edutoria

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

Давайте знакомиться. Мы — FLUID. Работаем с проектами, в которых исследования — неотъемлемая часть дизайн-процесса. Обеспечиваем прогнозируемый результат за счет глубокого погружения в задачу, аналитики аудитории, рынка и высокой скорости разработки.

Дизайн-студия MAX сделали Вкусвилл, Пятерочку и много других крутых проектов. Сейчас они развивают экосистему образовательных продуктов Helper в коллаборации с Edutoria. И как раз с этим мы им и помогали.

Олег — дизайн-директор студии MAX написал нам ночью с вопросом, можем ли мы подхватить проект и помочь разработать сайт за 3 дня. Запуск продукта горел, а нужно было сделать хорошо. Мы согласились и на следующее утро приступили к работе.

1 этап: передача дизайна в разработку

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

2 этап: подготовка UI-KIT в Webflow и подключение шрифтов

UI-KIT в Webflow — важный инструмент. За счет него мы можем быстро корректировать цвета, стили, типографику, отступы во всем проекте. Так, разработка превращается в сбор пазла. У нас есть все элементы дизайна, и нам остается только поставить их на свои места.

3 этап: оптимизация и выгрузка всех графических элементов

За счет оптимизации графики и чистого кода Webflow, мы достигаем скорости загрузки сайтов 90%+ по Google page speed.

4 этап: Сборка ПК-версии макета и настройка анимаций

На этом этапе мы переносим макет из Figma в Webflow, при этом уже имея все стили, отступы и пр. За счет UI-KIT их остается только применить, что значительно ускоряет разработку каждого блока. И презентуем ребятам.

Также на данном этапе мы настраиваем анимации и согласовываем их. А еще вносим правки, которые нам успели отдать.

5 этап: сборка мобильной версии и адаптация анимаций

После повоторного согласования ПК-версии и анимаций, мы переходим
к верстке мобильной версии и адаптации анимаций под нее.

6 этап: согласование макета

Пока шла разработка ПК и моб. версий, в макете корректировался дизайн и дописывались тексты. Однако благодаря собранному UI-KIT и заданным стилям, мы быстро вносили правки, тратя на это не часы, а минуты.

7 этап: подготовка промежуточных разрешений и тестирование на кросс-браузерность и кросс-платформенность

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

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

Такой подход к адаптивной верстке и называется Fluid.

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

8 этап: базовая SEO-оптимизация

Выстраиваем структуру заголовков, указываем title и description, при необходимости прописываем alt-тексты для изображений. Делаем favicon, webclip & OpenGraph для cоцсетей. Теперь готово!

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

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

Если у вас горят сроки проекта, и не важно, разработка на Webflow или classic-code — пишите, всем будем рады и давайте оставаться на связи.

А еще бонус! Первым 5 написавшим мы дадим 3 часа разработки бесплатно. За это время мы заложим фундамент проекта, проведем ревью UI-kit в Figma, скорректируя его при необходимости, и перенесем в Webflow.

Чтобы обсудить проект, пишите → @yuuudin в Telegram.

Спасибо всем, кто дочитал и хорошего вам дня!