디자이너를 디자인하는 웹 스타일 북

Part 1 웹디자인 그리고 웹디자이너
Style Base 01 웹디자인의 기본 개념과 웹디자인 산업
Step 01 웹디자인 기본 개념과 범위
Step 02 웹디자이너의 분류와 역할
Step 03 웹디자인을 위한 기술과 프로그램

Style Base 02 웹디자인 콘셉트 도출을 위한 과정
Step 01 웹사이트 구축 과정에 대한 이해
Step 02 웹디자인 과정에 대한 이해

Style Base 03 전략적인 웹디자이너
Step 01 크리에이티브가 경쟁력이다
Step 02 디자이너와 프레젠테이션
Step 03 웹디자이너와 셀프 프로모션

Style Base 04 웹 스타일 가이드
Step 01 레이아웃 시스템(LAYOUT SYSTEM)
Step 02 그리드 시스템(GRID SYSTEM)
Step 03 컬러 시스템(COLOR SYSTEM)
Step 04 비주얼 가이드(VISUAL GUIDE)
Step 05 요소 가이드(ELEMENT GUIDE)
Step 06 타이포그래피 시스템(TYPOGRAPHY SYSTEM)
Step 07 플래시 영역 가이드(FLASH AREA GUIDE)

Part 2 웹사이트 디자인을 위한 다양한 콘셉트 도출 방법
Style Base 01 로고를 활용한 디자인 전개
Step 01 로고 형태를 응용한 레이아웃
Step 02 로고와 웹사이트 디자인의 컬러

Style Base 02 콘텐츠에 따른 디자인 콘셉트 도출
Step 01 젊고 재미있는 디자인 콘셉트
Step 02 인간적이고 감성적인 디자인 콘셉트
Step 03 한국적이고 동양적인 디자인 콘셉트
Step 04 복고적이고 낡은 듯한 디자인 콘셉트
Step 05 빛으로 표현한다, 첨단적인 디자인 콘셉트
Step 06 고급스럽고 중후한 디자인 콘셉트

Style Base 03 브랜드로 만드는 가상의 공간
Step 01 가상공간을 활용한 기업 사이트 디자인
Step 02 브랜드로 도시를 만들다
Step 03 입체 그림 속의 또 다른 세상을 만들다
Step 04 3D를 이용한 가상공간 만들기

Style Base 04 일상에서의 발견
Step 01 다이어리를 활용한 1인 디자인
Step 02 살아있는 이야기를 담아내다, 책
Step 03 나만의 특별한 공간, 책상
Step 04 그 밖의 다양한 소재를 활용한 디자인

Style Base 05 타이포를 활용한 디자인 전개
Step 01 타이포에 옷을 입히다
Step 02 입체 공간에서의 타이포
Step 03 타이포만으로 디자인하기
Step 04 손 글씨와 웹사이트의 만남

Style Base 06 고정된 틀을 깨는 디자인 전개
Step 01 사각형의 틀을 깨는 다양한 레이아웃
Step 02 심플함이 주는 고급스러움
Step 03 통합 디자인 시대, 아트 필(Art Feel)

Part 3 트렌드 기법 익히기
Style 01 가상공간 구성하여 영화 사이트 인터페이스 만들기
Step 01 공간감이 느껴지는 배경 만들기
Step 02 쪽지를 들고 있는 왼손 표현하기
Step 03 봉투의 내비게이션과 오른손 넣기

Style 02 쇼윈도 가상공간으로 의류 사이트 인터페이스 만들기
Step 01 숍의 내부 공간 구성하기
Step 02 벽 장식하여 숍 꾸미기
Step 03 숍의 카운터 만들고 마네킹 배치하기
Step 04 로고와 테두리 설정하여 인터페이스 구성하기
Step 05 플래시 모션 작업하기

Style 03 3D 텍스트를 이용한 가상공간으로 인터페이스 만들기
Step 01 일러스트레이터에서 3D 텍스트 만들기
Step 02 포토샵에서 3D 텍스트 보정하기
Step 03 주변에 오브젝트 삽입하기
Step 04 3D 메뉴 바 만들기

