이 책은 웹 디자인의 주요 요소를 그래픽( Graphic ), 레이아웃( Layout ), 컬러( Color ), 인터페이스( Interface ), 타이포그래피( Typography ), 메타포( Metaphor ), 스타일( Style )로 나누어 각각에 관하여 기본적으로 알아야 할 것들과 참고할 만한 웹 사이트를 살펴보며 전문성있는 웹 디자인으로 안내한다.
<이 책의 내용>
.웹 그래픽(Web Graphic)
웹 그래픽의 특징/픽셀(Pixel)과 해상도/비트맵(Bitmap) 방식과 벡터(Vector) 방식/그래픽 파일의 종류와 쓰임/안티알리아스(Anti-alias)와 알리아스(Alias)/이미지 스캔과 포토그래피(Photography)/로고와 아이콘/메뉴, 배너, 배경 이미지/Good 웹 그래픽 포트폴리오
.웹 레이아웃(Web Layout)
웹 레이아웃 디자인/그리드(Grid)와 테이블(Table)의 활용/컨텐츠를 화면 왼쪽에 정렬한 페이지의 레이아웃/컨텐츠를 화면의 수평 중앙에 정렬한 페이지의 레이아웃/컨텐츠를 화면의 수평?수직 중앙에 정렬한 페이지의 레이아웃/화면 전체를 사용한 페이지의 레이아웃
.웹 컬러(Web Color)
색의 원리와 웹 디자인/웹 컬러와 컬러 모드/빨강, 주황, 노랑 계열의 컬러/파랑 계열의 컬러/초록, 연두 계열의 컬러/검정, 회색 계열의 컬러/Good 웹 컬러 포트폴리오
.웹 인터페이스(Web Interface)
인터페이스 디자인의 개념/웹 인터페이스 디자인의 특성/웹 네비게이션 디자인/유저 인터페이스(User Interface) 포트폴리오/Good 인터페이스 디자인 포트폴리오
.웹 타이포그래피(Web Typography)
타이포그래피란?/타이포그래피의 구성 요소/타이포그래피의 기본 원리/웹 타이포그래피의 특징/키네틱 타이포그래피/Good 타이포그래피 포트폴리오
.메타포(Metaphor)
메타포(Metaphor)란?/메타포(Metaphor)의 특징/메타포(Metaphor)의 활용/메타포를 활용한 웹 디자인 포트폴리오
.웹 스타일(Web Style)
웹 디자인 스타일/흰색 바탕의 심플한 디자인 컬러를 활용한 화려한 스타일/파스텔톤의 보기 편한 스타일/모던한 감각의 세련된 스타일/개성이 강한 독특한 스타일/Good 웹 스타일 포트폴리오

【 저자·역자 Prolog 】

본격적인 인터넷 시대가 도래함에 따라 웹 디자인의 중요성과 그 가치는 점점 커지고 있습니다. 현재에도 많은 사람들이 웹 디자인을 하고 있으며, 웹 디자인에 관한 공부를 하고 웹디자이너가 되고자 준비하고 있습니다. 그리고 특별히 전문 웹 디자이너가 아니더라도 멋진 웹 사이트를 직접 만들고 갖고 싶어합니다. 앞으로도 웹 디자인에 대한 관심은 더욱 높아질 것이며, 웹 디자인을 하고자 하는 사람들은 더욱 늘어날 것입니다.
웹 디자인은 조금만 공부하면 누구나 할 수 있다고 말들은 하지만 실제로 잘하기란 대단히 힘든 일입니다. 이것은 디자인을 전공한 사람이나 컴퓨터를 전공한 사람도 마찬가지입니다.
웹 디자인을 하려면 디자인에 관한 기본기와 웹에 관한 이해가 반드시 수반되어야 합니다. 하지만, 많은 사람들이 이런 기본적인 것들은 제쳐두고 당장 웹 디자인에 필요한 여러 가지 프로그램들 익히기에만 급급한 실정입니다. 사실 프로그램은 조금만 노력하면 웹 디자인을 하는 데 큰 불편이 없을 정도까지 누구나 사용할 수 있습니다.
정말 중요한 것은 보다 많은 웹 사이트를 보고 연구하거나 웹 그래픽 디자인에 관해서 공부하고 풍부한 감수성으로 많은 것들을 보고 느껴서 자신의 디자인 세계를 펼쳐나가는 것입니다.
웹 포트폴리오 'BETTER Design Web'은 웹 디자인의 주요 요소를 그래픽(Graphic), 레이아웃(Layout), 컬러(Color), 인터페이스(Interface), 타이포그래피(Typography), 메타포(Metaphor), 스타일(Style)로 나누어 각각에 관하여 기본적으로 알아야 할 것들과 참고할 만한 웹 사이트를 살펴봄으로써 실제 웹 디자인에 앞서 양질의 밑거름이 될 수 있도록 꾸몄습니다. 웹 디자인의 기본을 이해하고 나아가 세계적인 수준 의 웹 사이트를 많이 보고 느낀다면 여러분의 안목과 실력은 몰라보게 향상될 것입니다.
이 책에서 말한 여러 가지 내용들이 모두 정답은 아닙니다. 왜냐하면 다른 예술 분야와 마찬가지로 웹 디자인에도 정답이 없기 때문입니다. 하지만, 이 책에서 말한 웹 디자인의 기본들을 생각하고 많은 사이트들을 참고하여 웹 디자인을 한다면 보다 완성도 있고 미적으로도 훌륭한 웹 사이트를 만들 수 있을 것입니다.
끝으로 이 책이 나오기까지 많은 도움을 주신 동료 분들께 고마움을 전하며, 함께 고생하신 정보문화사 여러분께도 깊은 감사드립니다. 아무쪼록 이 책이 웹 디자인을 하는 분들께 기초를 다시 한 번 인지시켜 주고 좋은 영감을 주는 Good 웹 디자인 가이드가 됐으면 하는 바람입니다.
---저자 황 재현

