Hyundai Motor - Showroom Product Page (design guide)

•

Hyundai Motor PIP Design guide

The online design guide for all Hyundai Motor Company’s showroom products.

May 2011 · © D.FY Creative Studio.

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.

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. 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.

Create A Whole different Life style

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

The main visual image retouching process consists of three steps.

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%.

The Evolution of the Main Visual - i40(RearView) KV

In this project, we visualized 7 main vehicle and finished 22 kinds of lifestyle.

Simple interactive features

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.

Dynamic Graphics

To visualize the vehicle features, we expressed clearly and easily by highly using 3D modeling and sub graphics. and 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.

Language of visualization

In order to give the core message of highlights in each vehicle page, we newly design the concise and effective icon.

What’s on your mind?

Through using the benefits of social network marketing, users or fans were able to comment via Twitter of Facebook SNS.

Result

22 main visual for total of seven vehicles were directed. (Flagship models of Azera, Elantra, i40, Tucson/ix35, Accent, Sonata, Veloster) Hyundai motor showrooms page were carried out about 5 months and as the large-scale projects, it was able to finish all the best from each of his area with multiple partners.