다음글 이전글
UX Convergence design national museum of korea
01 OVERVIEW

일러스트를 활용한 간결한 웹디자인 국립중앙박물관 사이트

2013년 국립중앙박물관을 국가의 공공기관의 딱딱함을 탈피하여 일반적인 웹사이트의 구조로 일러스트적인 요소를 가미하여 유저에게 더욱 친근한 사이트로 홍보하기 위해 실사이미지보단 아기자기한 일러스트로 표현 하였다. 전시회 사이트인 만큼 깔끔하게 레이아웃을 정리하였고 메인 비주얼 영역에서 유저의 성향을 파악해 전시회일정 및 예매부분을 부각시키켰다. 즉, 간결한 정보구조의 표현(직관과 효율), 친근한 느낌(보기쉬운), 투톤색감(고급스러움)을 사용하여 국립중앙 박물관의 아이덴티티를 표출하였다.

Web Convergence class / 김소연 학생 제작작품

Web Convergence class / 김소연 학생 제작작품
- 브랜드
: National Museum of korea
- 종류
: User express Site
- 제작프로그램
: Photoshop, Illustration, Dreamwever
- 레이아웃
: Column, Hierarchical, module, composite grid
- 타이포그래피
: 이미지폰트 80%, 시스템 폰트 20%
- 디자인 이론
: 계층적인 혼합그리드로 아르누보적인 요소의 일러스트로 구성
- 비주얼 스킬
: 일러스트를 활용한 깔끔한 편집
- 웹표준
: 부분 웹 표준화
- 제작컨셉
: 2013년 국립중앙방물관을 찾는 사람들에게 친근하게 다가가면서 다양한 전시정보및 예매를 직관적이면서 친근하게 하기 위한 브랜드 사이트로 국립중앙방물관의 인지도 또한 높이기 위해 제작하였다. 전시 및 각종 일정을 예매하기 쉽게 퀵메뉴를 인포그래픽으로 구현하여 비주얼 바로 아래 배치하였고 깔끔한 레이아웃과 일러스트를 적제적소의 마진에 배치 하여 메인 컨텐츠에 집중하게 하였다.
02 Plan & analysis

국립중앙박물관 공공시설 웹 디자인 기획 및 방향성 분석

전시일정 및 전시예매를 친근하게 하기 위한 공공시설 사이트로 전시를 보다 쉽게 예매하고 쉽게 인지할 수 있도록 제작. 간결한 레이아웃으로 정보구조를 효율화 시키고 인포그래픽과 일러스트로 친근한 비주얼을 구성하여 기존 딱딱한 이미지를 탈피하고 아이덴티티를 확립.

project goal
홍보체널 + 웹아이덴티티 확립 + 박물관 이미지 제고
situation
  • 실사 비쥬얼만을 사용하여
    다소 딱딱한 이미지
  • 국립중앙박물관 웹사이트의
    아이덴티티 미확립
  • 다소 복잡한 정보구조
  • 일러스트를 이용하여
    부드러운 느낌을 전달
  • 국림중앙박물관의 컬러와 비쥬얼
    적용으로 웹 아이덴티티 재구축
  • 메인페이지에 사용자에게 꼭 필요한
    컨텐츠
    들을 모아 바로 볼 수 있게함
strategy
일러스트 사용으로 부드럽고 친근한 느낌을 전달

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

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

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

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

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

03 work Story

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

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

일러스트 및 아이콘  작업 과정
visual
visual_img
icon
icon_img
04 OUTPUT

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

- visual 영역 :

일러스트에 감성을 더해 포스터를 부각시키고 정보 및 예매와 필요한 정보를 쉽게 배치해서 유저의 관점에서 쉬운 사이트를 구성하였다. 일반적으로 많이 사용하는 서체를 사용하여 공공시설의 단정한 미적기능을 주었다.

01.main
main
02.sub - About the Museum
About the Museum
03.sub - Visit
sub - Visit
04.sub - Exhivitions
sub - Exhivitions
05.sub - Education
sub - Education
06.sub - Concerts & Events
sub - Concerts & Events
07.sub - Collection
sub - Collection
08.quick menu - Guide
quick menu - Guide
09.quick menu - Calendar
quick menu - Calendar
10.quick menu - Ticket
Ticket
11.quick menu - Location
quick menu - Location
12.quick menu - Facilities
quick menu - Facilities
05 publishing

rolling & mouse over를 이용한 사이트 구성

- rolling & 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