Desember 2019. Kurnia Ramadani


Yamaha Music is a company in charge of distributing musical instruments to all of its consumers in various countries.


How to design an interesting product detail page?


Designing a detail page of Yamaha Music’s products in accordance to the needs of the company.


  • Prototyping : Creating a User Interface that complies with the specifications requested by Yamaha Music.


  • Gathering Requirement

    The requirements regarding the developed page were given by the client through a conversation via mobile phone. The discussion was about several important aspects of the page i.e. the interface concept, the things that should be highlighted and more. There were several points which could be inferred from the discussion. The points were as follows.

    1. The client desired a well-ordered look of the interface
    2. The client expected to highlight the specifications of products in detail
    3. The client demanded the design to suit the characteristic of Yamaha which was the involvement of dark blue colour
    4. The client wished that the layout arrangement would be in line with his request.

  • Searching for Inspiration

    I visited several music websites to brainstorm and get some inspirations. I paid detail attention to the layout of those websites and the way they display their products on their website.


  • Header

    This section contains several promotion banners and navigation menus. It can be used by the company to promote the products they sell.

  • Product

    This Section contains the products of Yamaha Music Company along with the prices, specifications and ongoing promotions.

  • Specification of the Product

    This section provides detail information of the products in form of articles and videos.

  • CTA

    I put the CTA section at the bottom of this page to remind the users what action should be done after scrolling from beginning to the end, which is purchasing the product.

  • Footer

    In this section I create some navigation buttons for the users to move back and forth after scrolling to the pages. Information related how to contacts and social media of Yamaha were also put in the footer.