디자인 프로세스 중 두 번째 항목인 사전 준비에 대해 설명한다.
정의 | 사전 준비 | 디자인 |
디자인 목표 설정 디자인 컨셉 아이데이션 |
비쥬얼 컨셉 설정 프로토 타이핑 만들기 |
디자인 진행 스타일 가이드 디자인 템플릿 디자인 검수 |
비쥬얼 컨셉 설정
비쥬얼 컨셉 정리
앞에서 진행한 디자인 컨셉 아이데이션을 바탕으로 어떤 디자인을 진행할 것인지 구체화하고 아래 내용에 대해 정리한다.
- 무드 보드에 대한 설명
- 선택한 컬러를 사용한 이유
- 선택한 폰트를 사용한 이유
#디자인 정의
rosakim90.tistory.com/entry/2-%EB%94%94%EC%9E%90%EC%9D%B8-Define
디바이스 환경 설정
시안 제작 전, 어떤 디바이스에 디자인이 노출될지 확인하고, 환경을 우선 셋팅한다.
# 모바일의 특징
모바일은 PC 대비 크기가 작고 항상 손에 들려있는 디바이스다. 따라서 환경적인 요소들을 잘 파악하여 디자인에 녹여내야 한다. 또한 다양한 모바일 해상도가 존재하기 때문에 어떤 모델에 기준을 잡고 진행할지 협의가 필요하다. 모바일에 대한 설명은 이후 자세하게 다룰 예정이다.
- 모바일은 이동 중 사용이 많다.
- 때문에 동적 사용과 환경의 변화를 고려해야 한다.
- 위에서 말한 동적 사용을 Mobile Usability라고 한다.
- 한 손 사용을 고려해야 한다.
- 성인 남성 기준 엄지 터치 영역 = 72 pixel
- 성인 남성 기준 검지 터치 영역 = 52 pixel
- 1번과 2번 내용에 따라 여러 가지 상황에 대한 고려가 있어야 한다.
- 버튼과 버튼 사이를 52-72px 이상 떨어지게 한다.
- 긍정 버튼 요소를 우측 하단에 배치한다.
# 웹의 특징
웹은 스크린이 크기 때문에 여백에 대한 고민이 많이 필요하며, 퍼블리셔 또는 프론트엔드와의 협업을 위해 그리드를 잘 잡는 것이 중요하다. 또한 연도별 주 사용 해상도가 상이할 수 있으니 아래 사이트를 통해 사람들이 어떤 해상도를 많이 사용하는지 확인할 필요가 있다.
gs.statcounter.com/screen-resolution-stats/desktop/south-korea
프로토타이핑
비쥬얼 컨셉 및 노출될 디바이스가 정해졌다면, 메인 시안을 제작하고 그에 맞는 프로토타이핑을 제작한다. 이때 제작하는 프로토타이핑은 디자인이 완료된 상태에서 만드는 거창한 프로토타이핑이 아닌, 간단하게 메인 메뉴 이동 정도를 볼 수 있는 프로토타이핑을 말한다. 메인 메뉴를 이동했을 때 어떤 느낌이 나는지, 어떤 애니메이션을 사용할 것인지 등을 눈으로 확인하고 결정하는 단계이다.
#스케치에서 프로토타입 만들기
#인비전에서 프로토타입 만들기
'달밤에 디자인 초심찾기 > 디자인 프로세스' 카테고리의 다른 글
#5 - 디자인 정의 - 컬러 (0) | 2020.12.03 |
---|---|
#4 - 디자인 시작 (0) | 2020.12.03 |
#2 - 디자인 정의 (0) | 2020.12.01 |
#1 - 디자인 순서와 사용 툴 (0) | 2020.11.29 |
#0 - 프롤로그 (0) | 2020.11.29 |