Skip to Menus Skip to Contents


Hyundai Motor —

Hyundai Motor Showroom PIP Design guide

Project Summary

D.FY Portfolio Hyundai Motor KV

Launch Date



  • Web/Mobile Site


  • Paaaaa

Project Number


In 2011, a lot of manpower were put to renewal the World Wide Hyundai Motor official website. D.FY proceed the guide design of the most large proportion of the product features. Previously, a global guide was preceded by a partner, but we had to start with new approach method and contents design rather than using existing method.

  • Wireframes to the Design.

    Hyundai Motor Showroom page design were progressed with well-planned wireframes to make clear visual style and structure. UX and graphic designers worked very flexible in the most ideal direction, while maintaining close cooperation in the project. It certainly variables may occur, we were able to proceed very accurately as planned.

  • Sketch

    Wireframe was preceded by a partner and each of the vehicle page were divided into large sections with Highlights, Exterior, Interior, Performance, Safety, Convenience, Specification and Review. We determined the information structure volume of Main and sub-content for each section. As we composed all information in to a single page, it designed with scroll bar or util bar to see the whole contents.

  • Design

    Based on the most ideally designed wireframe, we found several ways to visualize the message of each contents and design effectively with appropriate style. Graphics design, infographic, icons, designs, everything had to be newly designed and 3D-Modeling by each car to create more dynamic composition of vehicle. As we make the style guide of the product page, it had produced more precisely and meticulously.

  • Vehicle Visual(Main Visual, Lifestyle of each vehicle)

    Each features to serve the message with the point was vehicle image. So that we select the most appropriate image from the photo library and related resources that received. The chosen images were retouched more beautiful, more refined and more luxurious. As the most significant factors of each vehicle exterior and interior must be shown different concept and lifestyle, we create completely different theme that never seen before.

  • The evolution of the visualizing

    1. Layers separately with windows, headlights, wheels and tire from the body of vehicle with adjusting the color and details. 2. Perform the photorealistic image background matching with front / side / rear view. In this process, 2 or 3 images can be sufficient, but in some circumstances, you need to complete the theme by composite the element-by-element. 3. Mask the finished images with a soft brush in order not to get the border. In this point, main object must be maintained as a separate layer or folder erase with brush naturally in opacity 20~50%.

  • Interaction

    In sub contents, we could transfered more clearly with reviving the style and characteristic features by simple interactive function. We established unique device to emphasized the style of the vehicle once more, which are the most appearance of the vehicle features that headlights, side mirrors, rear light in the visual light on / off button. 1. Graphic Features : To visualize the vehicle features, we expressed clearly and easily by highly using 3D modeling and sub graphics. 2. Dynamic Graphics : By showing image of vehicles or magnified parts, we pursue sophisticated and premium quality. Also, we approach by designing a three-dimensional composition escape from the equilibrium configuration. We've create photorealistic environment that can helps to understand the function by designing the traffic lane and vehicles movement. 3.Language of visualization : In order to give the core message of highlights in each vehicle page, we newly design the concise and effective icon.

Hyundai Motor product details page.
Hyundai Motor product details page.
 3D modeling image of Hyundai Motor.
Hyundai Motor and various background images
It's a synthetic process for Hyundai Motor.
This is Hyundai Motor's main visual.
Hyundai Motor interaction content page.
Hyundai Motor 3D Modeling and Graphics
SNS communication with icons used on Hyundai Motor pages
Hyundai Motor Show Room page.


Hyundai Motor Showroom



Gwon, Soongyu- Chief Creative director

Gwon, Soongyu- Designer

Jang, Jaehyeon- Designer

Baek, JayYoung- Designer

Hyundai Motor