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

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.

현대자동차 제품 페이지 디자인은 명확한 스타일과 시각적인 구조를 위해 가장 잘 계획된 화면설계서를 통해 진행되었습니다. 이를 위해 UX 및 그래픽 디자이너들은 긴밀한 협력을 유지하면서 가장 이상적인 방향으로 매우 유연하게 프로젝트에 임하였습니다. 물론 프로젝트를 진행하면서 변수도 발생하기도 했지만 우리는 매우 정확히 계획대로 진행할 수 있었습니다.

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.

화면설계는 협력사에서 진행이 이루어졌으며 각각의 제품 페이지들은 Highlights, Exterior, Interior, Performance, Safety, Convenience, Specification, Review의 큰 섹션으로 나누어져 있으며, 섹션마다 메인컨텐츠와 서브 콘텐츠 그리고 공통콘텐츠로 정보구조의 볼륨을 결정하였습니다. 그렇게 이루어진 정보들은 한 페이지에 모든 내용을 담아내어 브라우져의 스크롤바, 또는 상단에 고정으로 따라 붙게 되는 유틸리티 바를 통해 모든 콘텐츠를 살펴볼 수 있게 설계가 이루어졌습니다.

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.

특장점별로 전달하려는 메시지와 함께 보여 줄 비주얼의 주가 차량 이미지이기 때문에 먼저 고객사에서 전달받은 차량 모델의 포토 라이브러리와 관련자료 중 가장 적합한 사진을 선별하였고, 그 외 필요한 구도에 대해서는 3D 모델링을 통해 확보하였습니다. 그렇게 선별된 차량 이미지는 한 번도 후보정을 통해서 더 아름답고, 더 세련되고 더욱더 럭셔리한 차량으로 리터칭하였습니다.

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

메인비쥬얼의 이미지 리터지 과정은 크게 3단계로 이루어집니다. 첫째로 차량바디 부분에서 크게 윈도우와 라이트, 휠, 타이어 등 각 요소를 레이어로 분리하여 컬러 변경 및 상황에 맞는 보정을 하게 됩니다. 둘째로 프런트/사이드/리어뷰에 따라 라이프스타일에 맞는 백그라운드를 실사 이미지를 통해 연출해줍니다. 이 과정에서 2~3가지 이미지만으로 충분한 경우가 있지만 때에 따라서 요소별로 합성작업을 통해 원하는 테마를 완성해야 하는 경우도 있습니다. 셋째로 그렇게 완성된 비주얼의 외각을 부드러운 브러시를 통해 페이지의 배경과 경계가 없도록 마스킹 작업을 하였습니다. 이때 주요 오브젝트에는 별도로 레이어 또는 폴더로 유지하고 배경 요소만 따로 분류해서 최대한 자연스럽게 투명도가 20~50%를 병행하면서 브러시로 지워주는 것이 중요합니다.

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.

서브 콘텐츠 중에서는 간단한 인터렉션 장치를 적용하여 스타일을 살리면서도 특장점을 더 명확하게 전달 할 수가 있었습니다. 그중에서도 차량 외관의 특장점 중 헤드라이트, 사이드미러, 리어라이트 비주얼에 라이트 온/해제 버튼을 두어서 차량의 스타일을 한 번 더 강조할 수 있는 심플하면서 유니크한 장치를 마련하였습니다.

Graphic Features : To visualize the vehicle features, we expressed clearly and easily by highly using 3D modeling and sub graphics.

그래픽 요소: 차량의 특장점을 설명에 필요한 비주얼에 대해서는 해당 차량의 3D 모델링컷과 보조 그래픽 등을 적극적으로 활용하여 전달하고자 하는 기능에 대해 사실적이지만 쉽고 명확하게 표현하였습니다.

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.

실제 차량이나 부품의 이미지를 클로즈업하여 더욱 정밀하게 보여주되 기계의 차가운 이미지가 아닌 세련되고 프리미엄한 퀄러티만을 추구하였다. 정확한 수치의 정보 전달이 목적이 아니라면 그래프의 방식 또한 평면에서 벗어나 입체적인 구도로 디자인하여 구성하였습니다. 그리고 실사와 유사하게 환경을 만들고 도로의 라인과 차량의 움직임을 보조그래픽으로 표현하여 그 기능에 대해 기능설명문구와 함께 이해를 돕고 있습니다.

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.

현대자동차 쇼룸의 제품페이지 중 주력 차량인 Azera, Elantra, i40, Tucson/ix35의 제품 페이지를 제작하였고 Azera, Elantra, i40, Tucson/ix35뿐만 아니라 Accent, Sonata, Veloster를 포함해 총 7대 차량에 대한 매인비쥬얼을 22개 연출하였습니다. 그리고 주력 차량 페이지 디자인 가이드와 일반 차량 페이지 디자인 가이드를 한 타입씩 작성하여 협력사에 전달하였습니다. 디파이는 대략 6개월(150일 정도) 가까이 현대자동차 쇼룸 제품 페이지를 진행되었으며, 규모가 큰 프로젝트인 만큼 여러 협력업체와 함께 각자 맡은 영역에서 최선을 다해 끝마칠 수 있었습니다.