Animated Resizing of a Web Chat Interface

An animation created to demonstrate the layout changes (basically the head) of the Web Chat project I'm working on.

Actually the original design doesn't include location change of the elements. Reason of doing so is to respond to the request from PM: Can we emphasize more on our branding? Also, an orange color header bar with product name on the left and user zone on the right, is also quite widely applied in other websites of our product.

Thereafter I made the compromise that in small screens the workstation is pure and immersive to maximize the experience and efficiency of using this Chat workstation, but on larger screens, branding, which is relatively lower in priority, were brought back silently.