Загрузка

Brainstorm

Кастомная фронтенд-разработка и скролл-анимации для сайта агентства Brainstorm

Всё началось в 2018 году с аутсорс-проекта: я разрабатывал собственный сайт агентства Brainstorm, пока его дизайн ещё создавался.

Я реализовал UI сайта на HTML, CSS и чистом JavaScript — с кастомными анимациями и вручную написанной логикой событий прокрутки. После завершения сайта Brainstorm пригласила меня в команду, где я работал над интернет-магазинами клиентов. Это отдельные проекты.

Роль:
Фронтенд-разработчик
Формат сотрудничества:
Аутсорс-проект, май–июль 2018Затем сотрудник, июль–декабрь 2018
Объём работ:
UI сайта агентстваКастомные анимацииИнтерактивность при прокруткеАдаптивная вёрстка
Стек:
HTMLCSSJavaScript

Из чего состояла работа

Brainstorm нужен был собственный сайт, хотя дизайн ещё продолжал формироваться.

  1. Контекст

    Сайт самого агентства, дизайн которого разрабатывался и уточнялся параллельно с фронтендом.

  2. Развивающийся дизайн

    Работал с макетами по мере их изменения, не дожидаясь окончательной версии.

  3. Макеты и адаптивный UI

    Реализовал все макеты с адаптивной вёрсткой, сохраняя визуальную концепцию.

  4. Кастомные анимации

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

  5. События прокрутки

    Анимации и переходы при прокрутке я запрограммировал вручную на JavaScript, без готовых шаблонов анимаций.

  6. Что изменилось

    • Кастомный сайт агентства с анимациями
    • Приглашение присоединиться к Brainstorm как разработчик

  7. Что показывает проект

    • Самостоятельная фронтенд-разработка
    • Кастомная анимация на JavaScript, написанная вручную
    • Клиентский проект, переросший в длительное сотрудничество

Принципы

Как сайт создавался параллельно с его дизайном.

  • Работать вместе с дизайном

    Разрабатывать интерфейс по макетам, которые ещё меняются.

  • Анимация с задачей

    Анимация как функциональная часть взаимодействия с сайтом.

  • Контроль прокрутки

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

  • Адаптивная концепция

    Адаптивное поведение сохраняет исходную визуальную идею.

Подробности

Две части разработки и подход к каждой из них.

1. Скролл-анимации вручную

Анимации и интерактивность сайта зависят от прокрутки.

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

2. Дизайн в процессе разработки

Макеты продолжали меняться, когда фронтенд уже разрабатывался.

Параллельная работа позволила итоговому сайту соответствовать финальному дизайну, а не его раннему черновику.

Есть похожая задача?

Расскажите, что Вы создаёте. Я отвечу в течение двух рабочих дней.

Начать проект

Новый сайт, интерфейс продукта, дизайн-система или улучшение существующего решения.

Начать проект