Дизайн конструктора

КОНСТРУКТОР ЧАСОВ, СУМОК, ОЧКОВ БРЕНДА O BAG.

Предназначение конструктора: даёт возможность посетителям собрать свой собственный аксессуар из различных компонентов.

Сумки (O bag Classic, O bag mini, O chic, О basket, O pocket) состоят из максимум 4-х компонентов: корпус, ручки, подкладка, манжет/флип.

Часы состоят из 2-х компонентов: циферблат и ремешок.

Очки состоят из 3-х компонентов: дужки, линзы, оправа.

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

Что нам нужно: вылизать (довести до ума) визуальный концепт. 

ВИЗУАЛЬНЫЙ КОНЦЕПТ: http://www.ex.ua/284106207979

1. Верхнее меню с иконками, обозначенное цифрой 1, предназначено для переключения между отдельными продуктами бренда O bag. Нажимая какую-либо из  иконок, мы переходим в конструктор отдельного продукта. Таким образом, нам нужно 7 конструкторов, которые одинаковы по механике, меняются только иконки (они есть в векторе) и, возможно, расположение/масштаб главного фото. О том, в каком конструкторе посетитель находится говорит «активная» иконка (выделяем её каким-то светом; возможно оранжевым, как на сайте). 
2. Боковые иконки, находящиеся с левой стороны - меню переключения между отдельными компонентами товара. Активность иконки (оранжевый цвет) говорит о том, что пользователь, нажимая на стрелочку боковой прокрутки элементов (цифра 3), будет последовательно, по одному, листать доступные элементы (в данном случае - корпуса сумок O bag Clasic), которые отображаются в ассортиментном меню (цифра 5). Компоненты из этого меню листаются с шагом в 3-4 единицы стрелочками прокрутки (4) .
3. Символы «-» и «+», отображающиеся рядом с элементами бокового левого меню, предназначены для удаления элементов. Например, нажимая минус рядом с иконкой корпуса, иконка становится прозрачной (неактивной), а фотографии корпусов (6) исчезают. На их месте остаётся схематический контур (ТРЕБУЕТ ПРОРИСОВКИ). Все остальные компоненты, в нашем случае это подкладка и ручки, остаются на своих местах.
4. Для подсказок нужны какие-то навигационные стрелочки (ТРЕБУЮТ ПРОРИСОВКИ), главная задача которых дать понять клиенту, что нужно делать. Например, призывают добавить корпус и или ручки, когда они неактивны.
5. Изначально у нас активны три компонента: корпус, ручки, подкладка. Мы считаем это базовой комплектацией. Иконка «манжет» (7) неактивна/полупрозрачна. Рядом с ней символ «+», при нажатии на который, на главном фото сумки (6) появляется манжет. 
6. В боковом меню справа (8) выводятся названия тех компонентов, которые сейчас отображаются на главных картинках (6). Если какая-то кнопка-иконка из левого меню (2) отщелкнута/свернута, как в нашем случае с манжетом (7) , то в правом меню (8) выводится «Корпус/Ручки/Подкладка/Манжет не выбран". 
7. Слева от кнопки «купить» выводится цена активного комплекта, которая автоматически формируется из цен отдельных компонентов.
8. Справа от кнопки «Купить» находится кнопка «Добавить в избранное», позволяющая добавить понравившийся комплект в личный кабинет для дальнейшего просмотра. Она стандартна на сайте.
9. Нижнее меню с иконками социальных сетей - даёт возможность расшарить понравившуюся комбинацию. Возможно, его имеет смысл разместить выше - под кнопкой «Купить».
10. Конструктор часов у нас уже есть, его нужно будет только вписать в стилистику нового конструктора.