목차
머리말 ... 3
북 가이드 ... 4
Theme 1. 웹 레이아웃(Web Layout)
Section 1. 전문 웹 디자이너가 제시하는 웹 레이아웃 ... 14
Step 1. 레이아웃이란? ... 14
Step 2. 다양한 레이아웃의 세계 ... 16
Section 2. 다양한 웹 레이아웃 실전 테크닉 ... 32
Step 1. 실전 테크닉1 - 프레임 ... 32
Step 2. 실전 테크닉2 - 왼쪽 정렬 ... 36
Step 3. 실전 테크닉3 - 오른쪽 정렬 ... 48
Step 4. 실전 테크닉4 - 수평 수직 정렬 ... 49
Step 5. 실전 테크닉5 - 수평 중앙 정렬 ... 51
Theme 2. 웹 컬러(Web Color)
Section 3. 프린트(Print) 컬러 & 웹(Web) 컬러 ... 58
Step 1. RGB 색상 모형 ... 59
Step 2. CMYK 색상 모형 ... 59
Section 4. 웹 컬러의 기초 ... 60
Step 1. 모니터(Moniter) ... 60
Step 2. 컬러 심도(Color Depth) ... 61
Step 3. 인덱스드 컬러 모드(Indexed Color Mode) ... 62
Step 4. 6×6×6 컬러 큐브(6×6×6 Color Cube) ... 63
Step 5. 웹 안전 컬러(Web Safe Color) ... 63
Step 6. 216 웹 컬러(216 Web Color) ... 64
Step 7. 웹 안전 컬러 만들기 ... 68
Section 5. 컬러로 알아보는 사이트 구축 테크닉 ... 70
Step 1. 컬러 활용 목적 ... 70
Step 2. 컬러로 알아보는 사이트 구축 테크닉 1(정보 전달 목적) ... 73
Step 3. 컬러로 알아보는 사이트 구축 테크닉 2(정의적인 목적) ... 76
Step 4. 컬러로 알아보는 사이트 구축 테크닉 3(연상적인 목적) ... 84
Step 5. 컬러로 알아보는 사이트 구축 테크닉 4(심미적인 목적) ... 92
Step 6. 컬러로 알아보는 사이트 구축 테크닉 5(상징적인 목적) ... 97
Theme 3. 웹 인터페이스 & 내비게이션(Web Interface & Navigation)
Section 6. 인터페이스와 내비게이션의 개념 ... 106
Step 1. 인터페이스 디자인(Interface design)이란? ... 106
Step 2. 내비게이션 디자인(Navigation design)이란? ... 107
Section 7. 최적의 인터페이스와 내비게이션을 위한 디자인 원리 ... 112
Step 1. 조직성(Systematic) ... 112
Step 2. 경제성(Economy) ... 118
Step 3. 적합성(Compatibility) ... 127
Step 4. 일관성(Consistency) ... 132
Step 5. 예측성(Predictability) ... 136
Step 6. 안정성(Stability) ... 140
Step 7. 흥미성(Interest) ... 144
Step 8. 심미성(Aesthetic) ... 152
Theme 4. 웹 타이포그래피(Web Typography)
Section 8. 신 개념 타이포그래피의 기초 ... 160
Step 1. 타입페이스(Typeface)의 해부학적 구조 ... 160
Step 2. 타입페이스의 분류 및 특성 ... 166
Section 9. 웹 타이포그래피 요소의 원칙 및 구성 원리 ... 169
Step 1. 웹 타이포그래피 요소의 원칙 ... 169
Step 2. 웹 타이포그래피의 구성 원리 ... 175
Section 10. 전문 웹 디자이너가 제시하는 웹 타이포그래피의 주요 특성 ... 181
Step 1. 가독성과 판독성 ... 181
Step 2. 폰트의 선택과 사용 ... 183
Step 3. 키네틱 타이포그래피 ... 185
Section 11. Good 웹 타이포그래피 포트폴리오 ... 188
Theme 5. 웹 메타포(Web Metaphore)
Section 12. 메타포의 정의 ... 214
Step 1. 메타포의 개념 ... 214
Step 2. 메타포와 비유법 ... 215
Section 13. 메타포의 활용 ... 219
Step 1. 비유의 메타포 ... 219
Step 2. 비주얼 커뮤니케이션(Visual Communication) 메타포 ... 224
Step 3. 내레티브(Narrative)를 활용한 메타포 ... 232
Section 14. 메타포를 이용한 웹 사이트 ... 244
Step 1. 영화 사이트 속의 메타포 ... 244
Step 2. 잘못 구현된 메타포 ... 254
Theme 6. 웹 스타일(Web Style)
Section 15. 웹 스타일이란? ... 258
Section 16. 웹 디자인의 스타일 분류 ... 259
Step 1. 사용자 중심의 도구인 '웹' ... 259
Step 2. 스타일 분류 방법 ... 260
Step 3. 디지털 아트 스타일(Digital Art Style) ... 261
Step 4. 인포메이션 디자인 스타일(Information Design Style) ... 274
Step 5. 웹 아이덴티티 디자인 스타일(Web-Identity Design Style) ... 284
Step 6. 스토리 텔링 디자인 스타일(Story-telling Design Style) ... 293
Step 7. 하이브리드 디자인 스타일(Hybrid Design Style) ... 304
Step 8. 픽셀 디자인 스타일(Pixel Design Style) ... 316
Step 9. 미니멀 아트 스타일(Minimal Art Style) ... 321
Theme 7. 웹 인터랙션(Web Interaction)
Section 17. 인터랙션(Interaction)이란? ... 332
Step 1. 웹 인터랙션(Web Interaction)이란? ... 332
Step 2. 웹 인터랙션을 구현하는 기술 ... 333
Section 18. 웹 인터랙션의 최강자 플래시 ... 336
Step 1. 플래시의 역할과 의의 ... 336
Step 2. 인터랙션 알고리즘 ... 338
Step 3. 무비클립 이벤트 ... 362
Step 4. 인터랙션 사이트에 응용하기 ... 366
Step 5. 잘된 인터랙션 분석하기 ... 375
Step 6. 인터랙티브 웹 사이트 구축 ... 401
Theme 8. 웹 기획과 전략(Web Planning)
Section 19. 웹 디자이너를 위한 웹 사이트 기획과 전략 ... 404
Step 1. 웹 디자이너와 클라이언트 ... 404
Step 2. 웹 기획 ... 417
Step 3. 제작 ... 430
Step 4. 유지 관리 ... 439
Step 5. 웹 마케팅 ... 440
Section 20. 실무 웹 디자이너의 포트폴리오 ... 446
Step 1. 포트폴리오에 대하여 ... 446
Step 2. 목적에 따른 포트폴리오 ... 446
Step 3. 면접 준비 ... 458
Step 4. 나만의 포트폴리오 제작하기 ... 458
Step 5. 취업 정보 사이트 ... 463
Section 21. 완성도 있는 Good 웹 사이트 ... 468
Step 1. 컨텐츠 ... 468
Step 2. 커뮤니티 ... 470
Step 3. 커머스 ... 472
Step 4. 내비게이션 ... 474
Theme 9. 거장들의 웹 디자인(Web Layout of Masters)
Section 22. 네빌 브로디(Neville Brody) ... 480
Section 23. 데이비드 카슨(David Carson) ... 488
Section 24. 존 마에다(John Maeda) ... 500
Section 25. 힐먼 커티스(Hillman Curtis) ... 507
Section 26. 토드 퍼커슨(Todd Purgason) ... 516
Section 27. 키오켄(Kioken)사 ... 524
닫기