[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 8일차 "컬러와 레이아웃”

 

 

 

오늘은 이론 수업 때, 컬러와 레이아웃

그리고 팀 프로젝트 시에 SWOT 분석과 설문조사를 작성해보았습니다.

 

 

컬러

 

디지털 프로덕트의 컬러 색을 이용해서 사용자의 시선을 유도한다.

좁은 공간 안에서 어떻게 사용자의 시선을 사로 잡을지 고민한다.

 

색 재현율: 화면의 색역을 얼마나 표현 할 수 있는지 색 재현율이라 한다.

HSB: Hue(색상), Saturation(채도), Brightness(명도) 색의 3속성에 의한 좌표

 

• 시멘틱 컬러
  UI 요소들의 기능 또는 정보 유형에 따라 의미를 강조하여 전달하는 등의 목적으로 보조적으로 사용하는 컬러
  Blue - 정보
  Red - 위험, 오류, 실행 불가
  Orange - 경고, 조심, 주의
  Green - 성공, 실행됨, 가능, 확인

 

• 컬러 비율
  색 구성 비율의 균형을 조화롭게 맞추는 공식, 60-30-10 법칙
  60% 배경, 30% 보조배경 10% 강조색

 

 

레이아웃

 

문자, 사진, 일러스트, 색상 등 각종 레이아웃 요소들 간에 시각적, 기능적 조화를 바탕으로 배열/배치하는 것.
닐슨 그룹의 연구에 따르면 사용자가 웹에서 콘텐츠를 읽는 방법으로 F 패턴을 많이 사용한다.

• Spacing Unit 8px
  레이아웃을 설계하는데 단위를 8의 배수로 하면 일관성 있게 오브젝트를 배치하며 통일된 레이아웃을 만드는데 도움이 된다.
  8의 배수로 글자의 크기를 16, 24, 32px, 버튼의 레디우스를 8, 16px로 한다.

 

그리드

웹 디자인에서는 12 칼럼을 선호한다.

 

• 컨테이너 설정
  UI 디자인의 시작은 해상도 기준부터 설정한다.
  네이버가 작은 1280px로 설정한 이유는 작은 모니터를 사용하는 사용자를 고려해서이다.
  타겟이 되는 사용자의 모니터 해상도를 고려하여 컨테이너를 정한다.
  사용자 통계가 없다면 Statcounter의 스크린 해상도 통계를 참고한다.

 

• 레스터
  디자이너가 논리적 해상도로 디자인을 하면 디바이스 크기에 맞는 배율로 적용되는 것을 래스터화라고 한다.
  물리적 해상도로 만드는 것을 래스터화라고 한다.

 

• 입력 방식에 따른 차이 이해
  모바일에서는 사용자가 터치를 해야함으로 버튼이 더 크다.
  데스크탑 크기에서 요소가 더 작아도 정교하게 클릭하기 때문에 괜찮다.

 

• 반응형 웹사이트 작업시 이미지
  모바일 크기 제작은 1가지 해상도만 만든다. 사진은 2배 이미지를 만들어서 1배율로 렌더링한다.

 

 

UX 기획 - SWOT 분석

 

• SWOT분석?
  분석 프레임워크이다. S,W,O,T 찾아내서 4분면에 나누어 기록한다.
  S(Strength): 강점
  W(Weakness): 약점
  O(Opportunity): 기회
  T(Threats): 위협

 

우리 조에서 분석한 '리브로피아'의 SWOT 분석이다.

추후 추가할 내용은 추가하고 일단락 이렇게 마무리합니다 ^___^

 

 

 

 

 

---

본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다.