목차
Part 1 웹 그래픽(Web Graphic)
Section 1 웹 그래픽의 특징
Section 2 픽셀(Pixel)과 해상도
Section 3 비트맵(Bitmap) 방식과 벡터(Vector) 방식
Section 4 그래픽 파일의 종류와 쓰임
Section 5 안티알?리아스(Anti-alias)와 알리아스(Alias)
Section 6 이미지 스캔과 포토그래피(Photography)
Section 7 로고와 아이콘
Section 8 메뉴, 배너, 배경 이미지
Section 9 Good 웹 그래픽 포트폴리오
part 2 웹 레이아웃(Web Layout)
Section 1 웹 레이아웃 디자인
Section 2 그리드(Grid)와 테이블(Table)의 활용
Section 3 컨텐츠를 화면 왼쪽에 정렬한 페이지의 레이아웃
Section 4 컨텐츠를 화면의 수평 중앙에 정렬한 페이지의 레이아웃
Section 5 컨텐츠를 화면의 수평·수직 중앙에 정렬한 페이지의 레이아웃
Section 6 화면 전체를 사용한 페이지의 레이아웃
Par 3 웹 컬러(Web Color)
Section 1 색의 원리와 웹 디자인
Section 2 웹 컬러와 컬러 모드
Section 3 빨강, 주황, 노랑 계열의 컬러
Section 4 파랑 계열의 컬러
Section 5 초록, 연두 계열의 컬러
Section 6 검정, 회색 계열의 컬러
Section 7 Good 웹 컬러 포트폴리
Part 4 웹 인터페이스(Web Interface)
Section 1 인터페이스 디자인의 개념
Section 2 웹 인터페이스 디자인의 특성
Section 3 웹 네비게이션 디자인
Section 4 유저 인터페이스(User Interface) 포트폴리오
Section 5 Good 인터페이스 디자인 포트폴리오
Part 5 웹 타이포그래피(Web Typography)
Section 1 타이포그래피란?
Section 2 타이포그래피의 구성 요소
Section 3 타이포그래피의 기본 원리
Section 4 웹 타이포그래피의 특징
Section 5 키네틱 타이포그래피
Section 6 Good 타이포그래피 포트폴리오
Part 6 메타포(Metaphor)
Section 1 메타포(Metaphor)란?
Section 2 메타포(Metaphor)의 특성
Section 3 메타포(Metaphor)의 활용
Section 4 메타포를 활용한 웹 디자인 포트폴리오
part 7 웹 스타일(Web Style)
Section 1 웹 디자인 스타일
Section 2 흰색 바탕의 심플한 스타일
Section 3 컬러를 활용한 화려한 스타일
Section 4 파스텔톤의 보기 편한 스타일
Section 5 모던한 감각의 세련된 스타일
Section 6 개성이 강한 독특한 스타일
Section 7 Good 웹 스타일 포트폴리오