Page 3 -

CONTENTS
Part 1 컬러
디자인 이론 l 디자인은 색의 언어로 말한다 10
디자인 보는 법 l 메시지가 있는 컬러로 사용자의 감정을 끌어내라 24
01 배경과 색상을 통일한 인풋 박스 디자인 30
02 네거티브 요소로 주목성을 높인 탭 디자인 32
03 바탕색을 조절한 상세 페이지 디자인 34
04 톤 온 톤 배색의 로그인 페이지 디자인 36
05 브랜드 컬러를 살리는 인덱스 디자인 38
06 절제된 컬러를 사용한 인덱스 디자인 40
07 색상 대비로 강조한 로그인 페이지 디자인 42
08 스트라이프 패턴으로 구분한 테이블 디자인 44
Part 2그리드
디자인 이론 l 레이아웃과 그리드로 시선을 사로잡아라 64
디자인 보는 법 l 그리드로 화면에 리듬감을 만들어라 70
01 비율이 다른 사진을 정리한 레이아웃 디자인 72
02 가독성을 높인 2단 컬럼 디자인 74
03 확장 그리드로 공간을 활용한 콘텐츠 디자인 76
04 사선 그리드로 역동적인 인덱스 디자인 78
05 레이아웃을 변경해 전문적인 콘텐츠 디자인 80
06 여백으로 전달력을 높인 인덱스 디자인 82
07 핵심 정보의 강약을 살린 상세 페이지 디자인 84
G 20 경계를 명확히 나눠 구분한 모듈 디자인 110
08 2단 그리드를 변형한 정보 페이지 디자인 86
09 제품 사진으로 구분한 블로그 모듈 디자인 88
10 배경과 연결해 그리드를 확장한 모듈 디자인 90
04
웹앱라스트.indb 4 2019-07-24
09 주제에 맞게 색을 적용한 퍼스널 웹 디자인 46
10 포인트 컬러를 적용한 CTA 버튼 디자인 48
11 흰색/배경색으로 정리한 정보 페이지 디자인 50
12 포인트 컬러로 강조한 주요 메뉴 디자인 52
13 톤 온 톤 배색을 이용한 테이블 디자인 54
14 일관성 있는 색상의 전체 페이지 디자인 56
15 포인트 컬러로 강조한 인덱스 디자인 58
16 다채로운 색상의 인덱스 디자인 60
11 테두리를 이용한 모듈 디자인 92
12 그림자를 활용한 모듈 디자인 94
13 여백으로 사진을 구분한 모듈 디자인 96
14 기능에 충실한 로그인 페이지 디자인 98
15 사용 목적을 고려한 레이아웃 디자인 100
16 2단 그리드로 한눈에 파악하는 테이블 디자인 102
17 사선 그리드로 화면을 분할한 인덱스 디자인 104
18 레이아웃에 변화를 준 콘텐츠 디자인 106
19 계층 그리드를 나눈 인덱스 디자인 108
오전 9:26:46