VVG advocates life style with aesthetics by running restaurant, bookstore, selection store, cafe and more. To perfectly present their spirit, Transform Design creates elegant interface with beautiful details everywhere. As front-end developer in the development team, I crafted with extra cares on every transitions and harmonies between each component.
One of the most challenging parts of the front-end development of the site was dealing with huge amount of intersections of decorative blocks. To manage all kinds of variations, a well-constructed grid system with responsive functionality had to be built in code in the first place. To build the grid, I analyzed the design carefully with Atomic principle in order to split different scales of components, and then construct the grid based on which. The key to split the component was to figure out which color block was attached to which leading component. After the system was built, I attached the color blocks with pseudo elements to designated components in a well-structured manner.
Because of the color blocks, the responsive layout required extra care as well. According to the design, some blocks should be hidden and some new blocks should be rendered. By following the grid and component system I built in the first place, a seamless transition between different devices was built.
Because the designers had specific requirements about the transition, controller and indicator, the carousel in VVG website was built from scratch without any help of library. Building a carousel with cross-browser compatibility, responsive views and parallax transition style was not an easy task. But the beautiful result of the well-designed carousel component proved that the it was worth the effort.
To embrace the visitors from international markets, bilingual system was necessary. Transition between two languages was not only about the content, but also the typography details. In order to achieve the best quality, the line height, font weight, font size and letter spacing were all tuned with care in both Mandarin and English responsively.