UX UI

[패스트 캠퍼스 수강후기] UIUX 인강 100% 환급챌린지 29회차 미션

두라이 2020. 9. 7. 12:05

UX/UI 디자인(2020) 올인원 패키지 Online.

오늘은 UIUX 인강은.. 매우 양이 많았다. 

사진을  정리해놨는데 티스토리의 문제인지 올라가지 않아서.. 하나하나 다시 캡쳐해서올렸다. 

 

 

03. UI 디자인

 

 

 

Color

  • 가장 처음 인식되고, 가장 오래도록 기억에 남는 강력한 표현수단이자 커뮤니케이션 도구
  • 기억을 장기 저장소로 보내주고 오래도록 휘발되지 않도록 하는 도구
  • 컬러는 오래도록 기억에 남을 것을 염두에 두고 디자인 해야 한다.

 

 

 

 

Red

  • 열정, 힘, 강인함, 사랑 등
  • 스피드, 액션 - 빠르다는 이미지

 

 

 

 

 

Orange

  • 행복, 젊고, 창의적인
  • 창의력 방 - 오렌지 색
  • 자유로운 영혼
  • 리액션을 부추기는, 행동을 유발하는 색
  • 구매하기 버튼, +버튼으로 행동을 유발

 

 

 

 

  • 웜컬러
  • 패스트푸드 등 프렌차이즈 서비스
  • 맛있어보이는 컬러

 

Yellow

  • 커뮤니케이션, 흥미 
  • 카카오톡, 스냅챗 등

 

 

 

 

 

Green

  • 자연, 프레시함, 성장하는 

 

 

 

 

 

Blue

바다와 하늘 - 신비한 세계, 경이로운 세계, 미래 등

  • 시원함
  • 신선함, 새로운
  • 신규 IT 서비스
  • 밤하늘
  • 차분함
  • 진중함
  • 진지함
  • 신뢰가 가는
  • 은행권

 

 

 

 

 

Purple

  • 신비한 color
  • 가장 늦게 염료가 발달된
  • 왕족, 미스테리, 로열티, 고급스러움
  • vip서비스
  • 여유로움, 힐링, 리프레시

 

왜 이 색깔을 썼지?

이 색깔이 가지고 있는 의미가 뭐지?

 

브랜드 별로 색깔을 소개해주는 사이트

 

 

Color mode

 

 

 

 

 

RGB 

  • 색이 섞이면 섞일 수록 밝아진다
  • 빛의 3원색인 RED, GREEN, BLUE인 적녹청에 의해 색을 정의하는 모델
  • 빛을 이용하여 색을 표현하는 디스플레이 (TV, 모니터, 폰) 등에서 사용
  • 빛의 혼합에 의해 색을 구성하기 때문에 더 많은 빛을 사용할 수록 밝아진다는 특징이 있다.
  • 기기와 기술력, 빛의 방식에 따라서 색상이 다를 수 있다.

 

 

 

 

 

 

CMYK 

  • 색이 섞이면 섞일 수록 어두워진다
  • 출판, 인쇄에서 사용되는 색 모델로 CYAN, MAGENTA, YELLOW, BLACK의 4개 색상으로 이루어져있다.
  • YMCK모델이라고도 부르며 빛과는 반대 방식으로 색을 섞을수록 어둡게 되는 특징이 있어 RGB로 작업된 디자인을 CMYK방식으로 인쇄하면 색이 다르게 표현될 수 있다.
  • CMY를 합친 색이 퓨어 블랙이 아니라서 K라는 별도의 블랙이 있다.
  • 섞어서 색을 만들다보면 완벽하지 않을 수 있어서 별색을 인쇄에서 많이 사용함
  • 팬톤 - 특정 색에 대한 표준을 만듦

 

 

HSB & HSL

컴퓨터 그래픽스(CG)에서 색을 기술하는 데 사용되는 색 모델의 하나인 색상, 채도, 명도 모델.

  • H는 색원상의 색인 색상을 뜻하는데, 0도에 적색, 60도에 황색, 120도에 녹색, 180도에 시안(청록색), 240도에 청색, 300도에 마젠타(적보라색)가 있다.
  • S는 채도(Saturation)를 뜻하는데, 어떤 특정 색상의 색의 양으로 보통 0~100%의 백분율로 나타낸다.
  • B는 명도(brightness)를 뜻하는데, 어떤 색 중 백색의 양으로 0%이면 흑이고 100%이면 백이다.

 

 

 

 

 

 

RGB & Color code

RGB를 Color code로 변환

 

0도 하나의 단계 

0부터 255 - max

 

 

 

Color Values

 

구체적으로 컬러 전달

 

 

RGB(0, 0, 0) - Black

RGB(255, 255, 255) - white

RGB(255, 0, 0) - Red

RGB(0, 255, 0) - Green

RGB(0, 0, 255) - Blue

 

 

 

 

 

Color Code - Hex code

#FFFFFF

  • 16진수
  • 0부터 F까지의 단계
  • 0부터 255까지의 단계
  • 각 채널의 값은 2개 필요
  • R2개 G2개 B2개
  • magenta #FF00FF
  • yellow #FFFF00
  • cyan  #00FFFF

 

 

 

 

 

 

 

 

 

 

애플

 

 

구글

 

 

 

 

 

 

Color Combination

 

 

 

 

 

Typography

design UI guide 용어

 

  • 타이포그래피의 1차적인 목적은 정보의 전달이다.
  • 그러나 느껴지고, 경험되어야 한다.
  • 시인성(보이는 것, 잘 읽히는가) 중요
  • 무엇때문에 저런 느낌의 서체를 쓰는가?
  • 산세리프 - 정보에 집중, 적당한 크기, 또렷한 서체
  • 서체만 달라져도 느낌과 경험이 달라진다.

 

Type Classifications

Serif, San Serif

 

각져 있어도 세리프. slap serif

장식이 있으면 세리프, 없으면 산세리프

 

 

 

 

Type properties

 

 

 

Baseline

  • 땅을 딛고 있는 것 처럼 보이는 지평선
  • 베이스라인을 파고 들어간 y

 

 

 

 

Cap height

  • 대문자의 키의 값
  • 서체의 개성

 

 

 

Ascenders - 서체의 가장 높은 부분

Descenders - 서체의 가장 낮은 부분

 

 

 

 

X-height

  • 소문자 X의 키값
  • 소문자 기준 높이

 

Cap height와 X-height가 크게 차이 나는 경우도 있고 크게 차이 나지 않는 경우도 있다.

  • 서체의 특징
  • 크게 차이 나면 소문자 간의 왜곡과 차이가 심함
  • 본문용은 X-height 값과 Cap height의 값이 지나치게 크지 않다.

 

 

 

Weight

 

thin - light - regular - medium - bold - heavy/black

 

 

Readability

  • Letter-spacing 알파벳 사이 공간값

 

한꺼번에 조절 될 때 tracking

특정 레터 한개만 조절 kerning

 

 

Kearning이 필요한 이유

간격을 균등해 보이도록 조절

 

 

 

 

 

 

 

 

Line length

 

길이 값을 얼마나 주는게 좋을까?

읽기 불편하지 않도록

 

 

 

Line height

 

 

 

 

Leading

 

적정한 값

display - 제목은 표준보다 작게

본문 - 적당한, 1.3 정도 

 

 

Paragraph spacing

 

문단과 문단 사이 거리

 

 

Type alignment

 

정렬

 

 

 

 

 

 

typo - 오타

 

 

 

 

 

 

 

 

 

 

 

UX/UI 디자인 올인원 패키지 Online.  

https://bit.ly/2PDn0W0