{"id":14277,"url":"\/distributions\/14277\/click?bit=1&hash=17ce698c744183890278e5e72fb5473eaa8dd0a28fac1d357bd91d8537b18c22","title":"\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0442\u0440\u044b \u0431\u0435\u043d\u0437\u0438\u043d\u0430 \u0438\u043b\u0438 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f","buttonText":"\u041a\u0430\u043a?","imageUuid":"771ad34a-9f50-5b0b-bc84-204d36a20025"}

Как мы сделали сайт за 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 разработке позволяют выполнять задачи такого формата быстро и качественно. Вы можете убедиться в этом сами, посмотрев на итоговый результат:

Видео-отзыв от Олега, дизайн-директора студии MAX

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

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

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

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

0
7 комментариев
Написать комментарий...
NIKITA MENSHAEV

Очень интересная статья) Впрочем как и все статьи от вас) Есть над чем поразмышлять в ракурсе своей команды)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
FLUID
Автор

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

Ответить
Развернуть ветку
Михаил Нежник

Хороший сайт получился

Ответить
Развернуть ветку
FLUID
Автор

Спасибо

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

Ну правда, идеально же

Ответить
Развернуть ветку
Ddd

На вьюпортах все сверстали, ничего гениального)

Ответить
Развернуть ветку
4 комментария
Раскрывать всегда