#3 - 사전 준비

디자인 프로세스 중 두 번째 항목인 사전 준비에 대해 설명한다.

 

정의	사전 준비	디자인
디자인 목표 설정 디자인 컨셉 아이데이션	비쥬얼 컨셉 설정 프로토 타이핑 만들기	디자인 진행 스타일 가이드 디자인 템플릿 디자인 검수

 

---

 

비쥬얼 컨셉 설정

비쥬얼 컨셉 정리

앞에서 진행한 디자인 컨셉 아이데이션을 바탕으로 어떤 디자인을 진행할 것인지 구체화하고 아래 내용에 대해 정리한다. 

 

1. 무드 보드에 대한 설명
2. 선택한 컬러를 사용한 이유
3. 선택한 폰트를 사용한 이유

 

#디자인 정의

rosakim90.tistory.com/entry/2-%EB%94%94%EC%9E%90%EC%9D%B8-Define

#2 - 디자인 정의

 

디바이스 환경 설정

시안 제작 전, 어떤 디바이스에 디자인이 노출될지 확인하고, 환경을 우선 셋팅한다.

 

# 모바일의 특징

모바일은 PC 대비 크기가 작고 항상 손에 들려있는 디바이스다. 따라서 환경적인 요소들을 잘 파악하여 디자인에 녹여내야 한다. 또한 다양한 모바일 해상도가 존재하기 때문에 어떤 모델에 기준을 잡고 진행할지 협의가 필요하다. 모바일에 대한 설명은 이후 자세하게 다룰 예정이다.

 

1. 모바일은 이동 중 사용이 많다.
   1. 때문에 동적 사용과 환경의 변화를 고려해야 한다.
   2. 위에서 말한 동적 사용을 Mobile Usability라고 한다.
2. 한 손 사용을 고려해야 한다.
   1. 성인 남성 기준 엄지 터치 영역 = 72 pixel
   2. 성인 남성 기준 검지 터치 영역 = 52 pixel
3. 1번과 2번 내용에 따라 여러 가지 상황에 대한 고려가 있어야 한다.
   1. 버튼과 버튼 사이를 52-72px 이상 떨어지게 한다.
   2. 긍정 버튼 요소를 우측 하단에 배치한다.

 

# 웹의 특징

웹은 스크린이 크기 때문에 여백에 대한 고민이 많이 필요하며, 퍼블리셔 또는 프론트엔드와의 협업을 위해 그리드를 잘 잡는 것이 중요하다. 또한 연도별 주 사용 해상도가 상이할 수 있으니 아래 사이트를 통해 사람들이 어떤 해상도를 많이 사용하는지 확인할 필요가 있다.

 

gs.statcounter.com/screen-resolution-stats/desktop/south-korea

Desktop Screen Resolution Stats Republic Of Korea | StatCounter Global Stats

 

 

 

---

 

 

프로토타이핑

비쥬얼 컨셉 및 노출될 디바이스가 정해졌다면, 메인 시안을 제작하고 그에 맞는 프로토타이핑을 제작한다. 이때 제작하는 프로토타이핑은 디자인이 완료된 상태에서 만드는 거창한 프로토타이핑이 아닌, 간단하게 메인 메뉴 이동 정도를 볼 수 있는 프로토타이핑을 말한다. 메인 메뉴를 이동했을 때 어떤 느낌이 나는지, 어떤 애니메이션을 사용할 것인지 등을 눈으로 확인하고 결정하는 단계이다.

 

 

 

#스케치에서 프로토타입 만들기

designbase.co.kr/sketch-8/

스케치에서 프로토타입 만드는 방법(Prototyping) - 스케치 강좌

 

 

#인비전에서 프로토타입 만들기

designbase.co.kr/invision-1/

#1 인비전의 장점과 사용법 5분으로 끝내자 – 인비전 프로토타이핑 툴 강좌 | 디자인베이스