WEB'S

스타일가이드 제작하기

스타일가이드를 통한 이해 관계자와의 소통

제작된 스타일 가이드를 바탕으로 다양한 관계자들과의 소통을 원활히 할 수 있다.

주요 화면(key screen)에 대한 스타일가이드 적용

GUI 스타일가이드 문서를 토대로 주요 화면에 대한 시안 디자인을 수행하여 스타일가이드 의 적합성을 확인해보고, 기획자와 개발자, 디자이너 간의 이견 조율을 통해 스타일가이드 를 결정하여야 한다.

GUI 스타일가이드 적용을 통한 시안 디자인 목적

• GUI 스타일가이드 적합성 확인 및 수정 사항 발견
• 팀원들 간 원활한 소통하기
• 본격적인 디자인 개발 전 오류의 최소화
• 사용성 검토
• 전체적인 룩 앤 필(look & feel) 검토

모바일 앱 GUI 디자인의 원칙

• 단순성 및 사용성
• 심미성, 명확하고 직관적인 정보 전달력
• 모바일 환경에 적합한 최적의 사용자 경험을 끌어내야 함

시안 디자인(draft design) 검토사항

본격적인 비주얼 디자인 작업을 시작하기 전, 시안 디자인을 통해 프로젝트에 관련된 이 해 관계자들과 토의를 진행하여 합의를 끌어내어야 한다.

• 시각 디자인 요소에 대한 검토
• 사용자 경험 측면에서의 검토
• 기능 구현의 가능성 검토
• 주요 화면에 대한 검토
• 사용자 경험 측면에 대한 검토

모바일 앱 화면 디자인 원칙

디자인의 원칙

• 메타포(metaphor)
  • 메타포를 활용하여 대상의 개념과 특징을 전달할 수 있도록 디자인해야 한다, 메타포 의 활용은 공간적 효율성과 문화 차이에 의해 발생할 수 있는 소통의 문제를 해결해 주지만, 올바르게 전달되기 어렵거나 난해한 메타포의 사용은 오히려 사용자 경험을 좋지 않게 할 수 있다는 것을 유념해야 한다.
• 직접 조작감
  • 사용자 자신이 객체를 직접 제어하고 있는 느낌이 들 수 있도록 디자인한다. 사용자는 자신의 행동에 대해 물리적인 결과를 기대할 뿐만 아니라, 즉각적인 피드백이 나타나 기를 기대한다.
• 직관적 디자인
  • 사용자가 기억에 의존하여 행동하지 않고, 인지를 통해 바로 행동할 수 있도록 한다.
• 반응과 대화
  • 사용자에게 현재 무슨 일이 일어나고 있는 지, 가능한 한 즉각적으로 알려주어야 한다. 시각적 혹은 청각적으로 피드백을 제공해야 한다.
• 정보 시각화
  • 정보를 잘 조직화하여 비주얼 디자인 원칙에 일치하도록 표현해야한다. 너무 복잡하거 나 사용자에게 부담을 주는 표현은 피하도록 한다.
• 접근성
  • GUI 디자인에서 일관성, 화면 레이아웃, 네비게이션 사용성 등의 원칙들이 지켜 사용 자에게 일관성 있는 개념적 구조를 제공하도록 해야 한다.
• 경제성
  • 경제성이란 간결성, 명료성 등의 하부 원칙과 함께 중요한 정보를 다른 정보와 차별화 시키고 강조함으로써 달성되는 개념이다. 간결성이란 디자이너가 커뮤니케이션을 위해 꼭 필요한 요소만을 디자인하는 것을 의미하는 것으로, 사용자가 인식할 수 있는 최소 한의 단서를 제공하여 시스템의 효율을 올리는 것을 의미한다.

시안 디자인의 의도 및 전개 과정을 이해하기 쉽고 명확하게 프레젠테이션 한다.