대한민국 국회, 국회 박물관 홈페이지 UX/UI 디자인 개편

이전 대한민국 국회, 국회 박물관 홈페이지 디자인 개편입니다.

위에 보이는 이미지가 이전 국회 홈페이지

 

국회 홈페이지는 기존에 사이트가 너무 오래되었고

웹아이덴티티를 비롯한 디자인적인 측면에서 대부분 통일성, 심미성 등 노우화 되었습니다.

개편하기에는 최적에 환경이라고 할 수 있겠습니다.

처음부터 차근차근 정리해서 스타일을 잡아가면 수월하기 때문입니다.

고객에 입장도 그리 큰 요구사항도 없었기 때문에 확실한 디자인 콘셉트와 웹아이덴티티를 구성하여

톤 엔 매너를 생각하면서 디자인을 진행하기로 하였습니다.

 

DESIGN CONCEPT

“국민과 함께하는 국회” 콘셉트

기존 정보를 정리하여 박물관 특성에 맞춤형 정보로 보일 수 있도록 구성하며 사이트의 전문 정보를 각 섹션별로 그룹화하여 디자인 콘셉트를 표현합니다.  표현방식은 플랫 디자인(평면적이면서 직관적인 카드 형태의 메트로 디자인) 형태로 제공합니다.

 

색상

밝은 청색 (주제색상), 청색 (보조색상), 흰색 (배경색상), 녹색 (포인트색상)

- CI 기준으로 색상 설정.

주제색상은 밝은 청색으로 선택하여 지성과 희망의 국회를 상징하며 청색(바른 신념의 정치, 국민에게 신뢰받는 국회의 이미지를 표현하였으며, 국회의 대표성과 위상을 전달)이 배색되어 각각에 역할을 나누어 공간을 조화롭게 인식합니다.

포인트 색상 녹색은 평화롭고 안정적인 정치, 국민과 함께하는 국회의 친근함을 표현.

 

폰트

기본 폰트로 본고딕 폰트를 사용하며 가독성을 높히기 위해 기본 14pt로 구성.

 

그리드

세로 그리드, 1200px에 최적화 되었습니다.

추후 확장성을 고려해서 모든 디바이스에 적용될 수 있도록 반응형으로 제작되었습니다.

개편된 대한민국 국회 홈페이지 메인, 서브 화면

 

디자인 콘셉트와 웹아이덴티티를 적용한 개편된 디자인 화면입니다.

톤 엔 매너를 생각하면서 전체적으로 페이지를 디자인하였습니다.

 

다음은 국회 박물관 홈페이지 디자인입니다.

국회 박물관은 이전에 따로 홈페이지가 없었고 국회방문자센터에 헌정기념관이란 서비스로 제공이 되어 저 있어서

찾아보기 힘들었고 방문자센터 분위기가 강해 박물관 이미지 구축이 필요한 시점 이였습니다.

위에 보이는 이미지가 이전 국회 박물관 홈페이지

 

DESIGN CONCEPT

“국민과 함께하는 국회 박물관” 콘셉트

기존 정보를 정리하여 박물관 특성에 맞춤형 정보로 보일 수 있도록 구성하며 사이트의 전문 정보를 각 섹션별로 그룹화하여 디자인 콘셉트를 표현합니다. 표현방식은 플랫 디자인(평면적이면서 직관적인 카드 형태의 메트로 디자인) 형태로 제공합니다.

 

색상

밝은 청색 (주제색상), 청색 (보조색상), 흰색 (배경색상), 녹색 (포인트색상)

- CI 기준으로 색상 설정.

주제색상은 밝은 청색으로 선택하여 지성과 희망의 국회를 상징하며 청색(바른 신념의 정치, 국민에게 신뢰받는 국회의 이미지를 표현하였으며, 국회의 대표성과 위상을 전달)이 배색되어 각각에 역할을 나누어 공간을 조화롭게 인식합니다.

포인트 색상 녹색은 평화롭고 안정적인 정치, 국민과 함께하는 국회의 친근함을 표현.

 

폰트

기본 폰트로 본고딕 폰트를 사용하며 가독성을 높이기 위해 기본 14pt로 구성.

 

그리드

세로 그리드, 1200px에 최적화되었습니다.

추후 확장성을 고려해서 모든 디바이스에 적용될 수 있도록 반응형으로 제작되었습니다.

개편된 국회 박물관 홈페이지 메인, 서브 화면

 

국회 홈페이지의 디자인 콘셉트와 웹아이덴티티를 계승해 와서

전체적인 느낌은 국회 홈페이지와 비슷하며 다른 게 있다고 하면 박물관 사이트이다 보니

특정 콘텐츠를 살릴 수 있는 디자인 요소와 적절한 레이아웃의 구성으로

전체적인 디자인 스타일을 이끌어 나갔습니다.

 

이번 국회, 국회 박물관 홈페이지를 디자인하면서

다시 한번 느낀 것은 디자인 콘셉트와 웹아이덴티티, 톤 엔 매너의 중요성을 인식했습니다.

혼자 할 때는 모를 수도 있는 얘기지만 2~3명 이상의 협업을 통한 작업을 하게 된다면

디자인 가이드(디자인 콘셉트, 웹아이덴티티, 그 외 엘리먼트 가이드 제공 등)의 제시는

반드시 필요하다는 것을 말씀드립니다.

 

여러분도 협업을 통한 디자인 작업은 어떻게 하시는지 궁금하네요.

앞으로도 멋진 프로젝트와 공동 작업 내용 공유하도록 하겠습니다.

 

감사합니다.

 

국회 & 국회박물관 웹사이트 UX/UI 디자인 : 디자인 갤러리