청정원

웹 가상 시안작업

CLIENT청정원 웹 가상 시안작업
DATE2017. 02. 20
PROGRAMIllustrator, PHOTOSHOP
PROJECT기획 100%, 디자인 100%
URLhttp://webportfolio.dothome.co.kr/chungjungone
 청정원 가상 시안 메인화면

웹 디바이스 환경에
대한 이해

  • 각 구성요소에 알맞는
    레이아웃 배치
  • 기능별
    영역 구성
  • 웹 페이지 성격에 맞는
    그래픽 요소 선정
  • 그리드 시스템을 적용한
    레이아웃

웹 UI/UX
프토토타입

디자인 구성요소 제작

웹페이지 형식에서 강조되어야 할 부분의 그래픽 방향을 결정 및 디자인 구성과 심미성, 사용성, 매체성 구성요소 제작.

다양한 모바일 스크린 크기에 대응하여, 가상으로 시안작업한 타임스퀘어의 메인, 서브페이지

STORY

해당 프로젝트는 기존 청정원 웹 사이트를 분석하여 심도있게 디자인해볼 수 있는 작업이었습니다.

헤더, 내비게이션, 콘텐츠, 영역 분할, 푸터 등 각 구성 요소들을 이해하고 , 배치하도록 노력하였습니다.

청정원의 핵심 콘셉트를 타이포그래피, 모양, 컬러, 크기,카드형식의 배치 등 디자인 요소를 통해 구현하였습니다.

각 페이지의 일관성 및 차별화를 달성하기 위한 디자인 요소를 반복, 규칙성 등의 리듬 요소를 활용하여 제작하였습니다.

NCS 수업 중 첫 웹 시안 작업에 있어서 웹 페이지의 성격을 강조할 수 있는 디자인 요소를 색상대비,명도대비, 면적, 공간 등의 배치를 고려하여 판단하고 표현 할 수 있는 많은 것을 배울 수 있는 기회였습니다.

기능별 폰트의 콘셉트 와 이를 시각요소로 이해하며, 웹 페이지의 성격에 맞는 다양한 그래픽 요소를 반영 할 수 있게 되었습니다.