UI 디자인 기초
1. Define
- Project Goal 설정
- Analisys
- AS-IS
- Visual Concept
- 개념적인 측면
- Workshop
2. Image&Mood board
Message
Mood Board
- 분위기를 한 장으로 표현하는 것
- 기획자의 플랫폼에 반영할 의도를 보여주는 요소
Image Type
Vector
- 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식
- 이미지의 크기를 늘리고 줄여도 손상되지 않는 장점이 있다
- 용량이 작아서 파일 관리하기 편리하다
Bitmap
- 서로 다른 점들의 조합으로 그려지는 이미지 표현 방식
- 픽셀이 많으면 정교한 색 표현이 가능하나, 용량이 커짐
- 이미지 확대할 경우 이미지가 깨지는 현상이 발생한다
JPG
- 정지영상의 압축과 복원방식에 대한 국제표준의 하나
- 호환성이 좋으며, 용량이 작다
- 1600만 색상을 나타낼 수 있어 고해상도에 적합
GIF
- 그래픽을 압축해 빠르게 전송하기 위해 개발한 압축 저장 방식
- 무손실 압축 기술을 활용해 이미지 손상이 적고, 용량이 작아 전송 속도가 빠르다
- 이미지 파일 내 문자열 등 정보를 함께 저장 가능
- 여러 장의 이미지를 한 파일에 넣을 수 있다.
PNG
- GIF를 대체하기 위해 개발된 파일 포맷
- JPG, GIF보다 용량은 크지만, 비손실 압축 방식으로 원본 손상없이 파일 크기를 줄일 수 있다
SVG
- 2차원 벡터 그래픽의 표현을 위한 XML 마크업 언어
- 확대나 축소를 해도 픽셀이 깨지지 않고 화질이 유지되며 용량이 PNG, GIF보다 작다
3. Color
Red
- 강렬한 이미지
- 열정, 집중, 사랑, 동적인 이미지
- 역동감&속도감 넘치는 이미지
- 패스트푸드, 통신, 배송, 서비스, 스트리밍 서비스 등에 자주 사용
- 주의나 경고를 표시하는 이미지
Yellow
- 즐거움, 창의적인, 적극적인, 소통
- 밝고 쾌활한 이미지, 가벼운 이미지
- 메신저 앱, 배송, 금융 등에 자주 사용
Blue
- 신뢰감, 정직함, 윤리적인, 첨단 기술
- 결제 시스템, 금융, 기술 분야 등에서 자주 사용
Green
- 건강함, 신선함, 성장, 친환경적인, 삶의 활력, 안정감
- 식료품, 요식업, 뷰티 업계 등에 사용
- 승인, 허용 등을 표시하는 이미지
Orange
- 활력, 사교성, 아이디어, 자유
- 소비자들의 행동을 유발하는 특징
- 클릭을 유도하는 UI에 사용
Purple
- 고급스러운, 신비스러운, 창의적인, 상상력
- 창의성과 관련된 서비스, 뷰티, 코스메틱 등에 사용
- 메인컬러가 핑크, 블루일 경우 서브 컬러로 많이 사용
Black
- 현대적인, 우아함, 신비로움, 럭셔리함
- 패션브랜드, 디자인 업계에 많이 사용
- 활용도가 높은 컬러
Multi Colored
- 글로벌, 포용, 스펙트럼이 넓은 이미지
- 다양한 제품 등을 판매 또는 제공하는 업계에서 사용
4. Typography
- 주요 커뮤니케이션 디자인요소 중 하나
- 정보전달과 더불어 감성을 담을 수 있다
Serif
- 텍스트의 끝부분에 돌기형으로 장식 요소가 있는 것을 Serif라고 한다
Sans Serif
- 텍스트 끝부분에 장식 요소가 없다는 의미로 Sans을 붙인다
- Without을 프랑스어로 번역하면 Sans이다.
Baseline
- 일정한 글줄의 모든 글자들이 그 위에 놓여 있다고 가정하는 수평선
Cap height
Ascenders&Descenders line
- 서체의 가장 높은(Ascenders) 라인과 가장 낮은 라인(Descenders)
Weight
Letter-spacing
- 글자의 자간, 공간값
- 동시에 자간을 조정하는 것을 트래킹이라고 한다
Kerning
Line length
Line height
Paragrahp spacing
Type alignment
