Как мы сделали сайт за 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.
Спасибо всем, кто дочитал и хорошего вам дня!
Очень интересная статья) Впрочем как и все статьи от вас) Есть над чем поразмышлять в ракурсе своей команды)
Комментарий недоступен
Да, согласны, проект небольшой, но тут основной момент – дизайн в процессе, правки по текстам и нужно было очень быстро все корректировать. То есть приходит правка и у нас есть 30 минут чтобы ее реализовать. Скоро будут еще фаст-кейсы, где расскажем о проектах побольше, но в скорости они также не теряют)
Хороший сайт получился
Спасибо
Мы используем формат разработки на Webflow, при котором наши сайты идеально подстраиваются под разрешения любых устройств. Они не просто меняют вид в зависимости от отрисованных промежуточных состояний, но также и масштабируют типографику, отступы и размеры элементов.
Ну правда, идеально же
На вьюпортах все сверстали, ничего гениального)