지금까지는 Django, python중심으로 강의를 들었는데, 이제 본격적으로 멋쟁이 사자처럼 활동을 시작한다!
이번 멋쟁이사자처럼에서는 본격적으로 '창업'에 중점을 둬서 시작한다고 이야기를 들었는데, 그래서인지 강의의 내용도 UI/UX와 관련된 이야기라고 한다.
실제로 피로그래밍에서 프로젝트를 진행할때에도 로고나, 디자인 부분에서 다들 어려움을 많이 겪었어서 제대로 배워보고싶었던 분야이니만큼, 이번 기회에 디자인 감각을 좀 키워보려고 한다!
이번 UI/UX 강의에서는 AdobeXD를 사용한다고 하는데, 해당 툴은 CYMK를 사용해서 온라인용에는 적절하지만 인쇄용에는 적절하지 않다고 한다.
1. UI / UX란?
→ UX (User eXperience) 는 사용자의 경험을 디자인하는 것이고
→ UI (User Interface) 는 사용자가 보는 화면을 디자인하는 것.
원래는 와이어 프레임 → UI 디자인으로 진행하지만
아직 서툴 경우에는 화면 흐름 기획 → 와이어 프레임 → UI 디자인으로 진행한다.
2. 브랜드 디자인
브랜드 디자인은 브랜드를 나타내는 아주 넓은 범위를 포괄하는 디자인이다.
→ CI(Corporate Identity)는 기업의 정체성을 나타내며,
→ BI(Brand Identity)는 추가적인 서비스를 할 때 가지게 되는 또 다른 정체성이다.
예시를 들면 카카오가 CI라면, 카카오네비, 카카오 택시, 카카오 페이 등은 BI인것!
3. 브랜드 네이밍
브랜드의 이름은 크게 두 유형으로 나뉘는데, 서비스와 관련된 단어이거나 서비스 관련이 없는 단어이다.
다만, 이 두 유형 모두 다음과 같은 요소들을 충족해야한다.
- 기억하기 쉬울 것
- 너무 길지 않을 것
- 읽기 쉬울 것
4. 브랜드 컬러
브랜드를 대표하는 색으로, 색에도 의미가 있으므로 이를 참고하는 것이 중요하다.
다만, 보고 떠오르는 브랜드가 있는 색상은 좋지 않다.
멋사의 경우는 주황과 검정.
5. 브랜드 타이포그래피
두가지 유형이 있다.
- 로고타입 (이건 다음 차시에)
- UI
지원하는 언어를 참고할 것! 다국어 서비스의 경우 다국어 지원 폰트를 써야햠.
글씨체 고르는 3가지 기준
- 가시성 : 눈에 잘 띄는가?
- 판독성 : 글자가 무엇인지 잘 판단이 되는가?
- 가독성 : 오래봐도 눈이 피로하지 않는가?
→ 큰글자는 보기 좋게, 작은 글자는 읽기 좋게 배치하는 것이 필요하다. 기본적으로 3가지 정도의 폰트 두께를 준비하는 것이 좋다.
5. 브랜드 로고
심볼과 로고타입으로 나뉜다. 로고타입만으로도 하는 경우가 많다.
여기서 심볼은 파비콘(favicon)으로도 들어가는 경우가 많은데, 아래의 사진과 같은 모양이다.
6. 심볼 디자인
상징물을 정하고 → 상징물을 단순화시킬 것!
힘들다면, 구글링해서 아이콘을 찾아서 아이디어를 찾는 것도 좋다.
7. 풀 로고
크게 가로형, 세로형으로 나뉘는데 이는 배치에 따른 것이라서 특성에 맞춰서 제작하면 된다. 다만 아래의 것을 유의할 것!
- 로고의 전체적 균형감
- 로고 주변의 여유공간 (패딩을 적절히 줄것)
- 로고 사이즈 멀리서 봤을때도 예쁘게 나오는지 확인(가로 100픽셀정도로 확인)
7. 브랜드 디자인 가이드
브랜드 디자인 가이드 : 기업의 디자인 제작 및 사용시 참고하는 브랜드 규칙
→ 큰 기업에서 다양한 서비스로 나뉘어질 때, 브랜드 디자인을 통일하는 것이 필요하다.
기본적으로는 로고사용규정, 색상사용규정, 폰트시스템 + a로 이루어진다.
- 로고사용규정 : 대표로고, 반전로고(어두운 배경), 로고 여백, 최소 크기
- 색상사용규정 : 대표색상, 보조색상
- 폰트 시스템: 한,영 폰트 등( 언어에 맞는 폰트)
이렇게 디자인에 대해서 배워볼 기회는 별로 없었는데, 참 신선하고 좋은 경험인 것 같다!
'멋쟁이사자처럼' 카테고리의 다른 글
| 멋사 UI UX 2주차 강의 - 어도비 XD (0) | 2020.05.27 |
|---|