✔︎ AS-IS, 동종 유사 분석 후 시각화에 대한 분석 진행
✔︎ Design Authoring Tools
* Figma : 최근 가장 많이 사용하는 툴.
그외 Sketch, Adobe XD, Protopie(프로토타이핑), Zeplin(개발의 전달) 등 사용
IMAGE
✔︎ MESSAGE
✔︎ MOOD BOARD
특정 주제를 설명하기 위해 텍스트, 이미지, 개체 등을 결합하여 보여주는 보드
ex. Airbnb - 현지를 경험하는 가치를 위해 live한 느낌의 이미지를 전달
✔︎ VECTOR, BITMAP 이미지의 차이
Vector: 크기 조절 자유로움, 출력물에 해당하는 대다수의 이미지, 용량이 적어 파일관리가 용이, SVG
BITMAP: 각 픽셀이 저장된 bit 정보의 집합, 정교한 이미지 표현이 가능하나 용량이 크고 이미지 확대 축소 시
픽셀 수의 변화로 품질 변화. 각 픽셀 하나하나에 이미지를 가지고 있음, JPG, GIF, PNG
* JPG: 1600만 색상 표현, 고해상도 이미지 표현에 적합, 창작자가 이미지의 파일과 질 조절 가능* GIF: 이미지의 용량을 light하기 쓸 수 있음, 사이즈가 작아 여러개의 이미지 한 개에 담을 수 있음, 그래픽을 압축해 전달* PNG: gif보다 작은 용량으로 표현 가능, 원 이미지에 손상 주지 않는 압축, 부드러운 표현 가능, 투명한 이미지 그대로 사용 가능* SVG: 2차원, language 기반
COLOR
가장 처음 인식되고, 가장 오래 기억에 남는 강력한 표현수단이자 커뮤니케이션 도구
* RED: 강렬, 열정, 집중, 사랑, 역동적인 이미지, 속도감 - 통신, 패드스푸드, 스트리밍 등. , 공격적, 주의/위험->유의할 필요가 있음
* YELLOW: 즐거운, 창의적인, 진보적인, 적극적인, 활동적인, 소통, 밝고 쾌활, 스펙트럼이 가장 가벼운 색조, 희망적+즐거움 소통을 중시하는 메신저 앱/배송사/금융사 등에서 사용. 통통튀고 창의력->오히려 가벼워보여 무지한 이미지, 부진한 이미지, 미성숙하게 오인되지 않도록 유의
* BLUE: 신뢰감, 정직함 -> 결제 시스템/ 금융브랜드 에서 선호. 논리적인 이미지 +첨단 기술 -> 컴퓨터/인터넷 환경의 브랜드
* GREEN: 건강함, 신선함, 조화로움, 성장하는, 환경적 요소 -> 환경에 관심/ 식료품/화장품 브랜드 등 , 건강함, 활력, 안정, 성공, 안전, 승인 -> 긍정적인 행동 효과 표지. / 다소 지루하고 따분하게 느껴질 수 있어서 컬러 외 다른 디자인 요소 활용하여 보완 하면 좋음
* ORANGE: 활력, 사교성, 아이디어, 자유, 소비자의 행동을 유발하는 컬러-> 다양한 기업에서 포인트 컬러로 활용/마케팅 페이지에서 클릭을 유도하는 UI로 사용되기도. 메인 컬러가 난색계열일 시 서브컬러로 사용하기 좋음
* PURPLE: 고급스러운 이미지, 신비로운 이미지, 창의적인 이미지나 yellow랑은 다름. 상상력을 자극하는 컬러, 고급스러운 이미지를 위해 화장품/식료품/쇼핑 등에서 많이 사용하기도. uxui에서 메인이 핑크/블루일 경우 서브나 그라데이션으로 활용하기 조화로움
* BLACK: 현대적, 볼드한 이미지, 우아, 신비로움, 럭셔리 -> 명품/패션 브랜드에서 활용. 모던함. 활용도 높은 컬러, 트렌디
* MULTI COLOR: 글로벌, 포용하는 이미지, 소통, 스펙트럼이 넓은 느낌, 다양한 플랫폼을 가진 구글/MS등 , 다양한 제품 취급하는 이베이 등. uiux에서는 브랜드의 톤앤매너를 표현하기에는 다소 어려운 컬러.
COLOR MODE
✔︎ RGB: 혼합될수록 밝아짐. 빛의 삼원색, 레드/그린/블루.TV/모니터/모바일 등 영상장치 해상도를 조절하는 표시장치에서 사용. 불연속 스펙트럼. 빛을 내는 방식이 회사마다 다름
✔︎ CMYK: 혼합될수록 어두워짐. 종이에 대한 오프셋 인쇄에 쓰이는 4가지 색을 이용한 잉크체계. 시안/마젠타/옐로/블랙(Key Plate)
잉크의 반사광 성질을 이용한 것이라, 감산 혼합. 표현 가능한 색이 적음. 디지털 인쇄물. 색 재현에 있어 가장 경제적
디지털 인쇄물 시 모니터는 RGB..-> 괴리감이 있을 수 있음
✔︎ PANTONE - 별색으로 활용
✔︎ HSB & HSL - Hue(색상), Saturation(채도), Brightness/Value(명도) & Lightness/luminance(휘도)
HSB 모델: 컴퓨터 그래픽스(CG)에서 색을 기술하는데 사용하는 색모델의 하나.
HSL 모델: HSB 모델에서 명도만 변형된 색 모델. 다른 그래프 모델을 띔. 밝기는 hsb모델의 채도와 명도에 영향을 주기도.
* H: 색원상의 색인 hue. 0도 적색/ 60도 황색/ 120도 녹색/ 180도 시안(청록)/ 240도 청색/ 300도 마젠타(적보라) 표현
* S: 채도. 어떤 특정 색상의 색의 양, 0-100% 백분율로 나타냄.
* B: 명도. 어던 색 중 백색의 양, 0%에 가까워질수록 흑, 100%에 가까워질수록 백을 표현
✔︎ HEX Code: RGB모드의 Red, Green, Blue 의 값을 16진법으로 표현하여 6자리의 알파벳과 숫자로 표현한 값
0은 불이 꺼졌고, F는 불이 가장 밝아졌다고 생각(최대출력)
000000: black/ FFFFFF: white
COLOR Combination
유사색, 보색(반대) 등.
Typography
주요 커뮤니케이션 디자인 요소 중 하나. 정보전달과 더불어 감성을 전달.
*Serif 글자의 엣지부분에 장식요소
*Sans Serif 글자 엣지 부분에 장식요소가 없음
정보전달이 우선. 가독성이 좋음
- Baseline : 알파벳 받침이 되는 지평선
- Cap height : 대문자 (M이나 I 기준) 높이값(소문자가 높기도)
- X-height : 소문자 x 높이값
- Ascenders & Descenders : 가장 아래, 가장 높은 곳 값 -> 텍스트 영역 + 행간
- Weight (thin-bold..)
- Letter-spacing : readablity 를 좌지우지. 자간. 한꺼번에 늘리고 줄이는 값을 트래킹 이라 함
- Kerning : 한 글자 한 글자 사이의 간격 조절
- Line length : column을 구성하는 텍스트의 길이값을 얼마나 자주 줄지 . 중요한 요소. 너무 길거나 짧으면 가독성 떨어짐
문단 내 문장의 끝의 길이들을 유사하게 맞춰줘야 안정감있음
- Line height : 글줄 사이의 간격. base-line에서 base-line까지의 간격. 중요한 요소
- Paragraph spacing : 각 단과 단 사이의 간격
- Type alignment : 좌/우/센터 정렬.. 콘텐츠의 속성에 따라 배열 , 기본은 좌측. 중앙은 주요하거나 포인트
비전공자로서 정말 중요하다고 생각되는 강의였다. 더 깊게 공부하기 위해서 추가로 시간을 써야겠다.
이론만큼이나 감각 익히는 것도 중요하니, 비핸스도 매일매일 봐야겠다 !
'UI UX Design 학습 일지' 카테고리의 다른 글
| UI UX 디자인 학습 일지 / Week 3 - 14 : Icon, Interaction (0) | 2023.01.20 |
|---|---|
| UI UX 디자인 학습 일지 / Week 3 - 13 : Interface Design (0) | 2023.01.19 |
| UI UX 디자인 학습 일지 / Week 3 - 11 : Design Empathy, Process (0) | 2023.01.17 |
| UI UX 디자인 학습 일지 / Week 2 - 10 (0) | 2023.01.14 |
| UI UX 디자인 학습 일지 / Week 2 - 09 : UX Research - Persona, 사용성 테스트 (0) | 2023.01.13 |