Style 04 종이 공예를 응용한 여행사 인터페이스 만들기
Step 01 접힌 종이 모양 만들기
Step 02 어울리는 관광 이미지 삽입하기
Step 03 텍스트 삽입 후 효과 적용하여 완성하기

Style 05 오브젝트와 그래픽 효과 결합시켜 이벤트 페이지 만들기
Step 01 원으로 배경 만들기
Step 02 다양한 오브젝트 삽입하여 그래픽 효과 적용하기
Step 03 텍스트 입력 후 레이어 스타일로 표현하기

Style 06 유행하는 핸드폰 이미지로 화면 구성하기
Step 01 금속 질감의 핸드폰 외형 만들기
Step 02 핸드폰 안쪽 인터페이스 꾸미기
Step 03 반사 이미지 삽입하여 완성하기

Style 07 주변 사물을 사용자 중심으로 배치한 인터페이스 만들기
Step 01 책상에 노트북 배치하기
Step 02 다양한 사물 배치하기
Step 03 요소별로 저장하여 플래시로 불러오기
Step 04 모션 적용하여 애니메이션 작업하기

Style 08 신문을 이용한 인터페이스 디자인
Step 01 신문지 위에 레이아웃 만든 후 타이틀 만들기
Step 02 신문 내용 삽입하여 레이아웃 꾸미기

Style 09 환상적인 분위기 연출하여 인터페이스 구성하기
Step 01 일러스트레이터에서 궁전 모양 만들기
Step 02 포토샵 배경 이미지 만들기
Step 03 궁전 이미지 삽입하기
Step 04 주변 묘사하여 인터페이스 구성하기

Style 10 개성 있는 팝아트 이미지로 웹페이지 만들기
Step 01 라인 이미지 만들기
Step 02 팝아트 분위기 연출하기
Step 03 레이어 정리 후 배경 꾸미기

Style 11 라인으로 만든 일러스트 이미지 디자인
Step 01 손으로 그린 이미지 벡터 이미지로 만들기
Step 02 포토샵으로 가져온 일러스트 이미지 리터칭하기
Step 03 세밀한 부분 리터칭하기

Style 12 다이어리를 활용한 인터페이스 디자인
Step 01 다이어리 커버 만들기
Step 02 메뉴 디자인하기
Step 03 다이어리 안쪽 꾸미기

Style 13 다양한 오브젝트 합성하여 이미지 만들기
Step 01 기준 오브젝트 뒤로 이미지 합성하기
Step 02 기준 오브젝트 오른쪽으로 이미지 합성하기
Step 03 기준 오브젝트 앞쪽으로 이미지 합성하기

Style 14 벡터 이미지와 비트맵 이미지 합성하여 이미지 만들기
Step 01 일러스트 이미지 만들기
Step 02 일러스트레이터로 그린 이미지 포토샵에 붙여 넣기
Step 03 묘사하여 완성하기

Style 15 이미지 합성하여 몽환적인 분위기 연출하기
Step 01 불꽃 이미지 만들기
Step 02 배경 이미지 수정하기
Step 03 다양한 요소 삽입하여 이미지 완성하기

실제 신입 디자이너 채용 시 웹사이트 구축 이력이 없더라도 개인 홈페이지가 있다면 좀 더 높은 점수를 주게 된다. 이는 디자니어로서의 가능성과 감각을 개인 홈페이지만을 통해서도 충분히 예상해 볼 수 있기 때문이다. 이제 막 취업을 위해 준비하는 신입 디자이너의 경우, 습작으로 여러 사이트를 제작해서 이를 포트폴리오로 사용하는 예가 많다. 그러나 개인 홈페이지에서 좀 더 다양한 개성을 표현하고, 형식에 구애받지 않은 크리에이티브에 초점을 맞춰 디자이너로서의 가능성을 보여 주는 편이 훨씬 더 유리하다. (47쪽, 'Style Base 03 전략적인 웹디자이너' 에서)