Веб-панель для системы видеонаблюдения «Rcam»

Изучаем десятки существющих систем видеонаблюдения.

Составляем общую карту путей.

Затем самое любимое занятие — рисовалки.

Пробуем страницу камер.

Выделяем направление.

Пробуем тайм-лайн.

Понимает, что всё не то. Обращаемся к радиоприемнику. Изучаем его вдоль и поперек, понимаем, что ошибка в тенях.

Делим тайм-лайн на слои и начинаем делать.

Слой 1 — основа всей сущности:

Слой 2 — дырка/отверстие/экран в ней. Немного вдавленный, утопленый в основе:

Слой 3 — внутри лежит лента лаймлайна:

Слой 4 — полоска-писюлька лежит на таймлайне и уходит куда-то под основу всей сущности, где типа соединяется с двигалкой внизу:

Слой 5 — придаем всему этому глубины, добавляя поверх тень:

Слой 6 — присобачиваем стекло, добавляя выпуклость и блики:

Ага... Арт-директор чёт-то там говорит, мы делаем... и... О да! Вот он! Тайм-лайн века готов!

Безжалостно правим всё, что неправильно.

Ура! Верстаем, программируем и деплой!