Загрузка

Benzeen Auto Parts

Разработка UI и интерактивных элементов для автомобильного интернет-магазина с постоянно обновляющимся дизайном

Benzeen Auto Parts — проект автомобильной e-commerce-компании из Лос-Анджелеса, над которым я работал через TCO в 2019 году. Дизайнеры продолжали готовить новые страницы и обновлять существующие уже в процессе разработки.

Я реализовал интерфейс всего сайта, включая интерактивность, анимации и часть JavaScript-логики, а также интегрировал Google AMP. Это был мой первый e-commerce проект за пределами традиционной CMS.

Роль:
UI-разработчикЧерез TCO
Объём работ:
UI всех страницИнтерактивность и анимацииJavaScript-логикаGoogle AMP
Стек:
AngularSass/SCSSBEMJavaScriptGoogle AMP

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

Индивидуальная e-commerce-разработка, а не шаблон CMS. Новые макеты страниц поступали уже во время разработки сайта.

  1. Контекст

    Индивидуальный e-commerce-проект на Angular без CMS. Новые концепции страниц и изменения дизайна появлялись уже после начала разработки.

  2. Структура и общие стили

    Сначала выстроил структуру страниц и общие стили на Sass/SCSS с методологией BEM.

  3. Вместе с дизайнерами

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

  4. Интернет-магазин

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

  5. Интерактивность и AMP

    Анимации и JavaScript-логика на сайте, а также Google AMP для поддерживаемого мобильного контента.

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

    • Интерфейс реализован на всех страницах сайта
    • Интерактивное поведение и анимации
    • Интеграция Google AMP

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

    • Полная UI-реализация нестандартного интернет-магазина
    • Тесная работа с дизайнерами при изменении макетов
    • Анимации и опыт работы с Angular-проектом без CMS

Принципы

Как разработка успевала за меняющимся дизайном.

  • Оставаться в одном ритме

    Дизайн и реализация оставались согласованными по мере изменения требований.

  • Структурированные стили

    BEM и SCSS помогали вписывать новые страницы в существующую систему.

  • Продуманные детали

    Интерактивные элементы реализованы осмысленно, а не оставлены на случай.

  • Единый магазин

    Большой интерфейс оставался последовательным на всём сайте.

Подробности

Два направления работы и подход к каждому из них.

1. Дизайн, который постоянно менялся

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

Итеративная реализация на структурированных Sass/BEM-паттернах позволяла добавлять новые и обновлённые страницы без нарушения существующей структуры.

2. Google AMP

Я интегрировал Google AMP для поддерживаемого мобильного контента параллельно с основной Angular-версией.

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

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

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

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

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