콘텐츠1 영역

Responsive Web

BK Heavy Industries

현대중공업 공식홈페이지 리디자인 프로젝트

01   Background & issue

현대중공업 공식 홈페이지의 콘텐츠와 이미지 등을 기반으로 사이트 전반의 분위기와 콘텐츠를 새롭게 구성해보고, 콘텐츠를 보여주는 방식을 변화시켰으며, 페이지 내 컬러도 전면 변화를 주어, 또다른 형태의 중공업 홈페이지를 제작하게 되었습니다.

02   Task & project goal

중공업이라는 명칭에서 오는 딱딱한 느낌을 줄이고, 고객에게 친근하게 다가갈 수 있도록 액티브한 효과와 메뉴 구성, 콘텐츠를 보여주는 방식을 변화시켰으며, 40대 이상 주 고객층을 반영하여 전반적으로 콘텐츠를 크고 넓게 디자인하였습니다.

콘텐츠1-1 영역

03   Bi System

중공업에서 느껴지는 딱딱한 느낌을 덜기 위하여, 심볼에 액티브한 느낌의 요소를 부여하고 에너지를 연상시키는 Red 계열의 색상을 추가적으로 활용하여 심볼에 힘을 실었습니다. 대부분 중공업 계열은 그룹사를 기반으로 운영되어, 심볼을 그룹사 통합 디자인으로 구성하여, 계열사를 심볼 다음에 표현하는 방식으로 제작하였습니다.

04   Layout System

최근에는 디바이스 환경에 따라 해상도가 등장하면서 다양한 크기의 해상도를 지원하는 반응형 그리드 시스템이 있습니다. 고정 그리드 시스템과 형태는 비슷하지만, 칼럼의 너비를 고정 값이 아닌 백분율로 지정하고 디바이스 별 분기점을 지정하여 크기와 방향에 맞게 레이아웃을 조정하였습니다.

BK Heavy Industries logo1 기본 BI
BK Heavy Industries logo1 15 그리드 기반 페이지 디자인 및 퍼블리싱

콘텐츠2 영역

+ Design & Publishing System Principle

기존 중공업 웹사이트 아웃풋에 대한 사용자의 니즈를 파악하여 사용자에게 최대한 짧은 단계에서 많은 정보를 접할수 있는 경험을 제공할 수 있도록 기획하였다.
Index
회사의 이념, 브랜드 소개 콘텐츠를 메인에 다양하게 배치하여, 전반적인 콘텐츠를 한번에 확인 가능
Short Scroll
사용자의 스크롤 피로감을 줄이기 위하여, 컨텐츠를 짧은 영역 내 효율적으로 표현
Plugin & CSS
Nav JQuery, Slick, Position 외 다양한 자바스크립트, JQeury, CSS를 활용한 콘텐츠 구성
Contents
콘텐츠의 내용을 바로 보여주는 방식에서 마우스 오버 시 보여주는 방식으로 변화

콘텐츠3 영역

콘텐츠4 영역

bkheavy overview
현대중공업 이미지1
현대중공업 이미지2
현대중공업 이미지3
현대중공업 이미지4