ITWOLRD

High Level

Primary

Secondary

Tertiary

Middle Level

outlined

Row Level

Text

--------------------------

버튼

왼쪽은 Negative Button

오른쪽은 Positive Button

Icon과 Text를 수직으로 정렬 하지말것

버튼안에 두개의 아이콘 사용하지말것

동작 컬러 상태값

디폴트 0%

Hover 8%

Pressed 16%

Disabled 38%

grid system 필요한 이유

통일성과 동일성 룰을 지키기위하여 필요하다.

요소

컬럼,거터,마진

그럼 구글 material에서 제안하는 해상도는?

모바일일경우

해상도 360dp

4컬럼 16거터16마진

태블릿일경우

600dp

8컬럼 24거터 32마진

하지만 애플은

375x667 홀수 그리드시스템 넌 왜그러냐?

DPI = Dots per inch

1inch에 얼마나 픽셀이 있는지를 얘기함

(참고 1inch = 2.54cm)

statcounter 어떤해상도를 사용하는지 확인할수있다

https://gs.statcounter.com/screen-resolution-stats

불필요한 정보 컨텐츠 요소를 덜어내기

1. 컨텐츠 내용이 많다면 단순, 깔끔하게 작성

2. 백그라운드가 무겁거나 화려하다면 내용은 무채색으로 작성

3. 타이틀에 effect가 설정 되거나 과하다면 내용은 단순하게 효과없이

4. 화려한색상의 내용은 통일되도록 작성, 또는 패턴적으로

가독성이 높이려면!

상하좌우의 여백이 동일해야한다 -> 안정감,정돈된이미지

제목과 세부내용이 구분되야한다 -> 폰트의 크기로 중요성을 표현한다

예를들어 A4용지의 크기에서

폰트의 크기를

중요한내용일수록 15~20

일반적인내용은 8~14

중요도가떨어지는내용은 5~7

또한 누가 보느냐에따라 달라져야한다. 어린이,성인,노년등등

배경과 내용이 구분되어야한다. 예를들어 배경을 블러처리하여 내용 가독성을 높이기

내용간의 적절한 간격또한 중요

Resolution 해상도 설정

인쇄용은 300!

웹용은 72!

Color Mode 색상모드

인쇄용은 CMYK

웹용은 RGB