VVG - Aesthetics in Every Details

2018

    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.

    role Front-end Developer

    stack Laravel, Sketch

    design agency Transform Design

    client VVG

    about page

    Precision of layout

    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.

    news page
    blog page

    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.

    demo of mobile version

    Customized carousel

    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.

    demo of village page customized carousel and side menu

    Bilingual system

    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.

    about-page-english English version of about page
    demo of home page scrolling