제조/기계/금속/소재
두루스코이브이
  • #전기차 무선 충전기 #카스토퍼 #신재생에너지
CLIENTS.
두루스코이브이
DATE.
2022. 05. 03
TYPE.
Responsive Web

제조/기계/금속/소재

두루스코이브이 #전기차 무선 충전기 #카스토퍼 #신재생에너지
제조/기계/금속/소재
두루스코이브이
  • #전기차 무선 충전기 #카스토퍼 #신재생에너지
CLIENTS.
두루스코이브이
DATE.
2022. 05. 03
TYPE.
Responsive Web
Device.

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 반응형 웹으로 제작되었습니다.

기획의도.

자연 환경을 보호하고, 인류의 보다 가치있는 지속가능한 미래의 새로운 창조를 계획하는
전기차 충전기 전문회사 두루스코이브이의 스마트 카스토퍼 및 전기차 충전기를 홍보하고자 홈페이지를 구축하였습니다.
고퀄리티 3D 렌더링 이미지와 영상을 사용하여 두루스코이브이의 제품을 부각시키고자 하였으며
곳곳에 충전하는 듯한 인터렉션 효과를 구현하여 기업의 아이덴티티를 강조하고자 하였습니다.
제품을 강조하는 사이트의 기획의도와 맞게 중요한 정보를 쉽게 찾을 수 있도록 간결한 레이아웃으로 기획되었습니다.

Design Concept.

"충전" 이라는 컨셉을 부각시키고자 배터리 모양을 디자인 요소로 활용하였습니다.
고급스럽고 세련되 보이도록 어두운 배경 컬러에 두루스코이브이의 오렌지 컬러를
곳곳에 활용하였습니다.
직접 그린 제품 라인을 활용하여 사업분야를 강조시켰으며, 라인 아이콘에
포인트 컬러를 사용하여 기업의 아이덴티티를 부각시켰습니다.
또, 신재생에너지(그린에너지)를 강조하기 위해 나뭇잎 디자인 요소를 활용하였습니다.

Colors.
Typo.
Proposal Design.

제품을 부각한 A타입의 시안은 두루스코이브이의 로고를 활용한 모션이 메인 비주얼에 나타나면서 기업의 아이덴티티를 부각시켰으며
"충전" 이라는 컨셉을 더욱 부각시키기 위해 메인에서 사용한 네가지 단어가 처음에는 외각 라인만 있다가 서서히 채워지는 모션을 생각해 본 B시안은
두루스코이브이 로고에서의 귀엽고 동글동글한 타이포 느낌과 유사하게 각지지 않은 도형을 사용하였습니다.
A타입과 B타입은 고급스러운 느낌을 부각시키기 위해 전체적으로 어두운 느낌으로 작업하였으며, C타입은 좀 더 산뜻한 느낌을 주고자 밝게 작업하였습니다.

  • A Type
  • B Type
  • C Type
Confirm Design.
Go Website
Sub Design.
Motion.

메인 페이지 제품소개 페이지에 패럴랙스 스크롤 효과를 구현하여 제품이 부각되도록 작업하였습니다.
또한 충전을 형상화한 요소에 반짝이는 듯한 효과를 구현하여 두루스코이브이의 아이덴티티를 부각하였습니다.
서브 비주얼의 이미지가 전체 보여진 후, 채워지는 모션 효과를 주어 "충전" 이라는 키워드를 다시한번 강조하였습니다.

관련 프로젝트.
List