다음글
UX Convergence design gs energy design
01 OVERVIEW

일러스트를 활용한 효과적인 기업사이트 GS에너지

2013년 GS에너지의 추상적인 비쥬얼의 난해함을 탈피하여 좌측 네이게이션 구조로 뷰를 시원하게 일러스트 요소로 구성하여 유저에게 더욱 친근한 사이트로 홍보하기 위한 사이트를 기획하였다. 기업 사이트인 만큼 비대칭 2단 그리드및 칼럼으로 깔끔하게 레이아웃을 정리하였고 메인 비주얼 영역 에서 사업영역을 부각시키켰다. 즉, 간결한 정보구조의 표현(직관과 효율), 친근한 느낌(보기쉬운), GS의 아이덴티티 색감(따뜻하고 자연친화적인)을 사용하여 GS에너지의 아이덴티티를 표출하였다.

Web Convergence class / 김치영 학생 제작작품

 Web Convergence class 김치영 학생 제작작품
- 브랜드
: GS Energy
- 종류
: User express Site
- 제작프로그램
: Photoshop, Illustration, Dreamwever
- 레이아웃
: Column, Hierarchical, module, composite grid
- 타이포그래피
: 이미지폰트 80%, 시스템 폰트 20%
- 디자인 이론
: 비대칭 혼합그리드로 아이소메트리 방식의 일러스트로 구성
- 비주얼 스킬
: 쉐이프로 일러스트요소를 활용한 깔끔한 편집
- 웹표준
: 부분 웹 표준화
- 제작컨셉
: 2013년 GS에너지를 찾는 사람들에게 친근하게 다가가면서 다양한 사업정보및 기업이미지를 직관적이면서 친근하게 다가가기 위한 기업 사이트로 GS에너지의 인지도 또한 높이기 위해 제작하였다.회사 사업내용을 쉽게 인지하기 위해 간결한 3D 일러스트 아이소메트리 방식으로 구현하여 컨텐츠및 홍보 기업이미지에 집중하게 하였다.
02 Plan & analysis

GS에너지 기업사이트 디자인 기획 및 방향성 분석

사업내용 및 GS에너지를 친근하게 홍보하기 위한 기업 사이트로 정보를 보다 쉽게 인지하고 긍정적인 반응을 끌어낼 수 있도록 제작. 간결한 레이아웃으로 구조를 효율화 시키고 일러스트로 자연친화적인 비주얼을 구성하여 기존 난해하고 딱딱한 이미지를 탈피하고 아이덴티티를 확립

PROJECT GOAL
사업영역 홍보+ 웹아이덴티티 확립 + 기업이미지제고
Situation
  • 실사 비쥬얼만을 사용하여
    다소 딱딱한 이미지
  • GS에너지 웹사이트의
    아이덴티티 미확립
  • 다소 복잡한 정보구조
  • 일러스트를 이용하여
    부드러운 느낌을 전달
  • GS에너지의 컬러와 비쥬얼
    적용으로 웹 아이덴티티 재구축
  • 메인페이지에 사용자에게 꼭 필요한
    컨텐츠
    들을 모아 바로 볼 수 있게함
Strategy
일러스트 사용으로 부드럽고 친근한 느낌을 전달

일러스트를 사용해 고객에게 부드럽고 친근한 느낌을 주고 사업영역을 효과적으로 홍보함

심플한 비쥬얼과 간결한 정보구조

일러스트 아이콘과 비쥬얼을 사용해 직관적인 정보전달과 간결한 정보구조를 통해 필요한 정보로의 접근을 용이하게함

편리한 사용자 경험고려와 웹아이덴티티 확립

직관적인 영역구분과 고객 편의적인 UI를 제공하고,GS에너지의
컬러를 사용해 비쥬얼 스타일을 가이드화 함으로써 웹아이덴티티 확립

03 work Story

일러스트 및 아이콘 작업 과정

사이트의 성격과 기획, 톤앤매너를 고려한 비쥬얼 구상후 구체적으로 포토샵으로 제작

일러스트 및 아이콘  작업 과정
VISUAL & ICON
VISUAL & ICON
04 OUTPUT

일러스트와 퀵메뉴를 통한 친근하고 효율적인 정보접근이 쉬운 구성

- visual 영역 :

자연친화적인 일러스트에 3D 일러스트(아이소메트리 형식) 사업내용과 회사이미지를 부각시키고 회사 뉴스 및 취업정보 등, 필요한 정보를 쉽게 배치해서 광고홍보성 사이트를 구성하였다. 서체는 절제하여 색채로 아이덴티티를 나타내었다.

01.main
main
02.sub - COMPANY
COMPANY
03.sub - BUISINESS
BUISINESS
04.sub - MEDIA CENTER
MEDIA CENTER
05.sub - CAREERS
CAREERS
06.sub - ABOUT ENERGY
ABOUT ENERGY
05 publishing

motion을 이용한 비주얼 위주의 홍보 사이트 구성

- motion & mouse over :

비주얼 영역에서 좌우버튼을 누르면 양옆으로 롤링되며 시간차를 두고 자동롤링이 되도록 하였다. 최대한 절대된 에니메이션을 구동하여 GNB나 버튼영역의 마우스 오버때도 마찬가지로 심플한 버튼변환은 고급스러움을 더해준다.

main visual - new cosmetic
new cosmetic
main visual - rolling zone
rolling zone
main visual - new cosmetic - powder
new cosmetic - powder

UI디자인사이트 학생작품

저작권은 디자인나스에 있습니다. 스크랩하실 때출처를 남겨주세요.

디자인나스의 작품은 모두 학생작품입니다.

 

디자인나스는 국내최고의 디자인아카데미이자, 선두주자입니다.

  • 페이스북
  • 블로그
  • 인스타그램

nothing more than quality, designnas