목차 일부
감사의 글 ... ⅲ
Table of contents ... ⅳ
Preface ... ⅷ
1. 아이디어 폭을 넓히기 위한 제안 ... ⅷ
2. 웹디자이너가 갖춰야할 전문성 3가지 ... ⅸ
3. 이 책을 유용하게 읽을 수 있는 11가지 가이드 ... xii
0부 Intro ... 1
1. 디자인의 6가지 기준을 세우자 ... 2
...
더보기
목차 전체
감사의 글 ... ⅲ
Table of contents ... ⅳ
Preface ... ⅷ
1. 아이디어 폭을 넓히기 위한 제안 ... ⅷ
2. 웹디자이너가 갖춰야할 전문성 3가지 ... ⅸ
3. 이 책을 유용하게 읽을 수 있는 11가지 가이드 ... xii
0부 Intro ... 1
1. 디자인의 6가지 기준을 세우자 ... 2
1.1 자신만의 아이디어 박스를 갖자 ... 2
2.2 아이디어 박스를 매직박스로 활용하라 ... 4
2. 디자인 작업의 2가지 원칙을 세우자 ... 6
2.1 스스로 눈 높이를 낮추지 마라 ... 6
2.2 가능한 다양한 방법들을 새롭게 시도하라 ... 7
3. Layout & Visual Effect 스타일의 중요성 ... 8
3.1 웹 디자인 컨셉 개발 기준 ... 9
3.2 웹아이덴티티 정의 요소 ... 13
3.3 웹 스타일 분류 기준 ... 15
4. Layout & Visual Effect 기준으로 웹스타일 분석하기 ... 16
4.1 웹스타일 분석이란? ... 16
1) 웹스타일 벤치마킹 2가지 기준 ... 17
2) 웹디자인 라이브러리 만들기 ... 18
3) 리서치 패널 만들기 ... 20
4) 리서치 패널 만드는 순서와 방법 ... 20
4.2 웹스타일 분석이 유익하다 ... 22
1) 고객의 요구사항 파악이 쉽다 ... 22
2) 전문 웹디자이너로서 신뢰감을 전달한다 ... 24
3) 프로젝트 팀원들간 마인드 셋 공유가 쉽다 ... 25
4) 세부적인 디자인 완성도를 높인다 ... 27
1부 Layout ... 28
1. 레이아웃 디자인 점검 ... 30
1.1 레이아웃 유형 결정 방법 ... 30
1) 선호하는 웹사이트 유형에 컨텐츠를 대입해 보라 ... 30
2) 2∼3가지 다른 유형으로 스토리보드 스케치 ... 32
1.2 초기 화면 레이아웃 유형 ... 36
1.3 레이아웃 디자인의 일관성과 다양성 ... 42
2. 레이아웃 구조(Layout Structure) ... 48
2.1 레이아웃 구조의 기준이 되는 정보 설계(Information Architecture) ... 48
2.2 단순 구조(Simple Structure) ... 50
1) 중앙 정렬 ... 51
2) 상단 내비게이션 ... 56
3) 좌측 내비게이션 ... 62
4) 우측 내비게이션 ... 66
5) 하단 내비게이션 ... 70
2.3 복합 구조(Complex Structure) ... 78
1) 상단 내비게이션과 화면 분할 ... 79
좌측 프레임 ... 80
우측 프레임 ... 92
좌우측 프레임 ... 96
수평 분할 ... 104
수직 분할 ... 110
기타 ... 114
2) 좌측 내비게이션과 화면 분할 ... 118
상단 프레임 ... 122
하단 프레임 ... 126
3) 고정 영역 활용 디자인 ... 130
고정 영역만 활용 ... 131
화면 전체와 조화된 고정 영역 활용 ... 140
3. 레이아웃 형태(Layout Shape) ... 146
3.1 기능이 우선이냐? 형태가 우선이냐? ... 146
3.2 형태가 전달하는 의미와 감정에 관한 100인 설문조사 ... 148
3.3 일반적인 형태(Formal Shape) ... 158
3.4 특색있는 형태(Unique Shape) ... 162
3.5 실험적인 형태(Experimental Shape) ... 178
2부 Visual Effect ... 192
1. Visual Effect 디자인 점검 ... 194
1.1 Visual Effect 스타일 결정하기 ... 194
1.2 Visual Effect에 의한 시각 아이덴티티 구축 ... 195
1) 다국적 기업의 글로벌 웹사이트에 적용된 시각 아이덴티티 전략 1 ... 196
2) 다국적 기업의 글로벌 웹사이트에 적용된 시각 아이덴티티 전략 2 ... 198
2. 그래픽 디자인(Graphic Design) ... 200
2.1 평면 그래픽(2D Graphic) ... 201
1) 타이포그래피(Typography) ... 202
2) 일러스트레이션(Illustration) ... 216
3) 픽토그램(Pictogram) ... 236
4) 포토그래피(Photography) ... 244
5) 면 분할 기법(Screen Design) ... 254
2.2 반입체 그래픽(2.5D Graphic) ... 262
2.3 입체 그래픽(3D Graphic) ... 268
2.4 실험적인 그래픽(Experimental Graphic) ... 280
1) 실험적인 타이포그래피(Experimental Typography) ... 281
2) 복합 이미지 합성 효과(Mixed images) ... 290
3. 색상(Color) ... 304
3.1 색의 이해 ... 305
1) 색상의 역할 ... 306
2) 색상 용어 ... 308
3) 색상 배색 ... 310
3.2 색의 연상(Visualization) ... 312
1) 단일색의 연상 ... 314
2) 형용사적인 색의 연상 ... 374
3.3 색상 계획(Color System) ... 386
1) 기본 색상만 사용 ... 387
2) 서비스 메뉴별로 색상을 다르게 적용 ... 396
원색 이미지 ... 397
파스텔 이미지 ... 410
3) 여러 가지 색상의 다채로운 조화 ... 416
4. 동적 효과(Dynamic Effect) ... 426
4.1 인터랙티브 내비게이션(Interactive Navigation) ... 427
4.2 스토리텔링(Storytelling) ... 442
4.3 스크립트에 의한 사용자 인터랙팅(User Interacting) ... 456
5. 메타포(Metaphor) ... 462
더보기 닫기